It is very important for any front-end developer to be well informed about modern and future web standards. So to help you stay ahead of the game, in this post we`ve collected collection of useful techniques, tips and tricks for better CSS and Javascript coding, along with complete tutorials and explanation of the techniques used. They can help you master the techniques that will help set your designs apart from the crowd.
Lesser known CSS quirks & advanced tips
Below you`ll find some of the weirdest CSS features, along with tips and tricks for advanced CSS users.
How to easily create themes with CSS Variables
The ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it`s awesome!
The Power of Flex-Grow
Let`s face it, laying out a website can sometimes be challenging, especially when some of the content may be dynamic. At times, we may need to add or remove content based on user input, or other conditions.
A Guide To The State Of Print Stylesheets In 2018
Responsive layouts and components using CSS Grid
Let`s make a photo gallery responsive quickly and using very few lines of CSS.
Inspecting Animations in DevTools
I stumbled upon the Animation panel in Chrome`s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could`ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under the hood.
Cards and Composability in Design Systems
I`m a sucker for a card component. It takes me back nostalgically to my adolescence when baseball cards introduced me to information design. I collected and organized thousands, each exhibiting a hero`s photo, team as theme, positions as identity. My brain engaged with the design, data, and in-depth inquiry they fostered.
The Anatomy of a Modern JavaScript Application
In this article, I`ll introduce you to modern JavaScript. We`ll take a look at recent developments in the language and get an overview of the tools and techniques currently used to write front-end web applications. If you`re just starting out with learning the language, or you`ve not touched it for a few years and are wondering what happened to the JavaScript you used to know, this article is for you.
Creating smooth sequential animations with Sass
In this article I`m going to demonstrate a technique for creating CSS animations using the power of Sass` for loop. Whether you`re using React, Vue or Angular, these animations can be used in your app.
1 HTML Element + 5 CSS Properties = Magic!
Let`s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?
Creating themeable design systems
I think there`s a lot of power in combining a systematic approach to creating UIs with aesthetic flexibility. We can create a lot of efficiency by sharing components between brands while still honoring each brand`s unique visual identity. I hope this post helps dispel the myth that design systems impose stifling rigidity on design teams and lead to bland, one-size-fits-all experiences.
How to Build an Accordion Component With CSS and a Touch of JavaScript
In today`s tutorial we`ll learn how to build a show/hide component with CSS and a little bit of JavaScript. By default, jQuery provides the slideToggle method which allows us to create accordions with a sliding motion. Our challenge is to mimic this functionality with pure JavaScript.
Solved With CSS! Colorizing SVG Backgrounds
CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we`re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI`s simpler, and that`s exciting!
Cropping Away Negative Impacts of Line Height
Getting rid of pesky space above and below HTML text.
Image Mask Effect
An immersive transition effect powered by image masks and CSS transforms.
Write CSS That Works in Every Browser, Even the Old Ones
Let me walk you through how exactly to write CSS that works in every browser at the same time, even the old ones. By using these techniques, you can start using the latest and greatest CSS today — including CSS Grid — without leaving any of your users behind.
Knockout Text
Itis a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It`s appealing because it opens up typographic styles that we don`t get out of traditional CSS properties, like color.
Responsive Vertical Rhythm with CSS Custom Properties and CSS Calc
Vertical Rhythm is an important concept in web design. It has the ability to bring a design together and make different elements feel consistent on the same page.
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
Stunning hover effects with CSS variables
I recently got inspired by the playful hover animation on the Grover website. Moving your mouse over the subscribe-button reveals a colorful gradient that follows your cursor as it moves. The idea is simple, but the result is a button that stands out from the reset and waits to be clicked.
Modern CSS Explained For Dinosaurs
CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer. It`s certainly easy enough to get started with it?—?you define style properties and values to apply to specific elements, and…that`s pretty much all you need to get going!
Modern JavaScript Explained For Dinosaurs
Learning modern JavaScript is tough if you haven`t been there since the beginning. The ecosystem is growing and changing so rapidly that it`s hard to understand the problems that different tools are trying to solve.
How Big Is That Box?
In this article, I`m going to share with you some interesting things about sizing boxes in CSS. I`ve picked out a few things from the specifications that I believe are vital in terms of understanding exactly how big that box is.
How to Use Variable Fonts on the Web
As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.
Debugging CSS Grid Layouts With Firefox Grid Inspector
Although other browsers like Chrome and Internet Explorer each had their respective Grid implementations at the time, with Chrome`s behind a flag, and Internet Explorer using the original specification, Firefox was the only browser that was working on a Grid DevTool along with the Grid implementation itself.
Why CSS Grid is better than Bootstrap for creating layouts
CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser, which gives us a ton of benefits.
How you can use simple Trigonometry to create better loaders
The loader that we are going to make consists basically of three small circles moving in a periodic up and down motion, each, a little out of sync with the others.
Useful RegExp trick
Every now and then you find yourself wanting to extract quoted strings, HTML tags or something in-between curly braces from a bigger string of text.
Display: Contents Is Not a CSS Reset
Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might do. Essentially, they are using display: contents as a quick and dirty CSS reset.
