Ten years of responsive web design

栏目: IT技术 · 发布时间: 4年前

内容简介::information_source:
Ten years of responsive web design

Responsive Web Design Turns Ten — 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.

Ethan Marcotte

Everything New on Microsoft Edge from Build 2020 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'sa video roundup of what's new if you'd prefer.

Kyle Pflug (Microsoft)

Ten years of responsive web design

New Course: Design Systems with Storybook & React — Learn to create a design system from scratch using React, and document the design system to share with your team using Storybook.

Frontend Masters sponsor

Google Fonts Is Fast. Now It’s Faster. Much Faster — 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.

CSS Wizardry

A Complete Walkthrough to Using WebGL — 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 likeThree.js are using behind the scenes, it’s all here.

Maxime Euzière

:zap:️ Quick bits:

:computer: Jobs

Frontend Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

:information_source: Interested in running a job listing in Frontend Focus? There'smore info here.

:orange_book: Tutorials & Opinion

How to Tame Line Height in CSS — Caleb Williams looks at the line-height property, “probably one of the most misunderstood, yet commonly-used attributes”.

CSS Tricks

▶   How to Center an Element Horizontally and Vertically with Flexbox — 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.

Ali Spittel

Local Testing on an iPhone — 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.

Josh Comeau

The State of Micro Frontends — “ One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application?

Florian Rappl

Here’s What I Didn’t Know About “ content — You’ll no doubt learn something here.

Manuel Matuzović

How to Make a Simple CMS with Cloudflare, GitHub Actions and Metalsmith — 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.

Jon Paul Uritis

target="_blank" - The Most Underrated Security Vulnerability — Why rel="noopener" should be added to links containing target="_blank" as a precaution against reverse ‘tabnabbing’.

Manjula Dube

:wrench: Code, Tools and Resources

instant.page 5: A Way to Make Your Site's Pages Feel Faster — A reasonably simple piece of JavaScript you can drop onto a page that adds link preloading (upon mouse or pointer hover on a link) to make page transitions seem unnaturally fast.

Alexandre Dieulot

Tailblocks: Ready-to-Use Tailwind CSS Blocks — This is a set of 60+ ready-to-use UI blocks built with Tailwind, the popular CSS framework. 15 categories of blocks, which you canpreview here.

Mert Cukuren

Blunt: A CSS Framework That Helps with Layouts and Leaves Your Styling Alone — 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.

Frankie

LaTeX.css: Make Your Site Look (More) Like a LaTeX Document —LaTeX is a popular typesetting system frequently used in academia and mathematic or scientific documentation.

Vincent Dörig

Howler.js: An Audio Library for The Modern Web — Makes things easier cross-platform. Uses the Web Audio API but can fall back to HTML5 Audio.

James Simpson

LineIcons: 2000+ Free Line Icons for Designers and Developers — A nice looking set of line-based icons, categorized, and available in a number of different formats including web font, SVG, AI, and more.

LineIcons

Ten years of responsive web design

A Pure CSS 'Oil Painting' — Another amazing effort, this time of an Italian-style renaissance painting, from CSS artist Diana Smith.Related repo.

Diana Smith


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字图像处理

数字图像处理

[美]冈萨雷斯、[美]伍兹 / 电子工业出版社 / 2010-1 / 79.80元

《数字图像处理(第3版)(英文版)》是数字图像处理经典著作,作者在对32个国家的134个院校和研究所的教师、学生及自学者进行广泛调查的基础上编写了第三版。除保留了第二版的大部分主要内容外,还根据收集的建议从13个方面进行了修订,新增400多幅图像、200多个图表和80多道习题,同时融入了近年来本科学领域的重要发展,使《数字图像处理(第3版)(英文版)》具有相当的特色与先进性。全书分为12章,包括绪......一起来看看 《数字图像处理》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器