An online magazine for designers and web developers. Questions? We've got your back: @SmashingSupport, @SmashingConf. Curated by Iris, Vitaly and the team.

Freiburg, Germany
That's why the weight of most websites is out of proportion. m.imgur.com/3TtTwrU
56
1,728
1,513
Oh exciting! leading-trim in CSS will allow us to trim off all the extra space from reference points in a typeface of your choice with just two lines of CSS. h1 { text-edge: cap alphabetic; leading-trim: both; } medium.com/microsoft-design/…
7
341
1,496
πŸ”– A Complete Guide To Accessible Front-End Components. – :focus styles – autocomplete – content sliders – checkboxes – data charts – dark mode – date pickers – navigation – modals – radio buttons – skip links – SVGs – tabs – tables – tooltips smashingmagazine.com/2021/03…
8
409
1,417
Free web icons that require no CSS, JS, file uploads or inline SVGs. ↬ SVGBox svgbox.net/
7
251
1,412
An interesting idea on proximity feedback. As the user moves towards β€œRegister” button, highlight the input fields that aren’t completed yet. ↬ Proximity Feedback Ideas tympanus.net/Development/Pro…
14
285
971
Interesting 3D experiments by @phamduyminh from Vietnam. Wondering why we haven’t seen such interfaces around. Too annoying to use frequently? ↬ 3D UI experiments dribbble.com/phamduyminh
18
203
928
Useful interface design patterns. ↬ Perfect accordion smashingmagazine.com/2017/06… ↬ Perfect date-picker smashingmagazine.com/2017/07… ↬ Perfect slider smashingmagazine.com/2017/07… ↬ Perfect infinite scroll smashingmagazine.com/2016/03… ↬ Perfect configurator smashingmagazine.com/2018/02…
5
192
862
Useful CSS techniques to keep in mind. ↬ Fixing 100vh scrollbar issue. css-tricks.com/the-trick-to-… ↬ Dynamic SVG placeholders codepen.io/jesstelford/pen/P… ↬ Complicated Grid in action danwebb.co/journal/how-to-bu… ↬ Custom hover effect with CSS variables blog.prototypr.io/stunning-h…
3
195
845
Great courses to learn stuff: ↬ CSS Animations css-animations.io ↬ Grid Garden cssgridgarden.com/ ↬ Flex Zombies, Grid Critters mastery.games/p/flexbox-zomb… ↬ Grid Cheatsheets grid.malven.co/ ↬ Flexbox games flexboxfroggy.com/ flexboxdefense.com/
2
286
845
If you want to supercharge your VS Code setup, here’s a bunch of great extensions and themes. ↬ Techniques: VS Code Can Do That? vscodecandothat.com ↬ VS Code Extensions medium.freecodecamp.org/favo… ↬ VSCodeThemes vscodethemes.com Any other resources you’d recommend?
4
270
867
A little technique we use all the time to audit the layout shifts and avoid performance issues. 1. Add * { outline: 3px solid red } to your CSS. 2. Record the loading of your site/app. 3. Review it by exploring what happens in slow motion. 4. Adjust and minimize shifts.
9
146
810
Let's make 2020... fast! πŸŽοΈπŸ’¨ Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word] smashingmagazine.com/2020/01… 🎯 Metrics, realistic targets πŸ“¦ Bundling 🚚 Delivery 🏎️ Single-Page Apps πŸŽͺ HTTP/2, HTTP/3 πŸ“ˆ Testing, Monitoring 🧰 Tooling βœ… TL;DR Checklist
6
312
811
πŸ”– User Frustrations in 2021 (updated). – Tiny scrollable panes – Tiny click targets – Unexpected content shifts – Menus opening on hover, not tap/click – Country selector dropdown – Generic error messages – Unsupported β€œBack” button – Disabled β€œNext” buttons
19
252
742
Proportional Resizing with CSS Variables by @shadeed9 .rect { --size: 186px; --aspect-ratio: 2.35; width: var(--size); height: calc(var(--size) / var(--aspect-ratio)); } ishadeed.com/snippet/proport…
5
155
747
πŸŽ‰ Animation matters, and it’s great to see new animation tools coming up. Flare is a free tool that allows to add high-quality animation to designs. With a huge library of available public files. Goldmine! 2dimensions.com/about-flare
7
139
736
πŸŽπŸ’¨ Let’s make 2018… fast! β€œFront-End Performance Checklist 2018” (incl. PDF/Pages) β€” with everything you need to know to build fast experiences today. smashingmagazine.com/2018/01… With kind contributions from @yoavweiss @addyosmani @MarkZeman @patmeenan and so many others. ❀️
2
315
724
πŸ”– For the bookmarks: Optimum <head> order for performance: <meta /> <title> preconnect <script async></script> CSS with @imports sync JS sync CSS preload <script defer></script> prefetch / prerender everything else (SEO, icons, open graph) via @csswizardry #webexpo #webperf
7
149
719
Is it really what web development is like in 2018? If I was a newbie in this industry, I’d probably have my concerns and doubts about taking on this profession. github.com/kamranahmedse/dev… β€”Β Would love to see a β€œbasically-you-need-to-know-HTML-CSS-and-JavaScript”-chart instead.
21
325
685
Does your working day usually start like this as well? ;-)
38
159
656
A nice little tool for picking accessible color combinations. You can lock a few colors and see the preview of random color palettes in front of you. Also, 1K accessible combination are already provided. ↬ Cloudflare.Design cloudflare.design/color/
5
193
659
Like DevTools, just for designers. A visual inspector and interface editor as a Chrome extension (Firefox extension coming soon). ↬ Project VisBug: An experiment in web design tooling github.com/GoogleChromeLabs/… ↬ YouTube/Demo piped.video/watch?v=Z9V6B-tO…
12
209
651
Ordering a table with CSS Custom Properties and the order: property. Mind. Blowing. kizu.ru/en/blog/variable-ord… by @kizmarh / cc: @MikeRiethmuller @LeaVerou @SaraSoueidan
10
214
628
User Frustrations in 2020: please avoid them if possible.
Replying to @smashingmag
Common frustrations in 2020: – tiny scrollable panes – tiny click targets – <select>-dropdown for country selector – disabled "Continue" buttons – auto-playing carousels/videos – slow websites – unsupported "Back" button – push notifications – app install prompts – promo ads
7
275
641
Border-radius can do that? How to create organic shapes with eight values separated by a slash. ↬ Tool 9elements.github.io/fancy-bo… ↬ Quick tutorial 9elements.com/io/css-border-…
6
164
639
For the bookmarks. A search engine for… colors. ↬ Picular picular.co/
9
203
634
Let's make 2021... fast! πŸŽοΈπŸ’¨ πŸ”₯ Front-End Performance Checklist 2021 [PDF, Pages, Word] 🎯 Metrics, targets πŸ“¦ Bundling 🚚 Delivery 🏎️ Single-Page Apps πŸŽͺ HTTP/2, HTTP/3 πŸ“ˆ 3rd-party, JS bundles 🧰 Tooling βœ… TL;DR Checklist 🎁 Free PDF #perfmatters smashingmagazine.com/2021/01…
5
218
637
Seamless transitions when moving from one page to another. Just demo’ed by @sarah_edo at #ColdFront18. ↬ Demo page-transitions.com/group ↬ Vue + Next github.com/sdras/page-transi… ↬ React github.com/sw-yx/page-transi… ↬ Angular github.com/simonaco/page-tra…
9
111
619
Git Command Explorer allows you to "find the right commands you need without digging through the web.” A handy little reference. ↬ Git Command Explorer gitexplorer.com/
8
224
627
⌘ Performance Checklist 2017. Is anything missing in here? Please do let us know.
21
179
592
Wow, that’s scary. Displacement Scroll with blending via JavaScript. codepen.io/mwmwmw/pen/VgemeN
9
100
577
πŸ”– Frustrating UX that needs fixing. – Birthday dropdown/widget starting in 2021 – Disabled buttons that don't communicate anything – Back button jumping between pages, not states – Filters blocking the entire UI on 1 selection – Mega-dropdowns opening on hover, not tap/click
16
87
572
πŸ”– Vanilla JS code snippets. HTML DOM htmldom.dev/ Plain JS plainjs.com/ Vanilla JS Toolkit vanillajstoolkit.com/ Vanilla Web Projects github.com/bradtraversy/vani… You might not need jQuery youmightnotneedjquery.com/ Simple JS Guide github.com/nefe/You-Dont-Nee…
4
116
577
That’s clever. A slider allowing to specify available space and suggesting furniture that would fit there. ↬ Made Sofasizer made.com/sofasizer-2 / via @smash_it_on
6
147
579
Visual cheat sheets for CSS Grid Layout and Flexbox. With everything from alignment to auto-flow. ↬ Flexbox Cheatsheet flexbox.malven.co ↬ Grid Cheatsheet grid.malven.co/
1
177
547
✨ Finally! A Native CSS Parent Selector Is Coming (and it can do way more than that). Meet :has. By @AdrianBeceDev. smashingmagazine.com/2021/06…
5
148
553
A very, very, very, very detailed guide on optimizing performance with Chrome DevTools. developers.google.com/web/to…
1
150
545
So we have a little new book arriving today β€”Β just after Smashing Book 6, we are proud to release Form Design Patterns by @adambsilver, reviewed by @heydonworks β€”Β a book about designing and building accessible web forms. Coming tomorrow!
10
110
504
Interesting. A natural language calculator app for Mac. numi.io
6
202
518
We removed FB buttons and traffic from Facebook increased. Reason: instead of "liking" articles, readers share it on their timeleine.
53
1,481
506
β€œThe notifications prompt is by far the most frequently shown permission prompt. Not even 3% of these prompts got accepted by users. Most prompts are dismissed, while almost 19% of prompts caused users to leave the site immediately”. blog.nightly.mozilla.org/201…
17
244
472
🎈 BIG news: so happy and honored to welcome one-and-only @rachelandrew as new editor-in-chief of @smashingmag. Please welcome Rachel! :-)
39
34
478
My Current HTML Boilerplate, by @mmatuzo, with detailed explanation, line-by-line. matuzo.at/blog/html-boilerpl…
6
68
481
She’s a front-end developer and UI designer from Lagos, Nigeria, and co-founder of the African cryptocurrency exchange BuyCoins. Please give a round of applause for our Person of the Week: Ire Aderinokun. Thank you for caring, dear @ireaderinokun! #smashingcommunity
2
100
478
⚑Let’s make 2019… fast! Meet the annual front-end performance checklist for 2019. πŸŽπŸ’¨ Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] smashingmagazine.com/2019/01… πŸ“Œ Editable templates in Pages, MS Word. πŸ˜… Editing time: 18 full days. ❀ Community matters!
3
162
480
A free library of customizable illustrations of people in different situations (Sketch file). Free for commercial and private use. ↬ Humaans humaaans.com
3
156
461
πŸ”₯ How We Improved SmashingMag Performance, a case study How on critical CSS, JavaScript optimizations, code splitting, web font loading, third-parties, performance profiling and a fancy CSS outline property. smashingmagazine.com/2021/01…
11
134
454
Are you using CSS Grid yet? If yes, that’s how you can debug it. If not, that’s how you can learn how it works. A new lil’ tutorial on Debugging CSS Grid Layouts With Firefox Grid Inspector by @hj_chen. smashingmagazine.com/2017/12…
2
147
448
Modern CSS solutions for old CSS problems, a brilliant practical overview by @5t3ph. moderncss.dev/
4
96
457
Inclusive Dates, a human-friendly and fully accessible date picker. Demo fymmot.github.io/inclusive-d… GitHub repo github.com/fymmot/inclusive-…
5
54
439
135
448
Just in case you need to argue on alternatives for modals or how to get them right. ↬ ModalzModalzModalz modalzmodalzmodalz.com
2
131
426
Just in case you are trying to make sense of GDPR, here are some great resources to help you out: Good Guide techblog.bozho.net/gdpr-prac… Checklist gdprchecklist.io/ For developers smashingmagazine.com/2018/02… For designers smashingmagazine.com/2017/07…
3
196
431
Useful! Input mask for React, Angular, Ember, Vue and vanilla JavaScript. github.com/text-mask/text-ma… (via @JavaScriptDaily)
2
107
438
Inter UI, an open-source typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens. ↬ InterUI GitHub repo github.com/rsms/inter
4
83
420
Today is the day when everything changes. After almost 2 years of hard work, we’re so close to relaunching today. No ads, brand new Smashing Membership, webinars and Smashing TV. Smash it up alright! Tighten up your seatbelts.
24
67
414
Launched Pixels: a gallery of free PSD, HTML and CSS resources that you can download and use freely - launchedpixels.com #useful
3
111
425
πŸ”₯ Front-End Performance Checklist 2017. Ensure that your response times are fast and your website smooth. PDF/Pages. smashingmagazine.com/2016/12…
2
206
414
πŸ”₯ 18 months of work. Result: 56 cats and dozens of emoji. Meet The Next Smashing Magazine. next.smashingmagazine.com/20… – @danmall @SaraSoueidan
32
163
423
πŸŽπŸ’¨ Let’s make 2018… fast! Front-End Performance Checklist 2018 in PDF, ePUB and Amazon Kindle for your convenience: PDF dropbox.com/s/7l3ixruwdqb6s4… ePUB dropbox.com/s/ynfd6k9pg9i03k… Kindle dropbox.com/s/wt5qmzkndec7eq… Made available by kind support of 631 Smashing Members. Thank you! πŸ™
5
176
429
CSS utility classes meet Custom Properties to style HTML elements as charts. Charts.css chartscss.org/ GitHub Repo github.com/ChartsCSS/charts.…
3
83
418
✏️ You don’t need to memorize every CSS property and value, but there are some fundamental things which will make CSS much easier for you to use. β€œHow To Learn CSS” by @rachelandrew: smashingmagazine.com/2019/01…
4
115
403
πŸ”– Front-End & UX Guides, published by yours truly recently. Accessible Front-End Components smashingmagazine.com/2021/03… CSS Generators smashingmagazine.com/2021/03… CSS Auditing Tools smashingmagazine.com/2021/03… SVG Generators smashingmagazine.com/2021/03… HTML Email smashingmagazine.com/2021/04…
20
100
412
β€œNever overpromise. Always overdeliver by a bit. Accept critique first, think process it later. Never kill an idea in a meeting.” What was some of the most useful and wise advice you’ve received over all these years?
38
111
400
A responsive email template, with support in all major email clients - internations.github.com/antw… by @jng5 #useful
4
127
403
Useful! UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. ↬ UX Myths uxmyths.com/ ↬ UX Myths Posters behance.net/gallery/19641639…
3
141
384
The Periodic Table of... Animations. With examples of user interactions. Made in Japan. foxcodex.html.xdomain.jp/
182
396
β€œInspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles)” ↬ CSSScan getcssscan.com
3
93
403
Sorry, but I just don’t get desperate attempts to block people trying to download audio/video from your site, or block ad-blocker users, or disable copy-pasting. That’s not how web works. Way forward? Embrace it, be honest and authentic, and connect with people instead.
9
113
373
Looking for the perfect absolute horizontal and vertical centering in CSS? Look no more: coding.smashingmagazine.com/… by @shshaw on @smashingmag
4
125
388
✏️ The future of web typography looks promising. Here's how new font technologies will improve the web: smashingmagazine.com/2017/09… (by @FranzP)
8
201
395
Dear publishers, there are good reasons why ad-blockers exist. Blocking ad-blocker users is a fight you can't win. Digital advertising has to evolve and take more relevant shapes than display ad units. Better to transition now than later.
12
152
365
After all these years, still a fantastic resource for getting typographic scale right β€”Β with an export to CSS! type-scale.com/
7
63
395
If you're using Sublime, make sure to watch this screencast: Perfect Workflow in Sublime Text 2 - bit.ly/UZJSPr
1
108
405
✎ Designing The Perfect Date And Time Picker. With a checklist of every single detail to consider and UI examples. smashingmagazine.com/2017/07…
5
116
403
Duet Date Picker, an accessible, WCAG 2.1 compliant date picker that can be implemented and used across any JavaScript framework or no framework at all. via @viljamis github.com/duetds/date-picke…
3
85
398
Meet β€œDesign Systems”, a new Smashing book by @craftui to creating design languages for digital products. smashingmagazine.com/design-…
9
98
378
OpenMoji, an open-source project with all emoji available for free use under the CC license. 1000+ emoji already, in color and black’n’white. ↬ OpenMoji Library openmoji.org/library.html
3
111
391
⌘ A collection of useful YouTube channels for JavaScript developers and web designers. github.com/andrew--r/channel…
143
382
πŸŽ‰πŸ₯³ Today we’re releasing β€œSmart Interface Design Checklists”, a PDF deck with 150+ questions to ask when designing and building anything from hamburgers to carousels and tables. Sign up for our lovely newsletter to and get the PDF in your inbox. smashingmagazine.com/2020/03…
2
112
372
I wish more developers were showing off how remarkably fast their websites or apps are on a flaky connection on a medium-budget phone.
14
145
358
HTML Email Boilerplate: a nice bulletproof foundation for your email newsletters - bit.ly/gPhfcS
4
113
379
A very, very detailed article on CSS architecture, bad and good front-end practices: engineering.appfolio.com/201…
8
160
375
A collection of open-source SVG images for any occasion that you can use for both commercial and personal projects. ↬ unDraw (by @NinaLimpi) undraw.co/illustrations
3
101
376