An online magazine for designers and web developers. Questions? We've got your back:
@SmashingSupport
,
@SmashingConf
. Curated by Iris, Vitaly and the team.
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;
}
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
Interesting 3D experiments by
@phamduyminh
from Vietnam. Wondering why we havenโt seen such interfaces around. Too annoying to use frequently?
โฌ 3D UI experiments
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?
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.
๐ 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!
๐๐จ 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. โค๏ธ
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.
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.
โฌ
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
Git Command Explorer allows you to "find the right commands you need without digging through the web.โ A handy little reference.
โฌ Git Command Explorer
Seamless transitions when moving from one page to another. Just demoโed by
@sarah_edo
at
#ColdFront18
.
โฌ Demo
โฌ Vue + Next
โฌ React
โฌ Angular
๐ 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
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!
โ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โ.
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
โก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!
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
๐ฅ 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.
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
.
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.
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
๐๐จ 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! ๐
โ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?
โ๏ธ 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
:
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.
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.
โ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
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
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
๐๐ฅณ 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.