leereamsnyder + webdesign   2912

Variable Fonts
Lots of demos of variable fonts. There are more of these available than I thought
design  fonts  browsers  webdesign  typography 
16 hours ago by leereamsnyder
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
“This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.

While previous attempts to build responsive components were valuable in exploring this space, limitations in the platform meant these solutions were always either too big, too slow, or both.

Fortunately, we now have browser APIs that allow us to build efficient and performant solutions. ”
css  browsers  rwd  javascript  webdesign  layout  performance 
3 days ago by leereamsnyder
Flattening Deep Hierarchies of Components
Keep things as simple as possible. Don't build complicated do-all single components

Think like function composition
react  javascript  programming  webdesign 
10 days ago by leereamsnyder
Styling Empty Cells With Generated Content And CSS Grid Layout — Smashing Magazine
All kinds of trickery you can do with generated elements or "filler <b>s" to flesh out grid layouts
css  design  grid  layout  webdesign 
24 days ago by leereamsnyder
Shipping system fonts to GitHub.com · @mdo
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
css  webdesign  fonts  github  typography 
28 days ago by leereamsnyder
Cheapass Parallax - daverupert.com
Seriously like 6 lines of code. Neat use of updating CSS variables with JS
animation  css  webdesign  javascript 
5 weeks ago by leereamsnyder
Direction Aware Hover Effects | CSS-Tricks
Interesting script math to get the 'top'/'right'/'bottom'/'left' entry point for an element
javascript  css  webdesign 
5 weeks ago by leereamsnyder
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
You might not need so many of them!

Also, there are new interaction ones (coarse/fine pointers, hover capability)
css  layout  webdesign  rwd  grid 
5 weeks ago by leereamsnyder
Keeping aspect-ratio with HTML and no padding tricks
+ SVG knows how to maintain aspect ratio
+ CSS grid knows how to make overlapping items affect each other’s size
css  svg  images  webdesign  layout  grid 
7 weeks ago by leereamsnyder
Adactio: Journal—GDPR and Google Analytics
“One way or another, a massive amount of the web—every website using Google Analytics, embedded YouTube videos, Facebook comments, embedded tweets, or third-party advertisements—will be liable under GDPR.”
privacy  webdesign  internet  google  analytics 
7 weeks ago by leereamsnyder
Typical use cases of Flexbox - CSS | MDN
Along with "Solved by Flexbox" (tho some of those would be better solved with css grid), this is probably the go-to list of scenarios to use flex layout
css  layout  webdesign 
8 weeks ago by leereamsnyder
Meet the New Dialog Element
Finally, a standard way to do this. (Modals are still bad tho)
html  webdesign  css  javascript 
9 weeks ago by leereamsnyder
Saving Your Web Workflows with Prototyping · Matthias Ott – User Experience Designer
“Prototyping is an essential, powerful element of those iterative workflows and especially prototyping with code will enable you to develop solutions that matter, solutions that are appropriate, robust, performant, accessible, and secure. Honest to the nature of the Web and thus honest to your users. But most importantly: It will feel like you are building the right thing. Finally.”
webdesign  design  software  prototypes 
9 weeks ago by leereamsnyder
Tiny Wins
“High frequency actions (such as creating new PRs on GitHub) take place millions of times a day. A given user might go through the same flow several times per week, per day, or even per hour. These flows become a part of their lives.

If there is even a slight inefficiency or frustration, it compounds with every use. One confusing moment that takes an extra 5 seconds—repeated multiple times a day in perpetuity—adds up to a lot of anxiety and wasted time.

That’s why users are so thankful for these tweaks. They understand the significance of all that future time saved.”
design  webdesign  work 
9 weeks ago by leereamsnyder
Flexible type with :root · Matt Smith

:root {
font-size: calc(1vw + 1vh + .5vmin);

uses some fuzzy math around the viewport to figure out the base font-size
css  webdesign  rwd 
10 weeks ago by leereamsnyder
Performance Calendar » Clearing cache in the browser
In case you screwed up and absolutely need to bust your users' cache
caching  performance  browsers  webdesign 
10 weeks ago by leereamsnyder
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
“If you're using auto-fit, the content will stretch to fill the entire row width. Whereas with auto-fill, the browser will allow empty columns to occupy space in the row like their non-empty neighbors — they will be allocated a fraction of the space even if they have no grid items in them, thus affecting the size/width of the latter.

Which behavior you want or prefer is completely up to you. I have yet to think of a use case where auto-fill would make more sense than auto-fit.”
webdesign  css  grid  layout 
11 weeks ago by leereamsnyder
IndieAuth - Sign in with your domain name
add rel="me" to your homepage that links to twitter/github/google, then have your social account link back to your homepage. Then you can use the external service to authenticate
security  webdesign 
11 weeks ago by leereamsnyder
The Trials and Tribulations of the Title Attribute - 24 Accessibility
Via Adactio:

“Everything you ever wanted to know about the title attribute in HTML.

What’s hot: using title on inputs, abbrs, and iframes.

What’s not: using title on anything else.”
html  accessibility  webdesign 
11 weeks ago by leereamsnyder
How the Sausage Gets Made: The Hidden Work of Content · An A List Apart Article
‘Unless you’re working with a pristine data source, there often is no “content hose” or “automagical” tool that cleans up data and moves it from one app or content management system to another.’
cms  contentstrategy  content  webdesign  collaboration 
december 2017 by leereamsnyder
Performance Calendar » Evolution of <img>: Gif without the GIF
The latest Safari can use <img src="*.mp4" />, leading to gigantic size and processing savings

Article includes code for handling fallbacks so you can use it ASAP
html  performance  webdesign  browsers  gifs  movies 
december 2017 by leereamsnyder
Font-display playground
“For example, if you're rendering the main body text on a site, you should use font-display:optional. On browsers that implement it, like Chrome, the experience will be much nicer: your users will get fast content, and if the web font download takes too long, they won't get a page relayout halfway through reading your article.

If you're using a web font for icons, there is no acceptable fallback font you can render these icons in (unless you're using emoji or something), so your only option is to completely block until the font is ready, with font-display:block.”
performance  fonts  webdesign  browsers 
november 2017 by leereamsnyder
The Best Request Is No Request, Revisited · An A List Apart Article
With HTTP/2, your priority needs to be to reduce total data sent on the wire, not necessarily reduce the number of resources
performance  webdesign  webdev  http 
november 2017 by leereamsnyder
Over-engineering is under-engineering – Baldur Bjarnason
“You need to make the form look a certain way and to do that while also keeping the widget accessible requires an enormous amount of, well, engineering.
It’s also an issue for website performance. Most websites are much too slow which means, given that dropping features is untenable from a business perspective, they are by definition under-engineered.”
programming  webdesign 
november 2017 by leereamsnyder
Rik Schennink on Twitter: "@heydonworks I put this in <head> and normal <img> tags in <body>. - No image requests visible in Firefox dev tools - Safari shows requests but 0 bytes t… https://t.co/1AhuUiwhSH"
Use a MutationObserver and you can mostly still use <img src="" alt=""> and leave images accessible for no-script situations, but still change src to data-src for lazy loading
browsers  webdesign  performance  images  javascript  html 
november 2017 by leereamsnyder
A Content Slider
“Carousels (or 'content sliders') are like men. They are not literally all bad — some are even helpful and considerate. But I don't trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don't have the choice. Hence this article.”
webdesign  accessibility  javascript  css  ux 
november 2017 by leereamsnyder
Collapsible Sections
This goes into making baby Web Components, which is pretty awesome
accessibility  javascript  css  webdesign 
november 2017 by leereamsnyder
Network based image loading using the Network Information API in Service Worker | justmarkup
“The Network Information API and especially effectiveType is great to deliver content based on network connection.

Although the API isn’t widely supported at the moment we can still use it to improve the loading experience for some users; Progressive enhancement is never a bad thing.”
webdesign  javascript  images  performance  mobile 
november 2017 by leereamsnyder
How to use SVG as a Placeholder, and Other Image Loading Techniques
Some good ideas are tracing SVG outlines as a placeholder, or using the Primitive library to make a representation out of simple shapes
webdesign  performance  images  svg 
november 2017 by leereamsnyder
Faux Grid Tracks · An A List Apart Article
How to place extra elements around a grid to reveal tracks or backgrounds
webdesign  grid  css  layout 
november 2017 by leereamsnyder
Short note on improving usability of scrollable regions | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
tabindex=0, role=region, and aria-label on the container

better: aria-labelledby with a reference to something in the container. header? table caption?
accessibility  webdesign  html 
november 2017 by leereamsnyder
Animista - CSS animations on demand
Great examples, with code you can adjust and copy/paste
css  animation  webdesign  tools  webtools 
november 2017 by leereamsnyder
The Anti-hero of CSS Layout - "display:table" | Colin Toh
It has broad support, works fairly well, and solves a bunch of layout issues. It's no grid or flex, but it's a solid fallback
css  html  layout  webdesign  browsers 
november 2017 by leereamsnyder
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
Mostly you can use older methods and grid will override them, as specified. (Smart!)
webdesign  layout  css  browsers  grid 
november 2017 by leereamsnyder
Don’t Use ARIA Menu Roles for Site Nav | Adrian Roselli
Menu roles are for OS-like application menus, not basic web navigation
a11y  accessibility  webdesign  navigation 
november 2017 by leereamsnyder
« earlier      
per page:    204080120160

related tags

3d  a11y  accessibility  adblock  addons  adobe  advertising  advice  ajax  ala  amazon  analytics  android  angular  animation  apache  api  app  apple  applications  apps  architecture  archive  argument  art  audio  automation  backgrounds  backups  bandwidth  base64  bbedit  blog  blogs  book  bookmarklets  books  bootstrap  bower  branding  browsers  brushes  bullshit  business  buttons  caching  calendar  calibration  canvas  career  cartography  categories  cheatsheet  children  chrome  clever  clients  cloud  cms  coda  code  codeigniter  collaboration  color  comics  commandline  comments  communication  community  comparison  compass  compression  computer  computers  configuration  consoles  consulting  content  contentstrategy  contracts  contrast  controversy  conversation  converter  copyright  copywriting  craft  creativecommons  creativity  criticism  cryptography  css  css-tricks  css3  cufon  culture  data  databases  delicious  demonstration  deployment  design  designinspiration  development  dita  docker  documentation  dojo  domains  download  downloads  drama  dropbox  ecommerce  editing  education  ee  eecms  effects  efficiency  email  empathy  engineering  errors  ethics  excel  expressionengine  extensions  eyetracking  facebook  faq  favicon  filters  firefox  fireworks  flash  flickr  fonts  formatting  forms  forums  fra  frames  framework  free  freelance  freeware  fun  funny  future  gadgets  gallery  games  generator  gestalt  gif  gifs  git  github  givethanksforyourblog  gmail  google  googlereader  government  graphics  grid  grunt  guide  gulp  hacks  hardware  history  hosting  howto  html  html5  http  humor  ia  icons  ie  ie6  ie7  ie8  ie9  ie10  illustrations  illustrator  image  images  indesign  infoporn  inspiration  install  interesting  internet  interviews  invoice  ios  ios6  ipad  iphone  iphone4  iphone5  ipod  japan  javascript  jobs  journalism  jquery  json  keynote  language  languages  lastFM  law  layout  learning  legal  less  libraries  life  lightbox  linked-data  linux  lion  list  loading  logic  logo  logos  mac  magazine  maintenance  management  mapping  maps  markdown  marketing  math  media  mediacenter  mediaqueries  menu  metadata  microformats  microsoft  mini  mobile  modernizr  modules  modx  money  monitoring  mootools  motivation  movies  mp3  mq  music  mysql  my_cmsicorn  navigation  networking  news  newsletter  newspapers  node  nodejs  noise  oldschool  omnigraffle  opensource  opera  opinions  organization  osx  outsourcing  password  patterns  pdf  perception  performance  phone  photography  photos  photoshop  php  pixels  plainenglish  plugins  poetry  politics  polyfills  portfolio  postcss  presentations  print  privacy  process  productivity  programming  progress  prototypes  proximity  psychology  ptdproject  publishing  python  quicksilver  ranking  rants  rdfa  react  reading  redux  reference  regex  regexp  research  resets  resources  rest  retina  reviews  rss  ruby  rubyonrails  rwd  s3  safari  sales  samples  sanity  sass  screencasts  screenreaders  scripts  search  security  self-publishing  semantics  seo  servers  services  sharing  shopping  sifr  silverlight  sitepoint  slate  slideshow  snark  social  socialnetworking  software  sourcecontrol  space  speaking  specifications  spreadsheet  statamic  statistics  stock  storage  stories  strategy  structure  style  styleguide  svg  symbols  syndication  tables  tags  teaching  teamwork  technology  techwriting  templates  terminology  testing  text  TextExpander  textpattern  textures  themes  thinking  time  timelines  tips  toblog  todo  tools  tooltip  toread  tostudy  totry  touch  tours  training  translation  travel  trends  trivia  troubleshooting  truncation  tutorials  twitter  typekit  typography  ui  URLs  usability  utilities  ux  validation  vector  versioning  via:popular  video  videogames  virtualmachines  visualization  vm  WAI-ARIA  wallpaper  web  webapps  webdesign  webdev  webhosting  webkit  webmaster  webpack  webtools  widgets  windows  wireframes  wmm  wordpress  work  writing  xhtml  xml  yahoo  yepnope  youtube  yuck  z-index  zepto 

Copy this bookmark: