One File, Many Options: Using Variable Fonts on the Web
There’s more than various weights to consider. CSS3 introduced the font-stretch property, with values from ultra-condensed to ultra-expanded. Until now, these values only worked if you provided a separate file for each width. If you wanted every combination of weight and width in both normal and italic, you would need dozens of files. With variable fonts, we can get all this variety with a single file.
css  variablefonts  typography 
14 hours ago
Clippy — CSS clip-path maker
Great tool to help create clip-paths for CSS.
css  clip-path  design  svg  tools  generator 
14 hours ago
Laws of UX
Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.
laws  ux  ui  design  accessibility 
14 hours ago
Getting Started with Transition and Transform In CSS
CSS transitions and transformations are one of my favorite things to work with. I love being able to create cool, simple animations with just a few lines of code. Making fully animated pages without Javascript also appeals to me. It’s perfect for designers just getting into coding because the syntax is simple and concise, with the browser doing most of the work. Without further ado, lets dive in to the syntax and different things you can do with CSS Transition and Transform!
cssbasics  animation  transitions  transforms  css 
14 hours ago
Designing Tables for Reusability
Our visual design lead tasked us with designing a standard table UI pattern that could be used across multiple product lines with different use cases and different target users. Our approach involved getting quickly to the core of the purpose and problem early on, putting our ideas through bullshit tests early, and communicating constantly on the developments. We were able to generate an efficient design solution, get the team’s approval quickly, and validate through user testing.
tables  design  ux  ui  planning  iteration 
14 hours ago
Automatically creating an accessible color palette from any color? Sure!
How do you let your users chose any color, but still make sure that the colors make your app useful and accessible? You create rules.
accessibility  color  design  javascript 
14 hours ago
Accessibility Interview Questions: A starting point of question topics to ask someone that wants you to give them a job
These questions try to stay away from directly asking candidates to recite specifications, or rattle off screen reader hot keys. Those can easily be looked up on the job. Instead these questions try to act as conversation starters, to gain insight into how someone solves problems, and interprets accessible, inclusive user experiences.
accessibility  interviews  questions 
15 hours ago
How to Write CSS That Works in Every Browser, Even the Old Ones
Let me walk you through how exactly to write CSS that works in every browser at the same time, even the old ones. By using these techniques, you can start using the latest and greatest CSS today — including CSS Grid — without leaving any of your users behind. Along the way, you’ll learn the advanced features of Can I Use, how to do vertical centering in two lines of code, the secrets to mastering Feature Queries, and much more.
cssbasics  video  grids  cssgrid  flexbox  caniuse  featurequeries 
16 hours ago
A11y isn't Just…
For a great many people when you talk about accessibility, they instantly think about Screen Readers. While Screen Readers are an important tool for those that have an impairment there are many other ways a user can be affected.
cssbasics  accessibility  screenreaders  wcag  section508 
16 hours ago
Some Things About `alt` Text
I'm sure you know about alt text. It's the attribute on the image tag that has the important task of describing what that image is for someone who can't see it for any reason. Please use them.

I don't want to dimish the please use them message, but some interesting alt-text-related things have come up in my day-to-day lately that are related.
cssbasics  html  alt  accessibility 
16 hours ago
Clean Up Your Code with Modular CSS
CSS. It’s a web designer’s playpen. With so many colors, type settings, layout options, and responsive possibilities, it’s easy to turn a stylesheet into a million line nightmare. However, with a few simple actions you can clean up the mess so the CSS works with you, not against you. A few weeks ago, frontend developer Julie Cameron came through our virtual Treehouse office and bestowed some wisdom we still can’t shake. So now I’m sharing it with you all!
cssbasics  css  modular  components  oocss  smacss  bem 
16 hours ago
Understanding Margin Collapse in CSS
Learn about the margin collapse, a fundamental concept of CSS layout. See visual examples of when margin collapse happens, and when it doesn't.
cssbasics  css  margins 
16 hours ago
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
css  tips  cssbasics  learning 
16 hours ago
Text Splitting Causes Screen Reader Problems
I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you!
fridayfrontend  accessibility  aria  voiceover  screenreaders 
Inclusive Component: Notifications
In screen reader and keyboard accessibility terms, it's important that focus is not moved to such messages. If there is nothing to be done with the tool, you don't put the tool in the person's hand. Despite this, moving focus has endured as a 'best practice'. Why? Because focusing an element has, traditionally, been the most reliable way to get that element and its contents announced in screen readers. Fortunately, we have live regions to help us break this habit.
fridayfrontend  css  accessibility  notifications  aria  liveregions 
Thinking in CSS Grid
Two dimensional and outside-in. What does it mean? The idea is to divide the enter page in to number of rows and columns (depending on the design) and then arrange content inside this.
fridayfrontend  css  grids  cssgrid  layout 
Say Hello to Houdini and the CSS Paint API
But there’s one Houdini API that you can start playing with today: the CSS Paint API. This API lets you draw images for use with CSS properties that expect them — for example, background-image and list-style-image.
fridayfrontend  css  houdini  api  csspaint 
Swapping Images with the Sizes Attribute
One thing that is interesting about sizes is that the browser trusts its description over the actual image's size in the page layout, which may not actually correspond at all. In other words, sizes allows you to lie about an image's layout size, and that turns out to be pretty powerful for dynamic image components like a magnifier tool.
fridayfrontend  css  responsive  images  sizes  zoom 
Changing The Layout Game by Chris Wright
The tools we had weren’t designed for the challenge, but we made them work. Today, we have game changers like Grid, Columns, Flexbox, and Calc. With these powerful features we’re capable of creating beautiful, flexible layouts with much more simplified code, and build out components that can independently adapt to the space in which they exist.
fridayfrontend  css  video  layout  grids  cssgrid  flexbox  resizeobserver  variables  customproperties 
2 days ago
Using Design Tokens with the Lightning Design System
Design Tokens are the basic atoms of the Lightning Design System. Learn what they are, how they help us maintain and scale our design language across multiple platforms and devices, best practices, and how to use them to apply branding customization.
fridayfrontend  css  video  tokens  designsystem 
2 days ago
Lesser known CSS quirks & advanced tips
Below you’ll find some of the weirdest CSS features, along with tips and tricks for advanced CSS users.
fridayfrontend  css  tips  padding  margins  z-index  customproperties  variables 
2 days ago
Commitizen: Simple commit conventions for internet citizens
When you commit with Commitizen, you'll be prompted to fill out any required commit fields at commit time. No more waiting until later for a git commit hook to run and reject your commit (though that can still be helpful). No more digging through to find what the preferred format is. Get instant feedback on your commit message formatting and be prompted for required fields.
git  commitmessages  standards  consistency  templates 
4 days ago
Awesome JS Talks
This is a collection of well-received talks about JavaScript, covering topics such as ES6, JavaScript frameworks, client-side apps, mobile integration, JavaScript performance, tooling, leveling up, and more.
javascript  video  awesome  lists  frontend  conferences 
4 days ago
Front-Trends Videos
Videos from Front-Trends Conference
frontend  video  conferences 
4 days ago
O'Reilly Videos
Videos from O'Reilly conferences
frontend  video  conferences 
4 days ago
CSS Dev Conf Videos
Videos from CSS Dev Conference
frontend  video  conferences 
4 days ago
BocoupLLC Videos
Videos from Bocoup-hosted conferences (CSSconf, OpenVis)
frontend  video  conferences 
4 days ago
Creative Bloq Videos
Videos from Creative Bloq conferences (Generate)
frontend  video  conferences 
4 days ago
DotConferences Videos
Videos from DotConferences (dotCSS, dotJS)
frontend  video  conferences  css  javascript 
4 days ago
Web Conferences Amsterdam Videos
Videos from Web Conferences Amsterdam (CSS Day)
frontend  video  conferences 
4 days ago
Beyond Tellerrand Videos
Videos from the Beyond Tellerrand conference
frontend  video  conferences 
4 days ago
Famous Videos
Hosts of the JquerySF Conference
frontend  video  conferences  javascript 
4 days ago
The Paciello Group Videos
Hosts of the Inclusive Design 24 conference
frontend  video  accessibility  conferences 
4 days ago
CSS Grid for the Traditionalists
I’ve created some experiments with CSS Grid before but I only realise how much I appreciate CSS Grid once I start using it in production. I appreciate how it makes building layout much simpler. When I see a layout design that looks quite experimental, I can quickly visualise how I am going to turn that design into code. I am no longer limited by the older layout tools in CSS. There’s a new standard in town and I happily embrace it.
fridayfrontend  css  grids  cssgrid  layout 
4 days ago
Your Interactive Makes Me Sick
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through? Taking the time to look at each element from an accessibility standpoint, and ensuring that users can control their own level of engagement with a piece, will make your stories stronger and available to a wider audience of readers.
fridayfrontend  animation  design  accessibility  scroll  reduced-motion 
5 days ago
Croque Madame
you’re going to make this sauce and want to use it on everything! it’s so cheesy and decadent. ivan took the leftovers and made mac + cheese with it which also sounds SO good. such a simple recipe to throw together and feels very impressive. i liked mine without the egg, but the egg makes it more breakfast appropriate. the recipe was inspired by this recipe on Food&Wine and it’s definitely fun to make when you’re feeling a little indulgent!
recipes  sandwich  ham  cheese  egg 
5 days ago
How to talk to a woman coworker about your salary
This is good advice. I wanna offer some thoughts about how to potentially approach the first suggestion. How to talk to a woman coworker about how much you make.
salary  communication  gender  feminism  culture 
5 days ago
How to Rands
The following is a user guide for me and how I work. It captures what you can expect out of the average week, how I like to work, my north star principles, and some of my, uh, nuance. My intent is to accelerate our working relationship with this document.
leadership  management  communication 
5 days ago
Slides – Create and share presentations online
Slides is a place for creating, presenting and sharing slide decks.
slides  presentation  tools  code 
5 days ago
Ever wonder how to produce this duotone color treatment to photos as seen in apps like Spotify?
You can achieve this in Photoshop or Affinity Photo by using Gradient Maps. Looks great when applied to portraits
duotones  color  design  gradients 
5 days ago
Mockuuups Studio: Product mockups in a second.
Drag-and-drop tool for creating beautiful app previews and marketing materials.
mockups  ios  design  layout 
5 days ago
The Male Glance
To be clear, the show about boys got way too much credit, and the show about girls got way too little. This is how we approach male vs. female work. Let’s call it the “male glance,” the narrative corollary to the male gaze. We all have it, and it’s ruining our ability to see good art.
television  movies  writing  gender  bias  discrimination  sexism  feminism 
5 days ago
Dealing with Periods in Fiction
You know what I would like to see fanfic of? How the people of various science fiction/fantasy/comic book universes deal with periods.
writing  worldbuilding  periods  feminism  fanfic 
5 days ago
Why Are There Few Women in Tech? Watch a Recruiting Session
The researchers documented an unwelcoming environment for these women, including sexist jokes and imagery, geeky references, a competitive environment, and an absence of women engineers—all of which intimidated or alienated female recruits.
hiring  sexism  feminism  gender  bias  discrimination  tech  recruiters 
5 days ago
The Tragedy of GJ237b
The game, being played in the room, is about the history, societies and cultures of GJ 237b. It is not something that you can play, or even understand. Do not enter the room. Don’t look at it, either.
rpgs  scifi  space 
5 days ago
The 5 4 3 2 1 Writing Exercise
A technique I learned to stop panic attacks is helpful when writing a new setting: 5 things I see; 4 things I hear; 3 things I feel; 2 things I smell; 1 thing I taste.
panic  writing  worldbuilding 
5 days ago
StockPhotos – UKBlackTech
Having spoken to a wide cross section of BAME people in tech, it is clear that they often don't see themselves in this sector. Also there are images of BAME in tech in America, there is very little from Britain by a British audience and tends to be difficult to find. A simple but effective solution was to shoot a series of images featuring BAMEs using tech.
photography  stock  free 
5 days ago
Who I want to work for
I have been thinking about leadership and what I’ve appreciated most from various bosses over the years. Inspired by Chad Fowler’s “Who I want to hire”, I started noting who I want to work for, in terms of an ideal leader.
leadership  management  hiring  culture 
5 days ago
Myers-Briggs Personality Type Cleaning Decluttering Tips
Decluttering may not be your strong suit. In fact, you're likely to begin a decluttering project, only to find yourself sitting in the corner reading a book you'd forgotten about or sifting through a stack of Instax prints, the cleaning endeavor completely forgotten.
cleaning  personality  myers-briggs 
5 days ago
Kid Friendly Chicken Ramen Soup Recipe
Mostly what I love about this chicken ramen soup though is that it’s easy to make, even on a weeknight if you have the chicken prepped in advance. And it’s a great introduction to some new flavors for kids in an easy format. There’s curry in this soup! There’s coconut! These are both things that my three-year old claims to not like.
recipes  ramen  soup  curry 
5 days ago
Beautiful, high-res photos of black and brown people. For free.
stock  photos  photography  free  design 
5 days ago
7 Practical Tips for Cheating at Design
Improving your designs with tactics instead of talent.
design  ui  color  shadows  borders  icons  buttons  tips 
5 days ago
WebAIM: History of the browser user-agent string
And then Google built Chrome, and Chrome used Webkit, and it was like Safari, and wanted pages built for Safari, and so pretended to be Safari. And thus Chrome used WebKit, and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretended to be Mozilla, and Chrome called itself Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/ Safari/525.13, and the user agent string was a complete mess, and near useless, and everyone pretended to be everyone else, and confusion abounded.
browsers  history  user-agent  mozilla  chrome  safari  webkit 
5 days ago
“My Code is Self-Documenting” — Eric Holscher - Surfing in Kansas
Self-documenting code is one of the biggest documentation myths in the software industry. This view generally conflates documentation with code comments. I’d like to make two arguments in this post: 1. Code comments have value. 2. Documentation has more value than just explaining how software works.
documentation  comments  code  programming  culture  maintainability 
5 days ago
The littlest dragon 🐉
The world's tiniest dragon must defend his hoard, a single gold coin, from those who would steal it.
dnd  rpgs  dragons 
5 days ago
Croque Monsieur
Only the French could think of this amazingly rich creation: A grilled ham and cheese topped with a rich buttery sauce and broiled. In fact there is even a version called the Croque Madame which has a fried egg on top. I’m sure that is yummy but it seemed like overkill to me. A 1,000 calorie sandwich – excellent. A 1,200 calorie sandwich – CRAZY.
recipes  cheese  ham  sandwich 
6 days ago
Creamy Citrus Smoothie Recipe
They are relatively easy to toss together and have a some great flavors. Most importantly: don’t skip the granola! It makes the smoothie really filling and gives it some nice texture. YUM.
recipes  smoothies  fruit 
6 days ago
Poster: John Barlow's 25 Principles of Adult Behavior
Having spent this summer reigniting my spirit for the Grateful Dead's cultural legacy on their 50th anniversary, I was reminded of these words spoken by one of their legendary lyricists, John Perry Barlow. According to legend, Mr. Barlow wrote these thoughts at the young age of 29—pretty incredible wisdom for a young man. Inspired by his writing, I designed this poster. Appropriately proportioned to fit inside a Fillmore poster frame. You can download the PDF here.
posters  quotes  culture  philosophy  guidelines 
6 days ago
Salary and Benefits Negotiation for News Nerds
Salaries and benefits are one of the top three reasons why news nerds leave their jobs. So at SRCCON:WORK in December, Erika Owens and I facilitated a workshop exploring everything you can ask for during negotiations, understanding your organization and its gatekeepers, and strategies for responding in the moment. We wanted session participants to share their frustrations about not knowing salaries and brainstorm some ways to get around blockers they had in negotiating their salaries or raises. We also hoped people would share tips on what worked for them—they did share, and we’ve documented some of those tips here.
compensation  salary  negotiation  benefits  hiring  interviews  culture 
6 days ago
A list of 25 Principles of Adult Behavior by John Perry Barlow
I don’t expect the perfect attainment of these principles. However, I post them as a standard for my conduct as an adult. Should any of my friends or colleagues catch me violating one of them, bust me.
philosophy  culture  guidelines 
6 days ago
Han Solo is Chewbacca's Dog
"If wookies have a 400 year life span, then Han Solo is basically like Chewbacca's third dog." "Han would have lived longer if Chewie had gotten him neutered."
pets  starwars  movies  scifi  chewbacca  hansolo 
6 days ago
Beyond the Black Gate: Megadungeon - Doors
In OD&D, it's stated that all doors are considered "stuck" closed, at least as far as the players are concerned. The local monsters, of course, are free to come and go as they please. I use a slightly different system, with a simple chart scribbled in the corner of my scratch pad like this:
rpgs  dnd  charts  random  doors 
6 days ago
20 Triggers for a Secret Door
Adventurers know this and seem to spend an inordinate amount of time looking for secret doors. However, while dungeons often feature secret doors few modules actually describe a secret door’s trigger mechanism. Use the 20 triggers below to breathe life into the secret doors in your dungeon:
rpgs  dnd  random  doors  perception 
6 days ago
10 Suspiciously Detailed Secret Door Red Herrings
Adventurers know this and seem to spend an inordinate amount of time looking for secret doors. However, while dungeons often feature secret doors few modules actually describe a secret door’s trigger mechanism. Of course, sometimes the PCs search for a secret door where no secret door is to be found. Use the 10 triggers below to breathe life into–well–nothing:
rpgs  dnd  random  perception  doors 
6 days ago
20 Suspiciously Unusual Locks
Every now and then, the brave PCs come across an otherwise atypical door or lock. Some are particularly hard to unlock while others have a unique method of opening such as a special object that must be inserted into the lock or a puzzle than needs solving. Use the table below, to generate the details of such strange locks.
rpgs  dnd  random  locks  perception 
6 days ago
20 Poorly Hidden Secret Dungeon Doors
Adventurers always tend to find secret nooks and crannies while they search for hidden treasure. Sometimes these rooms and passages are hard to spot; other times they are easier to find. Use the table below to generate details of the easily found secret doors the PCs discover while searching the dungeon.
rpgs  dnd  random  doors  perception 
6 days ago
Wally Wood's 22 Panels That Always Work
The story of how Joel Johnson ended up with the original paste-up of Wally Wood's 22 Panels (and download links)
wallywood  22panels  comics  layout  productivity 
6 days ago
« earlier      
5e accessibility advice alignment analytics animation api apple architecture aria async awesome backgrounds bem bestpractices bias books box-shadow browsers burnout business buttons careers characters charts checklist chrome code color comics comments communication components conferences config contrast critical css cssgrid culture defaults demos design designsystem development devtools discrimination diversity dnd documentation earthquakes economics editors email emergency ems engineering fantasy favicons features feminism filters firefox flexbox fluid focus fonts forms frameworks free fridayfrontend frontend functions games gender generator git github google gradients grids grunt guidelines harrassment health hiring history howto html icons ie images inspiration interviews ios iphone javascript jesncin jobs jokes jquery keyboard language layout leadership learning less links lint lists mac magic maintainability management maps mediaqueries meetings mixins mobile modular movies myths names navigation optimization osx parallax parenting patternlibrary patterns performance photos photoshop plugins polyfills preparation presentation process productivity programming questions quickreference quotes racism readability recipes reference relationships reset responsive reviews romance rpgs rules rwd safari salary sass science scifi screenreaders scripts security selectors semantics sex sexism slides smacss social space speaking specs standards startrek starwars stock stress styleguide sublime support svg syntax tables tech television templates testing themes tips tools transforms transitions tutorials twitter typography ui usability ux validation variables video viewport webapps webfonts webkit windows wordpress work worklifebalance worldbuilding writing

Copy this bookmark: