Your Web News in One Place

Articles by CSS Tricks from August 2017

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
< Return to CSS Tricks details.
12:26 pm GMT - Wed, August 30, 2017
CSS Tricks Building Skeleton Screens with CSS Custom Properties
Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer's responsibility, building an experience that works with slow connections c...
02:43 pm GMT - Tue, August 29, 2017
CSS Tricks Prefilling a Date Input
HTML has a special input type for dates, like this: <input type="date">. In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it f...
02:06 pm GMT - Mon, August 28, 2017
CSS Tricks JavaScript Scope and Closures
Scopes and closures are important in JavaScript. But, they were confusing for me when I first started. Here's an explanation of scopes and closures to help you understand what they are.Let's start wit...
03:39 pm GMT - Sat, August 26, 2017
CSS Tricks Managing CSS & JS in an HTTP/2 World
Trevor Davis on how we'll link up CSS when we go all-in on HTTP/2:This is the opposite of what we have done as best practice for years now. But in order to take advantage of multiplexing, it's best to...
01:27 pm GMT - Fri, August 25, 2017
CSS Tricks Form Validation with Web Audio
I've been thinking about sound on websites for a while now.When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the websi...
11:04 pm GMT - Thu, August 24, 2017
CSS Tricks So you need a CSS utility library?
Let's define a CSS utility library as a stylesheet with many classes available to do small little one-off things. Like classes to adjust margin or padding. Classes to set colors. Classes to set specif...
12:56 pm GMT - Thu, August 24, 2017
CSS Tricks Cross Browser Testing with CrossBrowserTesting
(This is a sponsored post.)Say you do your development work on a Mac, but you'd like to test out some designs in Microsoft Edge, which doesn't have macOS version. Or vice versa! You work on a PC and y...
12:59 pm GMT - Wed, August 23, 2017
CSS Tricks Quantum CSS
"Quantum CSS" is the new name for "Stylo", which is the new CSS rendering engine, a part of "Project Quantum" which is the project name to rewrite all of Firefox's internals, which will be called "Ser...
12:36 pm GMT - Wed, August 23, 2017
CSS Tricks Implementing Push Notifications: The Back End
In the first part of this series we set up the front end with a Service Worker, a `manifest.json` file, and initialized Firebase. Now we need to create our database and watcher functions.Article Serie...
02:20 pm GMT - Tue, August 22, 2017
CSS Tricks Implementing Push Notifications: Setting Up & Firebase
You know those the little notification windows that pop up in the top right (Mac) or bottom right (Windows) corner when, for example, a new article on our favorite blog or a new video on YouTube was u...
01:02 pm GMT - Tue, August 22, 2017
CSS Tricks Be Slightly Careful with Sub Elements of Clickable Things
Say you want to attach a click handler to a <button>. You almost surely are, as outside of a <form>, buttons don't do anything without JavaScript. So you do that with something like th...
09:29 pm GMT - Mon, August 21, 2017
CSS Tricks Strongly Held Opinions, Gone Away
I received a really wonderful question from Bryan Braun the other day during a workshop I was giving at Sparkbox. He asked if, over the years, if there were opinions about web design and development I...
02:19 pm GMT - Mon, August 21, 2017
CSS Tricks Double Opt-In Email Intros
You know those those "introduction" emails? Someone thinks you should meet someone else, and emails happen about it. Or it's you doing the introducing, either by request or because you think it's a go...
03:55 pm GMT - Fri, August 18, 2017
CSS Tricks Pattern Library Workflow
Jon Gunnison documents some things that have made pattern libraries successful at Allstate. Tidbits I found interesting:There are specific jobs (part of what he calls "governance") for maintaining the...
03:07 pm GMT - Fri, August 18, 2017
CSS Tricks Using Custom Properties to Modify Components
Instead of using custom properties to style whole portions of a websites interface I think we should use them to customize and modify tiny components. Heres why.Whenever anyone mentions CSS custom pro...
02:43 pm GMT - Fri, August 18, 2017
CSS Tricks Saving SVG with Space Around It from Illustrator
There are a number of ways to export graphics from Illustrator. Some of them aren't particulary useful (Save As), some of them don't support SVG (Export for Web), some of them produce good output but ...
11:33 am GMT - Thu, August 17, 2017
CSS Tricks Visual Email Builder Apps
I bet y'all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right w...
10:55 am GMT - Thu, August 17, 2017
CSS Tricks Oxygen The WordPress Visual Site Builder for Real Designers?
WordPress page builders are generally shunned by those who know how to code. They are generally bloated and slow. And you are offered very limited customization options. But what if there was a visual...
12:56 pm GMT - Wed, August 16, 2017
CSS Tricks Using the Paint Timing API
It's a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeonin...
01:49 pm GMT - Tue, August 15, 2017
CSS Tricks A Poll About Pattern Libraries and Hiring
I was asked (by this fella on Twitter) a question about design patterns. It has an interesting twist though, related to hiring, which I hope makes for a good poll.Note: There is a poll embedded within...
01:41 pm GMT - Tue, August 15, 2017
CSS Tricks (An Interview About) imgix Page Weight
Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that...
12:23 pm GMT - Mon, August 14, 2017
CSS Tricks Using ES2017 Async Functions
ES2017 was finalized in June, and with it came wide support for my new favorite JavaScript feature: async functions! If you've ever struggled with reasoning about asynchronous JavaScript, this is for ...
12:23 pm GMT - Mon, August 14, 2017
CSS Tricks Long Distance
A podcast (turns out to be a 2-parter) from Reply All in which Alex Goldman gets a scam phone call about his iCloud account being compromised. He goes pretty far into investigating it, speaking regula...
11:25 pm GMT - Sun, August 13, 2017
CSS Tricks Crafting Webfont Fallbacks
There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfec...
02:21 pm GMT - Sat, August 12, 2017
CSS Tricks How do you start a sentence with npm?
This npm. Asking this question was a fun little journey. Right on the npm website, the very first sentence starts with "npm", and they do not capitalize it.That's a pretty good precedent for not capit...
05:54 pm GMT - Fri, August 11, 2017
CSS Tricks More CSS Charts, with Grid & Custom Properties
I loved Robin's recent post, experimenting with CSS Grid for bar-charts. I've actually been using a similar approach on a client project, building a day-planner with CSS Grid. It's a different use-cas...
02:31 pm GMT - Fri, August 11, 2017
CSS Tricks CSS Utility Classes and Separation of Concerns
Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where h...
01:30 pm GMT - Fri, August 11, 2017
CSS Tricks Improving Conversations using the Perspective API
I recently came across an article by Rory Cellan-Jones about a new technology from Jigsaw, a development group at Google focused on making people safer online through technology. At the time they'd ju...
03:42 pm GMT - Thu, August 10, 2017
CSS Tricks Combine the transparency of a PNG with the compression of a JPG
JPG doesn't support alpha transparency. PNGs that do support alpha transparency don't compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here.Drag and ...
01:10 pm GMT - Thu, August 10, 2017
CSS Tricks The #1 Website for Coding Challenges
Coderbyte is a web application built to help you practice programming and improve your algorithm skills. We offer a collection of coding challenges and web development courses that can help you prepar...
01:09 pm GMT - Thu, August 10, 2017
CSS Tricks The Difference Between Explicit and Implicit Grids
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to pl...
09:28 pm GMT - Wed, August 9, 2017
CSS Tricks abovethefold.fyi
Novelty site with a message (and reference articles) by Rob Lafratta.Direct Link to Article — Permalink…abovethefold.fyi is a post from CSS-Tricks...
01:02 pm GMT - Wed, August 9, 2017
CSS Tricks Removing that ugly :focus ring (and keeping it too)
David Gilbertson:Removing the focus outline is like removing the wheelchair ramp from a school because it doesn't fit in with the aesthetic.So David shows how you can remove it unless you detect that ...
12:20 pm GMT - Wed, August 9, 2017
CSS Tricks The Best Way to Implement a Wrapper in CSS
Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible ...
11:54 am GMT - Tue, August 8, 2017
CSS Tricks Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins
According to an article from A List Apart about CSS Grid, a "new era in digital design is dawning right now." With Flexbox and Grid, we have the ability to create layouts that used to be extremely dif...
12:31 pm GMT - Mon, August 7, 2017
CSS Tricks The Evolution of Trust
Nicky Case's games are a damn treasure in this world. Most importantly, they are fun and compelling to play. They also make gameplay the vehicle for education on tricky, intricate, and important issue...
11:53 am GMT - Mon, August 7, 2017
CSS Tricks All About React Router 4
I met Michael Jackson for the first time at React Rally 2016, soon after writing an article on React Router 3. Michael is one of the principal authors of React Router along with Ryan Florence. It was ...
02:09 pm GMT - Fri, August 4, 2017
CSS Tricks How We Solve CSS Versioning Conflicts Here at New Relic
At first the title made me think of Git conflicts, but that's not what this is about. It's about namespacing selectors for components. Ultimately, they decided to use a Webpack loader (not open source...
01:46 pm GMT - Fri, August 4, 2017
CSS Tricks IntersectionObserver comes to Firefox
A great intro by Dan Callahan on why IntersectionObserver is so damn useful:What do infinite scrolling, lazy loading, and online advertisements all have in common?They need to know aboutand react toth...
01:40 pm GMT - Fri, August 4, 2017
CSS Tricks Creating Photorealistic 3D Graphics on the Web
Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be...
03:22 pm GMT - Thu, August 3, 2017
CSS Tricks Integrate Your Wufoo Forms Everywhere
At its heart, Wufoo is a form builder. If you need any type of form, you can build it super quickly by selecting and customizing the fields you need in Wufoo's fantastically easy to use form builder. ...
03:13 pm GMT - Thu, August 3, 2017
CSS Tricks If you really dislike FOUT, `font-display: optional` might be your jam
The story of FOUT is so fascinating. Browsers used to do it: show a "fallback" font while a custom font loads, then flop out the text once it has. The industry kinda hated it, because it felt jerky an...
04:01 pm GMT - Wed, August 2, 2017
CSS Tricks Separate Form Submit Buttons That Go To Different URLs
This came up the other day. I forget where, but I jotted it down in my little notepad for blog post ideas. I wrote it down because what I was overhearing was way over-complicating things.Say you have ...
12:57 pm GMT - Wed, August 2, 2017
CSS Tricks Making A Bar Chart with CSS Grid
I have a peculiar obsession with charts and for some reason, I want to figure out all the ways to make them with CSS. I guess that's for two reasons. First, I think it's interesting that there are a m...
02:17 pm GMT - Tue, August 1, 2017
CSS Tricks The Critical Request
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready.Little may you know, a lot is going on under...
12:34 pm GMT - Mon, July 31, 2017
CSS Tricks A Personal Journey to Fix a Grunt File Permissions issue
I was working on a personal project this past week and got a weird error when I tried to compile my Sass files. Unfortunately, I did not screenshot the exact error, but was something along the lines o...
12:33 pm GMT - Mon, July 31, 2017
CSS Tricks Designing Between Ranges
CSS is written slowly, line by line, and with each passing moment, we limit the space of whats possible for our design system. Take this example:body { font-family: 'Proxima-Nova', sans-serif; colo...