Ten years ago the phrase ‘responsive web design’ was first coined. This guiding blog post, outlining the three ‘ingredients’ needed (fluid grids, flexible images, and media queries), soon followed. Here, Ethan takes a look back at just how responsive design came to be.
Microsoft Build 2020 took place entirely online for the first time last week but it wasn’t short of announcements and great talks, particularly for MS’s Edge browser. Here’s a video roundup of what’s new if you’d prefer.
来源：Kyle Pflug (Microsoft)
Using Google Fonts? It can often prove to be one of the bigger performance bottlenecks, but in this thorough guide Harry Roberts runs through several optimisations you can put in place to make things snappy.
A really detailed walkthrough of getting started with WebGL at the low level, complete with integrated, editable examples and coverage of the math behind 3D rendering. If you’ve ever wondered what libraries like Three.js are using behind the scenes, it’s all here.
You can now emulate vision impairments and color blindness in Chrome 83 to see how your site may appear to certain visitors.
Sure, you can play the dino game in Chrome when offline, but you how about a bit of offline surfing in Edge?
Enhanced Safe Browsing protection is now available in Chrome
Caleb Williams looks at the
line-height property, “probably one of the most misunderstood, yet commonly-used attributes”.
You’ve heard all the jokes about the difficult of center aligning things with CSS, but laugh no more as Ali demonstrates how to do it in just a minute.
You should be testing on a real-world mobile device, so here’s a nice and quick way to get your localhost server running on an iPhone with the help of ngrok.
“One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application?”
You’ll no doubt learn something here.
/* "Highlighted item" and element content is read out */
content: "★" / "Highlighted item";
Let’s say you want to build a CMS but don’t want to mess with the fiddly UI bit.. how about using GitHub itself? Couple that with the Metalsmith static site generator and Cloudflare Workers.. and here you go.
│ └── worker.js
│ ├── about.hbs
│ ├── article.hbs
│ ├── index.hbs
│ └── partials
│ └── navigation.hbs
│ ├── about.md
│ ├── articles
│ │ ├── post1.md
│ │ └── post2.md
│ └── index.md
│ ├── index.js
│ ├── package-lock.json
│ ├── package.json
│ └── worker
│ └── script.js
来源：Jon Paul Uritis
rel="noopener" should be added to links containing
target="_blank" as a precaution against reverse ‘tabnabbing’.
<a href= '/share' rel="noopener noreferrer" target="_blank"/>
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
This is a set of 60+ ready-to-use UI blocks built with Tailwind, the popular CSS framework. 15 categories of blocks, which you can preview here.
This is a little different. This framework doesn’t have any effect on design visuals, it only provides helper classes for positioning and responsive layouts.
LaTeX is a popular typesetting system frequently used in academia and mathematic or scientific documentation.
<link rel="stylesheet" href="https://latex.now.sh/style.min.css" />
Makes things easier cross-platform. Uses the Web Audio API but can fall back to HTML5 Audio.
A nice looking set of line-based icons, categorized, and available in a number of different formats including web font, SVG, AI, and more.
Another amazing effort, this time of an Italian-style renaissance painting, from CSS artist Diana Smith. Related repo.