Smashing Magazine 🇺🇦 🏳️🌈
@smashingmag
Followers
878K
Following
8K
Media
5K
Statuses
81K
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
That's why the weight of most websites is out of proportion.
57
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;.}.
7
356
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
431
1K
Free web icons that require no CSS, JS, file uploads or inline SVGs. ↬ SVGBox.
7
265
1K
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.
16
305
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.
18
212
955
Useful interface design patterns. ↬ Perfect accordion. ↬ Perfect date-picker. ↬ Perfect slider. ↬ Perfect infinite scroll. ↬ Perfect configurator.
5
205
907
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
208
878
Great courses to learn stuff:. ↬ CSS Animations. ↬ Grid Garden. ↬ Flex Zombies, Grid Critters. ↬ Grid Cheatsheets. ↬ Flexbox games.
2
301
873
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?
4
282
890
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
164
847
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
323
832
🔖 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
21
265
764
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
163
773
🎉 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
146
766
🏎💨 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
329
743
🔖 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
158
742
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.
22
342
709
Does your working day usually start like this as well? ;-)
44
168
678
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. ↬
5
206
680
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
216
675
Ordering a table with CSS Custom Properties and the order: property. Mind. Blowing. by @kizmarh / cc: @MikeRiethmuller @LeaVerou @SaraSoueidan
10
230
659
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.
8
291
670
Border-radius can do that? How to create organic shapes with eight values separated by a slash. ↬ Tool. ↬ Quick tutorial.
6
177
656
For the bookmarks. A search engine for… colors. ↬ Picular.
9
216
658
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
224
655
Seamless transitions when moving from one page to another. Just demo’ed by @sarah_edo at #ColdFront18. ↬ Demo. ↬ Vue + Next. ↬ React. ↬ Angular.
9
119
637
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
232
637
⌘ Performance Checklist 2017. Is anything missing in here? Please do let us know.
21
189
609
Wow, that’s scary. Displacement Scroll with blending via JavaScript.
9
105
607
🔖 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.
17
102
594
🔖 Vanilla JS code snippets. HTML DOM. Plain JS. Vanilla JS Toolkit. Vanilla Web Projects. You might not need jQuery. Simple JS Guide.
4
123
599
Netflix intro animation, with just a bit of CSS. CodePen. Tutorial.
3
78
594
That’s clever. A slider allowing to specify available space and suggesting furniture that would fit there. ↬ Made Sofasizer. / via @smash_it_on
6
152
589
Visual cheat sheets for CSS Grid Layout and Flexbox. With everything from alignment to auto-flow. ↬ Flexbox Cheatsheet. ↬ Grid Cheatsheet.
1
190
572
✨ Finally! A Native CSS Parent Selector Is Coming (and it can do way more than that). Meet :has. By @AdrianBeceDev.
5
155
571
A very, very, very, very detailed guide on optimizing performance with Chrome DevTools.
1
156
558
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
121
525
Interesting. A natural language calculator app for Mac.
7
215
539
🔖 HTML Email Templates. Chamaileon. Postcards. Topol. Maizzle. HTML Email. Cerberus. CampaignMonitor.
2
100
548
We removed FB buttons and traffic from Facebook increased. Reason: instead of "liking" articles, readers share it on their timeleine.
56
2K
525
Cheat sheet for moving from jQuery to vanilla JavaScript.
3
122
509
“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”.
19
268
501
🎈 BIG news: so happy and honored to welcome one-and-only @rachelandrew as new editor-in-chief of @smashingmag. Please welcome Rachel! :-).
40
36
495
Front-end architecture of large sites:. CodePen. http://t.co/OMjlDvFCnp. GitHub. http://t.co/4dlFQL8uw2. Lonely Planet. http://t.co/CByup0WNnB.
4
204
497
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
104
490
Cheat sheet for moving from jQuery to vanilla JavaScript.
3
134
484
⚡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
168
490
A free library of customizable illustrations of people in different situations (Sketch file). Free for commercial and private use. ↬ Humaans.
3
160
476
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
277
440
🔥 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
138
471
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
156
466
Inclusive Dates, a human-friendly and fully accessible date picker. Demo. GitHub repo.
5
57
454
The State of Things 2020. Salaries. CSS. JS. Front-End Tooling. UX Salaries. Remote Work. Designers.
0
140
460
Just in case you need to argue on alternatives for modals or how to get them right. ↬ ModalzModalzModalz.
2
137
451
If you want to get into JavaScript, here's a good starting point, free, on YouTube.
0
133
453
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.
3
199
445
Useful! Input mask for React, Angular, Ember, Vue and vanilla JavaScript. (via @JavaScriptDaily)
2
115
448
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
86
439
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.
25
70
436
Launched Pixels: a gallery of free PSD, HTML and CSS resources that you can download and use freely - http://t.co/P5gS3F9T
#useful.
3
116
439
🔥 Front-End Performance Checklist 2017. Ensure that your response times are fast and your website smooth. PDF/Pages.
3
215
428
🔥 18 months of work. Result: 56 cats and dozens of emoji. Meet The Next Smashing Magazine. – @danmall @SaraSoueidan
33
181
441
🏎💨 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
182
442
CSS utility classes meet Custom Properties to style HTML elements as charts. Charts.css. GitHub Repo.
3
90
434
🔖 Front-End & UX Guides, published by yours truly recently. Accessible Front-End Components. CSS Generators. CSS Auditing Tools. SVG Generators. HTML Email.
24
106
428
✏️ 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
125
416
“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?.
40
120
418
Must-watch CSS and JavaScript talks. . Bookmarked.
1
111
422
🔖 HTML Email. Email bugs. Frameworks. Templates. Cerberus. Boilerplate. CanIEmail.
3
65
427
A responsive email template, with support in all major email clients - http://t.co/hkN1BNSCMp by @jng5 #useful.
4
138
416
“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
101
415
The Periodic Table of. Animations. With examples of user interactions. Made in Japan.
0
198
400
Useful! UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. ↬ UX Myths. ↬ UX Myths Posters.
4
152
405
Looking for the perfect absolute horizontal and vertical centering in CSS? Look no more: http://t.co/okX1vjQSlD by @shshaw on @smashingmag.
5
136
401
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.
10
126
387
✏️ The future of web typography looks promising. Here's how new font technologies will improve the web:.(by @FranzP)
8
210
408
If you're using Sublime, make sure to watch this screencast: Perfect Workflow in Sublime Text 2 - http://t.co/32axRWiaYX.
1
112
415
✎ Designing The Perfect Date And Time Picker. With a checklist of every single detail to consider and UI examples.
5
124
413
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.
13
166
385
After all these years, still a fantastic resource for getting typographic scale right — with an export to CSS!.
7
66
408
Front-end architecture of large sites:. CodePen. http://t.co/T6YovhFDxk. GitHub. http://t.co/TbHsgRriZr. Lonely Planet. http://t.co/3Q1YMSdGmS.
7
158
399
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
90
405
Meet “Design Systems”, a new Smashing book by @craftui to creating design languages for digital products.
11
102
392
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
117
403
4
186
395
List.js: native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable - http://t.co/nOoE1RJg.
4
123
390
⌘ A collection of useful YouTube channels for JavaScript developers and web designers.
0
149
390
🎉🥳 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.
2
120
389
HTML Email Boilerplate: a nice bulletproof foundation for your email newsletters - http://t.co/bea1vUST.
4
116
386
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
162
375
A very, very detailed article on CSS architecture, bad and good front-end practices: http://t.co/mc9guvP9P2.
8
169
389
A JavaScript guide intended to introduce new developers to JavaScript's best practices, JS The Right Way. http://t.co/AUXOIhaArH.
3
170
384
Rock Solid Website Layout Examples — http://bit.ly/hqbrz6 — Wonderful and #useful article.
0
129
382
A collection of open-source SVG images for any occasion that you can use for both commercial and personal projects. ↬ unDraw (by @NinaLimpi).
3
106
387