fridayfrontend   1883

« earlier    

Minify Your SVGs
How I optimize SVGs for this blog and why you probably should, too.
fridayfrontend  svg  cssbasics  svgo  optimization  performance 
5 hours ago by spaceninja
The Differing Perspectives on CSS-in-JS
Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the <font> tag and such.)

Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most JavaScript frameworks, has proven successful to them, so wrapping in styles seems like a natural fit. Vue's single file components are an archetype here.
fridayfrontend  css  cssbasics  css-in-js 
5 hours ago by spaceninja
Why You Shouldn't Gray Out Disabled Buttons
When designing disabled buttons, adjust the opacity, not the color. The optimal opacity values will vary based on your background color. But a rule of thumb is to aim for an opacity level of 40% or below. It’s important to make the opacity level low enough, or some users may still view the button as enabled.
fridayfrontend  accessibility  css  cssbasics  disabled  forms 
5 hours ago by spaceninja
Staggered CSS Transitions
But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing? The trick lies within transition-delay and applying a slightly different delay to each item.
fridayfrontend  css  cssbasics  animation  transitions  transition-delay 
5 hours ago by spaceninja
Learning CSS by reading specs
Note: after writing this whole thing I realised it went on longer than I expected, so the TL:DR of it is, don’t be wary of reading CSS specifications. They help immensely in understanding CSS. Also, you, yes YOU, can contribute to the development of CSS as well.
fridayfrontend  css  cssbasics  specs  learning 
5 hours ago by spaceninja
Accessibility and web performance are not features, they’re the baseline
Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.
fridayfrontend  accessibility  performance  cssbasics 
5 hours ago by spaceninja
Reducing Motion to Improve Accessibility
Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion. My major takeaways from the web accessibility perspective: Be careful with your animations; Be careful with your gifs; Use prefers-reduced-motion; Allow a user to control reduce motion;
fridayfrontend  css  cssbasics  accessibility  reduced-motion 
5 hours ago by spaceninja
Making Cloud.typography Fast(er)
What issues does Hoefler&Co’s Cloud.typography introduce, and how can we mitigate them?
fridayfrontend  performance  typography  webfonts 
6 hours ago by spaceninja
Unexpected accessibility tips
8+1 unexpected but practical tips for testing accessibility and inclusive design: Test on the train; Ask people in a hurry; Hold your mobile with straight arms; Test on a projector; Take off your glasses; Wear gloves; Use only the keyboard; Test on a low-spec device; Disable JS, CSS, and images;
fridayfrontend  accessibility  testing 
6 hours ago by spaceninja
Sub-pixel rendering and borders
It is highly probable that the reason using thin seems to resolve the disappearing border issue is that each browser resolves the keyword in a manner that fits its own rendering engine’s calculations. So even though thin and 1px should have the same result, using thin is a better option.
fridayfrontend  css  sub-pixel  borders  browsers 
6 hours ago by spaceninja
Handling Unused CSS In Sass To Improve Performance
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, we’ll explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation.
fridayfrontend  css  performance  sass  unused 
6 hours ago by spaceninja
Contextual Utility Classes for Color with Custom Properties
In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away. With that said, I am sure I am not alone when I say I'd like to style some links based on the context, and invert colors when the link is hovered or in focus. With CSS custom properties and a few, simple utility classes, we can achieve a pretty powerful result, thanks to the cascading nature of our styles:
fridayfrontend  css  customproperties  variables  utility  color-mod  currentcolor 
6 hours ago by spaceninja
Ooops, I guess we're full-stack developers now, by Chris Coyier
It's cool to see the tech around our job evolve to the point that we can reach our arms around the whole thing. It's worthy of some concern when we feel like complication of web technology feels like it's raising the barrier to entry. That happens sometimes and it's not great. But it's also worthy of cheer when web technology becomes simple enough that people can build things from start to finish all by themselves. That's pretty cool.

While we're being all productive and amazing, let's just remember that doing a good job is everybodies job.

- Good UX is everyone's job
- Good performance is everyone's job
- Good security is everyone's job
- Good accessibility is everyone's job
- Doing right by the people that use your website is everyone's job

Even if you aren't writing the code that directly affects any of those things, you care about them and fight for them to be handled well.
fridayfrontend  video  css  javascript  react  jamstack  serverless  frontend  programming 
6 hours ago by spaceninja
This Ain’t Disney: A practical guide to CSS transitions and animations
Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoy a stiff, snappy UI? Can anyone admit they’re not delighted when a component slides into view and appears to slow down before coming to a complete stop? There’s something nice about that. So what is that special touch, and why is it so hard to reproduce?
fridayfrontend  css  cssbasics  animation 
7 days ago by spaceninja
The Sidebar: Every Layout
The Sidebar layout is named for the element that forms the diminutive sidebar: the narrower of two adjacent elements. It is a quantum layout, existing simultaneously in one of the two configurations—horizontal and vertical—illustrated below. Which configuration is adopted is not known at the time of conception, and is dependent entirely on the space it is afforded when placed within a parent container.
fridayfrontend  css  cssbasics  layout  sidebars  flexbox 
7 days ago by spaceninja
Lazy load embedded YouTube videos
So I thought what if instead of the actual video I showed just its cover linked to the video? It would still kinda look like an embedded video but it would require only a single image upfront. Thankfully YouTube has an URL schema for video thumbnails.
fridayfrontend  cssbasics  iframes  html  performance  youtube 
7 days ago by spaceninja
Custom Underlines with SVG
I was browsing the web and an interesting effect caught my eye on a website. It’s a custom link underline effect that is using hardcoded SVG.
fridayfrontend  css  cssbasics  svg  underline 
7 days ago by spaceninja
CSS :empty Selector
Often, we want to style elements that contain content. How about when an element has no children or text at all? Easy, you can use the :empty selector 🤩
fridayfrontend  css  cssbasics  empty 
7 days ago by spaceninja
Can you nest @media and @support queries?
Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
fridayfrontend  css  cssbasics  supports  mediaqueries 
7 days ago by spaceninja
Update on accessibility improvements we’re making to Chorus
Over the last few months, we’ve been changing that. The product team’s been hard at work improving the accessibility of Chorus and every website powered by it. We’ve been working to ensure our websites are more usable for everyone, regardless of which browsers, devices, and assistive technologies they rely on. To reach our goal, we’ve been making improvements to our design system, and we’ve been creating new resources and training to inform our practices. In this post, we’ll share what we’ve done so far, how your experience of browsing our websites might be improved, and—most importantly—we’ll talk about the work that’s still ahead of us.
fridayfrontend  accessibility  contrast  alt  forms  screenreaders  vox 
7 days ago by spaceninja

« earlier    

related tags

absolute  abstraction  abuse  accessibility  after  alt  analytics  animation  architecture  aria-disabled  aria  aspectratio  async  at-rules  atomic  auto-play  backgrounds  before  bestpractices  blind  block  border-box  borders  break-word  browsers  buttons  calc  calendars  chrome  clamp  clip-path  cms  color-mod  columns  communication  community  components  context  contrast  counters  css-in-js  css  cssbasics  cssgrid  culture  currentcolor  customelements  customproperties  datalist  date  datepicker  debugging  design  designsystem  development  devtools  disabled  diversity  django  domains  domesticviolence  edge  ellipsis  empty  ethics  fallback  featurequeries  features  feedback  feminism  firefox  flex-basis  flex-shrink  flexbox  focus-within  focus  font-smoothing  forms  frameworks  frontend  gatsby  generated  glass  governance  gradients  greatdivide  greensock  grid-auto-flow  grids  guidelines  harrassment  holy  holygrail  hosting  html  hyphens  icons  ie  ie11  ie6  ie8  iframes  images  inclusive  inline  inputs  internationalization  intersection-observer  jamstack  javascript  labels  layout  lazyload  learning  line-break  line-clamp  links  linux  lists  loading  localization  margins  markers  mediaqueries  min  minmax  mobile  monoculture  multicol  netlify  not  nowrap  optimization  options  order  overflow-wrap  overflow  padding  performance  placeholders  plugins  position  privilege  programming  pseudo-elements  pwa  px  racism  react  recipes  reduced-motion  regression  responsive  roles  rules  sass  screenreaders  search  select  semantics  seo  serverless  sexism  sidebars  siliconvalley  specs  sticky  sub-pixel  subgrid  support  supports  svg  svgo  tables  technology  testing  text-decoration-skip-ink  text-decoration-thickness  text-underline-offset  titles  tokens  tools  transition-delay  transitions  translation  truncate  ttfb  tutorial  typography  underline  unused  utility  vanilla  variables  video  violence  vox  vue  webfonts  white-space  word-wrap  wordpress  writing-mode  youtube 

Copy this bookmark: