recentpopularlog in


« earlier   
What makes someone a good front-end developer?
The least important skills for a front-end developer to have are technical ones. What does matter is problem-solving, critical thinking, communication and empathy.
fridayfrontend  css  cssbasics  culture  teamwork  frontend  empathy  communication  skills 
22 hours ago by spaceninja
An Introduction to CSS Shapes
CSS Shapes allow us to make interesting and unique layouts by defining geometric shapes, images, and gradients that text content can flow around. Learn how to use them in this tutorial.
fridayfrontend  css  cssbasics  shapes  shape-outside  shape-inside  shape-margin  shape-image-threshold  layout 
22 hours ago by spaceninja
Disability is a spectrum, not a binary
When we look at disability as a spectrum instead of a binary, we can see that a lot more people struggle to use our stuff than we might think. The good news is that making things accessible helps even more people than we might realise. In the best case we take something from can’t use to can use. In the worst case, we make something a little easier for everyone to use. That means more, happier, humans using our stuff. Yay!
fridayfrontend  cssbasics  accessibility 
22 hours ago by spaceninja
What do you name color variables?
What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?
fridayfrontend  css  cssbasics  sass  variables  color  names  tokens 
22 hours ago by spaceninja
Managing Flow and Rhythm with CSS Custom Properties
Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.
fridayfrontend  css  cssbasics  vertical  rhythm  variables  customproperties 
22 hours ago by spaceninja
Programming CSS
There’s a worrying tendency for “real” programmers look down their noses at CSS. It’s just a declarative language, they point out, not a fully-featured programming language. Heck, it isn’t even a scripting language. That may be true, but that doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages. Take CSS selectors, for example. At the most basic level, they work like conditional statements.
fridayfrontend  css  cssbasics  programming 
22 hours ago by spaceninja
Accessible SVG Icons with Inline Sprites - 24 Accessibility
If we were searching for reasons to use icons on a project, we don’t need to go far in order to find them. As Oliver Reichenstein wonderfully put it in his talk “On Icons” at Smashing Conference Freiburg 2016: “At a certain stage in a project someone always comes in and says: ‘We need icons!'” Whatever the reasoning may be, we need to make sure that people who can’t see or recognize these icons can understand their purpose.
fridayfrontend  css  cssbasics  icons  svg  accessibility  sprites 
22 hours ago by spaceninja
Preventing Content Reflow From Lazy-Loaded Images
When a user scrolls and images are lazy-loaded, those img elements go from a height of 0 pixels to whatever they need to be. This causes reflow, where the content below or around the image gets pushed to make room for the freshly loaded image. Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any elements that are affected by that image's shape.
fridayfrontend  cssbasics  javascript  lazyload  images  reflow  layout  css  aspectratio 
22 hours ago by spaceninja
A look at CSS Resets in 2018
In order to deal with the inconsistencies between user agent stylesheets, CSS resets were born. A CSS reset is a set of styles applied to a page before any other custom styles, with the purpose of creating a more standardised base between browsers.
fridayfrontend  css  cssbasics  reset 
7 days ago by spaceninja
How to understand CSS Position Absolute once and for all
Stop losing your elements on the screen by understanding how an object figures where it is supposed to sit
fridayfrontend  css  cssbasics  position  absolute  layout 
7 days ago by spaceninja
How and when to use the tabindex attribute
There is almost no reason to ever use a positive value to tabindex, and it is actually considered an anti-pattern. If you’re finding the need to use this value to change the order in which elements become focusable, it is likely that what you actually need to do is change the source order of the HTML elements.
fridayfrontend  cssbasics  html  tabindex  accessibility 
7 days ago by spaceninja
Braces to Pixels
Doesn’t CSS seem like magic? Well, in this third installment of “URL to Interactive” we’ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we’ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of <insert your favorite drink’s name here>, and let’s get going.
fridayfrontend  css  cssbasics 
14 days ago by spaceninja
Why Browsers Download Stylesheets With Non-Matching Media Queries
The thing is, the user could always decide to resize their window (impacting width, height, aspect ratio), to print the document, etc., and even things that at first sight seem static (like the resolution) can change when a user with a multi-screen setup moves a window from say a Retina laptop screen to a bigger desktop monitor, or the user can unplug their mouse, and so on.
fridayfrontend  css  cssbasics  mediaqueries  performance 
14 days ago by spaceninja
Testing iOS on a Mac (for Free!)
Full interactive iOS Mobile Safari browser testing is possible right on your Mac, no additional services necessary. We'll set up Apple's Simulator and configure it for testing Safari on a wide range of iOS versions and devices.
fridayfrontend  css  cssbasics  testing  qa  ios  vm  emulator 
14 days ago by spaceninja
When to use CSS vs. JavaScript
I don’t really have a formal model for choosing when to use CSS vs. JS, but approach to which one to use and when looks like this: If the item requires interaction from the user, use JavaScript (things like hovering, focusing, clicking, etc.). If the item needs to change in visibility, needs to be animated, or have any other visual change made to is, use CSS.
fridayfrontend  css  cssbasics  javascript 
14 days ago by spaceninja
The Current State of Styling Scrollbars
There is good news on this front! The standards bodies that be have moved toward a standardizing methods to style scrollbars, starting with the gutter (or width) of them. The main property will be scrollbar-gutter and Geoff has written it up here. Hopefully Autoprefixer will help us as the spec is finalized and browsers start to implement it so we can start writing the standardized version and get any prefixed versions from that.
fridayfrontend  css  cssbasics  scrollbars 
14 days ago by spaceninja
How to Create Printer-friendly Pages with CSS
Converting responsive, continuous media to paged paper of any size and orientation can be challenging. However, CSS print control has been possible for many years, and a basic stylesheet can be completed within hours. The following sections describe well-supported and practical options for making your pages printer-friendly.
fridayfrontend  css  cssbasics  print 
21 days ago by spaceninja
Accessibility is Not What You Think
Accessibility is not just about meeting the needs of the disabled or catering for edge cases. Accessibility impacts everybody.
fridayfrontend  cssbasics  accessibility 
21 days ago by spaceninja
Keyboard-Only Focus Styles
Like Eric Bailey says, if it's interactive, it needs a focus style. Perhaps your best bet? Don't remove the dang outlines that focusable elements have by default. If you're going to rock a button { outline: 0; }, for example, then you'd better do a button:focus { /* something else very obvious visually */ }. I handled a ticket just today where a missing focus style was harming a user who relies on visual focus styles to navigate the web.
fridayfrontend  cssbasics  accessibility  focus  focus-visible 
21 days ago by spaceninja
Simple recommendations for writing text descriptions that make a big difference
The trick to providing the right text description is knowing the purpose of the image. Ask yourself why the image is present on the page: does it provide useful information, perform a function, provide a label for an interactive element, add to the aesthetics of the page, or is it purely decorative?
fridayfrontend  cssbasics  accessibility  alt  descriptions  howto 
21 days ago by spaceninja

Copy this bookmark:

to read