leereamsnyder + webdesign   2968

How to Use Emojis as Icons – Preethi Sam
Clever: make them transparent, and use a text shadow.
css  emoji  icons  webdesign 
7 days ago by leereamsnyder
Fonty: the new way for testing web fonts
FONTY
IS A SIMPLE TOOL FOR TESTING
WEB
FONTS
DIRECTLY
ON
LIVE
SITES
fonts  webdesign  webtools 
8 days ago by leereamsnyder
Takeaways from trying out Tachyons CSS after ages using BEM – Made by Many
“What I enjoyed most about Tachyons was its simplicity and how productive I felt using it. It also offered some perspective on BEM: above all was that I no longer had to think about how to organise my CSS. I didn’t have to think about what to name my ‘components’, where to draw the line between one component and another, what should live where, and crucially, how to refactor things when new requirements came in. This is the biggest sticking point for me with BEM because it often seems like a huge overhead. These points are especially true for applications that change over time, which is all-too-common in the kind of work we do.”
webdesign  css  programming 
14 days ago by leereamsnyder
Inclusive Components: Cards
Good thoughts on making whole cards clickable and a solid use for :focus-within

- Use list markup to group your cards
- Make sure your cards don't break when lines of content wrap or images don't meet specific aspect ratio requirements
- Avoid too much functionality and reduce tab stops. Cards shouldn't be miniature web pages.
- Remember that headings should begin sections. Most everything that belongs to the section should follow the heading in the source.
html  webdesign  css  accessibility 
25 days ago by leereamsnyder
Alternatives to CSS-in-JS | Go Make Things
“I use link and script elements to load my CSS and JavaScript. I’m not using frameworks or large libraries. I have no dependencies. I’m not doing any complicated bundling or package management.

It’s 100% Boring Web.”
performance  webdesign 
27 days ago by leereamsnyder
Adactio: Journal—Detecting image requests in service workers
if (request.url.match(/\.(jpe?g|png|gif|svg)$/)) {
// Handle your image requests here.
}
browsers  http  javascript  webdesign 
28 days ago by leereamsnyder
layers - UI composition & animation in pure HTML
Interesting take on common UI patterns: everything is a frame or a stage on which things can be placed or shuffled about
framework  javascript  libraries  ui  webdesign 
6 weeks ago by leereamsnyder
How to display a "new version available" of your Progressive Web App
Handy for updated services workers, where you're controlling some of the cached assets
javascript  browsers  webdesign  usability  caching  performance 
8 weeks ago by leereamsnyder
The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article
Has a good code snippet for detecting just old browsers in general (basically, Internet Explorer)
css  browsers  performance  webdesign  javascript 
8 weeks ago by leereamsnyder
Adactio: Journal—Good griddance
“I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.”
css  grid  layout  webdesign 
10 weeks ago by leereamsnyder
Managing Heading Levels In Design Systems – Heydon – Medium
Headings are so important!

This walks you through how you can use Context in React to track the existing level and have context-aware components set their heading levels appropriately, like the mythic "document" model from HTML5
a11y  accessibility  webdesign  design  screenreaders  react 
10 weeks ago by leereamsnyder
Data Tables
Good stuff here on sorting, headers, navigation, and responsive adjustments
accessibility  a11y  javascript  react  tables  webdesign 
10 weeks ago by leereamsnyder
Pitfalls of Card UIs - daverupert.com
I have hit all of these.

The "cards become baby webpages" is too true
design  webdesign  layout  ux 
april 2018 by leereamsnyder
Using UI System Fonts In Web Design: A Quick Practical Guide — Smashing Magazine
newer:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
css  design  fonts  webdesign  typography 
march 2018 by leereamsnyder
Designing Button States - Cloud Four
Design for :hover last. Focus/disabled/active are all more important
accessibility  design  ux  buttons  webdesign 
march 2018 by leereamsnyder
Variable Fonts
Lots of demos of variable fonts. There are more of these available than I thought
design  fonts  browsers  webdesign  typography 
march 2018 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 
march 2018 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 
march 2018 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 
february 2018 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 
february 2018 by leereamsnyder
Cheapass Parallax - daverupert.com
Seriously like 6 lines of code. Neat use of updating CSS variables with JS
animation  css  webdesign  javascript 
february 2018 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 
february 2018 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 
february 2018 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 
january 2018 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  emoji  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:



description:


tags: