“Killing the URL”

It was Safari who first started hiding the complete URL. Here’s what CSS-Tricks looks like even when you’re on an article page by default in Safari: The full URL path is hidden. You can only fix it (YES, FIX IT) by checking “Show full website address” in settings. Preferences > Advanced We’ve already damaged the sanctity of URLs in a way with URL shorteners. Thankfully, those are used less and less with social networks, like Twitter, not counting the URL toward the total tweet character count anymore. Now, Lily Hay Newman reports Chrome sees problems as well: “People have a really hard time understanding URLs,” says Adrienne Porter Felt, Chrome’s… Read More

Continue Reading

Customise radio buttons without compromising accessibility

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead: Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden: clip-path: polygon(0 0) display: none opacity: 0 visibility: hidden For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able… Read More

Continue Reading

Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a “CSS custom property“): :root { –mouse-x: 0px; –mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(–mouse-x); top: var(–mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener(“mousemove”, e => { root.style.setProperty(‘–mouse-x’, e.clientX + “px”); root.style.setProperty(‘–mouse-y’, e.clientY + “px”); }); That’s all. See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks.

Continue Reading

HTML elements, unite! The Voltron-like powers of combining elements.

Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness. Normally, when we introduce HTML, we talk about how it is used to apply meaning to content in a document, and we do this by using examples like: “Is it a paragraph?” “Is it a heading?” “Is it a numbered list” “Is it a button” We use these examples because they are easy to understand — it’s a single piece or chunk of the same content that needs to… Read More

Continue Reading

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like don’t have children. The tag isn’t self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don’t control. Besides, these are the only two elements that “size to an external resource.” So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that’s nice. But… Read More

Continue Reading

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component). There are three types of slots: default / unnamed slots: used when you have a single slot in a component. We create them by adding in the template where we… Read More

Continue Reading

“View Source” in DevTools

When the conversation about the value of “View Source” rolls around, the #1 response I hear is along these lines: No way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM. Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see. This is Chrome DevTools. Safari has a Resources tab There is also a Network tab in DevTools for every browser. That’s where you find a way to look at the document. Firefox’s Network tab So, if… Read More

Continue Reading

CSS Shape Editors

Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari. What will be nice about the Firefox release (well, it’s kinda already nice if you use something like Firefox Developer Edition which is already on 62), is that it has a shape editor built right into DevTools. Chrome supports shape-outside as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job. (Razvan contributed to the Firefox version as well, I hear.)… Read More

Continue Reading

Props and PropTypes in React

React encourages developers to build by breaking a UI up into components. This means there will always be a need to pass data from one component to another — more specifically, from parent to child component — since we’re stitching them together and they rely on one another. React calls the data passed between components props and we’re going to look into those in great detail. And, since we’re talking about props, any post on the topic would be incomplete without looking at PropTypes because they ensure that components are passing the right data needed for the job. With that, let’s unpack these essential but loaded terms together. Props: The… Read More

Continue Reading

Render Caching for React

Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has server costs. Furthermore, if your server team cannot have JavaScript running on your servers, you are stuck. It significantly complicates the CDN setup especially if you have pages that require login and where the user’s information is managed. I want to walk through a new concept called Render Caching. This is a cool trick that can give users an… Read More

Continue Reading

What do we call browser’s native development tools?

You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them? Chrome calls them DevTools. Edge calls them DevTools. Firefox calls them Developer Tools. Safari calls it the Web Inspector. I think it’s somewhat safe to generically refer to them as DevTools. Safari is the only browser that doesn’t use that term, but I imagine even die-hard Safari users will know what you mean. The post What do we call browser’s native development tools? appeared first on CSS-Tricks.

Continue Reading

Helping a Beginner Understand Getting a Website Live

I got a great email from a fellow named Josh Long the other day. He is, in his words, “relatively new to web design” and was a bit stuck on the concept of getting a site live. I should say that I’m happy to get emails like this an I always read them, but I typically can’t offer tech support over email. If I can respond at all, I normally point people to other community resources. In this case, it struck me what a perfect moment this is for Josh. He’s a little confused, but he knows enough to be asking a lot of questions and sorting through all this… Read More

Continue Reading

Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools: We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience. One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with… Read More

Continue Reading

The Complete CSS Demo for OpenType Features

I’m very glad a guide for these features exists because we already know there are so many weird things that variable fonts can do — well done, Tunghsiao Liu! There are quite a few possible values for font-feature-settings, like, ya know: aalt, swsh, cswh, calt, hist, hlig, locl, rand, nalt, cv01-cv99, salt, subs, sups, titl, rvrn, liga, dlig, size, ornm, ccmp, kern, mark, mkmk, smcp, c2sc, pcap, c2pc, unic, cpsp, case, ital, ordn, lnum, onum, pnum, tnum, frac, afrc, dnom, numr, sinf, zero, mgrk, flac, dtls, ssty, ss01-ss20, smpl, trad, tnam, expt, hojo, nlck, jp78, jp83, jp90, jp04, hngl, ljmo, tjmo, vjmo, fwid, hwid, halt, twid, qwid, pwid, palt, pkna,… Read More

Continue Reading

Seriously, though. What is a progressive web app?

Amberley Romo read a ton about PWAs in order to form her own solid understanding. “Progressive web app” (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements. As a general term, the PWA approach is characterized by striving to satisfy the following set of attributes: Responsive Connectivity independent App-like-interactions Fresh Safe Discoverable Re-engageable Installable Linkable Direct Link to Article — Permalink The post Seriously, though. What is a progressive web app? appeared first on CSS-Tricks.

Continue Reading

ABeamer: a frame-by-frame animation framework

In a recent post, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years. ABeamer is a new animation ecosystem that takes advantage of these new concepts. At the core of the ecosystem is the web browser animation library. But, it’s not just another animation engine. ABeamer is designed to build frame-by-frame animations in the web browser and use a render server to generate a PNG file sequence, which can… Read More

Continue Reading

::before vs :before

Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that doesn’t mean you should automatically use it. The situation is that: double-colon selectors are pseudo-elements. single-colon selectors are pseudo-selectors. ::before is definitely a pseudo-element, so it should use the double colon. The distinction between a pseudo-element and pseudo-selector is already confusing. Fortunately, ::after and ::before are fairly straightforward. They literally add something new to the page, an element. But something like ::first-letter is also a pseudo-element. The way I reason that out in my brain is that it’s selecting a part of something in which there is no existing HTML… Read More

Continue Reading

Using CSS Clip Path to Create Interactive Effects, Part II

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible. One of the biggest drawbacks of CSS clipping, at the time of writing, is browser support. Not having 100% browser coverage means different experiences for viewers in different browsers. We, as developers, can’t control what browsers support — browser… Read More

Continue Reading

A native lazy load for the web platform

A new Chrome feature dubbed “Blink LazyLoad” is designed to dramatically improve performance by deferring the load of below-the-fold images and third-party s. The goals of this bold experiment are to improve the overall render speed of content that appears within a user’s viewport (also known as above-the-fold), as well as, reduce network data and memory usage. ✨ ?‍? How will it work? It’s thought that temporarily delaying less important content will drastically improve overall perceived performance. If this proposal is successful, automatic optimizations will be run during the load phase of a page: Images and iFrames will be analysed to gauge importance. If they’re seen to be non-essential, they… Read More

Continue Reading

A Tale of Two Buttons

I enjoy front-end developer thought progression articles like this one by James Nash. Say you have a button which needs to work in “normal” conditions (light backgrounds) and one with reverse-colors for going on dark backgrounds. Do you have a modifier class on the button itself? How about on the container? How can inheritance and the cascade help? How about custom properties? I think embracing CSS’s cascade can be a great way to encourage consistency and simplicity in UIs. Rather than every new component being a free for all, it trains both designers and developers to think in terms of aligning with and re-using what they already have. Direct Link… Read More

Continue Reading

Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component

This is the fourth post in a four-part series. In Part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. The third part covered Stripe Elements in Vue. This last post shows how to configure the checkout component and make the shopping cart fully functional. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component Configure the Checkout Component (This Post) As a reminder, here’s where we are in our application at this point: Configuring the Checkout Component We have to do a few things to adjust the component in order for it to meet our… Read More

Continue Reading

Secure Contexts Everywhere

Anne van Kesteren for Mozilla says: Effective immediately, all new features that are web-exposed are to be restricted to secure contexts. Web-exposed means that the feature is observable from a web page or server, whether through JavaScript, CSS, HTTP, media formats, etc. A feature can be anything from an extension of an existing IDL-defined object, a new CSS property, a new HTTP response header, to bigger features such as WebVR. In contrast, a new CSS color keyword would likely not be restricted to secure contexts. In other words, if your site isn’t HTTPS, you won’t get new web tech features. Holy jeepers. The reasoning is the web should be using… Read More

Continue Reading

2017/2018 JavaScript

There has been a lot of research on the landscape this year! Here are a few snippets from a bunch of articles. There is a ton of information in each, so I’m just picking out a few juicy quotes from each here. Perhaps the most interesting bit is how different the data looked at is. Each of these is different: a big developer survey, npm data, GitHub data, and StackOverflow data. Yet, they mostly tell the same stories. The Brutal Lifecycle of JavaScript Frameworks Ian Allen of StackOverflow writes: JavaScript UI frameworks and libraries work in cycles. Every six months or so, a new one pops up, claiming that it… Read More

Continue Reading

Using CSS Clip Path to Create Interactive Effects

Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image. I’ll use the following photo as an example. The flower stands out from the rest of the photo. It is a natural focal point to cut out and create our effects around. Image courtesy of Unsplash. Credit: Hermes Rivera Creating the SVG First off,… Read More

Continue Reading

Creating Vue.js Component Instances Programmatically

This article assumes basic understanding of Vue.js framework and how to create components in it. If you are new to Vue, then this CSS-Tricks series is a good place to start. I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translate to JavaScript code. Normally if you are working with the recommended Single File Component style, you would have a Button component like so:… Read More

Continue Reading

How to Style a Form With Tailwind CSS

If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, “Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.” In practice, this means using a variety of classes that closely map to underlying CSS properties. For example, applying a class like .text-center to an element means that we’re setting its text-align property to center. Simple enough, right? Using utility classes like this allows us to spend more time iterating through designs and avoiding premature abstraction of our CSS. Then, once we’re happy with our designs, Tailwind makes it… Read More

Continue Reading

The Wix Code Database and Data Modeling

(This is a sponsored post.) I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some… Read More

Continue Reading

How to use variable fonts in the real world

Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though: Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now. And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too: Variable font capable software is… Read More

Continue Reading

Routing and Route Protection in Server-Rendered Vue Apps Using Nuxt.js

This tutorial assumes basic knowledge of Vue. If you haven’t worked with it before, then you may want to check out this CSS-Tricks guide on getting started. You might have had some experience trying to render an app built with Vue on a server. The concept and implementation details of Server-Side Rendering (SSR) are challenging for beginners as well as experienced developers. The challenges get more daunting when you have to do things like data fetching, routing and protecting authenticated routes. This article will walk you through how to overcome these challenges with Nuxt.js. What You will Learn The title might have limited the scope of this article because you’re… Read More

Continue Reading

Bend any Website’s CSS to Your Will With Stylish or Stylebot

As a self-professed CSS nerd, I take it upon myself to inject my own CSS onto websites when I need to to fix bugs or just fiddle them up to my liking. This is a post that details how I do that using the Stylish and Stylebot browser extensions. Direct Link to Article — Permalink Bend any Website’s CSS to Your Will With Stylish or Stylebot is a post from CSS-Tricks

Continue Reading

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave of tools. In the future, I predict two separate categories of design applications: tools for thinking and tools for systems. Let me explain. Tools for Thinking A short while ago… Read More

Continue Reading

The Wix Code Database and Data Modeling

I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some new and very powerful new… Read More

Continue Reading

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every font-weight, a wider variety than bold and normal adds visual hierarchy… Read More

Continue Reading

Variable Fonts with Jason Pamental

We’ve already hit you with a one-two punch of variable fonts today. Robin shared Richard Rutter’s post on real-world usage of them. Ollie Williams introduced us to the in’s-and-out’s of using them on the web. I figured we’d make it a trifecta and link up our discussion about variable fonts with Jason Pamental. Dave and I talk with Jason for an entire hour digging into the real story, possibilities, and future of all this variable fonts business. Don’t miss his or Mandy Michael’s demo Collections either. Direct Link to Article — Permalink Variable Fonts with Jason Pamental is a post from CSS-Tricks

Continue Reading

People Writing About Style Guides

Are you thinking about style guides lately? It seems to me it couldn’t be a hotter topic these days. I’m delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it’s threefold why style guides and design systems have taken off: Component-based front-end architectures becoming very popular Styling philosophies that scope styles becoming very popular A shift in community attitude that style guides work That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies. Anyway, in… Read More

Continue Reading

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at a pretty intense level and have learned a lot about them.… Read More

Continue Reading

Building a Good Download… Button?

The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend is here, loyal as ever. Want a download? Well, you’re going to want… hmm. What best describes a download? Is it a triggered action, and therefore should be in the domain of the element? Or is it a destination, and therefore best described using an element? Buttons Do Things, Links Go Places There seems to be a lot of confusion over when to use buttons and when to use links. Much like tabs versus spaces or pullover hoodies versus zip-ups, this… Read More

Continue Reading

Designer-Oriented Styles

James Kyle: Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers … Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process. (Okay okay… most designers. You’re special. But we both knew that already.) I think James makes strong points here. I’m, predictably, in the camp in which I like CSS. I don’t… Read More

Continue Reading

A Site About Serverless Technology

I know some of you have a visceral and negative feeling toward the word serverless. I felt that way at first too, but I’m kinda over it. Even if it’s not a perfect word, it’s done a good job of encapsulating a movement into a single word. That movement is far more than I’m qualified to explain. But I do very much think it’s worth knowing about. Developers of all sorts can take advantage of it, but I’m particularly fascinated about what it can do to extend the front-end developer toolbelt. I made a website called The Power of Serverless for Front-End Developers just for this! Rather than re-hash what… Read More

Continue Reading

Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

From Johnny’s dev blog: The challenge: Calculate the real percentage of unused CSS Our goal is to create a script that will measure the percentage of unused CSS of this page. Notice that the user can interact with the page and navigate using the different tabs. DevTools can be used to measure the amount of unused CSS in the page using the Coverage tab. Notice that the percentage of unused CSS after the page loads is ~55%, but after clicking on each of the tabs, more CSS rules are applied and the percentage drops down to just ~15%. That’s why I’m so skeptical of anything that attempts to measure “unused… Read More

Continue Reading

Tales of a Non-Unicorn: A Story About the Roller Coaster of Job Searching

Hey there! It’s Lara, author of the infamous“Tales of a Non-Unicorn: A Story About the Trouble with Job Titles and Descriptions” from a couple years back. If you haven’t read that original article, I recommend skimming it to give you some context for this one, but I think you’ll still find value here even if you don’t. A lot has happened since I wrote that article in 2015, and this follow-up has been in the works for a good six months. I ended up, not with a solution for the job titles conundrum or a manifesto about the importance of HTML and CSS, rather a simple, honest story about my… Read More

Continue Reading

WordPress User Survey Data for 2015-2017

A grand total of 77,609 responses from WordPress users and professionals collected by Automattic between 2015 and 2017. The stats for 2015 and 2016 have been shared at the annual State of the Word address and 2017 marks the first time they have been published on WordPress News. A few items that caught my attention at first glance: Between 66% and 75% of WordPress users installed WordPress on their own. In other words, they were savvy enough to do it without the help of a developer. Hosting providers were next up and clocked in at 13-14% of installs. WordPress professionals described their clients as large and enterprise companies only 6-7%… Read More

Continue Reading

Making CSS Animations Feel More Natural

It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the design and the coder transcribing—designers must now know something about code, and coders must know something about design in order to effectively collaborate. As an example, let’s say a designer asks a developer to make a box bounce. That’s it—no additional instruction. Without some cross-knowledge and a common vocabulary, both sides are a little lost in this communication: the developer doesn’t have enough information to… Read More

Continue Reading

Careful Now

Tom Warren’s “Chrome is turning into the new Internet Explorer 6” for The Verge has a title that, to us front-end web developers, suggests that Chrome is turning into a browser far behind in technology and replete with tricky bugs. Aside from the occasional offhand generic, “Chrome is getting so bad lately,” comments you hear, we know that’s not true. Chrome often leads the pack for good web tech. Instead, it’s about another equally concerning danger: developers building sites specifically for Chrome. In theory, that’s not really a thing, because if you build a website with web standards (of which there isn’t really much of an alternative) it’ll work in… Read More

Continue Reading

The latest ways to deal with the cascade, inheritance and specificity

The cascade is such an intrinsic part of CSS that they put it right there in the name. If you’ve ever needed to use !important to affect specificity in the cascade, you’ll know that it can be a tricky thing to deal with. In the early days of CSS, it was common to see highly specific selectors like this: #sidebar ul li {} We’re all much better at managing specificity nowadays. It’s a widely accepted best practice to keep specificity low and flat—to shun ID selectors, to make liberal use of classes, and to avoid unnecessary nesting. But there are still plenty of situations where a more specific selector will… Read More

Continue Reading

react-perf-devtool

Here’s an interesting and super useful Chrome extension by Nitin Tulswani that measures React component performance: React Performance Devtool is a browser extension for inspecting the performance of React Components. It statistically examines the performance of React components based on the measures which are collected by React using window.performance API. Along with the browser extension, the measures can also be inspected in a console. Also, if you’re interested in learning more about the process of this tool, there’s a great thread that digs into the history of the project. Direct Link to Article — Permalink react-perf-devtool is a post from CSS-Tricks

Continue Reading

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up: Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of… Read More

Continue Reading

​Incapsula’s Global DDoS Threat Landscape Report

(This is a sponsored post.) The newly released Q3 2017 Global DDoS Threat Landscape Report features insights on attacks and mitigation. These are some of the key findings: Bitcoin was one of the most targeted industries High packet rate attacks grew more common A third of network layer attacks were highly persistent Botnet activity out of India and Turkey continued to climb Learn about the top attacked countries, industries, and vectors here and how to protect your site with Incapsula. Direct Link to Article — Permalink ​Incapsula’s Global DDoS Threat Landscape Report is a post from CSS-Tricks

Continue Reading

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much. Let’s dive in! Document Structure and Semantics It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in… Read More

Continue Reading