leereamsnyder + browsers   597

Let's serve everyone good-looking content
“I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content.

If users don’t mind, that leaves us with team members, bosses and clients. In my ideal world we should convince each other, and with that I mean visual designers, product owners, brand people, developers, that it is ok for our lay-out not to look the same everywhere. Because serving good-looking content everywhere is more important than same grids everywhere. We already do this across devices of different sizes. For responsive design, we’ve already accepted this inevitability. This whole thing is a communication issue, more than a technical issue.”
webdesign  css  browsers  layout  grid 
5 weeks ago by leereamsnyder
Sometimes `sizes` is quite important. | CSS-Tricks
Good roundup of browser behavior with changing viewports as well
webdesign  performance  browsers  images 
7 weeks ago by leereamsnyder
Should I try to use the IE version of Grid Layout? Revisited for 2018
Should I use Autoprefixer with Grid?
I would strongly suggest not.
css  ie  webdesign  browsers  layout 
8 weeks 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 
june 2018 by leereamsnyder
Best Practices | Cypress Documentation
This is some solid guidance for writing integration tests
testing  programming  javascript  browsers 
may 2018 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 
may 2018 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 
may 2018 by leereamsnyder
Finger-friendly numerical inputs with `inputmode` | CSS-Tricks
The auto-validation for type="number" inputs has tripped me up before
css  accessibility  usability  forms  webdesign  browsers 
april 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
Performance Calendar » Clearing cache in the browser
In case you screwed up and absolutely need to bust your users' cache
caching  performance  browsers  webdesign 
january 2018 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
A Theme Switcher
filter: invert(100%) goes a long way

This article also presents the control as a React component, just so you can see how that's done
accessibility  javascript  browsers  react  css 
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
My web app died from performance bankruptcy @ tonsky.me
Chrome will make breaking changes to core JS APIs on a whim, apparently. Great.
browsers  mobile  javascript  performance  google 
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
Transpiled for-of Loops are Bad for the Client - daverupert.com
“I am responsible for the code that goes into the machine, I do not want to shirk the responsibility of what comes out. Blind faith in tools to fix our problems is a risky choice. Maybe “risky” is the wrong word, but it certainly seems that we move the cost of our compromises to the client and we, speaking from personal experience, rarely inspect the results.”
javascript  browsers  programming  webdesign 
october 2017 by leereamsnyder
Deploying ES2015+ Code in Production Today — Philip Walton
To put that another way, every browser that supports <script type="module"> also supports most of the ES2015+ features you know and love.

(babel-preset-env makes this particularly easy)
performance  javascript  browsers  webdesign 
september 2017 by leereamsnyder
Breaking the Grid - daverupert.com
Includes "clearfix 2.0" to make grids less likely to do this
css  webdesign  browsers  layout  grid 
september 2017 by leereamsnyder
Intersection Observer comes to Firefox ★ Mozilla Hacks – the Web developer blog
This is a _much_ nicer way to determine if an element is visible in the viewport (or relative to any other element)
javascript  performance  browsers  webdesign 
august 2017 by leereamsnyder
Polyfill service
Polyfills for DOM apis, tailored to the browser that is requesting it. Neat.
javascript  programming  webtools  polyfills  browsers 
july 2017 by leereamsnyder
Connect: behind the front-end experience
Pretty good description of modern ways to approach CSS animations, JS animations, and poly fills.

I had not heard of the Intersection Observer API
animation  css  javascript  webdesign  browsers 
june 2017 by leereamsnyder
Dom4
“a fully tested and covered polyfill for new DOM Level 4 entries”
webdesign  javascript  browsers 
june 2017 by leereamsnyder
Implementing system fonts on Booking.com — A lesson learned.
“So, lesson learned; don’t use -apple-system at the head of a shorthand font declaration, and test thoroughly, especially when playing around with proprietary stuff like system font declarations.”
css  webdesign  fonts  browsers 
april 2017 by leereamsnyder
Eric's Archived Thoughts: Grid-Powered Drop Quotes
Grid layout will be great for all kinds of little things
browsers  css  design  layout  grid 
april 2017 by leereamsnyder
Browser Support for evergreen websites
“Also, remember that you don’t need to throw everything out and only use a very new layout method such as Grid or even Flexbox. Start small, finesse your forms or navigation with these methods, add some little touches. Not every site needs all the new shiny throwing at it, most will benefit from some elements from newer specifications. You can learn just as much about Grid by using it to tighten up a floated UI, as you can by turning your whole site over to it.”
css  browsers  webdesign 
january 2017 by leereamsnyder
Adactio: Journal—Making Resilient Web Design work offline
Nice tweak to fetch updated content in the background while still using a service worker cache
webdesign  javascript  browsers  performance 
january 2017 by leereamsnyder
Taking Device Orientation for a Spin ◆ 24 ways
“The web platform is maturing rapidly. There are new, relatively unexplored APIs for doing all sorts of crazy thing that are often dismissed as the preserve of native apps. Like some sort of app marmalade. Poppycock.

The web is an amazing, exciting place to create things. All it takes is some base knowledge of the fundamentals, a creative mind and a willingness to learn. We have those! So let’s create things.”
webdesign  javascript  browsers 
december 2016 by leereamsnyder
Performance Calendar » Image Optimization
Includes the best image format for each browser. What a pain.
webdesign  images  performance  browsers 
december 2016 by leereamsnyder
« earlier      
per page:    204080120160

related tags

1password  a11y  accessibility  adblock  addons  adobe  advertising  ajax  analytics  android  animation  apache  api  app  apple  applications  architecture  audio  backgrounds  blog  bookmarklets  bookmarks  books  browserify  browsers  buttons  caching  canvas  cheatsheet  chrome  clients  cloud  code  codekit  color  comics  compression  computer  consoles  copyright  css  css-tricks  css3  davidpogue  design  development  documentation  download  downloads  education  email  emoji  ethics  extensions  favicon  filters  firefox  flash  flickr  fonts  formatting  forms  fra  framework  free  freeware  funny  future  gallery  games  generator  gifs  github  globalization  google  googlereader  graphics  grid  grunt  gulp  hacks  history  howto  html  html5  http  humor  ia  icons  ie  ie6  ie7  ie8  ie9  ie10  image  images  inspiration  install  interesting  internet  ios  ios7  ipad  iphone  javascript  jquery  json  layout  libraries  lifehacker  lightbox  list  mac  marketing  math  mediaqueries  microsoft  mobile  modernizr  money  movies  navigation  networking  newsletter  nodejs  nytimes  opensource  osx  patterns  performance  photoshop  plugins  polyfills  preferences  print  privacy  productivity  programming  react  reading  reference  regex  research  resets  resources  retina  rwd  safari  sass  science!  screenreaders  search  security  seo  servers  services  shortcuts  sitepoint  socialnetworking  software  statistics  storage  svg  technology  templates  testing  text  textures  tips  tools  toread  totry  touch  translation  trends  trivia  troubleshooting  tutorials  twitter  typography  ui  URLs  usability  ux  validation  vector  via:popular  video  virtualmachines  vm  w3c  WAI-ARIA  web  webdesign  webdev  webkit  webtools  windows  wysiwyg  xhtml  xml  z-index 

Copy this bookmark:



description:


tags: