Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ Profile Banner
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ Profile
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ

@smashingmag

895,869
Followers
2,620
Following
4,989
Media
81,299
Statuses

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.
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
9 years
That's why the weight of most websites is out of proportion.
Tweet media one
61
2K
2K
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
369
2K
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
๐Ÿ”– 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
Tweet media one
Tweet media two
Tweet media three
8
463
2K
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
Free web icons that require no CSS, JS, file uploads or inline SVGs. โ†ฌ SVGBox
7
271
2K
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
2017 best practices for loading. via @addyosmani Video: Slides:
Tweet media one
1
372
1K
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
997
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Useful interface design patterns. โ†ฌ Perfect accordion โ†ฌ Perfect date-picker โ†ฌ Perfect slider โ†ฌ Perfect infinite scroll โ†ฌ Perfect configurator
4
213
956
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Great courses to learn stuff: โ†ฌ CSS Animations โ†ฌ Grid Garden โ†ฌ Flex Zombies, Grid Critters โ†ฌ Grid Cheatsheets โ†ฌ Flexbox games
Tweet media one
3
315
928
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
217
933
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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?
Tweet media one
Tweet media two
5
289
927
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
889
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
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
Tweet media one
Tweet media two
Tweet media three
Tweet media four
6
339
858
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
815
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
๐Ÿ”– 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
Tweet media one
22
286
818
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
๐ŸŽ‰ 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
799
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
๐ŸŽ๐Ÿ’จ 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. โค๏ธ
Tweet media one
Tweet media two
2
343
786
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
๐Ÿ”– 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
Tweet media one
8
162
784
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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.
Tweet media one
Tweet media two
Tweet media three
24
354
747
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
Does your working day usually start like this as well? ;-)
46
174
727
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
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
220
718
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
231
703
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
User Frustrations in 2020: please avoid them if possible.
Tweet media one
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
705
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Ordering a table with CSS Custom Properties and the order: property. Mind. Blowing. by @kizmarh / cc: @MikeRiethmuller @LeaVerou @SaraSoueidan
12
236
701
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Border-radius can do that? How to create organic shapes with eight values separated by a slash. โ†ฌ Tool โ†ฌ Quick tutorial
6
185
690
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
For the bookmarks. A search engine forโ€ฆ colors. โ†ฌ Picular
9
224
690
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
Tweet media one
Tweet media two
Tweet media three
Tweet media four
5
231
683
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
236
665
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Seamless transitions when moving from one page to another. Just demoโ€™ed by @sarah_edo at #ColdFront18 . โ†ฌ Demo โ†ฌ Vue + Next โ†ฌ React โ†ฌ Angular
9
123
664
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
8 years
โŒ˜ Performance Checklist 2017. Is anything missing in here? Please do let us know.
Tweet media one
23
199
647
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
Wow, thatโ€™s scary. Displacement Scroll with blending via JavaScript.
10
109
633
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
๐Ÿ”– 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
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
๐Ÿ”– Vanilla JS code snippets. HTML DOM Plain JS Vanilla JS Toolkit Vanilla Web Projects You might not need jQuery Simple JS Guide
Tweet media one
4
129
627
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
Thatโ€™s clever. A slider allowing to specify available space and suggesting furniture that would fit there. โ†ฌ Made Sofasizer / via @smash_it_on
6
156
607
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
Netflix intro animation, with just a bit of CSS. CodePen Tutorial
3
80
608
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Visual cheat sheets for CSS Grid Layout and Flexbox. With everything from alignment to auto-flow. โ†ฌ Flexbox Cheatsheet โ†ฌ Grid Cheatsheet
Tweet media one
Tweet media two
1
193
596
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
โœจ Finally! A Native CSS Parent Selector Is Coming (and it can do way more than that). Meet :has. By @AdrianBeceDev .
Tweet media one
6
160
593
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
A very, very, very, very detailed guide on optimizing performance with Chrome DevTools.
Tweet media one
1
161
588
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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!
Tweet media one
10
127
570
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
Interesting. A natural language calculator app for Mac.
7
225
561
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
๐Ÿ”– HTML Email Templates. Chamaileon Postcards Topol Maizzle HTML Email Cerberus CampaignMonitor
2
101
558
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
12 years
We removed FB buttons and traffic from Facebook increased. Reason: instead of "liking" articles, readers share it on their timeleine.
60
2K
550
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
Cheat sheet for moving from jQuery to vanilla JavaScript.
Tweet media one
4
125
535
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
โ€œ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โ€.
Tweet media one
21
296
545
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
๐ŸŽˆ BIG news: so happy and honored to welcome one-and-only @rachelandrew as new editor-in-chief of @smashingmag . Please welcome Rachel! :-)
47
37
542
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
My Current HTML Boilerplate, by @mmatuzo , with detailed explanation, line-by-line.
Tweet media one
7
72
517
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
10 years
Front-end architecture of large sites: CodePen http://t.co/OMjlDvFCnp GitHub http://t.co/4dlFQL8uw2 Lonely Planet http://t.co/CByup0WNnB
4
211
526
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
Cheat sheet for moving from jQuery to vanilla JavaScript.
Tweet media one
3
138
509
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
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
Tweet media one
3
106
499
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
โšก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!
Tweet media one
Tweet media two
Tweet media three
Tweet media four
3
180
504
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
A free library of customizable illustrations of people in different situations (Sketch file). Free for commercial and private use. โ†ฌ Humaans
3
170
499
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
294
485
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
๐Ÿ”ฅ 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.
Tweet media one
Tweet media two
11
144
491
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
Modern CSS solutions for old CSS problems, a brilliant practical overview by @5t3ph .
Tweet media one
4
111
491
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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
160
484
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
Inclusive Dates, a human-friendly and fully accessible date picker. Demo GitHub repo
5
60
482
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
The State of Things 2020. Salaries CSS JS Front-End Tooling UX Salaries Remote Work Designers
Tweet media one
Tweet media two
Tweet media three
0
148
475
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Just in case you need to argue on alternatives for modals or how to get them right. โ†ฌ ModalzModalzModalz
2
144
480
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
If you want to get into JavaScript, here's a good starting point, free, on YouTube.
0
136
474
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
Tweet media one
4
208
476
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
Useful! Input mask for React, Angular, Ember, Vue and vanilla JavaScript. (via @JavaScriptDaily )
2
117
468
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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.
Tweet media one
27
71
466
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
Tweet media one
4
94
461
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
8 years
๐Ÿ”ฅ Front-End Performance Checklist 2017. Ensure that your response times are fast and your website smooth. PDF/Pages.
Tweet media one
Tweet media two
3
220
458
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
12 years
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
463
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
๐Ÿ”ฅ 18 months of work. Result: 56 cats and dozens of emoji. Meet The Next Smashing Magazine. โ€“ @danmall @SaraSoueidan
Tweet media one
Tweet media two
35
189
460
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
๐ŸŽ๐Ÿ’จ 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! ๐Ÿ™
Tweet media one
5
189
459
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
โ€œ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
444
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
CSS utility classes meet Custom Properties to style HTML elements as charts. Charts.css GitHub Repo
Tweet media one
3
92
451
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
โœ๏ธ 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 :
Tweet media one
4
135
441
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
3 years
๐Ÿ”– Front-End & UX Guides, published by yours truly recently. Accessible Front-End Components CSS Generators CSS Auditing Tools SVG Generators HTML Email
Tweet media one
Tweet media two
Tweet media three
24
110
450
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
10 years
Must-watch CSS and JavaScript talks. Bookmarked.
1
112
445
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
๐Ÿ”– HTML Email. Email bugs Frameworks Templates Cerberus Boilerplate CanIEmail
Tweet media one
3
68
443
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
11 years
A responsive email template, with support in all major email clients - http://t.co/hkN1BNSCMp by @jng5 #useful
4
141
435
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
11 years
Looking for the perfect absolute horizontal and vertical centering in CSS? Look no more: http://t.co/okX1vjQSlD by @shshaw on @smashingmag
5
144
431
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
12 years
Five Useful Responsive Web Design Patterns - http://t.co/f4qaxyOb
0
141
430
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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
132
429
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
Useful! UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. โ†ฌ UX Myths โ†ฌ UX Myths Posters
Tweet media one
Tweet media two
4
163
430
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
8 years
The Periodic Table of... Animations. With examples of user interactions. Made in Japan.
Tweet media one
0
205
425
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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
422
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
โ€œ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
431
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
โœ๏ธ The future of web typography looks promising. Here's how new font technologies will improve the web: (by @FranzP )
8
217
427
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
After all these years, still a fantastic resource for getting typographic scale right โ€”ย with an export to CSS!
Tweet media one
7
69
430
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
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
Tweet media one
3
101
431
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
11 years
If you're using Sublime, make sure to watch this screencast: Perfect Workflow in Sublime Text 2 - http://t.co/32axRWiaYX
1
115
428
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
โœŽ Designing The Perfect Date And Time Picker. With a checklist of every single detail to consider and UI examples.
5
127
429
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
10 years
Front-end architecture of large sites: CodePen http://t.co/T6YovhFDxk GitHub http://t.co/TbHsgRriZr Lonely Planet http://t.co/3Q1YMSdGmS
7
162
425
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
Meet โ€œDesign Systemsโ€, a new Smashing book by @craftui to creating design languages for digital products.
Tweet media one
13
109
423
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
12 years
Learning Git in 15 Minutes: a great introduction to Git - http://t.co/VJ8OPhH7
2
154
421
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
6 years
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
Tweet media one
3
120
422
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
13 years
Useful: 30 Free Programming eBooks - http://t.co/57WMhuch #ebooks #useful
4
191
412
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
13 years
List.js: native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable - http://t.co/nOoE1RJg
4
126
410
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
11 years
A very, very detailed article on CSS architecture, bad and good front-end practices: http://t.co/mc9guvP9P2
8
174
404
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
4 years
๐ŸŽ‰๐Ÿฅณ 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.
Tweet media one
Tweet media two
Tweet media three
Tweet media four
3
120
408
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
8 years
โŒ˜ A collection of useful YouTube channels for JavaScript developers and web designers.
Tweet media one
0
152
406
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
7 years
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
408
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
13 years
HTML Email Boilerplate: a nice bulletproof foundation for your email newsletters - http://t.co/bea1vUST
4
121
399
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
13 years
Rock Solid Website Layout Examples โ€” http://bit.ly/hqbrz6 โ€” Wonderful and #useful article.
0
133
400
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
11 years
A JavaScript guide intended to introduce new developers to JavaScript's best practices, JS The Right Way. http://t.co/AUXOIhaArH
3
175
403
@smashingmag
Smashing Magazine ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿณ๏ธโ€๐ŸŒˆ
5 years
A collection of open-source SVG images for any occasion that you can use for both commercial and personal projects. โ†ฌ unDraw (by @NinaLimpi )
Tweet media one
4
109
405