Getting to Know Custom CSS Properties

Today’s front-end developers have a plethora of tools to help them create and edit CSS. One of those tools are preprocessors, and one of the major perks of using a preprocessor is the ability to use variables within your styles. This eliminates the need for copying and pasting, which then makes refactoring easier.
When using preprocessor variables, developers tend to define them with colors, font sizes, layout details, etc. This is all fine and dandy, but preprocessor variables have some limitations:

Link: https://dzone.com/articles/getting-to-know-custom-css-properties?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Great FlexBox Resources and Awful Examples

FlexBox is a new CSS layout engine that has been around for years. Today there is good browser support. All modern browsers support FlexBox and even IE11 supports it (with a couple of bugs). Check out all that glorious green on CanIUse.com
There are also loads of great resources out there. If you have been afraid to learn FlexBox then I highly recommend you give some of these a read:

Link: https://dzone.com/articles/great-flexbox-resources-and-awful-examples-atlas-u?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using CSS: An Introduction to the Basics

Want to know how to design cool web interfaces using CSS (Cascading Style Sheets)? Well, it’s super easy and this article will dig deep to show you how you can use CSS to design these interfaces.
For starters, the best way to define CSS is by showing you these two images from Twitter. The difference between the two images that meets the eye is CSS.

Link: https://dzone.com/articles/using-css-to-design-cool-web-interfaces?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Top 5 CSS Frameworks That You Should Pay Attention TO

CSS frameworks are gaining a lot of popularity these days and to be honest, it’s hard to imagine a website without using them. As all development tools, CSS frameworks are in a constant state of evolution and improvement and thus we highly recommend that you keep an eye on the modern trends. To make it easier for you, we’ve come up with top-5 most popular CSS frameworks of 2017 that you may want to deploy (if you are not using them already).
1. Bootstrap
This framework is one of the GitHub stars and is considered the best responsive CSS framework. Designed for front-end development specifically, it helps to build web design concepts, mobile first projects, grid systems, typography, buttons, and so on.

Link: https://dzone.com/articles/top-5-css-frameworks-that-you-should-pay-attention?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

CSS Containment Modules

One of the new hidden gems in the new CSS modules, which is supposed to drop in new browser versions in the future, is CSS containment. In this short post, I’ll explain what is the new contain property and why you will want to use it.

CSS Containment Module
The CSS containment module defines a new indication, using the contain property, that an element’s subtree is independent of the rest of the page. This will enable browsers to optimize the performance of rendering/painting.

Link: https://dzone.com/articles/css-containment-modules?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

25 Programming Books for the Aspiring Developer

Whether you’re learning to code online, at a bootcamp, or in-person, there’s one supplementary resource that we recommend to accompany your learning: books. But with so many programming books to choose from (a Google search brings up over 12 million…
The post 25 Programming Books for the Aspiring Developer appeared first on Treehouse Blog.

Link: http://blog.teamtreehouse.com/25-programming-books-for-the-aspiring-developer

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

“Eliminate render-blocking JavaScript and CSS." It’s the one Google Page Speed Insights suggestion that I always get stuck with.
When a web page is accessed, Google wants it to only load what’s useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible.

Link: https://dzone.com/articles/critical-css-and-webpack-automatically-minimize-re?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev