spaceninja + fridayfrontend   1269

CSS Frameworks Or CSS Grid: What Should I Use For My Project?
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.
fridayfrontend  css  cssbasics  frameworks  grids  cssgrid  layout  bootstrap  foundation 
6 days ago by spaceninja
Simple Named Grid Areas
I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
6 days ago by spaceninja
5 Digital Accessibility Myths Busted | Deque
Are you secretly asking yourself questions like: “How many people visiting my website or app actually need these accessibility features?” “Won’t it take too much time/effort/money to make my website or app accessible?” “Will my website or app be ugly if I make it accessible?” If you or your client have pondered these (or similar) thoughts, I am here to challenge your thinking by busting some myths around digital accessibility!
fridayfrontend  cssbasics  accessibility  myths 
6 days ago by spaceninja
Article Layout with CSS Grid
This code creates three flexible grid columns. The outer columns use minmax(1.2rem, 1fr). This makes these columns a minimum width of 1.2rem and a maxiumum width of 1fr. The inner column for text uses minmax(auto, 57ch). The minimum size of auto makes the column size to the width of the text as it wraps — so it looks great on tiny screens. The maximum size of 57ch makes sure that column never gets bigger than 57 characters, keeping the text from getting too wide and unreadable on huge screens.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
6 days ago by spaceninja
Advanced CSS Theming with Custom Properties and JavaScript
Throughout this tutorial on CSS theming, we’ll be using CSS custom properties (also known as CSS variables) to implement dynamic themes for a simple HTML page. We’ll create dark and light example themes, then write JavaScript to switch between the two when the user clicks a button.
fridayfrontend  css  cssbasics  variables  customproperties  javascript  color  themes  darkmode 
6 days ago by spaceninja
Fun Tip: Use calc() to Change the Height of a Hero Component
The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.
fridayfrontend  css  cssbasics  calc  layout 
6 days ago by spaceninja
Redesigning your product and website for dark mode
Implementing dark mode is easy, but designing for it is less so. Here are some things you should consider when designing a dark mode version of your product or website to ensure you maintain accessibility and readability, and a consistent feel for your brand between Light and Dark.
fridayfrontend  css  design  darkmode  themes  color 
6 days ago by spaceninja
CSS and Network Performance
In this post I want to look at how CSS can prove to be a substantial bottleneck (both in itself and for other resources) on the network, and how we can mitigate it, thus shortening the Critical Path and reducing our time to Start Render.
fridayfrontend  css  performance  critical 
6 days ago by spaceninja
Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS
What if we could create interface pieces that behaved more like Lego blocks? This would speed up our frontend development, making it more robust, more organized. Our HTML would get smaller, and our CSS would get MUCH more manageable. In this article, I’ll show you how to organize your CSS architecture into HTML/CSS blocks that behave more like Lego blocks.
fridayfrontend  css  oocss  bem  smacss  modular 
6 days ago by spaceninja
Implementing a variable font with fallback web fonts
With variable fonts, more typographic richness and influence is coming to the web and this at a relatively low file size. You want to benefit from that in your next web project, but still, you don’t want to bet everything on this new technique? This article will show you how to integrate a variable font in your website and use classic web fonts as a fallback.
fridayfrontend  css  webfonts  variablefonts  fallback  typography 
6 days ago by spaceninja
Simplify Styling with Functional CSS
With functional CSS, your classes should apply one visual effect (e.g. no underline), and apply that every single time. So your CSS becomes made up of many small parts, that can be composed to give a specific visual effect.
fridayfrontend  css  functional  atomic  tachyons  tailwind 
6 days ago by spaceninja
The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await
We’ve invented “patterns” for handling fetching external data for our apps. Like most things, these patterns each have tradeoffs that have changed over time. In this post we’ll break down the pros and cons of three of the most common patterns, Callbacks, Promises, and Async/Await and talk about their significance and progression from a historical context.
fridayfrontend  video  javascript  ajax  callbacks  promises  async  await  fetch 
6 days ago by spaceninja
Learn to Integrate Visual Testing with Percy
Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site? That's exactly what Percy does. When you do a pull request, it literally takes screenshots and compares them to the screenshots of what is on master. If anything has changed, it lets you know.
fridayfrontend  css  video  testing  visualtesting  percy  tutorials 
13 days ago by spaceninja
.u-glue: A positioning pattern
I’d like to share `.u-glue`: A pattern we’ve been using at PMC for “gluing” one element on top of another. Useful for 1) writing less CSS, and 2) as a term product/design *and* engineering can use to talk about implementation. Designgineering!
fridayfrontend  css  utilities  absolute  position  patterns 
13 days ago by spaceninja
Web Performance 101: JS, CSS, HTTP, images & fonts
This is an introduction to the modern web loading performance. Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.
fridayfrontend  cssbasics  performance  javascript  images 
13 days ago by spaceninja
The Web Accessibility Introduction I Wish I Had
This post aims to tell you a few key things about accessibility. I can't cover everything, but I can cover: 1. Why accessibility matters; 2. Making a website accessible; 3. Testing accessibility; Let's begin!
fridayfrontend  cssbasics  accessibility 
13 days ago by spaceninja
Splicing HTML’s DNA With CSS Attribute Selectors
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, we’ll discuss how they operate and give you some ideas about how to use them.
fridayfrontend  cssbasics  attributes  selectors 
13 days ago by spaceninja
Dark Mode and CSS
With these changes, Dark Mode now becomes another aspect of responsive web design. As with device dimensions or color, the user’s environmental choices must be taken into account. Instead of adapting elements to viewport changes, you’ll be changing designs to match the user interface chrome outside that viewport.
fridayfrontend  css  dark  darkmode  color  themes  safari  mac 
13 days ago by spaceninja
Paul Miller — Using dark mode in CSS with MacOS Mojave
MacOS Mojave has been recently released with the Dark Mode option. The good news is: Safari Tech Preview 68 supports Dark Mode! The CSS itself is very simple. No polyfills are required, the media query code would be skipped if your browser doesn’t support it.
fridayfrontend  css  dark  themes  darkmode  color  safari  mac 
13 days ago by spaceninja
An Annotated webpack 4 Config for Frontend Web Development
As web devel­op­ment becomes more com­plex, we need tool­ing to help us build mod­ern web­sites. Here’s a com­plete real-world pro­duc­tion exam­ple of a sophisticat­ed web­pack 4 config
fridayfrontend  webpack  example  tools 
13 days ago by spaceninja
Learn CSS Flexbox by building a photo card component
CSS Flexbox has been around for quite a while now, and is well supported, but I still see a lot of upcoming web developers resorting to frameworks like Bootstrap in order to achieve simple layouts in the browser, perhaps because Flexbox introduces many new concepts that can make it difficult to use. This article will introduce you to Flexbox by walking you through a photo card component and will teach you just enough so that you can start using it right away.
fridayfrontend  css  grids  flexbox  layout  photos  cards  tutorials 
13 days ago by spaceninja
You're using <em> wrong
And I am too. And so is everybody else. …We need to start considering _why_ we are italicising text and using the right tag for it. We can make our tools better. We can make the web better.
em  italics  typography  accessibility  html  css  fridayfrontend 
13 days ago by spaceninja
What's New in WordPress 5.0 (How to Prepare for Gutenberg)
The release date for WordPress 5.0 is quickly approaching. If you ignored all the other updates this year, now’s the time to buckle down and take notice as this will be the biggest update for 2018 (possibly 2019). WordPress is completely revamping how users and developers use the CMS with their new Gutenberg editor. It’s now all about blocks. We’re also getting a fresh Twenty Nineteen theme which will be the default on new installations.
wordpress  gutenberg  fridayfrontend  cms  themes 
13 days ago by spaceninja
Are you accessible?  A Primer on Web Accessibility
In this post I am going to unpack what it means to be accessible on the web. We will cover: 1. The specifications and guidelines for the accessible web. 2. Best practices for website accessibility. 3. An extensive (but not absolute) resource list to get you started.
fridayfrontend  css  cssbasics  accessibility 
20 days ago by spaceninja
The Importance of Heading Levels for Assistive Technology
WebAIM’s 2017 Screen Reader survey tells us that navigating via headings is the most important way people who rely on assistive technology locate information. Because of this, it’s important to craft your website’s headings properly.
fridayfrontend  css  cssbasics  accessibility  headers  headings 
20 days ago by spaceninja
Keys to maintainable CSS: Order
The order I usually advise for is the following (you can set this up in stylelint): 1. Layout: The position of the element in space. Eg.: position, top, z-index. 2. Box: The element itself. Eg.: display, overflow, box-sizing. 3. Visual: Design of the element. Eg.: color, border, background. 4. Type: Typesetting of the element. Eg.: font-family, text-transform.
fridayfrontend  css  cssbasics  order  maintainability 
20 days ago by spaceninja
Creating a simple form with Flexbox
The simplest form on the web contains an email field and a submit button. Sometimes, the email field and the submit button is placed on the same row. This UI looks simple! But it can be difficult to build if you’re using older methods like inline-block. The hard part is getting the email field and button to align visually. The great news is: CSS Grid or Flexbox can help you build this form easily.
fridayfrontend  css  cssbasics  flexbox  layout  grids  forms 
20 days ago by spaceninja
Quick Tip: Use the “lang” Attribute for Better Accessibility
The lang attribute is one of the global HTML attributes developers can apply to any HTML element, and it can really help with accessibility. It allows you to specify the language of an element and all its child elements using a language “subtag”: a 2 or 3 character code defined by an international standards body.
fridayfrontend  css  cssbasics  lang  accessibility 
20 days ago by spaceninja
The Mine: No JS, CSS only adventure game
The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the : checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.
fridayfrontend  css  games  checkboxes 
20 days ago by spaceninja
How to Use the Animation Inspector in Chrome Developer Tools
Next time you’re putting together some CSS3-based animations you might find it helpful to jump into Chrome Developer Tools and take advantage of its animation inspection and tweaking features. In this quick tip we’ll give you a rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.
fridayfrontend  css  animation  devtools 
20 days ago by spaceninja
Trying to explain reduce motion to designers who don’t have a vestibular disorder
Vestibular issues are _weird_. I never used to have one, and now I do. I’ve no idea where it came from. It also makes little logical sense to people. They think I’m lying that I get triggered by animations because I also write about videogames. But here’s the thing: I’m fine with racing games, just as I’m fine with roller-coasters. Whatever’s going on in my head manifests when 1) too much of my focus is taken over by a screen, and; 2) whatever’s happening on the screen is _outside of my control_.
reduced-motion  accessibility  fridayfrontend  css 
20 days ago by spaceninja
Using Feature Detection, Conditionals, and Groups with Selectors
CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers.
fridayfrontend  css  supports  not  detection 
20 days ago by spaceninja
Concise Media Queries with CSS Grid
CSS grid definitely has the advantage when it comes to quickly organizing layouts. Even simple layouts require minimal effort with CSS grid compared to flexbox. With the `grid-template-areas` property, we can write responsive layouts with a single rule inside a media query. That’s because `grid-template-areas` defines a visual grid system on both axes at the once.
fridayfrontend  css  layout  mediaqueries  grids  cssgrid  flexbox 
20 days ago by spaceninja
Everything You Know About Web Design Just Changed, by Jen Simmons
2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.
intrinsic  design  layout  css  fridayfrontend  video  cssgrid  grids  flexbox 
20 days ago by spaceninja
SVG Marching Ants
Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. Let's break it apart bit by bit and see all the little parts come together.
fridayfrontend  cssbasics  svg  animation 
27 days ago by spaceninja
Disabled buttons suck
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
fridayfrontend  cssbasics  accessibility  disabled  buttons 
27 days ago by spaceninja
You need to fix your `line-height`
TL;DR: Body text (your normal paragraph text) should have a line-height of 1.4–1.6, give or take. Different fonts mean different line-height. Changes in font-size mean adjusting line-height. Really big fonts should have a tight line-height. Uppercase text should have a tighter line-height than the body.
fridayfrontend  css  cssbasics  line-height 
27 days ago by spaceninja
HTML for Numeric Zip Codes
But Zach pointed out that type="number" is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). So, zip codes, while they look like numbers, are probably best treated as strings.
fridayfrontend  css  cssbasics  zipcodes  forms  input  numbers  validation 
27 days ago by spaceninja
CSS Border-Radius Can Do That?
How to create very cool effects with a rarely used feature: When you use eight values specifying border-radius in CSS, you can create organic looking shapes.
fridayfrontend  css  border-radius 
27 days ago by spaceninja
Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers
While effective bundling of resources on the web has received a great deal of mindshare in recent times, how we ship front-end resources to our users has remained pretty much the same. The average weight of JavaScript and style resources that a website ships with is rising — even though build tooling to optimize the website has never been better. With the marketshare of evergreen browsers rising fast and browsers launching support for new features in lockstep, is it time we rethink asset delivery for the modern web?
fridayfrontend  javascript  babel  webpack  polyfills  performance 
27 days ago by spaceninja
Negative Grid Lines
Using negative grid lines allows us to place items relative to the end of the grid. This is especially useful if we have a large grid – it means we don’t have to work out the exact line number from the start, we could simply place it from the end.
fridayfrontend  css  cssgrid  grids  layout 
27 days ago by spaceninja
Why Using reduce() to Sequentially Resolve Promises Works
This is huge to understand because it probably goes against what you think is happening during this loop (at least, it did for me). When we use it to sequentially resolve promises, the reduce() loop isn't actually slowing down at all. It’s completely synchronous, doing its normal thing as fast as it can, just like always.
fridayfrontend  javascript  reduce  promises  async 
27 days ago by spaceninja
Working with High Contrast Mode, by Eric Bailey
Accessibility is more than just making things work in a screen reader. This talk discusses Windows High Contrast Mode's capabilities and limitations, and how to best design and develop for it.
fridayfrontend  video  accessibility  windows  highcontrastmode  contrast 
27 days ago by spaceninja
Introducing GitHub Actions
But actions are more than deploy and publish. That’s what’s so cool about them. They’re containers all the way down, so you could quite literally do pretty much anything — the possibilities are endless! You could use them to minify and concatenate CSS and JavaScript, send you information when people create issues in your repo, and more... the sky's the limit.
github  actions  fridayfrontend  workflow  process  continuousintegration  ci  events  git  docker  containers 
27 days ago by spaceninja
All the reasons you don't need a modal — and what to use instead.
fridayfrontend  css  cssbasics  modals  design 
4 weeks ago by spaceninja
The dialog element
Let's talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content.
fridayfrontend  css  cssbasics  html  dialog  modals 
4 weeks ago by spaceninja
Valid CSS Content
There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. The property generally takes anything you drop in there. However, there are some invalid values it won't accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.
fridayfrontend  css  cssbasics  generated  content  before  after 
4 weeks ago by spaceninja
Sass Selectors: To Nest Or Not To Nest?
Should you nest your BEM-style selectors by using & to construct the verbose selectors or not?
fridayfrontend  css  cssbasics  sass  nesting  bem 
4 weeks ago by spaceninja
When (and When Not) to Use the Number Input
You might think the number input is appropriate for the card number, expiry date, and CVC number — after all, they all consist of numbers. But it’s more complicated than that. By looking at what the spec says, what browsers do, and what users need, we can more easily determine when the number input is appropriate or not.
fridayfrontend  cssbasics  forms  numbers  inputs 
4 weeks ago by spaceninja
How to Get and Set CSS Variable Values with JavaScript
CSS variables are a very welcome addition to the language, despite them being incredibly basic.  Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need.  And just like every other part of a webpage, you can get and manipulate CSS variable values -- let's check out how!
fridayfrontend  css  cssbasics  javascript  variables  customproperties 
4 weeks ago by spaceninja
Quick Tip: Debug iOS Safari on a True Local Emulator (or your actual iPhone/iPad)
I’m sure plenty of folks know this, but like literally anything else in the world, plenty of folks don’t. This is an incredibly handy feature of developing responsive sites and testing them on as real of devices as you can. Plus, it doesn’t cost anything additional beyond your macOS computer.
fridayfrontend  cssbasics  ios  debugging  emulator  devtools 
4 weeks ago by spaceninja
Understanding the difference between grid-template and grid-auto
With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the same thing. In actual fact, they have little in common and are used to achieve different things.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
4 weeks ago by spaceninja
Uncharted territory: using aXe to forge a path, by Madalyn Parker
I've seen lots of talks on accessibility basics and implementing aria on static sites, but few that demonstrate what it's actually like to approach a codebase architected without accessibility in mind and add that layer in. I want to show that it's okay to roll out accessibility changes bit by bit, that it doesn't have to be all or nothing, and that there are good tools out there to help you out.
fridayfrontend  video  accessibility  axe 
4 weeks ago by spaceninja
Styling the Gutenberg Columns Block | CSS-Tricks
WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming with it. While Gutenberg is sure to improve the writing experience, it can cause a bit of a headache for developers who now need to ensure their plugins and themes are updated and compatible. In this article, we’re going to take a look at some styling conventions for Gutenberg blocks, and then add our own styles for Gutenberg’s Columns block.
fridayfrontend  css  gutenberg  wordpress  themes 
4 weeks ago by spaceninja
JavaScript Visualizer
A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript: 1. Type (ES5) JavaScript in the editor. 2. "Step" or "Run" through the code. 3. Visualize how your code is interpreted!
fridayfrontend  javascript  visualization  tools  learning 
4 weeks ago by spaceninja
Apply a Filter to a Background Image
You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky.
fridayfrontend  css  backgrounds  filters  images 
4 weeks ago by spaceninja
How to stop using console.log() and start using your browser’s debugger
One of the most common struggles that most new developers face is debugging. In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools.
fridayfrontend  programming  javascript  debugging  devtools 
4 weeks ago by spaceninja
What’s New in Create React App 2.0 Video Series
Earlier this month Create React App 2.0 was released adding a lot of new features. Some of those features include Sass Support, CSS Modules Support, Adding SVGs as React Components, Fragment Short Syntax, and Babel Macros. In this post, I’ll be highlighting the above 5 features.
fridayfrontend  sass  javascript  react  svg  components  cssmodules 
4 weeks ago by spaceninja
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
In this article, I want to explore how the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
5 weeks ago by spaceninja
Creating Layouts with CSS Grid
CSS Grid is a relatively recent layout specification, shipping in most browsers as of October 2017. Grid allows us to create layouts that were previously impossible, or only possible with lots of DOM operations.
fridayfrontend  css  cssbasics  grids  layout  cssgrid 
5 weeks ago by spaceninja
Introducing the Button element - HankChizlJaw
How many times have you thought to yourself something like this? "As much as I love making <div> elements buttons, it'd be great if there was an npm package that I could install that would give me keyboard events and focus." Think no more, because I have exciting news. There's a native element called a <button>, and I'm here to talk about it with you today.
fridayfrontend  cssbasics  html  buttons  accessibility 
5 weeks ago by spaceninja
How I remember CSS Grid properties
The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid.
fridayfrontend  cssbasics  css  cssgrid  grids  layout 
5 weeks ago by spaceninja
Use Cases For Flexbox
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?
fridayfrontend  css  cssbasics  flexbox  grids  layout 
5 weeks ago by spaceninja
One Invalid Pseudo Selector Equals an Entire Ignored Selector
Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, Webkit and Gecko browsers assume it is valid, not invalidating the selector list.
fridayfrontend  cssbasics  css  pseudo-elements  browsers 
5 weeks ago by spaceninja
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
fridayfrontend  cssbasics  layout  cssgrid  grids  flexbox  columns 
5 weeks ago by spaceninja
How I organize CSS in large projects using UFOCSS: Naming Convention
The main purpose of CSS naming conventions is to make the CSS selectors as informative and readable as possible, but defining a convention is not really a piece of cake. Naming is by far one the most debated activities in computer science. We can definitely benefit of a naming convention that helps us to write maintainable and scalable code. On the contrary, poorly written CSS can quickly drive us crazy and turn into a nightmare.
fridayfrontend  css  modular  ufocss  names 
5 weeks ago by spaceninja
How to Write Accessible JavaScript
While accessibility can be frustrating, you can set yourself, your team, and your client up for success by planning for accessibility from the beginning. Here are four techniques to save you time and trouble when building accessible JavaScript-enabled websites and applications.
fridayfrontend  javascript  accessibility  buttons  keyboard  aria  focus 
5 weeks ago by spaceninja
Idle Until Urgent
After spending a lot of time thinking about this problem, I realized that the evaluation strategy I really wanted was one where my code would initially be deferred to idle periods but then run immediately as soon as it’s needed. In other words: idle-until-urgent.
fridayfrontend  javascript  idle  urgent  priority  performance  defer 
5 weeks ago by spaceninja
Preventing a Grid Blowout
Chris Coyer presents a simple layout and talks about how CSS grid handles things when the grid contents are too big for the layout you've described.
fridayfrontend  css  grids  cssgrid  layout 
5 weeks ago by spaceninja
The Way We Talk About CSS
There is frequently talk about how developers whose main area of expertise is CSS feel that their skills are underrated. I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else.
fridayfrontend  css 
5 weeks ago by spaceninja
Decoupling the Front-end with Modular CSS, by Julie Cameron
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
fridayfrontend  video  css  modular  oocss  smacss  bem 
5 weeks ago by spaceninja
From Bootstrap to CSS Grid: Move Forward Without Breaking Anything! by Natalya Shelburne
Don’t let still being on a float based layout (like Bootstrap) stop you from using CSS Grid. Learn how the power of CSS combined with feature queries allow you to declare `display: grid` with confidence on any project. Finally, you can get excited about designing for web again!
fridayfrontend  css  grids  layout  cssgrid  bootstrap  video 
6 weeks ago by spaceninja
The Shapes of CSS
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
fridayfrontend  cssbasics  css  shapes 
6 weeks ago by spaceninja
Lazy Loading Images – The Complete Guide
Now, since we cannot do away with images, we need to make our web pages load really fast with them. In this guide, we will talk about lazy loading images, a technique that helps improve the page load time and reduce page size while still retaining all the images on the page.
fridayfrontend  cssbasics  lazyload  images  performance 
6 weeks ago by spaceninja
Don't use empty or low content for your design system grid examples
But anyway, say you're setting up a grid that uses mixed values for column widths like this. Don't do that with totally empty columns, otherwise, you'll get a false sense of how those columns will behave.
fridayfrontend  cssbasics  grids  cssgrid  flexbox  layout 
6 weeks ago by spaceninja
5 Easy Ways to Make Your UI More Accessible
Even if the UI project you’re working on doesn’t have accessibility requirements, it’s worth understanding the implications of your design decisions. If you’re not thinking about accessibility, then you’re not thinking about the full user experience. With that in mind, here are a few simple ways to start incorporating accessibility into your UI designs.
fridayfrontend  accessibility  html  css  contrast  color 
6 weeks ago by spaceninja
Writing good text alternatives
They say a picture paints a thousand words. Alt text and captions give people who aren’t able to see pictures these words.
fridayfrontend  cssbasics  html  accessibility  alt 
6 weeks ago by spaceninja
Putting things on top of other things
This is a post about stacking contexts: what they are, when they happen, and why.
fridayfrontend  cssbasics  css  z-index 
6 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  aa  abem  absolute  abstraction  accessibility  accordions  acrylic  actions  active  adaptive  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  applewatch  apply  architecture  aria  aria-controls  aria-describedby  aria-hidden  art  artdirection  ascii  asl  aspectratio  async  atom  atomic  attr  attributes  audio  audits  autism  auto  auto-fill  auto-fit  auto-placement  autocomplete  autofill  automation  autoprefixer  avengers  await  aws  axe  babel  backdrop-filter  background  background-blend-mode  background-clip  background-position  backgrounds  bars  base  batman  beautifiers  before  bem  bestpractices  beyonce  bezel  billing  bio  blending  blendmodes  blind  bloat  block  blocking  blocks  blur  boilerplate  bookmarklets  books  bootstrap  border-image  border-radius  borders  bower  box-decoration-break  box-shadow  box-sizing  boxmodel  bradfrost  breadcrumbs  break-word  breakout  breakpoints  breathe  broadband  broccoli  broken  browser  browserify  browsers  buffet  bugs  build  bundler  buttons  calc  calculator  callback  callbacks  cameras  caniuse  canvas  captions  carbon  cards  carousel  cartoons  cascade  cats  centered  ch  chaining  challenge  change  channels  characterentities  charts  cheatsheet  checkboxes  checked  checklist  chinese  chriscoyier  chrome  ci  circle  clamp  class  classList  clearfix  clienthints  clip  clip-path  clone  cms  code  codeofconduct  codereviews  codesmells  codezen  collaboration  collapse  color  columns  comics  commas  comments  commonjs  communication  compassion  complexity  components  compositing  compression  conditionals  conic-gradient  connect4  console  contain  containerqueries  containers  content  contenteditable  contents  context  continuousintegration  contrast  controls  cookies  cortana  counters  creative  creditcards  crisis  critical  cropping  css  css-in-js  css3  css4  cssbasics  cssgrid  cssmodules  cssom  csspaint  csswg  culture  currentcolor  cursors  customelements  customizable  customproperties  dark  darkmode  data  data-url  date  datepicker  dead  debug  debugging  declarations  declarative  defaults  defer  delay  demos  design  designsystem  designtokens  desktop  details  detection  developers  development  devops  devtools  diagrams  dialog  diamonds  diffs  dinosaurs  direction  director  disabled  discrimination  display  displaycontents  disruption  diversity  dl  docker  documentation  dom  dpi  draft  drama  draplin  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  durability  dyslexia  ease-in  ease-out  easing  edge  editorconfig  editors  effects  efficiency  elements  ellipse  ellipsis  em  email  emmet  emoji  empty  ems  emulator  engineering  enhancement  entities  env  environmental  eot  ericmeyer  errors  es6  es2015  es2017  eslint  estimation  ethics  eventListener  events  evergreen  ex  example  exclusions  explicit  export  extends  extensible  extension  fallback  fantasai  faqs  fatigue  favicons  featurequeries  features  fecolormatrix  feedback  feminism  fetch  fieldset  file  filter  filters  firefox  first-child  first-letter  first-line  fitty  fixed  fixtext  flat  flex-basis  flex-grow  flex-wrap  flexbox  flexible  floats  flow-root  flowtype  fluid  focus  focus-ring  focus-visible  focus-within  foft  foit  font-display  font-face  font-feature-settings  font-size  font-variant  font-weight  fontawesome  fonts  footer  footnotes  formatting  forms  fouc  foundation  fout  fr  frameworks  fridayfrontend  frontend  fullbleed  fun  functional  functions  funny  galleries  games  generated  generator  generic  geocities  gestures  gifs  git  github  glitch  glyphs  gmail  google  gpu  gradients  graphql  graphs  grid-gap  grids  grunt  guide  guidelines  guides  gulp  gutenberg  gutters  gzip  hacks  hamburger  handbook  hanging-punctuation  hardwareacceleration  harrypotter  harryroberts  has  headers  headings  headlines  height  hex  hidden  highcontrast  highcontrastmode  highlight  hints  hiring  history  holygrail  horizontal  houdini  hover  howto  hr  hsl  hsla  html  html5  http2  httponly  https  humor  husky  hyphens  icons  idiomatic  idle  ie  ie10  ie11  iframes  illustrator  images  imperative  implicit  important  imposter  in-range  inclusive  indeterminate  inherit  initial  initial-letter  initial-scale  inline  inline-flex  input  inputmode  inputs  inset  inspiration  instapaper  internationalization  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  ios  iphone  is  italics  itcss  jasmine  java  javascript  jekyll  jenkins  jinabolton  jobs  jokes  jpl  jquery  jspm  karma  kerning  keyboard  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  lines  linkedin  links  lint  lint-staged  linters  lists  literals  liveregions  loaders  loading  local  localization  localoverrides  locks  log  logic  logical  logos  ltr  lukewroblewski  mac  macos  main  maintainability  maintenance  make  management  manifest  maps  margins  mario  marquee  mask  masks  masonry  matches  matchmedia  material  math  max  max-lines  max-width  mcss  media  mediaqueries  medium  meltdown  memes  memory  menu  menus  meta  metrics  microdata  mikemonteiro  min  min-width  minmax  misconceptions  mistakes  mix-blend-mode  mix-width  mixins  mixmax  mma  mobile  mocha  mod  modal  modals  modernizr  modular  modules  modulo  moment  motion-path  mouse  mythbusters  myths  names  namespacing  narrator  nasa  native  navigation  nesting  netflix  netscape  newsletters  newton  night  node  normalize  not  notch  notifications  npm  nth-child  nth-last-child  nth-of-type  numbers  numeric  nvda  object-fit  object-position  offline  offscreen  offset-path  ol  onboarding  oocss  opacity  opensource  opentype  opinionated  optimization  optimizelegibility  optional  order  organization  orphans  osx  otters  out-of-range  outline  outline-offset  overflow  overflow-wrap  overlay  overscroll-behavior  packages  padding  painting  pantsuit  parallax  path  patternlibrary  patterns  payments  percy  performance  photos  php  pinned  pixels  placeholder  placeholder-shown  placeholders  plan  plugins  pocket  podcasts  pointer  polyfills  polygon  portfolios  position  postcss  pragmatism  pranks  pre  prefixes  preload  preprocessors  prettier  pride  print  priorities  priority  privacy  process  productivity  professional  profile  programming  progress  progressive  project  promises  properties  proportional  pseudo-classes  pseudo-elements  pullrequest  puppeteer  push  pwa  px  qa  quantity  query  querySelector  questions  quotes  radial  radio  ratings  ratios  react  read-only  readability  readermode  rebase  reboot  recap  redlining  reduce  reduced-motion  redux  refactoring  reference  reflog  reflow  refresh  regression  relative  reliability  reload  rem  remote  repaint  required  reset  resilient  resizeobserver  resources  responsive  retina  retro  revert  reviews  rgb  rgba  ribbons  ripple  roadmaps  roadtrips  rolemodels  roles  rtl  ruby  rules  rulesets  rwd  safari  safe  samesite  samsung  sass  scalable  scale  scaling  scifi  scope  screencasts  screenmagnifiers  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-snap  scroll-snap-points  scrollbars  section508  security  select  selection  selectors  self  sem  semantics  sensors  seo  sequential  serviceworkers  setproperty  settimeout  shadowdom  shadows  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  shit  shortcuts  shorthand  shrink-to-fit  sidebar  sidebars  siri  sizes  skiplinks  slack  slides  smacss  small-caps  smooth  snap  snippets  snook  software  sorting  space  spacing  speaking  specification  specificity  specs  spectre  speed  speedindex  spinners  sprites  square  squash  srcset  stacking  standards  stars  states  static  statistics  stats  sticky  stripe  study  style  styleguide  stylelint  subgrid  sublime  suffixes  suit  summary  support  supports  surveys  sustainability  susy  svg  svgo  symbols  syntax  system  tabindex  table-layout  tables  tabs  tachyons  tailwind  talkback  target  taskforce  tasks  teams  teamwork  tech  television  templates  terminal  testing  tests  text  text-rendering  text-shadow  text-wrap  textarea  textfill  textfit  themes  theming  this  tictactoe  tidy  time  timelines  timetravel  tips  titles  tmbg  toggle  toggles  tokens  tools  tooltip  tooltips  toto  touch  towerdefense  tracking  tradeoffs  transforms  transitions  translation  transparent  transpiler  tricks  troubleshooting  truncate  ttf  tumblr  tutorials  twitter  tylersticka  typescript  typography  ucbrowser  ufocss  uglify  ui  ul  underline  underlines  undo  units  unset  unused  urgent  usability  use  user-error  utilities  ux  valid  validation  values  variablefonts  variables  vertical  vertical-align  vh  video  viewport  viewport-fit  virtualassistants  visibility  visual  visualization  visualtesting  vm  vmax  vmin  vms  voice  voiceover  voltron  vox  vscode  vue  vw  w3c  wat  watchOS  wcag  webapps  webassembly  webcomponents  webfonts  webkit  webpack  westworld  whitespace  width  will-change  windows  woff  word-break  word-wrap  wordpress  work  workflow  wrap-flow  wrap-through  wrapping  writing-mode  writingmodes  x11  yandex  yarn  youdontneed  youmightnotneed  youtube  z-index  zeldman  zipcodes  zoom 

Copy this bookmark: