How to create auto-sized columns using CSS Grid and setting a minimum column width.
How to create auto-sized columns using CSS Grid and setting a minimum column width.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
2 days ago
The Curious Case of the Render Blocking Resource
We were recently notified by a client that when he visited his department site from China, the site would take a very long time to load. Everything seemed fine on first inspection, so we tested the site using WebPageTest with the Beijing, China (Firefox) location. After waiting in a fairly long queue, one glance at the waterfall made the issue clear.
fridayfrontend  performance  cssbasics 
2 days ago
UI Interactions
UI interactions using one element and pure CSS. Because we love UI interactions and CSS!
fridayfrontend  css  cssbasics  animation  hamburger  icons  ui  ux 
2 days ago
Various Methods for Expanding a Box While Preserving the Border Radius
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
fridayfrontend  css  cssbasics  border-radius  animation 
2 days ago
Under-Engineered Text Boxen
This is the latest, and not last, in my informal series of posts on under-engineered controls. Generally I am looking at the minimum amount of CSS necessary to style native HTML controls while also retaining or improving accessibility and honoring different user preferences.
fridayfrontend  html  forms  textarea  inputs  cssbasics  css 
2 days ago
HTML Audio Tag: Cheat Sheet and Examples
Introduced with HTML5, the <audio> tag defines a sound and is used to embed audio content such as music or other streams in HTML documents. As of 2019, <audio> is widely supported among modern browsers. Internet Explorer 8 doesn’t support it, as well as earlier versions.
fridayfrontend  html  audio  cssbasics 
2 days ago
Inline validation is problematic
Live inline validation tells users whether what they type is valid as they type. Theoretically it's easier to fix errors as they occur instead of waiting until after form submission. But inline validation is problematic for many reasons. In this article I'll explain all the problems this causes and what to do instead.
fridayfrontend  forms  css  validation  accessibility 
2 days ago
Using Custom Properties to Wrangle Variations in Keyframe Animations
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would be so nice to drop yet one more dependency and go with vanilla CSS.

Well, I found a way to account for variations within a keyframe animation using nothing but CSS and it’s thanks to custom properties! Let’s learn a little more about how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties.
fridayfrontend  css  cssbasics  animation  keyframes  variables  customproperties 
2 days ago
Table with Expando Rows
I regularly work on projects with HTML tables that have been pushed to the edge with styles, scripts, and widget features. A common pattern is where rows are hidden until the user opts to show them. Unfortunately, the pattern is often over-complicated with unnecessary script and styles that regularly break the table semantics or fail to work across all contexts.
fridayfrontend  html  tables  cssbasics  expanding 
2 days ago
CSS Grid: Magazine Layouts
Wanted to do some magazine layouts, so I decided to create a Marvel Magazine. I regret everything.

Responsiveness may not be perfect.
fridayfrontend  css  cssbasics  magazine  layout  avengers  movies  grids  cssgrid 
2 days ago
Understanding Specificity in CSS
Specificity in CSS refers to the how browsers determine the importance, relevance, and “seniority” of CSS styles. Here we’ll look at all the CSS styling types and use the company analogy to understand how competing styles get resolved.
fridayfrontend  css  cssbasics  specificity 
2 days ago
Fast Static Sites with Netlify and AnyMod
In about 10 minutes, we'll set up a workflow that makes static sites dead simple.

You'll get the following:

Free https
Free or cheap hosting
Build sites quickly
Edit with live reload
Edit when you’ve forgotten everything in 6 months
fridayfrontend  cssbasics  jamstack  netlify  anymod 
2 days ago
How to Fail at Accessibility
So, let’s flip the script, and dive into — “How not to fail at accessibility”
We’re going to cover three main areas:
Testing — how do you know if your website is or is not accessible currently?
Building — once you’ve identified some bugs, how do you code for accessibility?
Process — how can you improve your process to prevent bugs in the first place?
fridayfrontend  accessibility  cssbasics  testing 
2 days ago
Two Browsers Walked Into a Scrollbar
The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document. But that’s not all a scrollbar can do! This modest workhorse also provides a meaningful hint at how long the document is, pulling double duty as a document progress bar too.

The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height.
fridayfrontend  cssbasics  css  html  scroll  scrollbars 
2 days ago
(Why) Some HTML is "optional"
Chris Coyier blogged recently on weird looking HTML. It's a nice short post and I'd say it's worth knowing these optional features (potentially known as defaults). My favourite optional is <script> and not having to include the type attribute.

But Chris' first example is the most common, the optional closing </p> tag. What (I think) is an interesting question is: why?
fridayfrontend  cssbasics  html  optional 
2 days ago
Some HTML is "Optional"
There is a variety of HTML that you can just leave out of the source HTML and it's still valid markup.
fridayfrontend  cssbasics  html  optional 
2 days ago
Adding visually hidden headings to complete a page's outline
Not only the main content of a web page needs to be marked up using headings, but also other elements like header, navigation, footer, etc. As the visual design usually does not include those headings, they need to be visually hidden by moving them off-screen.
fridayfrontend  accessibility  cssbasics  hidden  aria 
2 days ago
CSS Security Vulnerabilities
Don't read that headline and get worried. I don't think CSS is a particularly dangerous security concern and, for the most part, I don't think you need to worry about it.

But every once in a while, articles tend to circulate and get some attention as to the possibilities of what CSS can do that might surprise or worry you.

Here's a little roundup.
fridayfrontend  security  css  cssbasics 
2 days ago
Can I email… Support tables for HTML and CSS in emails
Like, but dedicated to support in email clients.
fridayfrontend  email  css  html  support  browsers 
2 days ago
Ghost Buttons with Directional Awareness in CSS
It would surprise me if you'd never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.
fridayfrontend  css  buttons  animation  ghost 
2 days ago
5G Will Definitely Make the Web Slower, Maybe
Faster networks should fix our performance problems, but so far, they have had an interesting if unintentional impact on the web. This is because historically, faster network speed has enabled developers to deliver more code to users—in particular, more JavaScript code.
fridayfrontend  javascript  performance  5g 
2 days ago
Logical Operations with CSS Variables
Very often, while using switch variables (a variable that's either 0 or 1), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function. This article is going to show you what calc() formulas we need to use for each logical operation and explain how and why they are used with a couple of use cases that lead to the writing of this article.
fridayfrontend  css  variables  customproperties  calc  logic 
2 days ago
Cooperative Design Systems
Stop me if you’ve heard this one before: There once was an organization whose products lacked harmony. Its teams struggled to embrace a shared vision, continuously reinventing wheels of infinitely varied size and shape. Then one day they all joined hands and created the Design System, addressing everyone’s needs and forever banishing the dissonance they’d felt for so long.

Unfortunately, the reality can be far more complicated.
fridayfrontend  designsystem  styleguide  patternlibrary  design  components 
2 days ago
Take Back Your Web, by Tantek Çelik
We used to control our online identities, content, and experience. We now share Twitter names instead of domains; even web developers tweet and post on Medium instead of their own sites. We scroll social media and feel empty instead of reading news & blogs to feel informed and connected. Algorithmic feeds amplify rage & conspiracies, enabling tribal ad-targeting to polarise and spread misinformation, threatening democracy itself.

What happened? And what are we doing to fix it? That's a big question that will require all of us, our communities, our employers, to shift. I don't want to wait, and you probably don't either.

What can you do for yourself, today? Own your domain. Own your content. Own your social connections. Own your reading experience. IndieWeb services, tools, and standards enable you to take back your web.
fridayfrontend  video  algorithms  social  culture  indieweb 
2 days ago
Simplify your JavaScript – Use .some() and .find() - poka-techblog - Medium
Following the insane amount of views on my article on .map(), .reduce(), and .filter(), I thought I should share two more array methods that are useful tools in a JavaScript developer’s arsenal: .some() and .find().
javascript  some  find  arrays 
2 days ago
image-actions · Actions · GitHub Marketplace
Image actions will automatically compress jpeg and png images in GitHub Pull Requests.
github  actions  images  compression  optimization  performance 
2 days ago
Simplicity (II)
This dependency hell is also the reason why old projects are almost like sealed capsules. You can hardly let a project lie around for more than a year, because afterwards it's probably broken.
npm  dependencies  packages  javascript 
2 days ago
A Senior Engineer's CheckList
This is a simple checklist for the success of a senior engineer, and while it is useful to any software engineer, it is especially useful to senior engineers.
programming  engineering  senior  development  careers  jobs  culture  management  leadership 
2 days ago
Promises in JavaScript
I’m super late to the party here, but I get enough requests for an article about JavaScript Promises that I figured it’s probably time I write one.
javascript  promises 
2 days ago
Null variables in Sass
As you can see, the Sass compiler will ignore the entire property: value; declaration because the value is null. But, if someone customized this before compilation by overriding that default value, the CSS would compile. Here’s an example of how you’d override that default variable.
fridayfrontend  css  cssbasics  sass  null  variables 
9 days ago
Need to scroll to the top of the page?
Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html> element. So like...
fridayfrontend  cssbasics  html  scroll  accessibility 
9 days ago
Anchor Tags Can Contain Block-Level Elements As Of HTML5
This means that I can use just about anything that makes sense inside of an Anchor tag. To demonstrate, here's a "User Card" that is an Anchor tag that contains block-level elements:
fridayfrontend  html  links  accessibility  cssbasics 
9 days ago
caption-side controls the position of a table caption
Today I came across a tweet by CSS-Tricks. It shares the behavior of the CSS property caption-side. I've never seen caption-side before.

The property can be used when you're dealing with HTML tables. Tables could potentially include a caption element. The clue with caption elements is that they have to be the first element in the table.

This rule makes them usually appear in the top region of the table and gives no options for a different position.
fridayfrontend  css  cssbasics  html  tables  caption  caption-side 
9 days ago
Gradient Magic
A Gallery of Fantastic and Unique CSS Gradients
fridayfrontend  css  cssbasics  gradients 
9 days ago
Multiline truncated text with "show more" button (with just CSS)
TL;DR: I built a CSS-only (~ish) solution for multiline truncated text with read more button.
fridayfrontend  css  cssbasics  truncate  text-overflow  ellipsis  line-clamp  clamp 
9 days ago
Overflow And Data Loss In CSS
In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.
fridayfrontend  css  cssbasics  overflow  layout 
9 days ago
CSS attr() Function
Using attr() function in our stylesheets, we can get any attribute from any HTML element and display it in the ::before or ::after pseudo-element.
fridayfrontend  cssbasics  attr  css  before  after  generated  content 
9 days ago
Recreating Netlify's Neat-o Sliding Button Effect
Have you seen Netlify's press page? It's one of those places where you can snag a download of the company's logo. I was looking for it this morning because I needed the logo to use as a featured image for a post here on CSS-Tricks.

Well, I noticed they have these pretty looking buttons to download the logo. They're small and sharp. They grab attention but aren't in the way.
fridayfrontend  css  cssbasics  buttons 
9 days ago
VuePress: Documentation Made Easy
One of the most overlooked aspects of creating and/or maintaining any software library is good documentation. Luckily for you, a new tool on the market is here to make it easy for you to create great documentation for your projects.
fridayfrontend  vue  vuepress  documentation  styleguide  patternlibrary  designsystem 
9 days ago
Less Data Doesn't Mean a Lesser Experience
One of the things I think is so great about the Save-Data feature is that it gives companies some sort of control over how their brand is experienced in data-constrained environments. They’re not relying on a proxy service to do a bunch of manipulation on their behalf, hoping it turns out alright. Instead, they have an opportunity to be proactive and careful consider how they can provide a low-data experience that still reflects their brand in a positive light. There are endless ways you could do this without causing the experience to feel lesser in any way. Here are a few ideas.
fridayfrontend  save-data  performance 
9 days ago
The Ultimate Guide to Not F#!@ing Up Push Notifications
TLdNR: push notifications became yet another way to artificially re-engage users and force content down their throat. That’s why so many of them hate it. But there’s some interesting use cases for it. Here is some advice on how to stop ruining it for the rest of us. Spoiler alert: stop asking for permission on page load (and make them useful for users)
fridayfrontend  push  pushnotifications  notifications 
9 days ago
Apple Just Shipped Web Components to Production and You Probably Missed It
Let that sink in: Apple just deployed into production nearly 50 web components powering a major app they have a significant amount of revenue and strategic value riding on. You can't say that "no one uses Web Components" or they are "solving problems that don't exist or have been solved better in user land" with a straight face anymore.
fridayfrontend  webcomponents  apple  components 
9 days ago
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.

If you saw that awesome color-changing-couch demo going around, this is the full article explaining the technique.
fridayfrontend  css  svg  color  mix-blend-mode  filters 
9 days ago
Refactoring UI, by Steve Schoger
Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.
fridayfrontend  design  video  refactoring  ux  ui  bootstrap 
9 days ago
UX accessibility for elderly — 12 principles
While working on a project the other day I dove into this topic quite deeply, and surprisingly I managed to find plenty of information on designing for the heavily visually impaired, or motorically dysfunctional. Don’t get me wrong, it’s absolutely great we account for that, but it was rather challenging to find guides on how to design for something, that even more of us will experience sooner or later — senility.
fridayfrontend  cssbasics  accessibility 
15 days ago
The junior developer’s guide to writing super clean and readable code
Writing code is one thing, but writing clean, readable code is another thing. But what is “clean code?” I’ve created this short clean code for beginners guide to help you on your way to mastering and understanding the art of clean code.
fridayfrontend  bestpractices  cssbasics  clean  programming  javascript 
15 days ago
How to Accessibly Split Text
I recently published an article on animating variable fonts with the help of the Javascript library Splitting.js. A few people asked about the accessibility implications of this, so in this article we’ll take a look at why splitting a string of text can be problematic from an accessibility point of view, and what we can do to make sure that split text is accessible to everyone.
fridayfrontend  cssbasics  javascript  accessibility  splitting 
15 days ago
Using rel="preconnect" to establish network connections early and increase performance
Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
fridayfrontend  performance  cssbasics  preconnect 
15 days ago
Styling Links with Real Underlines
But the web is different. Hyperlinks are the defining feature of the internet; and from the internet’s inception, they have been underlined. It’s a universally understood convention. The meaning is crystal clear — an underline means a link.
fridayfrontend  css  cssbasics  underline  text-decoration 
15 days ago
Accessibility Strategies for Your Content Team
We wanted to share some tips and tools to help empower content creators to take ownership of their role in accessibility. We’ll be looking at accessibility as it applies to any written content, basic page/content layout, PDFs, and video. We’ll also talk about the Content Creator’s role in promoting their organization’s overall accessibility by acting as QA for their organization’s website and other public-facing properties and picking accessible 3rd party tools.
fridayfrontend  accessibility  cssbasics 
15 days ago
A Glassy (and Classy) Text Effect
The landing page for Apple Arcade has a cool effect where some "white" text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It's not like knockout text where you see the exact background. In this case, live video is playing underneath. It's like if you were to blur the video and then show that blurry video through the letters.

Well, that's exactly what's happening.
fridayfrontend  css  cssbasics  apple  backdrop-filter  clip-path 
15 days ago
Everything I Know About Style Guides, Design Systems, and Component Libraries
For the better part of the last year, I've been investing heavily in front-end development and design. When I started my new role at Hy-Vee, I identified a need for a component library and created it. Since then, I've learned a lot about style guides, design systems, component libraries, and their best practices. This post will be a deep-dive on everything I've learned in the past year.
fridayfrontend  cssbasics  css  styleguide  patternlibrary  designsystem  components 
15 days ago
Nested Gradients with background-clip
I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to a post over here by Ana Tudor.
fridayfrontend  css  cssbasics  backgrounds  background-clip  gradients 
15 days ago
Emulate JS onclick with CSS
The onclick event is one of the most HTML Attribute used to allow interaction with elements on our page. How can I manipulate the state of an element by interacting with a specific object and keep that change? We can use the HTML label and input tag to achieve our goal.
fridayfrontend  javascript  css  cssbasics  onclick  label  checkboxes 
15 days ago
Creating a Maintainable Icon System with Sass
One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages. But there are some drawbacks to this technique as well. We're going to address both of these drawbacks in this article.
fridayfrontend  css  cssbasics  svg  icons  sass  maps 
15 days ago
Where did CSS named colours come from?
So I didn’t manage to track down the actual reason why Sinclair Paint Co. named the white with a slightly reddish hue, “snow”, but I did find out a whole lot of interesting and entertaining things about colours.
fridayfrontend  css  cssbasics  color  x11  history  snow 
15 days ago
The problem with tooltips and what to do instead
Tooltips are not only hard to use, but they're normally totally unnecessary. Learn why that is and what you could do instead.
fridayfrontend  css  cssbasics  javascript  tooltips  accessibility 
15 days ago
Can you rotate the cursor in CSS?
Kinda! There is no simple or standard way to do it, but it's possible. You can change the cursor to different built-in native versions with CSS with the cursor property, but that doesn't help much here. You can also use that property to set a static image as the cursor. But again that doesn't help much because you can't rotate it once it's there.

The trick is to totally hide the cursor with cursor: none; and replace it with your own element.
fridayfrontend  css  cssbasics  cursors 
15 days ago
Tooltips in the time of WCAG 2.1
A review of the history and current state of tooltip accessibility. Or: everything you didn't know you needed to know before making a tooltip.
fridayfrontend  tooltips  css  html  aria  accessibility 
15 days ago
Efficiently load third-party JavaScript
Avoid the common pitfalls of using third-party scripts to improve load times and user experience.
fridayfrontend  performance  javascript  async  defer  preconnect  lazyload 
15 days ago
How to get the value of phone notches/environment variables `env()` in JavaScript (from CSS)
Thankfully, Dean Jackson of WebKit came through with a lovely clean solution that seems so obvious once you hear it! You can set the values of an environment variable to a CSS Custom Property and then just read that value in with JavaScript. Brilliant! It’s almost like someone had thought this through originally!
fridayfrontend  css  javascript  ios  iphone  notch  safe-area-inset  env  customproperties  variables 
15 days ago
Faster Image Loading With Embedded Image Previews
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
fridayfrontend  performance  images  progressive  lqip  jpg  ajax 
15 days ago
Why I have a problem with React the library and spend a lot of time talking to my therapist
So, #ReactGate has become a thing. I'm not going to try and describe the events that led to these particular events. Suffice to say it has raised serious issues about how the tech community tolerates and allows the far right and white supremacists within its ranks. But I do want to present my own particular reasons for not enjoying the principles and philosophy behind React and how I do not therefore find the React community a pleasant place. These reasons are partially related to the events above. But not totally.
fridayfrontend  react  javascript  reactgate  performance  facebook  codeofconduct  culture  sexism  racism 
15 days ago
Do we really need this JAMstack thing? And what even is it? by Phil Hawksworth
In this session, we’ll demystify this buzzwordy term, and explore how this approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security. We’ll see how the JAMstack is placing more power, more confidence, and more capabilities in the hands of designers, authors, and front-end developers. And we’ll show how serverless functions can augment this stack to let us rapidly build interfaces and APIs to power sites that we’d be brave enough to share with the world.
fridayfrontend  video  jamstack  javascript  serverless  api 
15 days ago
How to Create a Dark Mode in Sass
A Scalable Method for Color Theming with Developer Experience in Mind
fridayfrontend  css  cssbasics  darkmode  variables 
24 days ago
Creating Lined Paper
My goal of this tutorial is to keep things as plain as possible so that it might be easier for beginning developers, and developers who may not have worked with my specific stack, to dig into quickly. Of course, feel free to use whatever technology, colors, fonts, etc. you like! That being said, let's get started.
fridayfrontend  css  cssbasics  paper  lines 
24 days ago
CSS Units Explained
CSS has several options for which units to use when determining the size of various CSS properties. Learning all your options for CSS units can be key for styling in a way that’s easy to manage and looks great on any screen.
fridayfrontend  css  cssbasics  units 
24 days ago
Footer always at the bottom - Flexbox
Problem: When a web page doesn't have enough content to fit the screen, the footer doesn't stay at the bottom so it ends up looking weird.

Solution: Do the layout using flex columns.
fridayfrontend  css  cssbasics  layout  flexbox  footer 
24 days ago
Exploring prefers-reduced-motion
Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don't want your site to cause motion sickness and dizziness, right?

Luckily, most modern browsers now support prefers-reduced-motion CSS media query. Which means you can skip animations for people who don't want them.
fridayfrontend  css  cssbasics  animation  reduced-motion  accessibility 
24 days ago
Getting Started with CSS Grid: Three Coding Approaches
A step-by-step tutorial on understanding and building two-dimensional layouts using Grid’s flexible syntax.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
24 days ago
Optional HTML: Everything You Need to Know
Reasons to keep optional code around typically boil down to understandability, whereas reasons to leave out optional code converge on performance. The two don’t need to be at odds with each other when optional code is worked with in our editors and kept in our repositories but pruned for production.

What code—here: what HTML code—is optional, however? This article gives an overview over everything optional other than extraneous whitespace and anything standard minifiers handle because there’s much to omit and it’s good for us.
fridayfrontend  cssbasics  html 
24 days ago
Getting Started with CSS Grid: Anatomy
An overview of when to use CSS Grid, all the parts that make it whole, and how to inspect your layouts.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
24 days ago
Bite Sized Basics: Box Sizing - CSS From Scratch
If there’s ever one really important thing to remember when writing CSS is that everything is a box. Regardless of how it looks visually—it’s still a box.
fridayfrontend  css  cssbasics  boxmodel  box-sizing 
24 days ago
Can you view print stylesheets applied directly in the browser?
Yep. Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it.
fridayfrontend  cssbasics  browsers  print 
24 days ago
CSS Can Do This... And It's Terrifying!
Did you know you can do user tracking of clicks/mouse movements/etc. only with CSS? How about creating a keylogger? Yep, all that's possible with CSS.
fridayfrontend  css  security  keyloggers  tracking  emoji 
24 days ago
Using a Mixin to Take the Math out of Responsive Font Sizes
Responsive Font Size (RFS) is a Sass mixin that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport. RFS makes writing code for fluid type feel a lot like writing native CSS directly in the stylesheets you’re already working in — only without having to wrangle and manage a bunch of media queries.
fridayfrontend  css  sass  mixins  responsive  typography  fluid 
24 days ago
JavaScript to Know for React
One of the things I love most about React compared to other frameworks that I've used is how exposed you are to JavaScript when you're using it. Because of this, learning JavaScript features is really advisable for you to be effective building applications with React. So here are a few JavaScript features I'd recommend you spend some time learning so you can be as effective as possible working with React.
fridayfrontend  react  javascript 
24 days ago
A CSS Houdini library for making your site a little more #extra.
fridayfrontend  css  houdini  paint 
24 days ago
What Tumblr Taught Me About Accessibility
As someone who was a teenager during its peak, Tumblr has had an undeniable influence on my life. Like many people my age, my first exposure to the concepts of ‘accessibility’ and ‘ableism’ was through Tumblr. In sharp contrast to the web accessibility community, where we often focus on technical details, meeting clear criterion and legal compliance, Tumblr’s disability community focused on more human facets of accessibility by practicing accessibility in a variety of creative ways. Even when presented with access barriers created by the inaccessibility of Tumblr as a platform, Tumblr as a community has found unique ways to support disabled users. As developers, we need to learn from our mistakes by finding out where our users compensate for our deficiencies, and learn from how disabled communities support themselves.
fridayfrontend  tumblr  accessibility 
24 days ago
« earlier      
5e accessibility advice agile alignment analytics animation api architecture aria async atomic 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 darkmode demos design designsystem development devtools discrimination diversity dnd documentation editors email engineering enhancement fantasy features feminism filters flexbox fluid focus fonts forms frameworks free fridayfrontend frontend games gender generator git github google gradients grids guidelines harrassment health hiring history hover howto html icons ie images inclusive inputs inspiration interviews ios javascript jobs jquery keyboard language layout lazyload leadership learning links lint lists mac magic maintainability management maps mediaqueries meetings mixins mobile modular movies myths names navigation npm oocss optimization osx overflow parenting patternlibrary patterns performance photos plugins politics position presentation process productivity programming progressive qa quotes racism radio react recipes reference remote responsive reviews rpgs rules rwd safari salary sass science scifi screenreaders scripts scroll scrum security selectors semantics sexism shapes slides smacss social space speaking standards 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 workflow worklifebalance writing

Copy this bookmark: