Smashing Magazine 🇺🇦 🏳️🌈
@smashingmag
Followers
898,794
Following
2,630
Media
4,972
Statuses
81,262
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
Joined August 2008
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
América
• 548148 Tweets
Switch
• 238983 Tweets
LINGORM TUKTUK GOGO
• 122378 Tweets
Knicks
• 105998 Tweets
महाराणा प्रताप
• 81562 Tweets
Brunson
• 76106 Tweets
#jjk259
• 73385 Tweets
ドカ食い
• 67458 Tweets
Choso
• 58574 Tweets
もちづきさん
• 58121 Tweets
MAURO AL 9009
• 52897 Tweets
Yuji
• 43244 Tweets
Gege
• 38150 Tweets
アイスの日
• 29509 Tweets
Sukuna
• 28603 Tweets
血糖値スパイク
• 22812 Tweets
頂き女子
• 21668 Tweets
Oilers
• 21374 Tweets
#MaharanaPratapJayanti
• 19837 Tweets
クロステーマスカウト
• 18189 Tweets
シナモン
• 17868 Tweets
タキオン
• 17110 Tweets
Pachuca
• 15729 Tweets
結婚詐欺
• 15014 Tweets
女性向け
• 14267 Tweets
ポチャッコ
• 12740 Tweets
男性向け
• 11998 Tweets
That's why the weight of most websites is out of proportion.
61
2K
2K
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;
}
8
370
2K
🔖 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
8
465
2K
Free web icons that require no CSS, JS, file uploads or inline SVGs.
↬ SVGBox
7
272
2K
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
18
324
1K
Interesting 3D experiments by
@phamduyminh
from Vietnam. Wondering why we haven’t seen such interfaces around. Too annoying to use frequently?
↬ 3D UI experiments
19
217
1K
Useful interface design patterns.
↬ Perfect accordion
↬ Perfect date-picker
↬ Perfect slider
↬ Perfect infinite scroll
↬ Perfect configurator
4
215
957
Great courses to learn stuff:
↬ CSS Animations
↬ Grid Garden
↬ Flex Zombies, Grid Critters
↬ Grid Cheatsheets
↬ Flexbox games
3
318
936
If you want to supercharge your VS Code setup, here’s a bunch of great extensions and themes.
↬ Techniques: VS Code Can Do That?
↬ VS Code Extensions
↬ VSCodeThemes
Any other resources you’d recommend?
5
290
931
Useful CSS techniques to keep in mind.
↬ Fixing 100vh scrollbar issue.
↬ Dynamic SVG placeholders
↬ Complicated Grid in action
↬ Custom hover effect with CSS variables
3
219
936
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.
10
172
892
Let's make 2020... fast! 🏎️💨
Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]
🎯 Metrics, realistic targets
📦 Bundling
🚚 Delivery
🏎️ Single-Page Apps
🎪 HTTP/2, HTTP/3
📈 Testing, Monitoring
🧰 Tooling
✅ TL;DR Checklist
6
340
862
Proportional Resizing with CSS Variables by
@shadeed9
.rect {
--size: 186px;
--aspect-ratio: 2.35;
width: var(--size);
height: calc(var(--size) / var(--aspect-ratio));
}
5
171
818
🔖 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
22
287
819
🎉 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!
8
150
803
🏎💨 Let’s make 2018… fast! “Front-End Performance Checklist 2018” (incl. PDF/Pages) — with everything you need to know to build fast experiences today.
With kind contributions from
@yoavweiss
@addyosmani
@MarkZeman
@patmeenan
and so many others. ❤️
2
345
788
🔖 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
8
162
785
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. — Would love to see a “basically-you-need-to-know-HTML-CSS-and-JavaScript”-chart instead.
24
355
749
Does your working day usually start like this as well? ;-)
46
175
729
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.
↬
6
221
721
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
↬ YouTube/Demo
13
233
705
User Frustrations in 2020: please avoid them if possible.
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
9
60
189
8
306
707
Ordering a table with CSS Custom Properties and the order: property. Mind. Blowing. by
@kizmarh
/ cc:
@MikeRiethmuller
@LeaVerou
@SaraSoueidan
12
237
701
Border-radius can do that? How to create organic shapes with eight values separated by a slash.
↬ Tool
↬ Quick tutorial
6
186
691
For the bookmarks. A search engine for… colors.
↬ Picular
9
224
692
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
5
231
686
Git Command Explorer allows you to "find the right commands you need without digging through the web.” A handy little reference.
↬ Git Command Explorer
8
237
672
Seamless transitions when moving from one page to another. Just demo’ed by
@sarah_edo
at
#ColdFront18
.
↬ Demo
↬ Vue + Next
↬ React
↬ Angular
9
123
668
⌘ Performance Checklist 2017. Is anything missing in here? Please do let us know.
23
200
649
Wow, that’s scary. Displacement Scroll with blending via JavaScript.
10
109
637
🔖 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
18
107
631
🔖 Vanilla JS code snippets.
HTML DOM
Plain JS
Vanilla JS Toolkit
Vanilla Web Projects
You might not need jQuery
Simple JS Guide
4
130
633
Netflix intro animation, with just a bit of CSS.
CodePen
Tutorial
3
81
612
That’s clever. A slider allowing to specify available space and suggesting furniture that would fit there.
↬ Made Sofasizer
/ via
@smash_it_on
6
155
608
Visual cheat sheets for CSS Grid Layout and Flexbox. With everything from alignment to auto-flow.
↬ Flexbox Cheatsheet
↬ Grid Cheatsheet
1
196
601
✨ Finally! A Native CSS Parent Selector Is Coming (and it can do way more than that). Meet :has. By
@AdrianBeceDev
.
6
163
597
A very, very, very, very detailed guide on optimizing performance with Chrome DevTools.
1
165
592
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
128
573
Interesting. A natural language calculator app for Mac.
7
227
562
🔖 HTML Email Templates.
Chamaileon
Postcards
Topol
Maizzle
HTML Email
Cerberus
CampaignMonitor
2
100
557
We removed FB buttons and traffic from Facebook increased. Reason: instead of "liking" articles, readers share it on their timeleine.
61
2K
553
Cheat sheet for moving from jQuery to vanilla JavaScript.
4
126
540
“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”.
21
301
546
🎈 BIG news: so happy and honored to welcome one-and-only
@rachelandrew
as new editor-in-chief of
@smashingmag
. Please welcome Rachel! :-)
47
37
547
Front-end architecture of large sites:
CodePen
http://t.co/OMjlDvFCnp
GitHub
http://t.co/4dlFQL8uw2
Lonely Planet
http://t.co/CByup0WNnB
4
212
526
Cheat sheet for moving from jQuery to vanilla JavaScript.
3
138
510
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
3
106
503
⚡Let’s make 2019… fast!
Meet the annual front-end performance checklist for 2019.
🏎💨 Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
📌 Editable templates in Pages, MS Word.
😅 Editing time: 18 full days.
❤ Community matters!
3
181
506
A free library of customizable illustrations of people in different situations (Sketch file). Free for commercial and private use.
↬ Humaans
3
170
501
The rumours were true: Microsoft Edge browser will be based on Chromium in future. Thus, the only non-Chromium browser on Windows will be Firefox. So, please, for the love of Web: TEST IN FIREFOX. Thank you. xxx
22
295
489
🔥 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.
11
144
495
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
.
2
161
486
Inclusive Dates, a human-friendly and fully accessible date picker.
Demo
GitHub repo
5
60
485
Just in case you need to argue on alternatives for modals or how to get them right.
↬ ModalzModalzModalz
2
144
480
The State of Things 2020.
Salaries
CSS
JS
Front-End Tooling
UX Salaries
Remote Work
Designers
0
148
477
If you want to get into JavaScript, here's a good starting point, free, on YouTube.
0
137
477
Just in case you are trying to make sense of GDPR, here are some great resources to help you out:
Good Guide
Checklist
For developers
For designers
4
208
477
Useful! Input mask for React, Angular, Ember, Vue and vanilla JavaScript. (via
@JavaScriptDaily
)
2
117
470
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.
27
72
469
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
4
95
462
🔥 Front-End Performance Checklist 2017. Ensure that your response times are fast and your website smooth. PDF/Pages.
3
221
459
Launched Pixels: a gallery of free PSD, HTML and CSS resources that you can download and use freely -
http://t.co/P5gS3F9T
#useful
3
120
464
🔥 18 months of work. Result: 56 cats and dozens of emoji. Meet The Next Smashing Magazine.
–
@danmall
@SaraSoueidan
35
189
462
“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?
42
123
449
🏎💨 Let’s make 2018… fast! Front-End Performance Checklist 2018 in PDF, ePUB and Amazon Kindle for your convenience:
PDF
ePUB
Kindle
Made available by kind support of 631 Smashing Members. Thank you! 🙏
5
188
458
CSS utility classes meet Custom Properties to style HTML elements as charts.
Charts.css
GitHub Repo
3
92
455
✏️ 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
:
4
135
444
🔖 Front-End & UX Guides, published by yours truly recently.
Accessible Front-End Components
CSS Generators
CSS Auditing Tools
SVG Generators
HTML Email
24
110
450
Must-watch CSS and JavaScript talks.
Bookmarked.
1
112
445
🔖 HTML Email.
Email bugs
Frameworks
Templates
Cerberus
Boilerplate
CanIEmail
3
68
446
A responsive email template, with support in all major email clients -
http://t.co/hkN1BNSCMp
by
@jng5
#useful
4
141
437
Looking for the perfect absolute horizontal and vertical centering in CSS? Look no more:
http://t.co/okX1vjQSlD
by
@shshaw
on
@smashingmag
5
144
432
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.
12
133
430
The Periodic Table of... Animations. With examples of user interactions. Made in Japan.
0
207
427
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.
14
175
426
Useful! UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true.
↬ UX Myths
↬ UX Myths Posters
4
163
431
“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
3
105
433
✏️ The future of web typography looks promising. Here's how new font technologies will improve the web:
(by
@FranzP
)
8
218
430
If you're using Sublime, make sure to watch this screencast: Perfect Workflow in Sublime Text 2 -
http://t.co/32axRWiaYX
1
116
429
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
3
102
433
After all these years, still a fantastic resource for getting typographic scale right — with an export to CSS!
7
69
431
Front-end architecture of large sites:
CodePen
http://t.co/T6YovhFDxk
GitHub
http://t.co/TbHsgRriZr
Lonely Planet
http://t.co/3Q1YMSdGmS
7
163
425
✎ Designing The Perfect Date And Time Picker. With a checklist of every single detail to consider and UI examples.
5
127
429
Meet “Design Systems”, a new Smashing book by
@craftui
to creating design languages for digital products.
14
110
424
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
3
120
422
4
192
416
List.js: native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable -
http://t.co/nOoE1RJg
4
127
410
A very, very detailed article on CSS architecture, bad and good front-end practices:
http://t.co/mc9guvP9P2
8
175
405
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
175
409
⌘ A collection of useful YouTube channels for JavaScript developers and web designers.
0
153
407
HTML Email Boilerplate: a nice bulletproof foundation for your email newsletters -
http://t.co/bea1vUST
4
122
399
🎉🥳 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.
3
121
408
Rock Solid Website Layout Examples —
http://bit.ly/hqbrz6
— Wonderful and
#useful
article.
0
134
402
A JavaScript guide intended to introduce new developers to JavaScript's best practices, JS The Right Way.
http://t.co/AUXOIhaArH
3
175
403
A collection of open-source SVG images for any occasion that you can use for both commercial and personal projects.
↬ unDraw (by
@NinaLimpi
)
4
110
405