Animation Performance 101: Measuring with Dev Tools
In the last part of this series, we’ll take a look at the most important part of performance: how to measure and diagnose bottlenecks. Performance optimizations are meaningless without data! We’ll go through how to analyze using Chrome DevTools*. First, let’s take a look at two tools mentioned in Part 1.
fridayfrontend  cssbasics  animation  css  testing  devtools 
5 days ago
58 bytes of css to look great nearly everywhere
when making this website, i wanted a simple, reasonable way to make it look good on most displays. not counting any minimization techniques, the following 58 bytes worked well for me:

main {
max-width: 38rem;
padding: 2rem;
margin: auto;
fridayfrontend  css  cssbasics  layout 
5 days ago
How to Use CSS Logical Properties to Control Layout
CSS logical properties define a new way of working with layout. Their primary goal is to help developers support different writing systems such as right-to-left (RTL) and vertically displayed scripts. These new features make it possible to control layout through logical rather than physical properties. For example, with logical properties you might describe the start and end of an element, rather than its left and right boundaries. See the difference?
fridayfrontend  cssbasics  css  logical-properties  block-start  block-end  inline-start  inline-end  layout  block  inline  display 
5 days ago
Under-Engineered Toggles
While I recognize that the bulk of these are fun experiments, experience has taught me that some developer somewhere will copy one of the experiments into a real user-facing project. These controls are overwhelmingly inaccessible and in many cases usability gotchas.

For this post, I am only going to provide styles to visually convert a standard checkbox into a visual toggle. No ARIA, no script, no special features. A progressively enhanced checkbox that will continue to work if the CSS file does not load.
fridayfrontend  cssbasics  css  forms  checkboxes  accessibility  toggles 
5 days ago
Diagonal Containers in CSS
In this tutorial, we'll take a look at how to create full-width, diagonal sections in CSS using the clip-path property.
fridayfrontend  cssbasics  css  clip-path 
5 days ago
Using "box shadows" and clip-path together
Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it'll be applying a shadow to a shape.
fridayfrontend  cssbasics  css  clip-path  box-shadow 
5 days ago
Top 5 Questions Asked in Accessibility Trainings
Throughout my recent travels, I have gathered a list of questions from the designers and developers on the ground. Regardless of the company size or industry, you might be surprised to learn that many of their questions overlap. Below are the top five questions that I hear most often and some context/resources to learn a bit more about each.
fridayfrontend  cssbasics  accessibility 
5 days ago
How to create a custom radio switch in CSS
In this tutorial, we'll take a look at how to create a custom radio switch and how to keep it accessible.
fridayfrontend  cssbasics  css  accessibility  forms  radio  switch  toggles 
5 days ago
CSS Grid: Style Guide
What could go wrong if I were to do a style guide with 5 color palettes without any planning? 🤷‍♀️

Narrator: A lot of things could go wrong.
fridayfrontend  cssbasics  css  cssgrid  color  styleguide 
5 days ago
Inclusively Hidden
There are various ways to hide content in web interfaces, but are you aware of the different effects they have on the accessibility of that content? While some might think it’s strange to have multiple different ways to hide content, there are certain benefits that each method provides.
fridayfrontend  cssbasics  accessibility  hidden 
5 days ago
The abbreviation appreciation society
The use of the title attribute to provide the expansion for an abbreviation is not a user friendly way to provide the expanded text, it is a method that #SUX (Some User Experience).
fridayfrontend  cssbasics  html  abbr  title  accessibility 
5 days ago
Inlining SVG background images in CSS with custom properties
So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place. That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!
fridayfrontend  css  cssbasics  svg  inline  customproperties  variables 
5 days ago
UX Engineering
A few months ago I was thrilled to be officially deemed a "UX Engineer" (UXE) at LogMeIn. I was going to get the chance to build Design Systems! But once the excitement wore off, I quickly realized how undefined the UXE role is. I tried Googling the position but came up empty handed.

Although a few companies, such as Google and Etsy, are starting to hire UXEs, the position differs vastly between companies.
Thus, after much research into the field, I believe I have finally narrowed down the role of a UXE, the skills needed to succeed, and the responsibilities.
fridayfrontend  ux  cssbasics  jobs  titles  roles  engineering 
5 days ago
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools.
fridayfrontend  css  cssbasics  javascript  html  frontend  training  guides 
5 days ago
Art Direction For The Web Using CSS Shapes
Designer and author of “Art Direction for the Web”, Andy Clarke, has never been afraid of pushing boundaries when using CSS to create exciting new designs. In this tutorial, he goes beyond basic CSS Shapes and shows how you can use them to create five types of distinctive and engaging layouts for your art-directed designs.
fridayfrontend  css  shapes  design  layout 
5 days ago
HTML Includes That Work Today
Despite the fact that this markup starts out as an `iframe`, if you inspect the graphic above using developer tools, you’ll see the SVG markup for the icon, inlined right in the HTML DOM, with no `iframe` element to be found. This is because the code uses an `iframe` to load the file, and an `onload` event to inject the `iframe`'s content just before the `iframe` in the HTML, before deleting the `iframe` itself.
fridayfrontend  javascript  html  iframes  inline  includes  svg 
5 days ago
Clever Code
This week, Chris Ferdinandi examined a clever JavaScript snippet, one that's written creatively with new syntax features, but is perhaps less readable and performant. It's a quick read, but his callout of our industry's fixation on cleverness is worth... calling out.
fridayfrontend  javascript  css  clever  boring  maintainability  readability  code 
5 days ago
CSS Subgrid News and demos
A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. I was given access to a Try build of Firefox Nightly, which has an early implementation of the feature. Here are a few screenshots. These include links to my CodePen examples so you can see the code for the subgrid elements.
fridayfrontend  css  cssgrid  grids  layout  subgrid 
5 days ago
CSS masonry with flexbox, :nth-child(), and order
Flexbox has no easy way of rendering items with a `column` layout while using a `row` order, but we can build a masonry layout with CSS only—no JavaScript needed—by using `:nth-child()` and the `order` property. In a gist, here’s the trick to create a `row` order while using `flex-direction: column`.
fridayfrontend  css  masonry  flexbox  grids  layout  order 
5 days ago
CSS for the next billion users, by Ire Aderinokun
There’s been a lot of talk lately about developing for the “next billion users”, which essentially means targeting users who are coming online for the first time in developing countries. This talk will be about different ways we can write CSS for the “next billion users”. I will talk about my experience developing websites for users in Nigeria and cover areas such as performance, accessibility, and progressive enhancement.
fridayfrontend  video  css  performance  accessibility  progressive  enhancement 
5 days ago
Event Delegation to Avoid Loops
This demo adds a click event to each cell in the table. This can be done using a loop, but instead it's done using event delegation. The event is attached only to the parent <table> element, then the property is used to determine where the event actually ocurred.
javascript  delegation  bubbling  events  eventlistener 
5 days ago
Service Workies
Learn Service Workers inside and out with the new PWA Mastery Game
pwa  games  serviceworkers 
5 days ago
You Don't Need X-UA-Compatible anymore
Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Additional info below:
microsoft  edge  ie  browsers  meta  x-ua-compatible 
5 days ago
Twitter’s open source emoji has you covered for all your project's emoji needs. With support for the latest Unicode emoji specification, featuring 3,071 emojis, and all for free.
twitter  emoji  free  icons 
5 days ago
How to create your own vanilla JS DOM manipulation library like jQuery
Yesterday, we looked at how to create your own small vanilla JS helper library—a kind of mini Lodash or Underscore.js. Today, I’m going to show you how to build a tiny DOM manipulation library. This one will be more like a micro-jQuery.
javascript  jquery  dom  library 
5 days ago
git - Merging a branch of a branch after first branch is squashed when merged to master
Everything is cool, except with dependent_branch. When I try to rebase dependent branch onto master or try and merge master into it, git is confused by the re-written/squashed history and basically marks every single change in depedendent_branch as a conflict. It's a PITA to go through and basically re-do or de-conflicticize all of the changes in dependent_branch. Is there some solution to this? Sometimes, I'll manually create a patch and apply it off a fresh branch of master, but if there's any real conflicts with that, its even worse to fix.
git  branches  merge  squash 
5 days ago
Accessibility "Debate" Rebuttals
After realizing how tiring accessibility “debate” can be I’ve decided to put together a master thread with concise rebuttals to almost every general argument against accessibility that I can think of. This is that thread. Some answers may be repetitive when viewed as a whole.
accessibility  debate  myths 
5 days ago
Everything I know about freelancing
You’ve probably read a lot about freelancing: Feast and famine. Where to find clients. How much to charge. These topics are fundamental, but it seems like most freelancers burn out before they get over these hurdles. Can freelancing be a stable, long-term career?
freelancing  business  billing  rates  clients 
5 days ago
Learning Resource Roadmap - Front-End Development
This is a visual roadmap for beginners venturing into the World of Software Development. In order not to feel overwhelmed by how much you need to know to be a Front End Developer. This roadmap serves as a guide through out your journey. You can follow through this guide and be assured you are on the right path.
learning  training  frontend  guides  tutorials  free 
5 days ago
Creating an aspect ratio CSS utility
Until we get a native aspect ratio unit in the browser: achieving a controlled height based on a container’s width might seem difficult in a responsive design at first glance. It is actually pretty darn trivial, thanks to good ol’ padding and a touch of positioning magic (read: hacking).
fridayfrontend  css  cssbasics  utility  aspectratio 
12 days ago
Color accessibility: tools and resources to help you design inclusive products
I wrote a quick tweet about teaching the basics of accessibility and colors to design students that go quite some attention. It brought up some interesting discussions on color accessibility (also discussions I didn’t expect about emojis ^^). So I thought I would share with you all the resources, tips and tools I regularly use to build and check the color accessibility of my products in one place. Enjoy.
fridayfrontend  css  cssbasics  design  color  contrast  accessibility  inclusive  colorblind 
12 days ago
How to create clipped, blurred background images in CSS
In this tutorial, we'll take a look at how to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.
fridayfrontend  css  cssbasics  filters  blur 
12 days ago
Animating SVG with CSS
Bring static SVGs to life with just a few lines of CSS!
fridayfrontend  css  cssbasics  svg  animation 
12 days ago
Creating a full bleed CSS utility
Sometimes you want to break your components out of the constraints that they find themselves in. A common situation where this occurs is when you don’t have much control of the container that it exists in, such as a CMS main content area.
fridayfrontend  css  cssbasics  utility  fullbleed  fullwidth  100vw  breakout 
12 days ago
Designing button focus states for better usability
So what would we need to do to have a focus state that people can see? The main guidelines I use are: 1)If you're relying on color to signify a change in state, the color contrast ratio between the default color and the focus color needs to be at least 3:12. 2) Make sure that any outlines are thick enough to actually see. There aren't any official guidelines on this, but at least use something larger than 1px.
fridayfrontend  css  cssbasics  accessibility  contrast  buttons  focus  outline  borders 
12 days ago
10 Website Accessibility Myths Debunked
On the face of it, most people would agree that web accessibility is a good thing. But a lot of myths and misunderstandings persist about what exactly constitutes web accessibility, how necessary it is for individual businesses, the benefits and how easy it is to carry out. We’ve taken it upon ourselves to bust some common myths about web accessibility. Here are 10 things that you might have thought, or heard, about web accessibility that aren’t necessarily true…
fridayfrontend  cssbasics  accessibility  myths 
12 days ago
Are nested grids like nested tables?
A thing I keep hearing, and especially when talking about subgrid is, “nested grids … isn’t that like tables within tables in the olden days?”

It is not. This is why.
fridayfrontend  cssbasics  css  cssgrid  grids  layout  tables  nesting 
12 days ago
Custom Property controlled fluid type sizing
Without getting too much into the weeds, you set a min size and a max size (with optional min and max screen sizes), and the calc-based formula works out a fluid measure, on the fly, based on those 2 locks and the window’s current width.
fridayfrontend  css  cssbasics  customproperties  variables  typography  responsive  locks  fluid  utility 
12 days ago
Get a CSS Custom Property value with JavaScript
CSS Custom Properties are handy for making highly configurable CSS components and themes, but that’s not their only handy use. Sometimes you might want to do something like send some information to some JavaScript.
fridayfrontend  cssbasics  javascript  css  customproperties  variables 
12 days ago
Native image lazy-loading for the web!
What if the browser could avoid loading these offscreen images for you? This would help content in the view-port load quicker, reduce overall network data usage and on lower-end devices, reduce memory usage. Well, I'm happy to share that this will soon be possible with the new loading attribute for images and iframes.
fridayfrontend  html  lazyload  loading  images  iframes  performance 
12 days ago
Edge Goes Chromium: What Does it Mean for Front-End Developers?
There are a lot of features that pre-Chromium Edge doesn’t currently support but are available in other modern browsers and, once they’ve made the switch, we’ll be able to use them. Many of them can’t be polyfilled or worked around, so this release is a big deal.
fridayfrontend  browsers  edge  chrome  blink  features 
12 days ago
Why you should use CSS env()
Having difficulty keeping shared CSS and JavaScript values updated and in sync? Are you faced with seemingly random bugs when updating shared values? In this article you’ll find out how you can use the upcoming CSS env() feature and a PostCSS plugin to share the same variables between CSS and JS, AND store them in a single file.
fridayfrontend  css  env  variables  javascript  environment  customproperties 
12 days ago
You don’t need Lodash -or- How I started loving JavaScript functions
A brief overview of pure replacement functions for Lodash/Underscore.js: This post is a compilation of recipes of the most commonly used Lodash utility functions to help you understand how much can be done using pure Javascript functions.
fridayfrontend  javascript  lodash  underscore  functional  functions  pure  youdontneed  youmightnotneed 
12 days ago
Digging Into The Display Property: The Two Values Of Display
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.
fridayfrontend  display  flexbox  cssgrid  grids  layout  inline  blocks 
12 days ago
Why I Was Wrong About TypeScript, byTJ VanToll
In 2014, I made a strong argument that TypeScript was destined to be irrelevant and that my company should not use it in any of our projects.

In this talk we’ll discuss why I was wrong. Specifically, we’ll take a look at why TypeScript succeeded where other compile-to-JavaScript languages like CoffeeScript and Dart have languished, and what that means for future of the technology. Come to learn the basics of TypeScript, and whether TypeScript is a good fit for your next project.
fridayfrontend  video  javascript  typescript  coffeescript  dart  flow 
12 days ago
The Technical Debt Myth
What isn’t technical debt? Several distinct types of engineering tasks and organizational issues are often lumped under the definition of technical debt — but at their core they’re a natural part of the programming lifecycle. Maintenance work; Lack of process; Quality compromises and questionable design decisions; Contributor frustration; Outgrowing solutions;
techdebt  agile  maintenance  culture  process 
12 days ago
But now the price is paid in the diversity of your team. In order to participate, a Computer Science programming mindset is now pretty much a requirement. For someone coming from a more declarative background—with really good HTML and CSS skills—everything suddenly seems needlessly complex. And as Tantek observed:

Complexity reinforces privilege.

The result is a form of gatekeeping. I don’t think it’s intentional. I don’t think it’s malicious. It’s being done with the best of intentions, in pursuit of efficiency and productivity. But these code decisions are reflected in hiring practices that exclude people with different but equally valuable skills and perspectives.
frontend  javascript  css  css-in-js  react  frameworks  culture  sexism  racism  gatekeeping 
12 days ago
Inline SVG... Cached
Scott Jehl wrote that just because you inline something doesn't mean you can't cache it. Let's see if Scott's idea can extend to SVG icons.
css  svg  caching  javascript  use 
12 days ago
USWDS: The United States Web Design System
A design system for the federal government. We make it easier to build accessible, mobile-friendly government websites for the American public.
styleguide  patternlibrary  designsystem 
12 days ago
Normalizing Typography
To make different typefaces appear the same size (here called the target size) at each step of the scale (below, we see the output of size token 10), the absolute size of each token’s output varies depending on the font family.
styleguide  patternlibrary  designsystem  tokens  typography  normalize  font-size 
12 days ago
New Moon Syntax Theme
I've meticulously designed New Moon to be easy on the eyes with intuitive connections between related elements. It's pleasant for long coding hours in any language, and particularly well suited for HTML, CSS, Sass, PHP, and JavaScript.
colorscheme  themes  editors  vscode  sublime  syntax 
15 days ago
Night Owl Syntax Theme
A VS Code theme for the night owls out there. Now introducing Light Owl theme for daytime usage. Decisions were based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨
themes  editors  vscode  colorscheme  syntax 
15 days ago
Dracula Syntax Theme
A dark theme for Atom, Alfred, Brackets, Emacs, iTerm, Mintty, Notepad++, Slack, Sequel Pro, Sublime Text, Telegram, Textmate,, Ulysses, Vim, Visual Studio Code, Wox, Xcode, and Zsh
themes  editors  vscode  sublime  colorscheme  syntax 
15 days ago
Orange You Accessible?
White on orange appears to be more clear, but black on orange is technically more accessible… The difference between the buttons is complex and opens up additional questions of accessibility. Join me as I qualitatively deconstruct why the white text button is more legible than the black text button, despite what quantitative results such as contrast ratios would suggest.
fridayfrontend  cssbasics  accessibility  orange  color  contrast 
19 days ago
The Hidden Power of CSS Text Align
I would like to shed light on a use case for text-align that some of us including me might not consider getting the benefit of it.
fridayfrontend  css  cssbasics  text-align 
19 days ago
How to create better themes with CSS variables
CSS variables (also known as custom properties) are part of a relatively recent CSS specification and are rapidly growing in popularity thanks to their now-widespread browser support (with a few exceptions that we’ll visit later). They allow us to define values for reuse throughout a CSS file — something that had previously only been possible with preprocessors like Sass and LESS. In this article, we’ll explore what makes CSS variables special and some of the ways in which they can benefit us today.
fridayfrontend  cssbasics  css  customproperties  variables  themes  darkmode 
19 days ago
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!
Let's take a basic on-page link. When clicked, the browser will scroll itself to the element with that ID. But as soon as `position: fixed;` came into play, it became a bit of an issue. The browser will still jump to bring the newly targeted element into view, but that element may be obscured by a fixed position element, which is pretty bad UX.
fridayfrontend  cssbasics  css  html  links  fixed  scroll  scroll-padding  scroll-margin 
19 days ago
Stop using so many divs! An intro to semantic HTML
One of the primary advancements of HTML5 was introducing a standardized set of semantic elements. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. And importantly, since they're standardized, these elements define the document in a way that everyone can use and understand, robots included.
fridayfrontend  cssbasics  html  semantics 
19 days ago
What Are Design Tokens?
I’ve been hearing a lot about design tokens lately, and although I’ve never had to work on a project that’s needed them, I think they’re super interesting and worth jotting down a few notes about. As I understand it, the general idea is this: design tokens are an agnostic way to store variables such as typography, color, and spacing so that your design system can be shared across platforms like iOS, Android, and regular ol’ websites.
fridayfrontend  cssbasics  css  designsystem  tokens  variables  customproperties 
19 days ago
CSS Quick Tip: Control Text Select With user-select Property
On the web selecting text is natural and self-evident. Although it is the basic behavior there are cases when disabling the text select can be useful.
fridayfrontend  css  cssbasics  user-select  select 
19 days ago
Make it hard to screw up driven development
We'll always be screwing up code, but we can also always be finding ways not to… There is probably no practical way to make it impossible to write sloppy, bad code, but it is fascinating to consider how tooling has evolved to make it harder. Let's get all Poka-yoke on development.
fridayfrontend  devtools  linting  testing  validation  codereviews  pullrequest  quality 
19 days ago
Managing Z-Index In A Component-Based Web Application
The z-index property, despite all that’s written about it, is still widely misunderstood and mishandled. Stacking issues in a complex single-page web application can become a major pain. Adhering to some principles, however, we can easily avoid these issues.
fridayfrontend  css  z-index  components 
19 days ago
Web Components will replace your frontend framework
Create your own custom HTML tags that inherit all properties of the HTML elements they extend and which you can use in any supporting browser by simply importing a script. All HTML, CSS and JavaScript defined inside the component is fully scoped to the component itself.  The component will show up as a single HTML tag in your browser's dev tools with its styling and behaviour fully encapsulated, no workarounds, frameworks or transpiling needed.
fridayfrontend  html  css  webcomponents  frameworks 
19 days ago
CSS Houdini Could Change the Way We Write and Manage CSS
The way CSS Houdini works brings two advantages: modularity and configurability. Both are common ways to make our lives as developers easier. We see these concepts often in the JavaScript world, but less-so with CSS world… until now.
fridayfrontend  css  houdini  modular 
19 days ago
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
But life would give me a lesson I would probably never learn otherwise: last October, my abled life took a drastic change—I started to feel extremely dizzy, with a constant sensation of falling or spinning to the right. I was suffering from a bad case of vertigo caused by labyrinthitis that made it impossible to get anything done. In my case, it was a little over a month. Here’s what I learned while going through it.
fridayfrontend  accessibility  animation  reduced-motion  readermode  darkmode 
19 days ago
Animation Performance 101: Browser Under the Hood
Your ultimate guide to animation performance — starting from the ground up.
performance  animation 
19 days ago
Enforcing Accessibility Best Practices with Automatically-Generated IDs
One little trick that I picked up from browsing the Lightning Design System React library was automatically generating ids using a little library called shortid, which generates a unique gobbledygook string like qPbdivDEiH. We can still give developers to define their own id and aria-describedby attributes, but if they fail to enter them those ids are automatically generated. What this looks like in React-land is something like this:
react  javascript  accessibility  forms  id 
19 days ago
Yet Another JavaScript Framework
One developer suggested that the name Array.smoosh be used instead, which eventually lead to the whole incident to be labeled Smooshgate, which was unfortunate because it glossed over a much more interesting debate lurking just under the surface about the very soul of the web. It exposed an essential question about the responsibility of browser makers and developers to provide an accessible and open and forgiving experience for each and every user of the web and each and every builder of the web, even when (maybe especially when) the standards of the web are completely ignored. Put simply, the question was, should we ever break the web?
javascript  jquery  mootools  flatten  flat  smoosh  smooshgate  standards 
19 days ago
you KICK miette? oh! oh! jail for mother!
me, lightly touching miette with the side of my foot: miette move out of the way please so I don’t trip on you

miette, her eyes enormous: you KICK miette? you kick her body like the football? oh! oh! jail for mother! jail for mother for One Thousand Years!!!!
quotes  cats 
25 days ago
The Black Triangle
In his first week at SingleTrac, a video game company that made cult classics like Twisted Metal, Jay Barnson discovered the “black triangle” – a way of describing problems that are giant in engineering scope but don’t tend to be all that impressive to anyone else.
scope  estimation  programming  games 
25 days ago
How to Keep Your CSS Grid Layouts Accessible
CSS Grid makes it possible to create two-dimensional layouts by arranging elements into rows and columns. It allows you to define any aspect of your grid, from the width and height of grid tracks, to grid areas, to the size of gaps. However, CSS Grid can also lead to accessibility issues, mainly for screen reader and keyboard-only users. This guide will help you avoid those issues.
fridayfrontend  cssbasics  css  cssgrid  grids  layout  accessibility  order 
25 days ago
10 HTML Elements You Didn't Know You Needed
today we’ll discover ten HTML elements you might not have known existed in the hopes that you can create more accessible, and structurally-sound web applications.
fridayfrontend  cssbasics  html  audio  blockquote  output  picture  progress  meter  template  time  video  wbr 
25 days ago
5 Tools For Automated Accessibility Audits
Some of the quickest accessibility wins can be simple fixes, but if you don’t know what to look for, they can be hard to spot. Identifying these issues is important, which is why there is a whole slew of web accessibility checkers available to help identify these problems. I want to introduce you to a few tools that you might find helpful in identifying accessibility issues. Just remember though, that automated tests can only catch a portion of all issues.
fridayfrontend  cssbasics  accessibility  automation  testing  wave  sortsite  axe  pa11y  tota11y  tools 
25 days ago
How to create a darklight mode switch in CSS and Javascript
In this tutorial, we'll take a look at how to create a dark theme for your web project, and how to switch from a default (light) theme to a dark one with the help of CSS Custom Properties.
fridayfrontend  cssbasics  css  javascript  darkmode  customproperties  variables 
25 days ago
Reduced Position Sticky
Last night I added a reduced motion media query for the header of the primary content of my website. I am using position: sticky (and position: -webkit-sticky for Safari) to make the content obscure the header, on scroll. Since such behavior could be considered a form of parallax scrolling, I am cognizant of the fact it may be a triggering issue for some people. Therefore, I want to respect those who have opted to prefer reduced motion.
fridayfrontend  cssbasics  css  sticky  reduced-motion  accessibility 
25 days ago
Building a dependency-free site in 2019
I didn’t want to spend a whole lot of time configuring a new set of tools for what I intended to be a very simple single-page site. I didn’t plan on using Javascript, although I wouldn’t rule this out down the road (as progressive enhancement). I wanted to get my site built and published as quickly as possible, so that I’d have something to point people to if they want to know what I do. But I also wanted to be able to maintain it relatively easy – add extra speaking engagements, articles and bio updates when the need arises. It was important to me that re-visiting the site a little way down the road wouldn’t require a whole new re-configuration of a complex set of tools – I didn’t want to spend an hour updating dependencies before I could do any actual work. I want my tools to get out of the way so I can concentrate on the things I love: HTML and CSS.
fridayfrontend  cssbasics  css  javascript  dependencies  sass  bem 
25 days ago
How To Align Things In CSS
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.
fridayfrontend  cssbasics  css  alignment  vertical-align  line-height  flexbox  box-alignment 
25 days ago
Simple & Boring
Simplicity is a funny adjective in web design and development. I'm sure it's a quoted goal for just about every project ever done. Nobody walks into a kickoff meeting like, "Hey team, design something complicated for me. Oh, and make sure the implementation is convoluted as well. Over-engineer that sucker, would ya?"
fridayfrontend  architecture  design  simplicity  complexity  maintainability 
25 days ago
Responsible JavaScript: Part I
By the numbers, JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that’s merely what’s transferred. Like other text-based resources, JavaScript is almost always served compressed—but that might be the only thing we’re getting consistently right in its delivery.
fridayfrontend  javascript  performance 
25 days ago
« earlier      
5e accessibility advice agile alignment analytics animation api architecture aria async atomic awesome backgrounds bem bestpractices bias books borders browsers burnout business buttons cards careers characters charts cheatsheet checkboxes checklist chrome clip-path code color comics comments communication components conferences config contrast critical css css-in-js cssbasics cssgrid culture customproperties defaults demos design designsystem development devtools discrimination diversity dnd documentation earthquakes editors email emergency engineering enhancement es6 fantasy features feminism filters flexbox fluid focus fonts forms frameworks free fridayfrontend frontend functions games gender generator git github google gradients grids grunt guidelines harrassment health highlight hiring history howto html icons ie images inclusive inputs inspiration interviews ios javascript jobs jquery keyboard language layout leadership learning less links lint lists mac magic maintainability management maps mediaqueries meetings microsoft mixins mobile modular movies myths names navigation npm oocss optimization osx parenting patternlibrary patterns performance photos plugins politics position presentation process productivity programming progressive qa questions quotes racism radio react readability recipes reference remote reset responsive reviews rpgs rules rwd safari salary sass science scifi screenreaders scripts scroll scrum search security selectors semantics sex sexism shapes slides smacss social space speaking standards startrek starwars stock styleguide sublime support supports svg syntax tables tech television templates testing themes tips tools training transforms transitions tutorials twitter typography ui usability ux validation variables video viewport vue webapps webfonts windows wordpress work worklifebalance worldbuilding writing

Copy this bookmark: