spaceninja + cssbasics   807

Taking Accessibility Beyond Compliance
What follows are just a few of the issues I often see where the existing WCAG guidance falls short or does not address and provide guidance on select issues. While some of you may think these foundational issues have been covered ad nauseam, based on The WebAIM Million report that came out earlier this year, it would appear there are plenty of developers, designers and content editors that are either not aware of these issues, or not sure what to do.
fridayfrontend  accessibility  cssbasics  wcag 
2 days ago by spaceninja
The ugly truth about optimising beautiful images
Optimising your images is like buying a fast car: unless you have nice clear roads to drive on you won’t get anywhere faster. Often the rest of the website is like a gridlocked motorway and the benefit from the extra horsepower goes to waste. Below are some tips on how to clear the traffic.
fridayfrontend  cssbasics  optimization  performance  images 
2 days ago by spaceninja
Motion Paths - Past, Present and Future
The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let's explore a few ways to achieve this, including the upcoming CSS motion path module and the newly released GSAP3.
fridayfrontend  css  cssbasics  animation  gsap 
2 days ago by spaceninja
Thinking about color
We also wanted to improve our accessibility. While we were doing pretty well, we had room for improvement, largely around how we used green. As our UI is increasingly centered around visualizations of large data sets we wanted to push the boundaries of making our analytics as visually accessible as possible.
fridayfrontend  css  cssbasics  color  accessibility 
2 days ago by spaceninja
You don’t need a media query for that: #1 Inline content separators
It’s easy to reach for media queries, but they aren’t always the best solution, don’t just think about viewports, think about the content and how to best represent that content regardless of viewport width.
fridayfrontend  css  cssbasics  separators  mediaqueries  flexbox  layout 
2 days ago by spaceninja
Labels are a last resort
Put down the accessibility pitchfork — this isn't about forms. When presenting data to the user (especially data from the database), it's easy to fall into the trap of displaying it using a naive "label: value" format. The problem with this approach is that it makes it difficult to present the data with any sort of hierarchy; every piece of data is given equal emphasis.
fridayfrontend  css  cssbasics  design  layout  labels 
2 days ago by spaceninja
Switch it up with CSS custom properties
Custom properties doesn't look like much, but is one of the real super powers of CSS. Let's see what it's all about!
fridayfrontend  css  cssbasics  variables  customproperties 
2 days ago by spaceninja
How to Use New CSS “:is()” for Easy Element Targeting
The new CSS :is() pseudo-class is shaping up to become a great way to target elements, saving on lines and lines of code, and keeping CSS as readable as possible. It is the next stage of the evolution of :matches() and :any(), adding a little extra functionality and increasing how semantic and intuitive the language behind selectors is.
fridayfrontend  css  cssbasics  is  selectors 
2 days ago by spaceninja
POUR the Foundation First
When it comes to the web, users must be able to perceive the information provided using various forms of assistive technology such as refreshable braille displays, screen readers, or screen magnifiers. Each of these methods provides a way for the user to interpret the information presented. With so many ways to convey information, if users are having difficulty perceiving the information, alternative methods should be used.
fridayfrontend  cssbasics  accessibility  pour  wcag  alt 
2 days ago by spaceninja
How to Overlap Images in CSS
Something very popular in web design currently is overlapping images. When the design is handed to you, as the developer to implement it, there are a few ways to go about it like most things with CSS.
fridayfrontend  css  cssbasics  images  overlapping  grids  cssgrid  layout 
2 days ago by spaceninja
Having a Little Fun With Custom Focus Styles
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.

So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab key), letting users who can't use a mouse or have a visual impairment know where they are on the screen.
fridayfrontend  css  cssbasics  focus  accessibility 
2 days ago by spaceninja
Simulate Media Query Features - Chrome DevTools - Dev Tips
You can simulate Media Query Features, such as prefers-color-scheme and prefers-reduced-motion to properly test that your media queries are behaving as expected.
fridayfrontend  cssbasics  devtools  mediaqueries  prefers-color-scheme 
2 days ago by spaceninja
A Web Developers New Working Week | Always Twisted. Front-End Development.
Why spend the week in your comfort zone, working on the same browser under the same conditions you’re used to. Let’s switch it up a bit: Tap Tap Monday, Grayscale Tuesday, Different Browser Wednesday, Throttle Thursday, and Friday.
fridayfrontend  cssbasics  accessibility  performance  testing 
2 days ago by spaceninja
Does JavaScript keep you too busy to care about CSS? Here are recent features you want to know about!
For the last few years, I have been busy exploring the world of JavaScript to the point that I neglected my passion for CSS. I am sure there are more people like me out there. I owe CSS a debt so I curated a list of recent features that you may want to know about if you didn't follow this space for a little while.
fridayfrontend  css  javascript  cssbasics  customproperties  variables  grids  cssgrid  variablefonts  typography  scroll-snap  logical-properties  sticky  houdini  featurequeries  supports  preprocessors  css-in-js 
2 days ago by spaceninja
CSS :root Pseudo-Class Selector
The :root selector is an interesting one which helps us to select our document’s root element. In HTML, our root element is always the <html> tag, so in this case, it is something that doesn’t add too much to our work but still not a bad idea. In other XML based documents like in an SVG, it has more purpose because the root element can be different.
fridayfrontend  css  cssbasics  root  html  svg 
2 days ago by spaceninja
Making a Better Custom Select Element
Julie Grundy kicks off this, our fifteenth year, by diving headlong into the snowy issue of customising form inputs. Nothing makes a more special gift at Christmas that something you’ve designed and customised yourself. But can it be done while staying accessible to every user?
fridayfrontend  cssbasics  html  css  javascript  select  accessibility  aria 
2 days ago by spaceninja
The intersection of markup, content and context in accessibility
You’ve heard of this inclusive design thing, and know that a11y is a numeronym for accessibility. It matters to you, and you try to make the people and projects around you better for it. But you’ve conquered the basics. Now what? I have good news to share: going beyond the basics isn’t as hard as you might think. Why? Well, because doing deeper in this case means looking at what you already know, just through a different lens.
fridayfrontend  cssbasics  accessibility  semantics  alt 
2 days ago by spaceninja
Dark Mode Favicons
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-scheme media query, and as a result, a favicon that supports dark mode!
fridayfrontend  css  cssbasics  svg  darkmode  favicons  prefers-color-scheme 
2 days ago by spaceninja
CSS: An Art, a Science, a Nightmare (Everything You Should Know)
Some people think CSS is really hard and it's too much of a hassle to learn. Some people think that since it's not a programming language (or is it?), it's so easy that you don't even have to bother learning it. Ultimately, there's a lot to CSS, but it doesn't have to be overwhelming. If you learn a few key concepts, you should feel confident looking at or thinking of any design and turning it into reality.
fridayfrontend  css  cssbasics  layout  flexbox  cssgrid  grids  boxmodel  mediaqueries 
2 days ago by spaceninja
I <3 the cascade!
A lot of developers, particularly those who learned JavaScript first, hate the cascade. For JavaScript developers who are used to being able to tightly scope variables, functions, and so on to a component, this feels like a bug. But in reality, the cascade is a feature.
fridayfrontend  css  cssbasics  cascade 
2 days ago by spaceninja
Web layouts like it’s 2020
The newer specs allow us to build layouts that we would have discarded for being unusable or for lack of responsiveness just a couple of years ago. So I believe it’s time to start revisiting those concepts. Maybe we can bring back some of those print-like layouts in a way that adapts to the unknown canvas of the web.
fridayfrontend  css  layout  cssbasics  cssgrid  grids  flexbox  multicol  exclusions 
2 days ago by spaceninja
An Introduction to Variable Fonts
Jason Pamental forges a path through the freshly laid snowy landscape of variable fonts. Like a brave explorer in a strange new typography topology let Jason show you the route to some fantastic font feats. Everything you thought you knew has changed.
fridayfrontend  css  cssbasics  variablefonts  fonts  typography 
2 days ago by spaceninja
The Thought Process Behind a Flexbox Layout
Flexbox can do way more stuff! One of my favorites is how auto margins work to "push" other elements away when there is space. This is just one little journey playing with some UI and seeing the useful things flexible does along with things that can make it confusing.
fridayfrontend  css  cssbasics  layout  grids  flexbox 
8 days ago by spaceninja
Mirror Android Device to Computer
If you have an android device, like a phone or tablet, you can plug it into your computer and mirror the display to your computer using an awesome utility called scrcpy!
fridayfrontend  cssbasics  android  mobile  devtools  emulator  mirroring 
8 days ago by spaceninja
Highlights From Building a Magazine Layout
The web technologies we have at our hands today are marvelous. Every day there is something new knocking on our doors. The decision is upon us; we either accept the challenge to learn new things or not. I wanted to pick a design that I can use new CSS techniques and try to grasp them more. For today, I chose a magazine layout with some pretty interesting, challenging design details.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  print 
8 days ago by spaceninja
Simplified Fluid Typography
But as long as we're pushing the limits, there is another function to simplify things even more: clamp()! Clamp takes three values, a min, max, and a flexible unit (or calculation or whatever) in the middle that it will use in case the value is between the min and max. So, our one-liner gets even smaller:
fridayfrontend  css  cssbasics  typography  fluid  min  max  clamp 
8 days ago by spaceninja
DevTools as the ultimate CSS advocate
For the latter half of this year, I’ve been talking mainly about DevTools for CSS, because the more I thought about it, the more I realised that DevTools is more than just a debugging tool. The nature of how developers access and use DevTools gives it the potential to be much more.
fridayfrontend  cssbasics  browsers  devtools 
8 days ago by spaceninja
Scaling SVG Elements
Scaling <svg>s can be a daunting task, since they act very differently than normal images. Instead of thinking of <svg>s as images, let's change our mindset: The <svg> element is a telescope into another world.
fridayfrontend  cssbasics  svg  scaling 
8 days ago by spaceninja
Progressive Web Apps: Making app-like experiences in the browser
I’m pretty sure that you are thinking: can I have access to my mobile hardware from the browser? Yes! Besides being able to play with services like camera and GPS most modern browsers today including Samsung Internet have the ability to access cool features like fingerprint and even Web-XR (coming soon).
fridayfrontend  pwa  cssbasics  mobile 
8 days ago by spaceninja
Playing Sounds with CSS
CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?
fridayfrontend  css  audio  cssbasics 
8 days ago by spaceninja
What is a screen reader?
A screen reader is an assistive technology, primarily used by people with vision impairments. It converts text, buttons, images and other screen elements into speech or braille. Let’s go through what a screen reader is, how it works and see blind people in action!
fridayfrontend  accessibility  screenreaders  cssbasics 
8 days ago by spaceninja
Checklist to avoid the most common accessibility errors
This isn’t a comprehensive guide to accessibility, but we’ll look at ways to avoid the most common accessibility errors identified by the WebAIM accessibility analysis of the top 1,000,000 home pages, and the HTTPArchive 2019 Web Almanac analysis of 5.8 million pages. I’m not going to get philosophical; if you’re reading this, I assume you care about why, and just want some tips on how.
fridayfrontend  accessibility  contrast  alt  buttons  html  cssbasics 
8 days ago by spaceninja
Image Lazy Loading
Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript framework, or you could use Intersection Observer API, but it's become such a common practice that there should probably be a browser API to accommodate it...and Chrome is implementing just that. Let's have a look at how the incoming native lazy loading API will work!
fridayfrontend  images  html  lazyload  loading  cssbasics 
8 days ago by spaceninja
The Power (and Fun) of Scope with CSS Custom Properties
You’re probably already at least a little familiar with CSS variables. But are we using them to their full potential? Do we fall into old habits and overlook opportunities where variables could significantly reduce the amount of code we write?
fridayfrontend  css  variables  customproperties  scope  cssbasics 
8 days ago by spaceninja
Blending Modes in CSS
Back in 2007, when I first learned about blending modes in Photoshop, it was a life-changing moment for a 15 years old kid. I wanted to explore them in CSS and share that experience with you.
fridayfrontend  css  cssbasics  blendmodes 
15 days ago by spaceninja
Request with Intent: Caching Strategies in the Age of PWAs
Caching media files, especially images, seems like an obvious way to improve performance, but should we? To provide a more performant UX without abusing users’s network connections or hard drives, Aaron Gustafson puts a spin on classic best practices, experiments with media caching strategies, and shares smart Cache API tricks.
fridayfrontend  cssbasics  caching  pwa  serviceworkers 
15 days ago by spaceninja
Print To CSS
I'm a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to merge the two things together and recreate some of the print work that I've seen and liked. I have to thank Andy Clarke for the inspiration and support on this. I've mentioned it many times now but the work he is doing has really hit a chord with me and it is by far the most enjoyable thing for me right now.
fridayfrontend  css  cssbasics  layout  design  cssgrid  grids  print 
15 days ago by spaceninja
Real Web Development on iPad
As a web designer-developer, I’ve been doing all my work from a MacBook Pro since the beginning. But as a student carrying & using my iPad Pro for 95% of my work, I wanted a portable coding setup I could use from my iPad.
fridayfrontend  cssbasics  code  development  devtools  ipad  ios  tools 
15 days ago by spaceninja
A Layout Trick for Building a Contact List
It consists of an email address and telephone number (with the potential to add more contact types), each with an icon on the right and text on the left. Each item needed to be a link (including the icon). The important thing was that the width of the items should be determined by the longest item. In the case of the image above, the item with the longest content would be the email address, so the second item (the telephone number) would need to be the same width as this, even though its content is shorter.
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
15 days ago by spaceninja
Make Your Own Expanding And Contracting Content Panels
In UI/UX, a common pattern that’s needed time and again is that of a simple animated opening and closing panel, or ‘drawer’. You don’t need a library to make these. With some basic HTML/CSS and JavaScript, we’re going to learn how to do it ourselves.
fridayfrontend  css  cssbasics  javascript  components  accordions  animation  details  summary 
15 days ago by spaceninja
The Accessibility Tree
The flow of page contents from browser to assistive technology isn't often talked about, but it's a vital aspect of enabling many disabled users' access to the internet. It's taken a lot of experimentation and innovation to get to where we are now: the accessibility tree. This tree shapes how disabled users understand and interact with your page, and it can mean the difference between access and exclusion. As web developers, it's our job to be aware of how the code we write shapes the tree.
fridayfrontend  css  cssbasics  accessibility  screenreaders 
15 days ago by spaceninja
Avoiding jagged edges on gradients
This happened to turn up on one of our projects and rather than implementing with an image or SVG we decided to use a linear-gradient, the benefit of this is that it’s really easy to change the angle, colour etc within the CSS. The problem we had was that the angle of the gradient in the space available caused a really horrible jagged edge. Luckily, there is a really simply way to solve this problem!
fridayfrontend  css  cssbasics  gradients 
15 days ago by spaceninja
The long story behind a tweet component by Gabriele Corti on CodePen
On a whimsical Sunday afternoon, I decided to brush up with React. I made the excellent choice of reviewing this talk from Kent C. Dodds, and planned out a relatively straightforward project to explore the different abstractions provided by the framework: build a reusable component to share a quote, or a tweet.
fridayfrontend  css  cssbasics  layout  svg  icons  aria  accessibility  time  cssgrid  react  javascript  components 
15 days ago by spaceninja
The Ultimate Guide to Dark Mode for Email Marketers
Dark Mode. The tech industry is buzzing with these two words, and email marketing is no exception. Last year, Apple added Dark Mode to its desktop email client. In 2019, Dark Mode came to iOS Mail and other industry heavyweights, including Gmail, announced support for Dark Mode. There’s no denying Dark Mode is taking over the inbox—and making sure emails look great in this reading environment is the new big challenge for email marketers.
fridayfrontend  css  cssbasics  email  darkmode 
15 days ago by spaceninja
Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements
I recently had to craft a newspaper-like design that featured multiple row and column spans with divider lines in between them. Take a look at the mockup graphic here and see if it makes you sweat at all. If you’re like me, you have been around a while and know just how difficult this would have been with old layout techniques.
fridayfrontend  css  cssbasics  layout  grids  newspaper  design  cssgrid 
15 days ago by spaceninja
Underline Styling - a Collection by Jen Simmons on CodePen
For decades, CSS had no proper way to style underlines. Now, we do. These Pens demo and test out the new CSS properties, exploring what's possible and checking for interoperability between browsers.
fridayfrontend  css  cssbasics  underline  text-underline-offset  text-decoration-thickness  text-decoration-skip-ink  text-decoration  text-underline 
15 days ago by spaceninja
CSS Logical Properties
This post on CSS logical properties is just that. I don’t need to know it all yet, but when browser support is common I need to be able to support it out of the gate. I need to be able to implement it, test it, debug it, and understand the accessibility impact. Since my work straddles accessibility and internationalization, those are critical skills.
fridayfrontend  css  cssbasics  logical-properties 
15 days ago by spaceninja
Tooltips in the time of WCAG 2.1
How do keyboard users access the content?
How do non-mouse pointers (e.g. touchscreens and eye trackers) access the content?
How do blind and low vision users even know the tooltip is there, let alone read it?
If (Internet Lords forbid) there is interactive content inside, how does one access it without accidentally dismissing the tooltip?
How does a user with magnification software move their field of view to read the tooltip without accidentally dismissing it?
fridayfrontend  css  cssbasics  tooltips  accessibility  wcag 
23 days ago by spaceninja
A Super Weird CSS Bug That Affects Text Selection
You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.
fridayfrontend  css  cssbasics  bugs  selection 
23 days ago by spaceninja
Preloading fonts: when does it make sense?
In the past, when loading custom fonts we couldn’t really avoid the flash of unstyled text (FOUT)—you know that split second when the website is loading and it uses a substitute font until it loads your custom one?
fridayfrontend  css  cssbasics  typography  fonts  preload  performance 
23 days ago by spaceninja
What Newspapers Can Teach Us About Web Design
Before the home page, there was the front page. From the Gutenberg Principle to grid systems to above the fold, newspapers teach us much about the foundations of web design.
fridayfrontend  design  cssbasics  newspapers  layout  grids  cssgrid 
23 days ago by spaceninja
aria-label Does Not Translate
One of the big risks of using ARIA to define text content is that it often gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services all too often miss content in ARIA attributes when sending text strings to localization vendors.
fridayfrontend  cssbasics  aria  accessibility  translation  internationalization 
23 days ago by spaceninja
When to Use SVG vs. When to Use Canvas
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.
fridayfrontend  css  cssbasics  svg  canvas 
23 days ago by spaceninja
Let's create a floating label input with HTML and CSS only
Floating label input is an element that visually combines an input label and the input itself into a single element. Label switches from placeholder mode to label when input is focused or has content in it. This concept has been first introduced by Matt D. Smith in 2013 and it has become a widespread pattern since then, even becoming a standard element in Google's Material Design.
fridayfrontend  css  cssbasics  forms  labels  accessibility 
23 days ago by spaceninja
Who Can Use
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments. The standard grading system is a great start, but I thought I'd try to humanize the people who are affected by the different grades.
fridayfrontend  css  cssbasics  color  contrast  accessibility  caniuse 
23 days ago by spaceninja
UI Case study: state styles of card component with accessibility in mind
Today I would like to share my latest UI case study for the state styles on a card component. Providing different styles on different states such as hover, focus and active is critical because it gives the visible feedback to the user’s interaction and improves the overall user experience on the site. Throughout this case study, I am going to focus on the card component.
fridayfrontend  design  css  cssbasics  cards  focus  hover  accessibility 
23 days ago by spaceninja
Finally, it Will Be Easy to Change the Color of List Bullets | CSS-Tricks
As of Firefox 68 (July 2019), you can do like:

li::marker {
color: red;
content: "►";
...which, as you can see, changes the color and the bullet thing That is definitely the cleanest and easiest way to go, so it's nice to see progress.
fridayfrontend  css  cssbasics  lists  bullets  marker 
23 days ago by spaceninja
currentColor and SVGs
I got a lot of emails mentioning how awesome this CSS property is with SVGs, too. Let’s dig in.
fridayfrontend  css  cssbasics  html  svg  currentcolor 
23 days ago by spaceninja
Become An HTML Email Geek With These Videos From Rémi Parmentier
In these two videos (a webinar recorded for our Smashing Members and a presentation from SmashingConf Freiburg), you can discover all the tips and tricks you need to help you design HTML emails. Follow along as Rémi Parmentier shares what he knows about taming email clients.
fridayfrontend  css  cssbasics  email 
23 days ago by spaceninja
Should You Use Bootstrap or Material Design for Your Design System?
Bootstrap and Material Design are incredibly thorough systems, so it stands to reason that many of our clients ask whether or not it’s worth the effort to create a design system from scratch as opposed to using an already mature platform. Here’s the answer we typically give.
fridayfrontend  css  cssbasics  design  designsystem  utility  atomic  bootstrap  material 
23 days ago by spaceninja
Some CSS Grid Strategies for Matching Design Mockups
A consistent grid system is invaluable for communicating how a webpage should be coded and how it should respond when the size of the user’s screen differs from the mockup. As a developer, I really appreciate designers who take the trouble to adopt a well thought-out grid system.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
23 days ago by spaceninja
Using the currentColor CSS property to build extensible components
You can use the currentColor CSS property to have any other property that uses a color pick up the current color value of the element you’re styling. If no color is set, it inherits that value from up the DOM tree.
fridayfrontend  css  cssbasics  currentcolor 
23 days ago by spaceninja
The Smallest Difference
One thing that had been bothering me for quite some time though was the design of our tables and I eagerly waited for the moment to jump in and fix them. This is what they looked like just before the brand refresh work started in earnest:
fridayfrontend  css  cssbasics  tables  font-variant-numeric  tablular-nums 
23 days ago by spaceninja
Coding Challenge: Dancing with CSS - DesignUps
Let’s be honest, it’s hard to go a single day without seeing a meme or GIF. I’ll admit, they’re entertaining and there is nothing quite like your favorite GIF that explains how you feel.

Eventually though, they get a little….boring. It’s time to spice things up! That’s exactly what I set out to do with this challenge.
fridayfrontend  css  cssbasics  animation  gifs 
23 days ago by spaceninja
Pac-Man... in CSS!
You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property.
fridayfrontend  css  cssbasics  animation  clip-path  pac-man  games 
23 days ago by spaceninja
How to minify JavaScript and CSS files using gulp
gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. This could include a lot of tasks, but this post will focus on a basic use case for minifying JavaScript and CSS files. I couldn't seem to find such a basic tutorial on the web that was explained in easy terms.
fridayfrontend  cssbasics  css  javascript  minification  gulp 
23 days ago by spaceninja
WTF is gzipping (and how is it different from minification)?
Reader Kieran Barker asked me to write an article about what gzipping is, and how it’s different from minification. Great idea!
fridayfrontend  cssbasics  gzip  minification  compression  performance 
23 days ago by spaceninja
Memories of web development past
I just found an old CD with a projects folder of work I did in 1998 – 1999 as a web developer and I am in awe about a few things.
fridayfrontend  cssbasics  html  css  javascript 
23 days ago by spaceninja
Oh Hey, Padding Percentage is Based on the Parent Element's Width
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It's weird having top padding based on width, but that's how it works — but only sorta. The 50% is based on the parent element's width, not itself. That's the part that confused me.
fridayfrontend  css  cssbasics  padding  aspectratio 
23 days ago by spaceninja
Get More For Less With Variable Fonts - Cloud Four
I recently worked on a project where the topic of variable fonts came up when discussing typeface legibility. I had heard the term before, but I wasn’t quite sure what a variable font was. Curious, I did some digging and was excited to discover all the possibilities that variable fonts bring to the table.
fridayfrontend  cssbasics  css  variablefonts  typography  fonts 
23 days ago by spaceninja
Some Things You Oughta Know When Working with Viewport Units
You'd expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven't scrolled) since it's along the bottom edge of a 100vh element. But it's actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.
fridayfrontend  css  cssbasics  vh  viewport 
4 weeks ago by spaceninja
A Complete Guide to JavaScript Tooling
Let's dive into the pool of development tools built around JavaScript over the years, glimpse at the concepts behind these tools, and review some popular options in each category.
fridayfrontend  javascript  cssbasics  tools  linters  types 
4 weeks ago by spaceninja
Become a Front-End Master in 2020 With These 10 Project Ideas
I love JavaScript frameworks, but knowing them isn't what makes you a good front-end developer. Being performance-focused and accessibility-focused, and thus user-focused is what makes you a front-end master, beyond executing the skills required to get the website built.
fridayfrontend  css  javascript  cssbasics  accessibility  components  training  learning 
4 weeks ago by spaceninja
CSS Variables With Inline Styles
While working on a demo for an article, I needed an easy way to create a grid layout. For example, laying out a grid of five columns without touching CSS every time I change my mind. Throughout this article, I will explore some use cases and think out loud with you on how to do them.
fridayfrontend  css  cssbasics  variables  customproperties  inline 
4 weeks ago by spaceninja
The Trick to Animating the Dot on the Letter "i"
Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate elements. This opens us up to some fun options to style or animate the dot of the letter independently from the stalk. Worried about accessibility? Don’t worry, we’ll cover that the best way we know how.
fridayfrontend  css  cssbasics  animation  typography 
4 weeks ago by spaceninja
Multi-line spanning animated underline.
This is a multi-line spanning animated underline. This took an annoyingly long time to figure out.
fridayfrontend  css  cssbasics  underline 
4 weeks ago by spaceninja
Everyone uses CSS frameworks
Every front-end developer uses CSS frameworks, even those saying they don’t.
fridayfrontend  css  cssbasics  frameworks 
4 weeks ago by spaceninja
Two-Value Display Syntax (and Sometimes Three)
You know the single-value syntax: .thing { display: block; }. The value "block" being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better served by a two-value system that can apply that same concept more broadly and just as intuitively.
fridayfrontend  css  cssbasics  display 
4 weeks ago by spaceninja
Accessibility is a marathon, not a sprint
Accessibility standards are often first on the chopping block in the face of deadlines. We’ve all been on projects where we write that dreaded TODO comment leaving an accessibility audit for later. Let’s unpack why that is and start changing it! We’ll look at common tools, patterns and starter-tips that can help us shed light on accessibility in a new, less daunting way. In this talk we’ll discuss how to get started with accessibility—the metaphorical salad and power walking of a11y that can prepare us to run an accessibility marathon, if you will.
fridayfrontend  accessibility  cssbasics 
4 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  100vw  abbr  absolute  abstraction  accessibility  accordions  acrylic  active  adblockers  address  addresses  after  align-items  alignment  alt  analytics  android  animation  antipatterns  any-link  anymod  api  apple  architecture  aria  aria-describedby  aria-disabled  aria-label  aria-labelledby  art  article  ascii  aside  aspectratio  async  at-rules  atom  atomic  attr  attributes  audio  auto  auto-play  automation  avengers  axe  backdrop-filter  backface-visibility  background-clip  backgrounds  bars  base  baseline  batman  before  bem  bestpractices  blendmodes  blind  block  block-end  block-start  blockquote  blocks  blogging  blur  boilerplate  boolean  bootcamps  bootstrap  border-box  border-image  border-radius  borders  box-alignment  box-decoration-break  box-shadow  box-sizing  boxmodel  breadcrumbs  break-word  breakout  breakpoints  browsers  brutalism  bugs  bullets  buttons  caching  calc  calendars  caniuse  canvas  caption  caption-side  carbon  cards  careers  carousel  cascade  centered  ch  challenges  charts  cheatsheet  checkboxes  checklist  chrome  cite  clamp  class  clean  clearfix  clip-path  clone  cloudinary  cms  code  codegolf  codezen  collapse  color  color-scheme  colorblind  columns  comments  communication  components  compression  config  conic-gradient  content  contentblockers  contrast  controls  counter-style  counters  critical  css  css-in-js  css4  cssbasics  cssgrid  culture  currentcolor  cursors  customproperties  darkmode  data  datalist  date  datepicker  debugging  declarations  default  defaults  del  demos  dependencies  descriptions  design  designsystem  details  developers  development  devtools  dfn  diagrams  dialog  dinosaurs  dir  disabled  display  div  dl  domains  dropcaps  dropdown  duotones  editorconfig  editors  element  eleventy  ellipsis  email  emmet  empathy  empty  ems  emulator  engineering  enhancement  es6  es2018  eslint  ethics  ex  exclusions  expanding  facebook  fallback  faqs  favicons  featurequeries  figcaption  figure  filtering  filters  finally  firefox  first-letter  fitty  fixed  fixtext  fizzbuzz  flex-basis  flex-grow  flex-shrink  flexbox  flexible  floats  flowtype  fluid  focus  focus-visible  focus-within  foit  font-display  font-face  font-size  font-smoothing  font-variant-numeric  fonts  footer  forms  foundation  fout  fr  frameworks  fridayfrontend  frontend  fullbleed  fullwidth  functions  galleries  games  gatsby  generated  generator  generic  gifs  git  github  glass  global  google  gradients  graphs  grid-area  grids  gsap  guidelines  guides  gulp  gzip  hacks  hamburger  handbook  harrypotter  has  head  headers  headings  headlines  hex  hgroup  hidden  highcontrastmode  highlight  hiring  history  hooks  hosting  hotpotato  houdini  hover  howto  hsl  hsla  html  html5  husky  hyphenate-limit-chars  hyphens  icons  ie  ie11  iframes  imagemaps  images  imgix  important  impostersyndrome  in-range  inclusive  indeterminate  inline  inline-end  inline-start  input  inputmode  inputs  ins  internationalization  intersection-observer  interviews  invalid  ios  ipad  is  isolation  jamstack  javascript  jobs  jquery  kbd  keyboard  keyframes  label  labels  lang  language  layout  lazyload  learning  length  line-break  line-clamp  line-height  linear-gradient  lines  links  lint  lint-staged  linters  lists  loaders  loading  local-link  localization  localstorage  locks  logical-properties  magazine  mailto  main  maintainability  maps  margins  marker  markers  marquee  masks  masonry  matchmedia  material  max  max-content  max-lines  mediaqueries  menus  meter  min  min-content  minification  mirroring  mix-blend-mode  mobile  modals  modernizr  modular  moment  motion-path  movies  multicol  multiplechoice  multiply  music  myths  names  namespacing  nav  navigation  nesting  netlify  newsletters  newspaper  newspapers  normalize  not  npm  nth-child  nth-col  nth-last-child  nth-last-col  null  numbers  numeric  object-fit  offset  offset-path  ol  onclick  oocss  opacity  optimization  optional  options  orange  order  out-of-range  outline  output  overflow  overflow-wrap  overlapping  overlay  pa11y  pac-man  padding  painting  paper  patternlibrary  patterns  performance  perspective  photos  picture  pixels  placeholder-shown  placeholders  planets  podcasts  polyfills  position  postcss  pour  pre  preconnect  predictions  prefers-color-scheme  preload  preprocessors  prettier  print  process  programming  progress  progressive  promises  properties  pseudo-classes  pseudo-elements  pwa  px  qa  questions  quines  quiz  radial  radial-gradient  radio  random  ratings  react  read-only  read-write  readability  readermode  recipes  reduced-motion  redux  refactoring  reference  reflow  regex  relative  rem  requestanimationframe  required  research  reset  responsive  rest  rgb  rgba  rhythm  ribbons  ripple  roadmaps  roles  root  rules  rulesets  safari  sass  scale  scaling  scifi  scope  screencasts  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-margin  scroll-padding  scroll-snap  scroll-snap-type  scrollbars  search  section  section508  security  select  selection  selectors  semantics  seo  separators  serviceworkers  setproperty  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  shortcuts  shorthand  sidebars  skills  skiplinks  slides  smacss  snippets  snow  sorting  sortsite  sourcemaps  space  spacing  span  specificity  specs  spinners  splitting  spread  sprites  srcset  standards  stars  static  sticky  stripe  style  styleguide  subgrid  sublime  summary  support  supports  svg  svgo  switch  syntax  tabbing  tabindex  tables  tablular-nums  tabs  target  teaching  teamwork  television  template  templates  terminal  testing  text  text-align  text-decoration  text-decoration-skip-ink  text-decoration-thickness  text-overflow  text-underline  text-underline-offset  textarea  textfill  textfit  themes  time  timeline  tips  title  titles  toggles  tokens  tools  tooltips  tota11y  touch  training  transforms  transition-delay  transitions  translation  troubleshooting  truncate  tutorial  tutorials  twitter  types  typescript  typography  ui  ul  underline  units  usability  user-select  utility  ux  valid  validation  values  vanilla  variablefonts  variables  venn  vertical  vertical-align  vh  video  viewport  visibility  visited  vm  vmax  vmin  voiceover  voltron  vscode  vue  vw  waterfall  wave  wbr  wcag  webfonts  westworld  where  white-space  white-space-collapse  will-change  windows  word-break  word-wrap  wordpress  workflow  wrapping  writing  writing-mode  x11  youtube  z-index  zipcodes 

Copy this bookmark: