Feelings Wheel
Great reference for writers to find more specific and less generic mood descriptions.
writing  charts  feelings  moods 
5 hours ago
Front-End Design Checklist
The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development.
frontend  design  checklist  grids  color  fonts  typography  styleguide 
5 hours ago
Veneida Smith, Teenage Horse Thief
So this whole thing started with this tweet by Katie Henry (@KT_NRE on Twitter). I started plowing through newspapers to find every mention of her – and found most that were out there, but a man named Todd Sanders, who had access to Pennsylvania libraries, found quite a few more. All of this takes place in October and November of 1922, before timeskipping to September 1923 (her third escape), October 1923 (her guilty verdict), and March 1924 (her escape attempt with Roxie Starcher).
rpgs  characters  horses  rogues  jail  prison  escape  holyterror  tomboy 
5 hours ago
[Alignment Replacement] The Color Wheel
The Color Wheel differs from the traditional D&D alignments in that the five Colors possess both literal incarnations (such as Outsiders) and non-literal philosiphies; that is, they are both ideologies and forces that shape the cosmos. While no part of this system falls apart when dealing with literal incarnations, the following is centered around mortals, for whom the colors are ideologies. That last bears repeating - any given character's color-alignment is not irrevocable, and does not represent some cosmic force nesting in their soul; it serves merely as a baseline descriptor for personality and methodology.
mtg  dnd  rpgs  color  alignment  personality 
5 hours ago
How the ‘Magic: The Gathering’ Color Wheel Explains Humanity
Personalities, organizations, goals, and means can all be thought of in terms of the Magic colors they typify, allowing you to draw interesting connections, make surprisingly useful predictions, identify deficits and growth areas, and increase empathy. I claim that the Magic system, which was designed to be resonant and trope-y and archetypal, does a lot of the same good work that naming things does, and is a richer intuition pump than other popular wrong-but-usefuls like Enneagram or MBTI or chakras or the integral theory colors.
mtg  color  games  personality  culture 
5 hours ago
Animated SVG Radial Progress Bars
Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript
css  svg  radial  progress  bars  animation 
5 hours ago
The Web is Made of Edge Cases
People will use your site how they want, and according to their means. That is wonderful, and why the Web was built.
css  cssbasics  accessibility  performance 
2 days ago
Toggle-Switch Guidelines
Toggle switches are digital on/off switches. They prompt users to choose between two mutually exclusive options and always have a default value. Toggles should provide immediate results, giving users the freedom to control their preferences as needed.
css  cssbasics  forms  html  toggles  checkboxes  radio  accessibility 
2 days ago
CSS Filter Playground
Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.
css  cssbasics  filters 
2 days ago
6 Awesome Ways to Take A Screenshot of your Code
Code Screenshots are important for a bunch of reason. Here are 6 awesome ways to take a screenshot of your code.
css  cssbasics  code  screenshots  carbon 
2 days ago
Securing Web Sites Made Them Less Accessible
In 2018?  Yes.  In rural Uganda, where I was improvising an introduction to web development for a class of vocational students, that’s the reality.  They can have a computer lab full of Dell desktops running Windows or rows of Raspberry Pis running Ubuntu or whatever setup there is, but when satellites in geosynchronous earth orbit are your only source of internet, you wait.  And wait.  And wait.
fridayfrontend  accessibility  https  security  performance 
2 days ago
Sticky, Smooth, Active Nav
Here's a sidebar navigation bar that... 1) Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible. 2) Scrolls smoothly to the sections you click to. 3) Activates the current nav based on scroll position (it's a single page thing).
fridayfrontend  css  navigation  sticky  smooth  scroll-behavior 
2 days ago
A Case for CSS Variables
Did you know that CSS has built-in support for variables via a module called custom properties? We’ll be taking a look at how these are used and how they differ from preprocessor variables, and how their flexability may give them a competitive edge in the near future.
fridayfrontend  css  variables  customproperties 
2 days ago
Switch font color for different backgrounds with CSS
They faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They solved it with JavaScript. Here’s my pure CSS alternative.
fridayfrontend  css  accessibility  contrast  color 
2 days ago
Well-Controlled Scrolling with CSS Scroll Snap
CSS Scroll Snap feature allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. Paginated articles and image carousels are two commonly used examples of this. CSS Scroll Snap provides an easy to use and consistent API for building these popular UX patterns and Chrome is shipping a high fidelity and fast implementation of it in version 69.
fridayfrontend  css  scroll-snap  scroll 
2 days ago
Even More CSS Secrets
The premise is simple: Ten surprising yet practical things you didn’t know you could do in CSS, live-coded in Lea’s trademark interactive presentation style. This third installment of the series will include new juicy secrets related to CSS Variables, grid layout, variable fonts, blending modes, SVG, and many other things.
fridayfrontend  video  css  blendmodes  svg  emoji  borders  animation  focus-within  variablefonts  flexbox  cssgrid  conic-gradient  gradients 
2 days ago
Asking about compliance? You may be asking the wrong question
"If the captions on online videos are 65% accurate do you think that would comply with legal responsibilities?"

This is the kind of question that arises when people are driven by fear. When people forget what accessibility is about. Even forget what the law is about.
accessibility  wcag 
2 days ago
CSS exclusions with Queen Bey
Here’s my attempt at demonstrating the different values of `wrap-flow` and `wrap-through` via a recreation of an interview Beyoncé did with ELLE back in 2016 when launching her Ivy Park line (I think). If you would like to try building something with exclusions, you’ll have to use either Edge or Internet Explorer 10 and up, and prefix the properties with `-ms-`.
fridayfrontend  css  exclusions  wrap-flow  wrap-through  shapes  shape-outside  shape-inside 
5 days ago
Gatherer - Magic: The Gathering
Gatherer is the Magic Card Database. Search for the perfect addition to your deck. Browse through cards from Magic's entire history. See cards from the most recent sets and discover what players just like you are saying about them.
mtg  magic  cards 
7 days ago
MTG Vault, Online Magic: The Gathering Deck Builder
The best Magic the Gathering Decks on MTG Vault right now. Why not submit your own and see how you compare?
mtg  magic  cards  decks  deckbuilder 
7 days ago
MythicSpoiler is a dedicated visual spoiler, designed to let you EXPLORE, DISCOVER and EXPERIENCE new Magic the Gathering sets in a simple, sortable gallery.
mtg  magic  cards  sets  spoilers 
7 days ago
MTG Assist - Simply the best Magic: The Gathering card search.
Advanced card search featuring similar card search, pricing, ratings, rulings, legalities, and more.
mtg  magic  cards 
7 days ago
ManaStack.com - A Modern MTG Deck Building Toolset
ManaStack is suite of tools for creating and playtesting Magic: The Gathering decks. ManaStack provides an easy to use modern visual deck builder, complete card database, and even an artificial intelligence game simulator - everything you need to build and playtest. ManaStack is completely free for everyone.
mtg  magic  cards  decks  deckbuilder 
7 days ago
DeckStats.net - Magic: The Gathering Decks
With deckstats.net you can easily build or upload a Magic: The Gathering deck and share it with others - no registration required! And to help you create the perfect deck, deckstats.net will show you many different statistics on your build, such as the mana curve or the odds to draw a certain card.
mtg  magic  cards  decks  deckbuilder 
7 days ago
TappedOut.net - MTG Deck Builder and Community
Playtester? Check. Draft Simulator? Check. Trading? Check. Best Magic the Gathering Deck Builder? You tell us! Build your deck, get feedback, and join the best community of MTG fans on the webs!
mtg  magic  cards  decks  deckbuilder  drafting 
7 days ago
Making Legacy Sites More Performant with Modern Front-End Techniques
Front-end website performance is a constantly moving target but is critical to the overall speed of your site. Best practices evolve constantly. Also, modern browsers bring constant updates to performance techniques and tools needed to identify problems and optimize rendering. These optimizations don’t have to be difficult, and can typically be done in hours.
css  cssbasics  performance  preload  javascript  sass  refactoring  maintainability 
7 days ago
How to get better at writing CSS
I have a purpose today: to make you better at writing CSS. I want you to take a look at your older projects and think : oh boy, how could I ever write something like this?
css  cssbasics  sass  maintainability  bem  architecture 
7 days ago
Creating Animated Radial Progress Bars with SVG, CSS and VueJS
There are many ways you can make Radial Progress Bars but I find the easiest is to draw them with SVGs and use Vue (or any other JavaScript libraries) to animate them.
css  cssbasics  vue  javascript  svg  radial  progress  animation  loaders 
7 days ago
Did you know that style and script tags can be set to display: block?
The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.
css  cssbasics  style  script  display  block 
7 days ago
Speed up alignment in CSS with Flexbox utility classes
Aligning things in CSS has always been a nightmare (yes, I like drama). Then Flexbox came and with it the possibility to align items in a way that makes sense! In this article, I’m going to share a set of CSS utility classes based on Flexbox that can be used to align things in no time!
css  cssbasics  flexbox  alignment 
7 days ago
What Happens When You Create A Flexbox Flex Container?
In my ideal world, CSS Grid and Flexbox would have arrived together, fully formed to make up a layout system for the web. Instead, however, we got Flexbox first and, due to it being better at creating grid-type layouts than floats, we ended up with a lot of Flexbox-based grid systems. In fact, many of the places where people find Flexbox difficult or confusing are really due to this attempt to make it a method for grid layout.
css  cssbasics  flexbox  layout  grids 
7 days ago
Supporting users who change colours on GOV.UK - Accessibility
We’ve researched and spoken before on the Accessibility blog about how and why users change colours on websites and some of the issues teams need to think about.

On the Design System team we aim to make any components in GOV.UK Frontend as accessible as possible, so we took our previous research and tried to improve the latest version.

I’ve picked out a few examples below to demonstrate some of the improvements that have been made.
css  cssbasics  accessibility  color 
7 days ago
The trick to viewport units on mobile
Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.
css  cssbasics  viewport  units  javascript 
7 days ago
Nutrition Cards for Accessible Components A11Y Expectations
A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
css  cssbasics  aria  accessibility 
7 days ago
Flexbox — The Animated Tutorial
In my previous tutorial I dumped all of the flex diagrams in one place to show you flex box bird’s eye view — but it’s not enough. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex I created these animated samples.
css  cssbasics  flexbox  grids  layout  animation 
7 days ago
The Web Is Not Just Left-to-Right, by Chen Hui Jing
This talk traces the parallel history of western and eastern typography from handwriting to the internet age, setting the context for how the web is a brand new medium for typesetting. CSS allows us to implement advanced typographic features and multi-directional layouts, that not only benefits internationalisation, but opens up a myriad of options for creative and interesting layouts in general as well.
fridayfrontend  video  language  rtl  ltr  typography  chinese 
7 days ago
The Accessibility of Styled Form Controls & Friends
A repository of styled and "styled" form control patterns, and how they are announced by screen readers.

Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.
fridayfrontend  accessibility  forms  controls  design  css 
7 days ago
CSS exclusions with Queen Bey
Long story short, try out all the new CSS features. Build demos, and play around with anything that seems remotely interesting. Even if that feature is in early stages, or only supported by 1 browser. And then talk about it, or write and tweet about your experience, your use cases, what you liked or disliked about it.
fridayfrontend  css  exclusions  shapes  shape-outside  shape-inside  wrap-through  wrap-flow  beyonce 
7 days ago
Create your design system, part 2: Grid & Layout
Choosing how to handle layouts and content positioning is probably one of the first decision you’re going to make when building a design system. Defining the grid means creating the system to structure your content, whether it’s a single component or a page layout. In this article, we are going to see how a grid system can be implemented, and how some CSS techniques can be used to create specific layouts.
fridayfrontend  css  design  designsystem  grids  cssgrid  flexbox  layout  styleguide  patternlibrary 
7 days ago
News is bad for you – and giving up reading it will make you happier
"News is to the mind what sugar is to the body. News is easy to digest. The media feeds us small bites of trivial matter, tidbits that don't really concern our lives and don't require thinking. That's why we experience almost no saturation. Unlike reading books and long magazine articles (which require thinking), we can swallow limitless quantities of news flashes – bright-coloured candies for the mind."
news  quotes  culture  health  psychology  sugar 
8 days ago
CSS Grid — The Beginner’s Guide
Absolutely great illustrations really make this a great intro to CSS Grid.
fridayfrontend  css  grids  layout  cssgrid 
9 days ago
Versatile CSS-Only Ripple Effects with Progressive JS Enhancement
Achieve simple lightweight material-design ripple effects using only background properties and css animations, with tutorial and examples.
css  cssbasics  javascript  buttons  ripple  animation  google 
15 days ago
Stripe.com Navigation in CSS and jQuery
A few weeks ago stripe.com launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes.
css  cssbasics  javascript  jquery  stripe  design  dropdown  navigation 
15 days ago
My Top 8 Visual Studio Code Tips and Features
Visual Studio Code is a good Editor, that can adapt to many languages and technologies out there, and discovering these little helpers can sometimes take time.
css  cssbasics  vscode  editors  tips  code 
15 days ago
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in CSS.
css  cssbasics  typography  styleguide  designsystem  design 
15 days ago
The peculiar magic of flexbox and auto margins
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.
css  cssbasics  flexbox  layout  grids  margins  auto 
15 days ago
Create the Google Button Effect with CSS
The button is flat (it looks like a link) but the animated background effect is so simple and elegant that I can't even explain the feeling; it's almost as though the effect is less "heavy" than a simple text-decoration change.  Let's examine the CSS to make the effect happen!
css  cssbasics  google  buttons  design  animation 
15 days ago
3 Essential Front-End Checklists for Web Developers
Ensure your web applications are air tight and high quality with these open source checklists covering engineering, design, and performance
css  cssbasics  frontend  checklist  design  performance 
15 days ago
4 CSS tricks I’ve learnt the hard way
1) No borders; 2) Animated throbber; 3) Horizontal & vertical centering; 4) Positioning relative to a parent;
css  cssbasics  borders  animation  centered  position 
15 days ago
CSS Quick Tip: The Difference Between Pseudo-class and Pseudo-element
Using pseudo-class and the pseudo-element we can manage virtual states and element. These two can be essential and helpful when we style our elements in CSS.
css  cssbasics  pseudo-classes  pseudo-elements 
15 days ago
Developer Roadmaps
The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just be valuable. Three different writer/developers have taken a crack at it this year and their results have been extraordinarily popular. Let's take a look.
css  cssbasics  frontend  roadmaps  development  developers 
15 days ago
Text Editing Tips And Tricks Roundup
We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it!
css  cssbasics  tips  editors  shortcuts  vscode  sublime  emmet  prettier  code 
15 days ago
The Complete Illustrated Flexbox Tutorial
When I started to learn Flexbox, I wanted to see everything it was capable of. But, I wasn’t able to find a thorough tutorial showing examples of all Flex properties. So, I created these diagrams with Flex to provide a bird’s eye view.
css  cssbasics  grids  flexbox  layout  diagrams 
16 days ago
CSS-in-JS: FTW or WTF? by Bruce Lawson
Everyone's talking about CSS-in-JS. It's the Kim Kardashian of web development. And, as with Kimmie, opinions are polarised. To some, CSS in JS just makes sense: it's local to your component, it can't leak and, hey, I know how to write JavaScript and CSS is weird.

To others, CSS-in-JS is an abomination that makes them want to emulate Kimmie and "release a fragrance" in disdain. Why are scripters so afraid of the cascade? Why the hesitance about inheritance?

Let's look at what CSS seems to lack, what the CSS-in-JS libraries can teach us, so we don't do as Kim's buttocks did and "Break the Internet".
fridayfrontend  video  css  javascript  css-in-js  components 
16 days ago
Getting to Know a Legacy Codebase
The kind of codebase that no one person truly understands any more; the kind of codebase that’s had a dozen different contributors over just as many years; the kind of codebase that’s never had a full-scale refactor or overhaul, but that’s grown organically over time and changed with new techniques, styles, and trends.
fridayfrontend  css  code  legacy  testing  refactoring  maintainability  maintenance  regression  programming  html 
16 days ago
Solved with CSS! Logical Styling Based on the Number of Given Elements
How to handle binary (empty) states, advanced numeric selection (eg, style all the items if there's more than three), change the formatting of list based on how many items it contains, etc.
fridayfrontend  css  selectors  nth-child  nth-last-child  first-child  empty 
16 days ago
On Designing and Building Toggle Switches
It was pretty clear to me: the switch would allow a user to choose between a light theme and a dark theme, with the light theme being the default. It was at this moment that radio buttons came to my mind: two options with one of them checked, and only one option can be checked at a time; that makes a great use case for good old radio buttons.
fridayfrontend  accessibility  radio  buttons  dark  themes  toggles  html  css 
16 days ago
Sometimes `sizes` is quite important
In this case, we're changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we're also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to tell the browser what size the image will be shown at, as per our CSS.
fridayfrontend  css  responsive  images  sizes  srcset  performance 
16 days ago
The frustrations of using CSS Shapes and CSS Exclusions
I don’t like to write ‘moany’ and negative articles. That’s not what you need. But indulge me as I explain my current feelings of woe with CSS Shapes and CSS Exclusions.
fridayfrontend  css  shapes  exclusions  clip-path  shape-inside  shape-outside 
16 days ago
Assistive Technologies I Test With
After a recent talk on Accessibility, I was asked during the Q&A about what Assistive Technologies (AT) I test with while I’m developing. Such a good question! I hadn’t ever thought about what I actually test with and as I rambled on I thought it might help to write it down.
fridayfrontend  accessibility  testing  voiceover  screenreaders  narrator  nvda  vox  zoom  contrast 
16 days ago
30+ CSS Radio Button Styles From CodePen 2018
When trying to go with a specific radio button style, one of my favourite places that visit is CodePen. So here’s a list of CSS radio buttons I put together to get you started.
css  cssbasics  radio  forms  checkboxes  inputs  design 
25 days ago
CSS Quick Tip: The Valid Characters in a Custom CSS Selector
Using valid CSS selectors is easy, and usually, we initially know how to write one. Surely we can’t make mistakes selecting elements – because the naming cames from HTML – but what about the custom class or ID ones?
css  cssbasics  selectors  validation  class 
25 days ago
8 Digit Hex Colors
While I loved the ability to provide an opacity with color using rgba(), the use of hexadecimal color had always been ingrained in me, which made the sudden need for rgba conversions annoying.  Luckily these days we have 8 digit hex values with allow us to cite an opacity level as the last two characters of the hex value!
css  cssbasics  hex  color  rgba 
25 days ago
Designing for accessibility is not that hard
Seven easy-to-implement guidelines to design a more accessible web
css  cssbasics  accessibility  design 
25 days ago
Should I try to use the IE version of Grid Layout? Revisited for 2018
In November 2016, I wrote an article in response to a question about Grid support in IE10 and 11. In that piece I wrote a quick rundown of what parts of the modern specification were supported in the older IE version. During a recent discussion onstage at An Event Apart, the issue of using the -ms prefixed version came up. As Jeremy Keith has documented his thoughts on that discussion, I thought I would post mine as a response to his post and also as an update to my previous article.
fridayfrontend  css  grids  cssgrid  layout  ie  fallback  autoprefixer 
25 days ago
The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
In part 1 of our guide on icon systems, we focused on inline SVG and icon components. In this second article, we’ll take an in-depth look at SVG image sprites, SVG symbols and icon fonts.
fridayfrontend  svg  icons  sprites  fonts  symbols 
25 days ago
In fairly short order, the `fr` unit has become one of my favorite parts of the CSS Grid specification. If you’re not familiar… `fr` is a near-magical value that lets us quickly address the *remaining* space in a grid area.
fridayfrontend  css  grids  cssgrid  layout  fr  units 
25 days ago
Web Components in 2018
For many front-end developers, components have become a central concept in their development workflow. Components provide a robust model for architecting and scaling complex applications, allowing for composition from smaller and simpler encapsulated parts.
fridayfrontend  css  javascript  html  webcomponents  components  shadowdom  templates  customelements 
25 days ago
How to build complicated grids using CSS grid
With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.
fridayfrontend  css  grids  cssgrid  layout 
25 days ago
Accessibility for Teams
A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow
fridayfrontend  accessibility  teams  teamwork  reference  design  inclusive 
25 days ago
9 Biggest Mistakes with CSS Grid, by Jen Simmons
It's easy to make lots of mistakes with a new technology, especially something that's as big of a change from the past as CSS Grid. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits.
fridayfrontend  video  css  cssgrid  grids  layout  mistakes  flexbox  frameworks 
25 days ago
Accessibility debugging with Chrome DevTools, by Umar Hansa
DevTools has a number of useful accessibility related debugging tools built into it. This lesson explores 3 of those: audits, the a11y pane and colour contrast.
fridayfrontend  video  accessibility  devtools  chrome  audits  contrast 
25 days ago
CSS grid in Internet Explorer 11
My response was blunter. I said I just don’t consider IE11 as a browser that supports grid.
css  cssbasics  grids  layout  cssgrid  ie11 
4 weeks ago
On Leading and Trailing Spaces in HTML Attribute Values
In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):
css  cssbasics  space  selectors  attributes  html  javascript 
4 weeks ago
Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference
There are other ways to do this. You could use longhand CSS properties. You could name the areas. But say you like doing it this way because it is succinct or whatever. That's where the ASCII is useful! Leave it in a CSS comment and number the lines.
css  cssbasics  grids  cssgrid  layout  comments  ascii 
4 weeks ago
The Friction of Web Standards, by Eric Meyer
In March 2017, four major browsers shipped stable, consistent CSS Grid implementations in the span of just three weeks. That's amazing-- but wait, why aren't ALL new feature debuts like that? And why does it take so darned long to ship new features after implementation is begun, like the literal years it took to ship Grid? In this talk, Eric will focus on one of the biggest and least appreciated reasons: the growing friction of specification interaction. He'll not only explore some of the challenges specification authors and implementors face, but also how we all can help overcome that friction and keep the web interoperable.
fridayfrontend  video  css  standards  border-radius 
4 weeks ago
Pattern Library First: An Approach For Managing CSS
CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.
fridayfrontend  css  styleguide  patterns  patternlibrary 
4 weeks ago
Delivering WordPress in 7KB
I decided to challenge myself to see how efficiently I could package a WordPress website. And so, sustywp.com is born. With its accompanying theme, Susty. I'm rather chuffed to say I managed to get the load of the homepage down to 7KB of data transfer.
fridayfrontend  css  wordpress  sustainability  performance  environmental  themes 
4 weeks ago
CSS: A New Kind Of JavaScript
A good sign that a technology is not fit for purpose is how much we have to rely on workarounds and best practices to get by. Another sign is just how much code we have to write in order to get simple things done. When it comes to styling, JavaScript is that technology. CSS solves JavaScript’s styling problems, and elegantly. The question is: are you willing to embrace the change, or are you married to an inferior methodology?
fridayfrontend  css  javascript  css-in-js 
4 weeks ago
What kind of ethics do front-end developers need?
Now that the technology sector of the world is rapidly transforming all of the world’s things into digital things, many have called for more ethics in our field. That is in many instances quite a vague goal, so let’s apply it to one part of digital: front-end development. How can we be more ethical as front-end developers, what kinds of things can we do? I thought I’d try and make a list.
fridayfrontend  css  accessibility  ethics  privacy  codeofconduct  diversity  security 
4 weeks ago
« earlier      
5e accessibility advice agile alignment analytics animation api architecture aria awesome backgrounds bem bestpractices bias books browsers burnout business buttons cards careers characters charts checklist chrome code color comics comments communication components conferences config contrast critical css css-in-js cssbasics cssgrid culture customproperties defaults demos design designsystem development devtools discrimination diversity dnd documentation earthquakes economics editors email emergency ems engineering fantasy features feminism filters flexbox fluid focus fonts forms frameworks free fridayfrontend frontend games gender generator git github google gradients grids grunt guidelines harrassment health hiring history howto html icons ie images inclusive inspiration interviews ios iphone javascript jesncin jobs jquery keyboard language layout leadership learning less lint lists mac magic maintainability management maps mediaqueries meetings mixins mobile modular movies myths names navigation oocss optimization osx parenting patternlibrary patterns performance photos photoshop plugins preparation presentation process productivity programming quickreference quotes racism readability recipes reference reset responsive reviews rpgs rules rwd safari salary sass science scifi screenreaders scripts scrum security selectors semantics sex sexism shapes slides smacss social space speaking specs standards startrek starwars stock 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 windows wordpress work worklifebalance worldbuilding writing

Copy this bookmark: