spaceninja + fridayfrontend   1880

Minify Your SVGs
How I optimize SVGs for this blog and why you probably should, too.
fridayfrontend  svg  cssbasics  svgo  optimization  performance 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
4 days 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 
11 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 
11 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 
11 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 
11 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 
11 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 
11 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 
11 days ago by spaceninja
Creating an SVG path drawing animation.
Last week I posted my new logo animation on twitter. Amongst everyone saying a ton of lovely things, (thankyou) there was a resounding cry of "tutorial". So I'm going to try and break it down for you. Hope this helps someone, I had a ton of fun making it!
fridayfrontend  animation  svg  greensock 
11 days ago by spaceninja
Time to First Byte: What It Is and Why It Matters
One metric I feel that front-end developers overlook all too quickly is Time to First Byte (TTFB). This is understandable—forgivable, almost—when you consider that TTFB begins to move into back-end territory, but if I was to sum up the problem as succinctly as possible, I’d say: While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one.
fridayfrontend  performance  ttfb  analytics 
11 days ago by spaceninja
Native lazy-loading for the web
Browser-level native lazy-loading is finally here! Starting with Chrome 76, you'll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library. Let's dive into the details.
fridayfrontend  html  performance  lazyload  loading  chrome 
11 days ago by spaceninja
Writing Modes And CSS Layout
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important.
fridayfrontend  writing-mode  layout  css  block  inline  cssgrid  flexbox 
11 days ago by spaceninja
How Privilege Defines Performance, by Tatiana Mac
In theory, performance, accessibility, and inclusive design all have similar goals: Provide the best, most consistent experience to all people using the minimal amount of resources.

In practice, this often falls apart.

Product creators define what it means to be performant from where they stand, which is typically from places of privilege with unseen biases, struggling to find true empathy with their users.

Through this talk, we'll examine how to build conscientiously, looking within to resist systematic problems in order to create more truly performant, accessible, and inclusive systems for our users.
fridayfrontend  video  performance  accessibility  privilege  culture  racism  sexism  feminism  inclusive  diversity 
11 days ago by spaceninja
A Quick Update on Our SVG Icon Process - Cloud Four
In February of 2016, I shared what was then our SVG icon process. But as our techniques evolve with each new project, those steps feel less and less representative of what we usually do. So, here’s an update!
fridayfrontend  cssbasics  svg  icons 
17 days ago by spaceninja
Top 10 most deadly CSS mistakes made by new and experienced developers
What follows are the top 10 most deadly mistakes I’ve seen engineers make throughout my consulting engagements, listed in increasing order of severity. The more serious the mistake, the harder it is to recover from without a complete re-write of the codebase.
fridayfrontend  css  cssbasics  seo  px  semantics  mobile 
17 days ago by spaceninja
Accessible inline list with bullets between items
I had a list like this on my site for a long time: Pizza · Döner · Kaffee. Until I’ve tried it in a screen reader and realized that a screen reader reads pseudo elements (::before and ::after) content that I was using to implement bullets. A screen reader will read something like “Pizza MIDDLE DOT Döner MIDDLE DOT Kaffee”. Not good. Let’s try to fix it.
fridayfrontend  accessibility  cssbasics  lists 
17 days ago by spaceninja
Flexbox and padding
If you have tried to apply padding to a flex container with an horizontal overflow behaviour of scroll, you might notice that the padding is not applied to the flex end side of your container.
fridayfrontend  css  cssbasics  flexbox  padding 
17 days ago by spaceninja
Making a Realistic Glass Effect with SVG
I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don't have to reproduce an effect for every article or product on your site. Today I would like to show you how I came up with this glass text effect.
fridayfrontend  cssbasics  svg  glass 
17 days ago by spaceninja
Creating Utility Classes with Design Tokens using Sass
After creating a set of Design Tokens for my clients Design System I looked at how best we can quickly create some additional utility classes for the various “exceptions to the rule” mentioned above. We needed something that would work automatically, programatically, and with as little human interaction as possible once it was set up.
fridayfrontend  css  cssbasics  sass  utility  tokens 
17 days ago by spaceninja
How to add Flexbox fallback to CSS Grid
I shared how to build a calendar with CSS Grid in the previous article. Today, I want to share how to build a Flexbox fallback for the same calendar.
fridayfrontend  css  cssbasics  grids  cssgrid  layout  flexbox  fallback 
17 days ago by spaceninja
Bringing CSS Grid to WordPress Layouts
So, this is great, and knowing that we can do so many more things today than we could compared to a few years ago probably makes you want to give Grid a try, at last. If you are working on a WordPress project, you're back facing the two options mentioned above: do we start from scratch and manually coding a template, or is there something that can give us a little help? Luckily, there is a plugin that might interest you, one that we have created with a dual goal in mind:
fridayfrontend  css  cssgrid  grids  layout  wordpress  plugins 
17 days ago by spaceninja
Truths about digital accessibility
Creating, maintaining, or evaluating accessible technology? Here are some things to keep in mind (note that identity-first language is intentional):
fridayfrontend  cssbasics  accessibility  screenreaders 
17 days ago by spaceninja
CSS prefers-reduced-motion Media Query
One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion. Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:
fridayfrontend  css  cssbasics  reduced-motion  accessibility 
17 days ago by spaceninja
How much specificity do @rules have, like @keyframes and @media?
I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?
fridayfrontend  css  cssbasics  specs  at-rules 
17 days ago by spaceninja
Designing against Domestic Violence by Eva PenzeyMoog
The reality of domestic violence doesn’t disappear when people enter the digital world. How can we as technologists ensure that our products aren’t use for abuse? This talk will explore how to consider the reality of violence, recognize intervention points, and advocate for user safety.
fridayfrontend  video  violence  domesticviolence  abuse  harrassment  culture  ethics  design 
17 days ago by spaceninja
Getting to the Heart of Digital Accessibility
Quick! Think of the word “developer” or “coder” — what’s the first thing that comes to mind? Maybe a whiteish male in his twenties living in a busy metropolis, wearing a nerdy t-shirt and hoodie? Someone a bit like Mark Zuckerberg? Or maybe a younger Bill Gates or Sergey Brin? Any of the dudes from the HBO series Silicon Valley, perhaps? Certainly no one like me. By tech standards, I’m old. I’m also female and a mother. I live in a midwestern town you’ve never heard of and will never visit — a town where the cows vastly outnumber the people.
fridayfrontend  culture  diversity  accessibility  siliconvalley 
17 days ago by spaceninja
The Real Dark Web: We rarely acknowledge the vast majority of web developers
The vast majority of respondents are still using Sass and vanilla CSS? Wow! This made me pause and think. Because I feel there's an analogy here between that unseen dark matter, and the huge crowd of web developers who are using such "boring" technology stacks. These developers are quietly building their sites and apps, day in, day out. But they are rendered invisible as they are not making use of the cutting-edge technologies that the 1% of the bleeding edge love to talk about.
fridayfrontend  culture  development  programming  technology  javascript  css  sass 
17 days ago by spaceninja
I wrote a blog about building things that are then used by others for harassment even if you did not want them to do it
We are living in the internet of garbage and so we need to work extra hard to make sure the things we are making are not being used for harm. I think it’s safe to say that every tool we create has the potential to be used as a vehicle for harassment, so we as artists/creators/engineers/developers need to be proactive about not contributing to this existing sad scene.
fridayfrontend  culture  harrassment  sexism  racism  ethics 
17 days ago by spaceninja
Branching Out from the Great Divide
I like the term Front-End Developer. It's encapsulates the nature of your job if your concerns are: Building UIs for web browsers; The spectrum of devices and platforms those web browsers run on; The people who use those web browsers and related assistive technology. The breadth of knowledge for all-things front-end development has gotten super deep. I've found that front-end developers that have stretched themselves to the point they are thinking of themselves as full-stack developers more and more. I think that's kinda cool and empowering, but it doesn't mean that everyone needs to go that wide.
greatdivide  culture  fridayfrontend  css  javascript  development  titles  roles 
17 days ago by spaceninja
What a very bad day at work taught me about building Stack Overflow’s community
The monster in this case is not one person, it was created when lots of people, even with great intentions, publicly disagreed with you at the same time. Even kind feedback can come off as caustic and mean when there is a mob of people behind it. No matter how nicely they say it, when a large group of people you really respect publicly challenge something you’ve done it can feel like a personal attack.
fridayfrontend  community  communication  feedback  culture  harrassment 
17 days ago by spaceninja
Grids All The Way Down by Rachel Andrew
Two years have passed since Grid Layout launched across all major browsers. However, as it was landing and becoming available for us to use in production, work on the spec continued. Due to this work, Level 2 of the Grid Specification contains the most wanted feature as people come to grips with the spec — subgrid.

In this talk, Rachel will explain what subgrid is, the problems that it will solve for web designers and developers, and the things that it will make possible. She'll also take a look at some of the other things that are coming to CSS Layout, and how you can get involved in pushing all of these new things forward.
fridayfrontend  video  css  grids  cssgrid  layout  subgrid 
17 days ago by spaceninja
How to make your HTML responsive by adding a single line of CSS
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS.
fridayfrontend  css  cssbasics  responsive  grids  cssgrid  layout 
24 days ago by spaceninja
A Beginner's Journey to Launching a Website
It's definitely possible for anyone to get their website live on the internet. There's a process that you need to follow, but if you take your time, it can be relatively straightforward. It's a really wonderful feeling, getting a thing you built in front of people, and it's honestly something that I thought I'd never be able to do. But it's certainly within everyone's reach!
fridayfrontend  hosting  domains  gatsby  netlify  cms  cssbasics 
24 days ago by spaceninja
Short note on the disabled/aria-disabled attributes
Setting the disabled attribute on a control as well as aria-disabled="true" is not necessary under any circumstances:
fridayfrontend  accessibility  disabled  forms  aria-disabled  cssbasics 
24 days ago by spaceninja
Multi-Line Truncation with Pure CSS
Truncating a single line of text if is fairly straightforward. Truncating multiple lines is a bit harder. There is a way which is very clever and something I'd call a bonafide CSS trick. We somehow failed to cover it properly in our canonical post on line clamping, so I'll cover it here then add it to that post. I first saw this trick on the now-dead Mobify blog, and more recently covered by Natalia Onischuk on HackingUI.
fridayfrontend  css  clamp  truncate  line-clamp  ellipsis  cssbasics 
24 days ago by spaceninja
Absolutely position element that matches left margin using padding and CSS calc
Adjust the width of this window. This box has a max-width of 500px, while the title above is absolutely positioned. But they always line up. This is accomplished by using CSS Calc to calculate the padding-left of the text box above.
fridayfrontend  css  layout  absolute  position  calc  cssbasics 
24 days ago by spaceninja
Datalist is for suggesting values without enforcing values
What if the text needs to be arbitrary (like "What's your favorite color?") so people can type in whatever, but you also want to be helpful. Perhaps there are a handful of really popular answers. Wouldn't it be nice if people could just select one? Not a <select>, but a hybrid between an input and a dropdown. Hold on though. Don't make your own custom React element just yet. That's what <datalist> is for.
fridayfrontend  html  datalist  select  options  forms  cssbasics 
24 days ago by spaceninja
Choosing tools
There was a fun tweet circulating around yesterday: You're working on a frontend project. You can install max. 5 dependencies. Which ones do you pick?
fridayfrontend  tools  html  css  javascript  architecture  cssbasics 
24 days ago by spaceninja
Responsive Iframes
The best trick for responsive iframes, for now, is making an aspect ratio box. First you need a parent element with relative positioning. The iframe is the child element inside it, which you apply absolute positioning to in order to fill the area. The tricky part is that the parent element becomes the perfect height by creating a pseudo-element to push it to that height based on the aspect ratio. The whole point of it is that pushing the element to the correct size is a nicer system than forcing a certain height. In the scenario where the content inside is taller than what the aspect ratio accounts for, it can still grow rather than overflow.
fridayfrontend  html  css  iframes  responsive  aspectratio  cssbasics 
24 days ago by spaceninja
How to build a calendar with CSS Grid
Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.
fridayfrontend  css  grids  cssgrid  layout  calendars  cssbasics 
24 days ago by spaceninja
Don't comma-separate :focus-within if you need deep browser support
That's nice, but it causes a tricky problem. Browsers ignore entire selectors if it doesn't understand any part of them. So, if you're dealing with a browser that doesn't support :focus-within then it would ignore the CSS example above, meaning you've also lost the :hover state.
fridayfrontend  css  focus  focus-within  support  cssbasics 
24 days ago by spaceninja
Form design: from zero to hero all in one blog post
This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.
fridayfrontend  forms  css  html  design  accessibility  cssbasics 
24 days ago by spaceninja
CSS :not() with Multiple Classes
Say you want to select an element when it doesn't have a certain class. That's what the :not() selector is for.

body:not(.home) {...}

But what if there are multiple classes you want to avoid?
fridayfrontend  css  not  cssbasics 
24 days ago by spaceninja
Maybe Ignore type=search
Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type="search" and use type="text" instead.
fridayfrontend  accessibility  html  forms  search  inputs  cssbasics 
24 days ago by spaceninja
Context and Caveats
I found myself in one of those famous Twitter debates* the other day and off the back of it, I thought I’d create a short article about how we should should always consider context and caveats when we make bold statements. The context of that particular conversation was around a hot take that I’ll paraphrase: “Native buttons aren’t great and this one that has been developed is better and fully accessible”
fridayfrontend  accessibility  context  buttons 
24 days ago by spaceninja
When to break up a component into multiple components
I've had a question on my AMA for a while: Best ways/patterns to split app into components. And this is my answer: "When you experience one of the problems above, that's when you break your component into multiple smaller components. NOT BEFORE." Breaking a single component into multiple components is what's called "abstraction." Abstraction is awesome, but every abstraction comes with a cost, and you have to be aware of that cost and the benefits before you take the plunge
fridayfrontend  javascript  react  vue  components  abstraction 
24 days ago by spaceninja
Designing And Building A Progressive Web Application Without A Framework (Part 1)
You don’t need to be a Computer Science graduate or know a JavaScript framework to create a Progressive Web Application. With some HTML and CSS knowledge and basic competency with JavaScript, you have all the skills you need. In three parts, we’re going to share the journey of designing and building a simple Progressive Web Application called ‘In/Out’, built without a framework.
fridayfrontend  pwa  javascript 
24 days ago by spaceninja
Intrinsically Responsive CSS Grid with minmax() and min()
CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!
fridayfrontend  css  layout  grids  cssgrid  responsive  minmax  min 
24 days ago by spaceninja
Multi-column manipulation
Despite predating both Grid and Flexbox, Multi-column Layout represents—at least to me—an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even.
fridayfrontend  multicol  layout  columns 
24 days ago by spaceninja
Writing Tests For CSS Is Possible! Don’t Believe The Rumors, by Gil Tayar
You know that fear. The fear of changing something in your CSS. Deleting a CSS rule is a lesson in getting yourself to calm down, telling yourself that it’s OK, you are absolutely sure that deleting that rule won’t change anything.

And only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked _everything_, and that you missed something. Not to mention that it’s amazingly boring.

Never fear again! Testing your CSS code, testing the visual aspects of your code, is now possible, and I will show how. A slew of new Saas tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS).

So grab that keyboard, refactor your CSS, because writing tests for it is now possible!
fridayfrontend  video  testing  css  regression 
24 days ago by spaceninja
Debugging CSS Grid with Firefox Dev Tools
CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  firefox  devtools  debugging 
4 weeks ago by spaceninja
Reduced Motion Auto-Play Video
Auto-playing background videos can be annoying. However, beyond being a source of annoyance (or “user delight”, as some might say) they can be distracting for those who have difficulty staying focused, and potentially sickening for those with Vestibular disorders. Fantastic… Fortunately the reduced motion media query gives developers another chance at implementing such components in a way that will respect user preferences from an OS level.
fridayfrontend  css  cssbasics  reduced-motion  video  auto-play  accessibility 
4 weeks ago by spaceninja
Managing Multiple Backgrounds with Custom Properties
One cool thing about CSS custom properties is that they can be a part of a value. Let's say you're using multiple backgrounds to pull off a design. Each background will have its own color, image, repeat, position, etc. It can be verbose!
fridayfrontend  css  cssbasics  variables  customproperties  backgrounds 
4 weeks ago by spaceninja
Everything You Need To Know About CSS Margins
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.
fridayfrontend  css  cssbasics  margins 
4 weeks ago by spaceninja
Accessible CSS Generated Content
CSS generated content can have unintended side-consequences. As Andy Clarke discovered recently, data- attributes he used as a way to transfer content into CSS for visual purposes are not translated using built-in browser functionality.
fridayfrontend  css  cssbasics  generated  before  after  accessibility  translation  internationalization  localization 
4 weeks ago by spaceninja
Position Sticky and Table Headers
You can't position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol' <table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row.
fridayfrontend  css  cssbasics  sticky  tables 
4 weeks ago by spaceninja
The Simplest Way to Load CSS Asynchronously
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. Of course, at least a portion of a site’s CSS should be loaded before the page should be allowed to start rendering, and to get that initial CSS to the browser immediately, we recommend inlining (or HTTP2 server-pushing) the CSS. For sites with a small amount of overall, that alone might be enough, but if the CSS is large (say, bigger than 15 to 20kb), it can help performance to split it up by priority. Once split, less-critical CSS should be loaded in the background—AKA asynchronously. In this post, I aim to describe up our preferred way to do that these days, which has actually been around for years.
fridayfrontend  cssbasics  css  javascript  performance  async 
4 weeks ago by spaceninja
Top 5 Rules of ARIA
Even though ARIA was created years ago, some of the developers still misuse ARIA due to the lack of thorough knowledge on the subject. Misusing ARIA results in a much more inaccessible experience than when developers do not use ARIA. That is the reason for the common saying, “No ARIA is better than bad ARIA.” That being said,  developers should try to understand and follow the rules of the ARIA, to help provide a more accessible experience to people with disabilities. Let’s dive into the rules of ARIA in greater detail below.
fridayfrontend  accessibility  aria  cssbasics 
4 weeks ago by spaceninja
CSS Gradient Text
Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy. That got me thinking about fonts and CSS gradients, since gradients also had a difficult introduction to the web. Let’s look at how we can use gradient fonts with only CSS!
fridayfrontend  css  cssbasics  gradients  typography 
4 weeks ago by spaceninja
The Web Can't Survive a Monoculture
Despite our best efforts, the challenge of maintaining a competitive web browser may be more than other organizations can bear. That doesn’t have to look like the doomsday scenario laid out above, though. The biggest lesson to take from Linux is that platform diversity is most meaningful in terms of governance, not implementation. That’s why I feel no inconsistency in saying: the web can’t survive a monoculture, but it might survive on a single browser engine.
fridayfrontend  browsers  chrome  edge  monoculture  governance  linux 
4 weeks ago by spaceninja
Initial thoughts on standardizing form controls
One area that we’re beginning to investigate is the problem of form controls and components built into the browser. A few core pillars that must exist for the work done in this space to solve the pain points web developers and designers current face when working with the built in form controls: Web developers need complete control over the appearance; Extensibility needs to be possible; State management across component(s), including composite components; Expectation from developers is that the controls “just work”; Accessibility, performance, focus and other foundational items work as expected;
fridayfrontend  edge  chrome  forms  browsers  css  html 
4 weeks ago by spaceninja
What I Like About Vue
Vue checks most, if not all, the boxes for me. It suits a lot of my sensibilities and preferences and I feel like I can embrace “convention over configuration” without inheriting a lot of technical debt. It feels like a pair of shoes I could see myself buying or a t-shirt that fits my body type. It’s an intangible feeling and hard to explain.
fridayfrontend  javascript  vue  react  frameworks 
4 weeks ago by spaceninja
How to Kill IE11 - What the Deaths of IE6 and IE8 Tell Us About Killing IE
In order to understand how best to kill IE11, we need to look back to how 2 previous versions of IE met their fate: IE6 and IE8. By examining the strategies employed to kill browsers, we can look at current efforts to sunset IE11. We can predict and evangelize for what may ultimately do it in, finally freeing the JS community from the burden of ES5.
fridayfrontend  browsers  ie11  ie6  ie8  ie  chrome  edge 
4 weeks ago by spaceninja
Frontend Design, React, and a Bridge over the Great Divide
“Frontend development” is now so loaded that I quipped that as a frontend designer I live on the “front of the frontend”, while there are plenty of other developers living on the “back of the frontend”. I’d like to lean into that distinction because this great divide is played out in a very real way in JavaScript frameworks like React.
fridayfrontend  culture  titles  frontend  javascript  css  html  design  development  react 
4 weeks ago by spaceninja
Style your default global links using the :not CSS selector, by Alex Carpenter
Style your default global links without affecting your component links styles.
fridayfrontend  video  css  links  not 
4 weeks ago by spaceninja
A framework author's case against frameworks, by Adrian Holovaty
Adrian cowrote Django, a prominent server-side framework, yet he has come to believe that front-end frameworks are unnecessary for his own projects. Here's his impassioned argument for avoiding JavaScript frameworks on the front end.
frameworks  javascript  fridayfrontend  video  django  react  vue  vanilla 
4 weeks ago by spaceninja
Neapolitan Pizza Dough. One recipe; two styles.
An experiment is pure CSS styling of a basic recipe content.
fridayfrontend  css  cssbasics  recipes 
5 weeks ago by spaceninja
Font Smoothing
I recommend not using it, and instead if you’re looking to get a lighter version of the font then use the font-weight to control this so that it appears nicely across both Mac and Windows, and works across all browsers without the need of a browser prefix.
fridayfrontend  css  cssbasics  font-smoothing  typography 
5 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  100vw  aa  abbr  abem  absolute  abstraction  abuse  accessibility  accordions  acrylic  actions  active  adaptive  adblockers  address  advice  after  ajax  alexa  algorithms  aliasing  align-items  alignment  all  alpha  alt  amazon  amcss  amend  amp  analytics  android  angled  angular  animation  animations  antipatterns  any-link  api  apple  applewatch  apply  architecture  aria  aria-controls  aria-describedby  aria-disabled  aria-hidden  aria-label  aria-labelledby  arrowfunctions  art  artdirection  article  ascii  aside  asl  aspectratio  async  at-rules  atom  atomic  attr  attributes  audio  audit  audits  autism  auto  auto-fill  auto-fit  auto-placement  auto-play  autocomplete  autofill  automation  autoprefixer  avengers  await  aws  axe  babel  backdrop-filter  backface-visibility  background  background-blend-mode  background-clip  background-position  backgrounds  bars  base  baseline  batman  beautifiers  before  bem  bestpractices  beyonce  bezel  billing  bio  blending  blendmodes  blind  blink  bloat  block  block-end  block-start  blocking  blockquote  blocks  blogging  blur  boilerplate  bookmarklets  books  boolean  bootcamps  bootstrap  border-box  border-image  border-radius  borders  boring  bower  box-alignment  box-decoration-break  box-shadow  box-sizing  boxmodel  brackets  bradfrost  breadcrumbs  break  break-after  break-before  break-inside  break-word  breakout  breakpoints  breathe  broadband  broccoli  broken  browser  browserify  browsers  brutalism  buffet  bugs  build  bulma  bundler  bundlers  buttons  caching  calc  calculator  calendars  callback  callbacks  cameras  caniuse  canvas  captions  carbon  cards  careers  carousel  cartoons  cascade  cats  centered  ch  chaining  challenge  challenges  change  channels  characterentities  characters  charts  cheatsheet  checkboxes  checked  checklist  chinese  chriscoyier  chrome  ci  circle  cite  civilrights  clamp  class  classList  clearfix  clever  clienthints  clip  clip-path  clone  cms  code  codegolf  codeofconduct  codereviews  codesmells  codesplitting  codezen  coffeescript  collaboration  collapse  color  color-mod  color-scheme  colorblind  columns  comics  commas  comments  commonjs  communication  community  compassion  compilers  complexity  components  compositing  compression  conditionals  conferences  config  conic-gradient  connect4  console  contain  containerqueries  containers  content  contentblockers  contenteditable  contents  context  continuousintegration  contrast  controls  cookies  cortana  counter-style  counters  creative  creditcards  crisis  critical  cropping  crud  css  css-in-js  css3  css4  cssbasics  cssgrid  cssmodules  cssom  csspaint  csswg  culture  currentcolor  cursors  customelements  customizable  customproperties  dark  darkmode  dart  data  data-url  datalist  date  datepicker  dead  debug  debugging  declarations  declarative  default  defaults  defer  del  delay  demos  dependencies  descriptions  design  designsystem  designtokens  desktop  destructuring  details  detection  developers  development  devops  devtools  dfn  diagrams  dialog  diamonds  diffs  dinosaurs  dir  direction  director  disabled  discrimination  display  displaycontents  disruption  div  diversity  django  dl  dns-prefetch  docker  documentation  dom  domains  domesticviolence  dpi  draft  drama  draplin  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  duotones  durability  dynamic  dyslexia  ease-in  ease-out  easing  ecology  edge  editorconfig  editors  effects  efficiency  element  elements  ellipse  ellipsis  em  email  emmet  emoji  empathy  empty  ems  emulator  encoding  engineering  enhancement  entities  env  environment  environmental  environmentvariables  eot  ericmeyer  errors  es6  es2015  es2017  es2018  eslint  est  estimation  ethics  eventListener  events  evergreen  ex  example  exclusions  explicit  export  extends  extensible  extension  facebook  fallback  fantasai  faqs  fatigue  favicons  featurequeries  features  fecolormatrix  feedback  feminism  fetch  fieldset  figcaption  figure  file  fill  filter  filters  finally  firefox  first-child  first-letter  first-line  fitty  fixed  fixtext  flat  flex-basis  flex-grow  flex-shrink  flex-wrap  flexbox  flexible  floats  flow  flow-root  flowtype  fluid  focus  focus-ring  focus-visible  focus-within  foft  foit  font-display  font-face  font-feature-settings  font-size  font-smoothing  font-variant  font-weight  fontawesome  fonts  footer  footnotes  formatting  forms  fouc  foundation  fout  fr  fragmentation  frameworks  fridayfrontend  frontend  fullbleed  fullstack  fullwidth  fun  functional  functions  funny  galleries  games  gatsby  gender  generated  generator  generic  geocities  gestures  gifs  git  github  glamerous  glass  glitch  global  glyphs  gmail  google  governance  gpu  gradients  graphql  graphs  greatdivide  greensock  grid-area  grid-auto-flow  grid-gap  grids  grouping  grunt  guide  guidelines  guides  gulp  gutenberg  gutters  gzip  hacks  hamburger  handbook  hanging-punctuation  hardwareacceleration  harrassment  harrypotter  harryroberts  has  headers  headings  headlines  height  hex  hgroup  hidden  highcontrast  highcontrastmode  highlight  hints  hiring  history  holy  holygrail  hooks  horizontal  hosting  houdini  hover  howto  hr  hsl  hsla  html  html5  html6  http2  httponly  https  humor  husky  hyphenate-limit-chars  hyphens  icons  idiomatic  idle  ie  ie6  ie8  ie10  ie11  iframes  illustrator  images  imperative  implicit  important  imposter  in-range  includes  inclusive  indeterminate  inherit  initial  initial-letter  initial-scale  inline  inline-end  inline-flex  inline-start  input  inputmode  inputs  ins  inset  inspiration  instapaper  internationalization  intersection-observer  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  ios  iphone  is  isolation  italics  itcss  jamstack  jasmine  java  javascript  jekyll  jenkins  jinabolton  jobs  jokes  jpl  jquery  jspm  jump  karma  kerning  keyboard  keyframes  knockout  kss  labels  landmarks  lang  language  last-child  layers  layout  lazyload  leadership  leading  learning  legacy  legal  legend  length  less  letter-spacing  level4  library  ligatures  lighthouse  line-break  line-clamp  line-height  linear-gradient  lines  linkedin  links  lint  lint-staged  linters  linting  linux  lists  literals  liveregions  loaders  loading  local  local-link  localization  localoverrides  locks  lodash  log  logic  logical  logical-properties  logos  ltr  lukewroblewski  mac  macos  mailto  main  maintainability  maintenance  make  management  manifest  maps  margins  mario  markers  marquee  mask  masks  masonry  matches  matchmedia  material  math  max  max-content  max-lines  max-width  mcss  media  mediaqueries  medium  meltdown  memes  memory  menu  menus  meta  meter  metrics  microdata  microsoft  mikemonteiro  min  min-content  min-width  minmax  misconceptions  mistakes  mix-blend-mode  mix-width  mixins  mixmax  mma  mobile  mocha  mod  modal  modals  modernizr  modular  modules  modulo  moment  monoculture  morality  motion-path  mouse  multicol  multiplechoice  mythbusters  myths  names  namespacing  narrator  nasa  native  nav  navigation  nesting  netflix  netlify  netscape  newsletters  newton  night  node  normalize  not  notch  notifications  nowrap  npm  nth-child  nth-col  nth-last-child  nth-last-col  nth-of-type  numbers  numeric  nvda  object-fit  object-position  offline  offscreen  offset  offset-path  ol  onboarding  oocss  opacity  opensource  opentype  opinionated  optimization  optimizelegibility  optional  options  orange  order  organization  orphans  osx  otters  out-of-range  outline  outline-offset  output  overflow  overflow-anchor  overflow-wrap  overlay  overscroll-behavior  pa11y  packages  padding  page-break  page-break-after  page-break-before  page-break-inside  painting  pantsuit  parallax  parent  path  patternlibrary  patterns  payments  percy  performance  performancebudget  perspective  photos  php  picture  pinch-zoom  pinned  pixels  placeholder  placeholder-shown  placeholders  plan  planets  plugins  pocket  podcasts  pointer  politics  polyfills  polygon  portfolios  position  postcss  pragmatism  pranks  pre  preconnect  predictions  prefers-color-scheme  prefetch  prefixes  preload  preprocessors  prerender  prettier  pride  print  priorities  prioritization  priority  privacy  privilege  process  productivity  professional  profile  programming  progress  progressive  project  promises  properties  proportional  pseudo-classes  pseudo-elements  pullrequest  puppeteer  pure  push  pwa  px  qa  quality  quantity  query  querySelector  questions  quickreference  quines  quiz  quotes  racism  radial  radio  ratings  ratios  react  read-only  read-write  readability  readermode  rebase  reboot  recap  recipes  redlining  reduce  reduced-motion  redux  refactoring  reference  reflog  reflow  refresh  regex  regression  relative  reliability  reload  rem  remote  repaint  requestanimationframe  required  research  reset  resilient  resizeobserver  resources  responsive  rest  retina  retro  revert  reviews  rgb  rgba  rhythm  ribbons  rights  ripple  roadmaps  roadtrips  rolemodels  roles  root  rtl  ruby  rules  rulesets  rwd  safari  safe  safe-area-inset  samesite  samsung  sass  scalable  scale  scaling  schedules  scifi  scope  screencasts  screenmagnifiers  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-margin  scroll-padding  scroll-snap  scroll-snap-points  scroll-snap-type  scrollbars  scrollintoview  scrollTo  search  section  section508  security  select  selection  selectors  self  sem  semantics  senior  sensors  seo  sequential  serverless  serviceworkers  setproperty  settimeout  sexism  shadowdom  shadows  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  sharing  shit  shortcuts  shorthand  shrink-to-fit  sidebar  sidebars  siliconvalley  simplicity  siri  sizes  skills  skiplinks  slack  slides  smacss  small-caps  smooth  snap  snippets  snook  social  software  sorting  sortsite  sourcemaps  spa  space  spacing  span  speaking  specification  specificity  specs  spectre  speed  speedindex  spinners  spread  spreadsheets  sprites  square  squash  srcset  stacking  standards  stars  states  static  statistics  stats  sticky  stripe  study  style  styled-components  styleguide  stylelint  sub-pixel  subgrid  sublime  suffixes  suit  summary  support  supports  survey  surveys  suspense  sustainability  susy  svelte  svg  svgo  switch  symbols  syntax  system  tabbing  tabindex  table-layout  tables  tabs  tachyons  tailwind  talkback  target  taskforce  tasks  teaching  teams  teamwork  tech  techdebt  technology  television  template  templateliterals  templates  terminal  testing  tests  text  text-align  text-decoration-skip-ink  text-decoration-thickness  text-rendering  text-shadow  text-underline-offset  text-wrap  textarea  textfill  textfit  themes  theming  this  tictactoe  tidy  time  timeline  timelines  timeout  timetravel  tips  title  titles  tmbg  toast  toggle  toggles  tokens  tools  tooltip  tooltips  tota11y  toto  touch  towerdefense  tracking  tradeoffs  training  trans  transforms  transition-delay  transitions  translation  transparent  transpiler  treeshaking  tricks  troubleshooting  truncate  ttf  ttfb  tumblr  tutorial  tutorials  twitter  tylersticka  typescript  typography  ucbrowser  ufocss  uglify  ui  ul  underline  underlines  underscore  undo  unions  units  unset  unused  urgent  usability  use  user-error  user-select  utilities  utility  ux  valid  validation  values  vanilla  variablefonts  variables  velocity  venn  versioning  vertical  vertical-align  vh  video  viewport  viewport-fit  violence  virtualassistants  visibility  visited  visual  visualization  visualtesting  vm  vmax  vmin  vms  voice  voiceover  voltron  vox  vscode  vue  vw  w3c  wat  watch  watchOS  wave  wbr  wcag  webaim  webapps  webassembly  webcomponents  webfonts  webkit  webpack  webpagetest  westworld  where  white-space  white-space-collapse  whitespace  widows  width  will-change  windows  woff  word-break  word-wrap  wordpress  work  workflow  wrap-flow  wrap-through  wrapping  writing  writing-mode  writingmodes  x11  yandex  yarn  youdontneed  youmightnotneed  youtube  z-index  zeldman  zipcodes  zoom 

Copy this bookmark: