Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
A classic example of an object is a playing card.There are numerous games that utilize a deck of 52 playing cards; consider the game called Set instead. The object of the game is to identify sets of 3 cards from an array of 12 cards.
Each card has fourfeatures:
1.Symbols -oval, squiggle, or diamond
2.Color -Red, green, or purple
3.Number -one, two or three
4.Shading -filled, open, or striped. A set consists of 3 cards in which each of the card's features, looked at one-by-one, are the same on each card or different on each card. All features must satisfy this rule.
As an example, consider the following 3 cards --2 red filled squiggles 2 red striped squiggles 2 red open squiggles These cards form a set because:
1.They all feature squiggles
2.They are all red
3.They all have 2 symbols on them
4.One of them is filled, one is striped, and one is open.
Now consider the following 3 cards --2 red filled squiggles 2 red striped squiggles2 green open squiggles.
These cards do not form a set because two of the cards are red and one is green.
Now consider the following 3 cards --2 red filled squiggles 1 green striped oval 3 purple open diamondsIs this a set? Yes Why? Because all of the features on the cards are different.
Create a program that will solve the Daily Set puzzle (see https://www.setgame.com/set/puzzlefor more details).Your program shouldimplement a command line (text-based interface) capable of handling the following commands:
exit exits the program
load<file>as <puzzle>-reads a file containing a list of cards and stores them in the puzzle named puzzle. This command will create a new puzzle if necessary.
load<file>-parses the contents of the file as if they were entered from the command line
displaydisplays the list of created
puzzlesdisplay<puzzle>displays the cards stored in the puzzle named puzzle
new<puzzle>-creates an empty puzzle named puzzle
remove <puzzle>-Removes the specified puzzlefrom the list.
remove <card>from <puzzle>-Removes the specified card from the puzzle named puzzle.
add<card> to<puzzle>-Inserts the specified card into the puzzle name puzzle.
solve<puzzle>-solves the specified puzzle and displays its solution.
solve<card1> <card2>-displays the card required to form a set with card1and card2.
test<card1> <card2><card3>-displays whether card1, card2, and card3 form a set.
Note: <file>and <puzzle>are strings but will not contain spaces. All <card>entries are 4 characters long and have the following format:[number][color][shading][shape]Where [number]= {1,2,3}, [color]= {G,P,R}, [shading]= {F,O,S}, [shape]= {D,O,S}.This means that the card showing 2 red filled ovals would be represented as 2RFO and the cardshowing 1 green striped squiggle would be represented as 1GSS.
Ever found yourself in a situation where you tried to update WordPress or a plugin only to be greeted by the white screen of death? Or maybe you love experimenting with new themes and plugins? Or adding custom functionality to your website and you’ve encountered the same thing? No matter what the case might be, […]
The post How to Create a Staging Site for WordPress appeared first on WPExplorer.
The city of Los Angeles has partnered with Airbnb to cut down on illegal rental listings from the Airbnb platform. In LA, short term rentals must be registered with the city. The city and Airbnb have implemented a programmatic system than can easily identify listings on Airbnb that have not registered.
Marie and Chris talk about deprecating the blog posting functionality on CodePen, why we decided to turn it off, what happens with posts when the feature sunsets, and suggestions for where to post going forward.
WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.
The post #282: Sunsetting Posts appeared first on CodePen Blog.
Sometimes you want to ensure that only one copy of a script can be run at time. Windows provides a facility called a mutex and you can use it to prevent multiple instances.
To create the mutex, all I have to do is
varname = GetMutex()If the mutex already exists then IsRunning() will return True so the line
if (myapp := GetMutex()).IsRunning():both creates the mutex (maybe) and tests if the app is already running. Note this this uses the walrus (:=) works only in Python 3.8.2 or newer.
WordPress 5.5.1 was released yesterday with 34 bug fixes, 4 enhancements, and 5 bug fixes for the block editor.
Version 5.5 removed 19 legacy JavaScript localization objects, in favor of using the new functions and utilities found in the i18n package introduced in WordPress 5.0. One of the most notable changes in this maintenance release is the inclusion of a backfill for these now deprecated JavaScript globals, which were causing errors with many popular plugins and themes.
“If we only count plugins or themes with more than 100k installs or more, some of these already have an incredible impact, which is why we decided to patch this as fast possible.” Joost de Valk said in an update compiling a list of affected extensions, with the the help of Omar Reiss.
Themes impacted include Astra (1 million+ installs), Storefront (200k+), Hestia (100k+), and dozens more. A small selection of the popular plugins that were impacted include Advanced Custom Fields (1 million+), SiteOrigins Widgets Bundle (1 million+), AMP for WP, (100k+), WooCommerce Services (1 million+), Ocean Extra (600k+), and Rank Math SEO (400k+).
Theme and plugin developers still need to update their code to use wp.i18n but in the meantime the legacy code will not block JavaScript execution. De Valk said the new plan is to remove this fallback code in two major versions, so developers need to have their code updated by the time WordPress 5.7 rolls around in 2021.
“It sounds like a question that also ought to be addressed is how such wide-spread breakage could happen, and how it can be prevented in future,” David Anderson commented on the announcement regarding the backfill. “What part of the release process ought to have flagged up that this was about to happen, how did that part fail, and how can future similar failures be prevented.” Jake Spurlock suggested a retrospective on WordPress 5.5 might be a good idea.
Three weeks after WordPress 5.5 was released, the Enable jQuery Migrate Helper has more than 100,000 active installs. The plugin is available as a stopgap for users who experience problems with jQuery after updating to WP 5.5. Although several bumps along the road are expected for users during WordPress’ process of updating to use the latest version of jQuery, the official support forums were inundated with reports of broken sites after 5.5 was released. Many users found out about the plugin after hours of troubleshooting and hunting for a fix. This is another issue that would be helpful to address in a 5.5 retrospective.
This maintenance release also removes the ability to alter the list of environment types in the new wp_get_environment_type() function. Contributors decided that introducing new types wasn’t the intention of the feature and that it makes it so that theme and plugin developers cannot rely on a set, predictable list of types. They are now limited to production, staging, development, and local, with definitions for each available in the announcement.
“By limiting the set of environment types in this way, WordPress core, plugins, and themes can change their behavior depending on this setting,” Joost de Valk said.
WordPress 5.5.1 also fixes XML sitemaps paginating incorrectly, adds the site environment to debug information, and improves a number of other features that shipped with defects. The full list of changes is available on the release page.
As the Internet continues to evolve and mature, so do development tools and the technologists who use them. But what does a more mature approach to application development look like today? How do application developers manage growing complexity, and deliver stellar experiences for their users?
hello
The standard set of DevOps skills changes year over year. If you spent all of 2019 and early 2020 looking for employees with particular skills, only to find that you need a new set for your company to survive and...
The post How to Stand Out from the IT Crowd by Overcoming the Evolving DevOps Skills Gap appeared first on Treehouse Blog.
Project portfolio management software—or PPM software for short—is a business solution for managing a pool of projects as a whole.
Basic project management software is fine for handling single projects. But at scale, project portfolio managers need to understand how multiple projects are progressing. In many instances, individual projects in a portfolio could be completely unrelated.
By taking a further step back from traditional project management, project portfolio software makes it easier for you to understand the resources, timelines, and overall business goals at a higher-level scope.
The software allows project portfolio managers to understand the coordination of current projects while simultaneously planning the needs of future projects.
Overall, these tools ensure that all of your company’s projects are completed on-time and under budget. From risk assessment to performance issues, executive-level business insights, resource allocation, and more, project portfolio management software does it all.
If your current project management software isn’t enough to understand the business side of managing multiple projects, it’s time to upgrade to a PPM solution.
After conducting extensive research, we’ve narrowed down the top seven project portfolio management solutions on the market today. Use this guide to find the best PPM software for your business.
• Project health scores
• Budget consumption monitoring
• What-if scenario planning
• Easy to use
• Free Trial
Sciforma has been a player in the project management industry for 30+ years. More than 300,000 people worldwide trust these tools on a daily basis.
The software has everything you need to project management at scale. They have a wide range of solutions for project management, resource management, work management, and time management. But Sciforma’s project portfolio management software is one of the best you’ll find on the market today.
Sciforma provides portfolio managers with an overall health score based on a smart and comprehensive algorithm. The score encompasses the three most important parts of project portfolio management—time, cost, and quality.
The solution comes with a wide range of features and benefits, including:
Sciforma is robust, easy to use, scalable, and comes with everything you need out of the box.
• Jira integration
• R&D progress monitoring
• Visual resource management
• Starts at $30
• Free Trial
Jira by Atlassian ranks high on our list of the best agile project management tools. If you’re using Jira as a project management tool, Proggio should be at the top of your list for PPM software.
The software seamlessly integrates with Jira. In fact, you can create your Proggio account and link it with Jira all in the same day without any complex onboarding process.
Proggio takes high-level project portfolios and makes everything easy to understand at a glance. Use the software to create project plans and even manage project-level tasks from a single place.
Some of the top highlights of Proggio include:
Proggio even has a free plan for basic use. But it only supports one active project, which isn’t very practical for project portfolio management. Business plans start at $30 per user per month. There’s a five-user minimum, and it supports up to 20 active projects.
For teams larger than 20 or businesses managing 20+ projects, contact Proggio for a custom quote. All of the Proggio paid plans are eligible for a free trial.
• Project intake planning
• PMO tools
• Priority boards
• Project roadmaps
• Free Demo
Changepoint is a purpose-built PPM solution. They have various tools and technologies in categories like project portfolio management, new product development, enterprise architecture, and services delivery.
SPM (strategic portfolio management) is a core component of Changepoint’s PPM software. This enables businesses to scale their project portfolios while simultaneously aligning portfolio roadmapping with corporate strategy.
The software is definitely designed for SMEs and larger organizations. Here’s a closer look at some of the top features and benefits of Changepoint for PPM:
Changepoint is flexible and agile, making it easy for you to adapt with real-time analysis and market changes. The software delivers powerful analytics so you can manage the success of your projects with data-driven insights.
Request your free demo to get started.
• 400+ integrations
• Custom portfolio KPIs
• Team collaboration tools
• Starts at $22.50
• 30 Day Free Trial
Celoxis is an all-in-one project management solution with built-in PPM features. It’s trusted by well-known brands like Adobe, LG, Whirlpool, Rolex, Lufthansa, Tesla, Rolex, the Cheesecake Factory, HBO, and more.
In addition to the portfolio management features, Celoxis comes with tools for project accounting, team and client collaboration, project planning, project request tracking, and resource management.
The software has excellent reporting capabilities and dashboards that are easy to comprehend. It integrates with 400+ tools out of the box and comes with an API for custom integrations as well.
With project portfolio management from Celoxis, you’ll get aggregated data and information related to your projects through a highly customizable portfolio dashboard. Set up and track your most important portfolio KPIs with ease.
Celoxis offers simple and straightforward pricing as well. There are no tiers, and you’ll get everything you need out of the box. There are just two options to choose from:
There’s a five-user minimum for both plans. The cloud software is billed annually, and the on-premise solution is billed once. Try Celoxis free for 30 days.
• CRM integrations
• Real-time task tracking
• Team collaboration tools
• Manage billable hours
• 10 Day Free Trial
Mavenlink stands out from other PPM solutions on the market today with its emphasis on remote work and team collaboration. The software is designed specifically for service businesses, like agencies.
It’s branded as an all-in-one solution for project resource and project management.
Mavenlink seamlessly integrates with your favorite CRM tools.
The software eliminates the guesswork associated with project management as well. You’ll be able to accurately view your team’s capacity, demand, and skills through each stage of the project cycle.
View task statuses in real-time to ensure everything goes smoothly in-house and for your clients. You’ll be able to view complete financial visibility to ensure projects are staying on-budget. If not, the software gives you the information required to make the necessary adjustments.
Another reason I like Mavenlink is because of its built-in team collaboration tools. It’s easy to keep everyone in the loop, from your contracts and clients to your C suite and everyone in between.
There are four different plans for you to choose from based on the size and needs of your business.
Pricing for Mavenlink is not available online. But you can sign up for a 10-day free trial to get started.
• Budget tracking
• Resource management
• Multiple plan views
• Real-time data sync
• Free Trial
For those of you who need a simple project portfolio management solution without extra tools and complicated features, look no further than GanttPRO.
This online PPM software allows you to manage resources, budgets, risks, and projects at the highest level with enterprise-class quality. It’s robust and has everything you need to effectively meet your business goals.
Some of the top features and benefits of GanttPRO include:
GanttPRO seamlessly integrates with Google Drive and Jira Software. But it also has an API that can automate your workflows for custom integrations.
Plans for individuals start at $15 per month. The price per user depends on the size of your team; with a lower per-user rate the larger your team gets. For example, it costs $8.90 per user for teams of five but $6.50 per user for teams of 40. Contact GanttPRO for an enterprise quote if you have more than 100 users on your team.
• Resource planning
• Portfolio prioritization
• Role-based solutions
• Lean portfolio management
• Free Demo
If you’re new to the world of project portfolio management, Planview will be a top choice for you to consider. The software is trusted by 4,000+ businesses and 1+ million users across the globe.
Planview has been an industry leader in the project management space for more than 30 years.
I like Planview because they have software built specifically for those who are just starting out in project portfolio management. If you just need some basic help with resource planning and portfolio prioritization, Planview PPM Pro is perfect for you.
It has role-based solutions for PMOs, portfolio managers, resource managers, project managers, and individual team members.
For businesses that need more advanced solutions, try Planview Enterprise One, an enterprise-grade PPM solution. The enterprise plan comes with strategic and financial planning, lean portfolio management, product portfolio management, and enterprise architecture features.
Request a free demo to get started.
Choosing the right project portfolio management solution for your business can be challenging if you don’t know what to look for. There are so many options to consider, and generally speaking, there’s no “best for everyone” tool.
This is the methodology that we used to pick the winners on our list. These are the features you should be evaluating as you’re shopping around.
The best PPM software lets you analyze the risk involved with each individual project, as well as your total project portfolio as a whole. You can group projects together and determine which projects, or sets of projects, are too risky.
All of these risk management tools should be easily viewable and customizable through your admin dashboard.
How many projects can your team handle? Which team members should be working on specific tasks or projects? Are you at capacity?
PPM software takes the guesswork out of these questions. You’ll have actual data and information for resource management to help maximize efficiencies while ensuring that teams and individuals alike aren’t overburdened.
In short, pipeline management tools are used to determine if projects or sets of projects will be finished in time. Instead of being surprised at the last minute, you’ll have full visibility of tasks and other status updates from a big-picture perspective.
This information will allow you to manage your resources more effectively and make changes to meet deadlines.
Obviously, financial planning is a significant component of project management. At scale, it’s easy to go over budget if you’re not keeping track of things closely.
PPM software allows you to allocate financial resources accordingly while making sure projects are finished under budget.
What’s the best project portfolio management (PPM) software? It depends on what you’re looking for.
Sciforma is perfect for businesses that need to manage a growing team and scaling project portfolio. Proggio is our top pick for Jira users due to its simple integration with the software.
Changepoint is perfect for SPM (strategic portfolio management). Celoxis is an all-in-one tool for project management with PPM features built-in. Are you managing an agency? Try Mavenlink. GanttPRO and Planview are both excellent options for beginners and people just getting started with project portfolio management.
Regardless of your team size or business needs, you can find the best PPM software for your company using the recommendations in this guide.
Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create. From simple scrolling animations to complex environments built entirely of code, these CSS background effects can add a lot of personality to your website.
What if you could use CSS background effects created by others for free? Sites like CodePen were made to host open source or other freely-licensed code, which means you can use it in your own projects with few-to-no stipulations.
This is also helpful for designers who want to learn CSS or pull off a similar, but personalized look. You can use these code snippets as a base to create your own effects.
There are a ton of developers who have created amazing CSS background effects and released them for free. Today we’ve collected 15 of the most stunning ones. See for yourself what you can do with a creative mind and a little code!
See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.light
See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.light
See the Pen CSS only frosted glass effect by Gregg OD (@GreggOD) on CodePen.light
See the Pen Only CSS: Shooting Star by Yusuke Nakaya (@YusukeNakaya) on CodePen.light
See the Pen Tri Travelers by Nate Wiley (@natewiley) on CodePen.light
See the Pen ColorDrops by Nate Wiley (@natewiley) on CodePen.light
See the Pen Animated Background Header by Jasper LaChance (@jasperlachance) on CodePen.light
See the Pen Zero Element: DeLight by Keith Clark (@keithclark) on CodePen.light
See the Pen CSS Glowing Particle Animation by Nate Wiley (@natewiley) on CodePen.light
See the Pen Pure CSS Background Image Scroll Effect by carpe numidium (@carpenumidium) on CodePen.light
See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.light
See the Pen Bokeh effect (CSS) by Louis Hoebregts (@Mamboleoo) on CodePen.light
See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.light
See the Pen Effect Text Gradient by Diogo Realles (@SoftwaRealles) on CodePen.light
Good web design leaves a lasting impression on visitors, and there’s always something extra enchanting about a well-made animation. Whether you go all out with an animated starry or gradient background, or you just add some elegant and subtle parallax effects to your site, it can do wonders for your design.
CodePen hosts exclusively open source code, made by developers as a contribution to the community. So, if one of these effects caught your eye, feel free to copy it, tweak it, or use it as a base for making your own CSS animations.
Just remember to use the same license, and everything on CodePen is free to use.
Editor’s note: this article was last updated on Sept. 2, 2020
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment in our thinking, we can pull off headers and footers that behave like they are fixed, or have that “sticky” treatment (not position: sticky, but the kind of footer that hugs the bottom of the screen even if there isn’t enough content to push it there, and is pushed away with more content).
Hopefully this sparks further interest in modern layouts, and if it does, I can’t recommend Rachel Andrew’s book The New CSS Layout strongly enough: it covers both of the major modern layout techniques, grid and flexbox.
Let’s implement a fairly classic HTML layout that consist of a header, main content and footer.
We’ll make a truly fixed footer, one that stays at the bottom of the viewport where the main content scrolls within itself, as needed, then later update the footer to be a more traditional sticky footer that starts at the bottom of the viewport, even if the main content is small, but gets pushed down as needed. Further, to broaden our exposure to grid, let’s design our main content holder so that it can either span the whole width of the viewport, or take up a nicely centered strip down the middle.
A fixed footer is slightly unusual. Footers are commonly designed to start at the bottom of the viewport, and get pushed down by main content as needed. But a persistent footer isn’t unheard of. Charles Schwab does it on their homepage. Either way, it’ll be fun to implement!
But before we move on, feel free to actually peek at the fixed footer implemented on the Charles Schwab site. Unsurprisingly, it uses fixed positioning, which means it has a hard-coded size. In fact, if we crack open DevTools, we see that right off the bat:
body #qq0 {
border-top: 4px solid #133568;
background-color: #eee;
left: 0;
right: 0;
bottom: 0;
height: 40px!important;
}Not only that, but there’s the balance of making sure the main content doesn’t get hidden behind that fixed footer, which it does by setting hard-coded paddings (including 15px on the bottom of the <footer> element), margins (including 20px on <ul> in the footer), and even line breaks.
Let’s try to pull this off without any of these restrictions.
Let’s sketch out a bare minimum UI to get us started, then enhance our grid to match our goals. There’s a CodeSandbox below, plus additional ones for the subsequent steps that get us to the end result.
First, let’s do some prep work. We’ll make sure we’re using the whole height of the viewport, so when we add our grid, it’ll be easy to put the footer at the bottom (and keep it there). There’s only going to be one element inside the document’s <body> with an ID of #app, which will hold the <header, <main> and <footer> elements.
body {
margin: 0; /* prevents scrollbars */
}
#app {
height: 100vh;
}Next, let’s set up our header, main, and footer sections, as well as the grid they’ll all sit in. To be clear, this will not work the way we want right out of the gate. It’s just to get us started, with a base to build from.
body {
margin: 0;
}
#app {
height: 100vh;
/* grid container settings */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header'
'main'
'footer';
}
#app > header {
grid-area: header;
}
#app > main {
grid-area: main;
padding: 15px 5px 10px 5px;
}
#app > footer {
grid-area: footer;
}We’ve created a simple one-column layout, with a width of 1fr. If that 1fr is new to you, it essentially means “take the remaining space” which, in this case, is the entire width of the grid container, #app.
We’ve also defined three rows:
#app {
/* etc. */
grid-template-rows: auto 1fr auto;
/* etc. */
}The first and third rows, which will be our header and footer, respectively, are sized with auto, which means they’ll take up as much space as needed. In other words: no need for hard-coded sizes! This is a super important detail and a perfect example of how we benefit from using CSS Grid.
The middle row is where we’ll put our content. We’ve assigned it a size of 1fr which, again, just means it takes up all of the remaining space that’s left over from the other two rows. If you’re wondering why we aren’t making it auto as well, it’s because the entire grid spans the viewport’s whole height, so we need one section to grow and fill up any unused space. Note that we do not have, nor will we ever need at any point, any fixed heights, margins, paddings — or even line breaks! — to push things into place. Such is the good life when working with grid!
You’ll notice in the Sandbox that I used React to build this demo, but since this isn’t a post about React, I won’t belabor those details; React has absolutely nothing to do with any of the CSS Grid work in this post. I’m only using it as an easy way to navigate between different chunks of markup. If you hate React, that’s fine: hopefully you can ignore it in this post.
We have Header, Main and Footer components that render the expected <header> , <main> and <footer> elements, respectively. And, of course, this all sits inside our #app container. Yes, in theory, #app should be an <article> element, semantically speaking, but that’s always looked weird to me. I just wanted to covey these details so we’re all one the same page as we plow ahead.
For the actual content, I have Billing and Settings sections that you can navigate between in the header. They both render fake, static content, and are only meant to show our layout in action. The Settings section will be the content that we put in a centered strip on our page, Billing will be the one that spans our whole page.
Here’s the Sandbox with what we have so far.
The Billing section looks good, but the Settings section pushes our footer off screen. Not only that, but if we scroll, the entire page scrolls, causing us to lose our header. That may be desirable in some cases, but we want both the header and footer to stay in view, so let’s fix that.
When we initially set up our grid, we gave it a height of 100vh, which is the entire height of the viewport. We then assigned the rows for the header and footer an auto height, and the main a height of 1fr to take up the remaining space. Unfortunately, when content exceeds the space available, it expanded beyond the viewport bounds, pushing our footer down and out of view.
The fix here is trivial: adding overflow: auto will cause our <main> element to scroll, while keeping our <header> and <footer> elements in place.
#app > main {
grid-area: main;
overflow: auto;
padding: 15px 5px 10px 5px;
}Here’s the updated demo that puts this to use.
We want our <main> element to either span the whole width of the viewport, or be centered in a 600px space. You might think we could simply make <main> a 600px fixed width, with an auto margins on either side. But since this is a post about grid, let’s use moar grid. (Plus, as we’ll see later, a fixed width won’t work anyway).
To achieve our centered 600px element, we’ll actually make the <main> element a grid container. That’s right, a grid within a grid! Nesting grids is a totally legit approach, and will even get easier in the future when subgrid is officially supported across browsers. In this scenario, we’ll make <main> a grid with three column tracks of 1fr 600px 1fr or, stated simply, 600px in the middle, with the remaining space equally divided on the sides.
#app > main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 600px 1fr;
}Now let’s position our the content in the grid. Our different modules all render in a <section> child. Let’s say that by default, content will occupy the middle section, unless it has a .full class, in which case it will span the entire grid width. We won’t use named areas here, and instead specify precise grid coordinates of the form [row-start] / [col-start] / [row-end] / [col-end]:
#app > section {
grid-area: 1 / 2 / 1 / 3;
}
#app > section.full {
grid-area: 1 / 1 / 1 / 4
}You might be surprised to see a col-end value of 4, given that there’s only three columns. This is because the column and row values are column and row grid lines. It takes four grid lines to draw three grid columns.
Our <section> will always be in the first row, which is the only row. By default it’ll span column lines 2 through 3, which is the middle column, unless the section has a full class on it, in which case it’ll span column lines 1 through 4, which is all three columns.
Here’s an updated demo with this code. It’ll probably look good, depending on your CodeSandbox layout, but there’s still a problem. If you shrink the display to smaller than 600px, the content is abruptly truncated. We don’t really want a fixed 600px width in the middle. We want a width of up to 600px. It turns out grid has just the tool for us: the minmax() function. We specify a minimum width and a maximum width, and the grid will compute a value that falls in that range. That’s how we prevent the content from blowing out of the grid.
All we need to do is swap out that 600px value with minmax(0, 600px):
main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}Here’s the demo for the finished code.
Earlier, we decided to prevent the footer from being pushed off the screen and did that by setting the <main> element’s overflow property to auto.
But, as we briefly called out, that might be a desirable effect. In fact, it’s more of a classic “sticky” footer that solves that annoying issue, and places the footer on the bottom edge of the viewport when the content is super short.
How could we keep all of our existing work, but allow the footer to get pushed down, instead of fixing itself to the bottom in persistent view?
Right now our content is in a grid with this HTML structure:
<div id="app">
<header />
<main>
<section />
</main>
<footer />
</div>…where <main> is a grid container nested within the #app grid container, that contains one row and three columns that we use to position our module’s contents, which go in the <section> tag.
Let’s change it to this:
<div id="app">
<header />
<main>
<section />
<footer />
</main>
</div>…and incorporate <footer> into the <main> element’s grid. We’ll start by updating our parent #app grid so that it now consists of two rows instead of three:
#app {
/* same as before */
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
'header'
'main';
}Just two rows, one for the header, and the other for everything else. Now let’s update the grid inside our <main> element:
#app > main {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}We’ve introduced a new auto-sized row. That means we now have a 1fr row for our content, that holds our <section>, and an auto row for the footer.
Now we position our <footer> inside this grid, instead of directly in #app:
#app > footer {
grid-area: 2 / 1 / 2 / 4;
}Since <main> is the element that has scrolling, and since this element now has our footer, we’ve achieved the sticky footer we want! This way, if <main> has content that exceeds the viewport, the whole thing will scroll, and that scrolling content will now include our footer, which sits at the very bottom of the screen as we’d expect.
Here’s an updated demo. Note that the footer will be at the bottom of the screen if possible; otherwise it’ll scroll as needed.
I made a few other small changes, like minor adjustments to paddings here and there; we can’t have any left or right paddings on <main>, because the <footer> would no longer go edge-to-edge.
I also made a last-minute adjustment during final edits to the <section> element—the one we enabled adjustable width content on. Specifically, I set its display to flex, its width to 100%, and its immediate descendant to overflow: auto. I did this so the <section> element’s content can scroll horizontally, within itself, if it exceeds our grid column boundary, but without allowing any vertical scrolling.
Without this change, the work we did would amount to the fixed footer approach we covered earlier. Making section> a flex container forces its immediate child — the <div> that contains the content — to take up all of the available vertical space. And, of course, setting that child div to overflow: auto enables scrolling. If you’re wondering why I didn’t just set the section’s overflow-x to auto, and overflow-y to visible, well, it turns out that’s not possible.
We haven’t done anything revolutionary in this post, and certainly nothing that couldn’t be accomplished before CSS Grid. Our fixed width <main> container could have been a block element with a max-width value of 600px, and auto margins on the left and right. Our fixed footer could have been made with position: fixed (just make sure the main content doesn’t overlap with it). And, of course, there are various ways to get a more traditional “sticky footer.”
But CSS Grid provides a single, uniform layout mechanism to accomplish all of this, and it’s fun to work with — honestly fun. In fact, the idea of moving the footer from fixed to sticky wasn’t even something I planned at first. I threw it in at the last minute because I thought the post was a bit too light without it. It was trivial to accomplish, basically moving grid rows around, not unlike putting lego blocks together. And again, these UIs were trivial. Imagine how brightly grid will shine with more ambitious designs!
The post How to Use CSS Grid for Sticky Headers and Footers appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Gremlin is a leading software company focusing on chaos-test in the market. It also has a tool similar to Chaos Monkey which belongs to Netflix, but is more customized to test the system with random loads or scheduled shutdowns. In the article below, we will be testing a simple Kubernetes cluster running on EKS with Chaos Test.
Chaos Engineering is used to improve system resilience. Gremlin’s “Failure as a Service” helps to find weaknesses in the system before problems occur.
If Steve Ballmer were dead he'd be rolling in his grave right now. That's right - we brought Nanos unikernels to Microsoft Azure which means that you can now run Linux applications faster and safer than Linux itself on Azure of all things! Oh yeh - side benefit is that you can now run Linux applications on your Windows desktop as well through Hyper-V.
Ready to run your first application? Great!
Give a man a program, frustrate him for a day.
Teach a man to program, frustrate him for a lifetime.
― Muhammad Waseem
As we all know, web development is a very vast and wide field. The career path in this field can come in a different way, shape or form.
Project management is a complex field in software development. Sometimes you, as a project manager, feel like they are responsible for everything. Since your performance directly affects the success rate of the entire project. Project managers not only manage tasks but, most importantly, thoroughly guide the team toward the project goals. Being a great project manager requires interdisciplinary approaches and the ability to master both hard and soft skills. Let’s have a closer look at three essential competencies for the project manager to be successful.
Even though you don’t need extensive technical knowledge, having at least some competencies is a must. It will allow you to effectively interact with your team and contribute ideas to technical and business-related discussions, ask the right questions, and provide adequate answers. Most importantly, technical skills help project managers to evaluate the feasibility of the desired feature to a specific product and design a strategy for its future implementation.
The global stock market is something that I think most of us are familiar with, but very few people know how to capitalize on. After all, it’s not as easy as simply sinking money into a stock and hoping it rises.
With the global stock market, there are trends and data that you have to follow in order to really be efficient. That’s where Marketstack comes into play.
Marketstack is a real-time, intraday and historical market data API. It uses a free and easy-to-use REST API interface that delivers worldwide stock market data in JSON format.
By using Marketstack, you can follow trends and get real-time updates on the worldwide stock market. Let’s dive into this a little deeper.
Marketstack makes it easy for anyone with any skill set to get started. In fact, with 30,000+ happy users, including some big name brands like Uber and Amazon, it’s no wonder Marketstack has the reputation of being so good.
In addition to being so user-friendly, Marketstack comes with a few helpful features. Here’s what you can expect:
With the global market, every minute counts. Obtain real-time stock data for any ticker down to the minute, request intraday quotes or search 30+ years of accurate historical market data.
Easily integrate the API and make use of 125,000+ worldwide stock tickers, collected from 72 global exchanges, including Nasdaq, NYSE, and more.
Marketstack is a simple yet powerful API that is both scalable and reliable. With an uptime of nearly 100%, it only takes about 5 minutes to get started.
Mafrketstack’s stock market data API has been built with simplicity in mind: Requests are made using a simple HTTP GET structure and API response data is delivered in lightweight JSON format.
All data sent to and from the Marketstack API is encrypted with industry standard 256-bit HTTPS encryption. Rest assured that anything you share through this API is safe and for your eyes only.
A straightforward API documentation will help you get up and running within minutes using interactive demo requests and code examples in a variety of programming languages. If you’d like to explore API documentation, click here.
Marketstack offers many subscription plans that cover a wide variety of needs. Best of all, they offer a free subscription to get started, and it comes with its fair share of options:
Of course, if the free plan doesn’t suit your needs, there are still lots of good, paid subscriptions out there for you to take advantage of:
Marketstack is one of the most comprehensive yet powerful tools on the market. It is by far the most powerful tool for keeping track of the worldwide stock market that anyone can get their hands on.
With Marketstack, you can rest assured that the information gathered is 100% accurate and up-to-date. Stock market data provided by the marketstack API is licensed and sourced from multiple high-authority market data providers around the world. Stock market data from United States exchanges is licensed and sourced from Tiingo, Inc. out of New York City, USA.
The Marketstack API service is built on top of apilayer cloud infrastructure and therefore comes with a significant level of scalability and performance. The API currently handles several million API requests per hour with ease.
All-in-all, if you’re looking for a high-volume stock market API, there’s no better choice you can make than signing up for Marketstack.
Read More at Diving Into The Stock Market With Marketstack