webdevelopment   52557

« earlier    

Article Performance Leaderboard
Lets state the obvious, this is an imperfect and evolving measure and the goal is to foster discussion and rivalry in making our pages better, faster, and lighter. Bear in mind this was built as an internal tool at Hearst Newspapers to track changes as we rollout our new Article template on mobile for SFGate and eventually all sites (SF Chronicle, Houston Chronicle, Times Union, etc).

Developers, designers, and product need to talk more on how to achieve this. A 1,700 word article might weigh 10KB but by the time you load HTML, JS, CSS, images, 3rd-parties, and ads, it can range between 2MB to 8MB depending on the web site. Bear in mind, the first Harry Potter ebook is 1.1MB and that includes cover art.
performance  speed  webdesign  webdevelopment 
9 hours ago by Shoord
Understanding CSS Layout And The Block Formatting Context
"You might never have heard the phrase 'Block Formatting Context', but if you have used CSS for layout you probably already know what it does. In this article I’ll explain the existing ways to create a Block Formatting Context, why it is important in CSS layout, and show you a new method of creating one."
webdesign  webdevelopment  css  bfc 
3 days ago by garrettc
The Web’s Grain
"What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build with?'
designthinking  webdesign  webdevelopment 
3 days ago by garrettc
DevDocs — D3.js 4 documentation
A copy of the D3 reference manual that isn't blocked by Capital One.
reference  d3  javascript  webdevelopment  svg 
4 days ago by mcherm
Front End Interview Handbook
Questions and answers across multiple front end domains.
webdevelopment  webdesign  interview  questions  answers  resource 
5 days ago by garrettc
Taking A Look At The State Of Progressive Images And User Perception
"There is no simple way to synthesize a user’s perception of an image loading over time. We are driven by the gut feeling that showing earlier is better, even if it’s not the final content, though some users will disagree.

As developers, we need to measure performance. It’s the only way we can set targets to improve it, and know when we don’t meet a performance budget."
performance  images  webdevelopment  webdesign  lqip  research  userexperience 
5 days ago by garrettc
Hacks
Fascinating overview of how rendering in a browser works.
browser  css  firefox  performance  webdevelopment  programming  learning 
5 days ago by garrettc
How I design with CSS grid
A great overview of the process *before* writing code. Sketching is your friend.
css  grid  designthinking  webdesign  webdevelopment  process  sketching 
5 days ago by garrettc
Teaching CSS grid to newcomers
A history of layout on the web, how the browser works, and how grid works.
css  grid  webdesign  webdevelopment  designthinking  education 
5 days ago by garrettc
Direction Aware Hover Effects
"This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here."
animation  css  javascript  webdesign  webdevelopment  userinterface 
5 days ago by garrettc

« earlier    

related tags

a11y  accessibility  analysis  analytics  animation  answers  api  apis  architecture  aria  basecamp  bestpractice  bestpractices  bfc  blog  board  browser  browserbased  burnout  check  chrome  cms  comic  comments  compression  content-management  conversion  crawler  css  d3  defstar5  design  designthinking  developing  development  devops  devtool  digitalmarketing  discussion-forum  docker  ecommerce  editor  education  email  en  example  firefox  flatfile  flexbox  fonts  framework  frameworks  free  freepaid  frontend  fun  git  github  grid  gulp  headless  health  heatmap  history  host  howto  html  image  images  indexeddb  interesting  internet-marketing  internet  interneting  internetingishard  interview  jamstack  javascript  journalism  jquery  laravel  layout  learning  library  lighthouse  lint  lqip  marketing  mentalhealth  metatags  mobileweb  mpgvip  newsletter  ng  node.js  nodejs  npm  online  onlineapp  open-source  opensource  optimisation  optimization  performance  photos  php  plugin  process  programming  ptimize  publishing  puppeteer  python  questions  reactjs  recording  reference  research  resource  resources  responsivedesign  screen  search  searchengine  security  seo  serverless  service  serviceworker  sharedworkers  sketching  smm  snooper  softwareqa  softwaretesting  speed  stack  starwars  static-site  stock  svg  tech  technology  testing  time  tool  tools  tutorial  tutorials  typescript  ui  userexperience  userinterface  ux  versioncontrol  visualjournalism  vv  vvv  web  webapp  webapplication  webdesign  webdev  webinspiration  website  websites  webworker  wordpress  work  workflow 

Copy this bookmark:



description:


tags: