Malek On The Web
@malekontheweb.bsky.social
📤 33
📥 24
📝 233
Principal software developer who also does UI design. Public speaker. Photographer. Blues music fan.
"There are three design patterns for representing an inactive command in a graphical user interface..." "Which option has superior usability?"
#ux
#design
www.uxtigers.com/post/inactiv...
loading . . .
Inactive GUI Controls: Show, Disable, or Hide?
Three design patterns exist for inactive UI commands: showing them as normal commands with an error message if clicked, a visibly disabled state, or completely hiding unavailable options. Best practic...
https://www.uxtigers.com/post/inactive-buttons
18 days ago
0
0
0
"When anyone can build anything, standing out isn’t about better tools or flashier features. It’s about fundamentally different skills that most people skip entirely..."
www.antonsten.com/articles/how...
loading . . .
How to stand out when anyone can build anything | Anton Sten
When AI tools have democratized product creation, standing out isn't about better tools or flashier features—it's about fundamentally different skills that most people skip entirely.
https://www.antonsten.com/articles/how-to-stand-out-when-anyone-can-build-anything/
25 days ago
0
1
0
"When it comes to content creation in UX writing, consistency is key for maintaining and enhancing the user experience." This article provides "the top 16 content style guides for you to use on your next content style guide creation journey."
uxwritinghub.com/content-styl...
loading . . .
Explore 16 Top Content Style Guides and How to Use Them
We've collected 16 excellent content style guides to inspire you on your journey towards a new style guide or voice and tone. Join the ride!
https://uxwritinghub.com/content-style-guides/
28 days ago
0
1
0
"useHooks is a collection of custom React Hooks that’s available via npm. It has a great selection of super useful Hooks that will simplify your web development process and make you a faster, better, more efficient developer."
blog.logrocket.com/7-custom-rea...
loading . . .
7 custom React Hooks every developer should be using - LogRocket Blog
Discover seven custom React Hooks that will simplify your web development process and make you a faster, better, more efficient developer.
https://blog.logrocket.com/7-custom-react-hooks/
about 1 month ago
0
1
0
"The smart/dumb component pattern in Angular separates components based on their responsibilities, making it easier to reuse the same data or application state across different UI presentations."
www.telerik.com/blogs/clean-...
loading . . .
Clean Code Using Smart and Dumb Components in Angular
Reuse data or state across interfaces by separating your Angular components based on responsibility, aka the smart/dumb component pattern.
https://www.telerik.com/blogs/clean-code-using-smart-dumb-components-angular
about 1 month ago
0
1
0
"...the basic snippets of HTML", tags included to make websites appear in desktop and mobile browsers as expected.
#WebDevelopment
blog.jim-nielsen.com/2025/dont-fo...
loading . . .
Don’t Forget These Tags to Make HTML Work Like You Expect
Writing about the big beautiful mess that is making things for the world wide web.
https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/
about 1 month ago
0
2
0
"...when you stop treating AI like magic and start treating it like what it actually is (a very enthusiastic intern with zero life experience), things start to make more sense."
#ux
#PromptEngineering
www.smashingmagazine.com/2025/10/ai-u...
loading . . .
AI In UX: Achieve More With Less — Smashing Magazine
A simple but powerful mental model for working with AI: treat it like an enthusiastic intern with no real-world experience. Paul Boag shares lessons learned from real client projects across user resea...
https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/
about 1 month ago
0
1
0
Highlight
#WebAccessibility
issues in your
#HTML
via this
#CSS
snippet, such as div buttons, empty anchors, and images missing alt text.
frontendmasters.com/blog/a11y-li...
loading . . .
A11Y Linting HTML with CSS
Will Mendes has a bit of CSS to highlight accessibility issues on HTML elements. Things like missing alt text and labels that aren’t linked properly to inputs. If you want to try it out quick on a web...
https://frontendmasters.com/blog/a11y-linting-html-with-css/
about 2 months ago
0
0
0
'If you’re lost in an AI user flow, blame the writing. Lots of these tools use unclear labeling, make phony promises, or simply cram interfaces with vague, hyphenated phrases like “AI-enabled.”'
uxdesign.cc/ai-interface...
loading . . .
AI interfaces and the role of good writing
How words are powering a new era of digital product design
https://uxdesign.cc/ai-interfaces-and-the-role-of-good-writing-222cef13047f
about 2 months ago
0
0
0
"...deeper-level redesigns eventually deliver well-refreshed, up-to-date, highly usable designs by pushing the next redesign need in years. How to select the right UX redesign level that optimizes cost but delivers good results?"
blog.logrocket.com/ux-design/ux...
loading . . .
How to decide how deep your UX redesign should go - LogRocket Blog
Unsure if your product needs a facelift or a full rebuild? Here’s how to decide how deep your UX redesign should go without wasting time or budget.
https://blog.logrocket.com/ux-design/ux-redesign-depth-guide/
about 2 months ago
0
1
0
Advice to level up your contact forms including designing an easy-to-scan layout and ensuring
#accessibility
.
#WebDesign
www.telerik.com/blogs/4-desi...
loading . . .
4 Design Best Practices for Better Contact Forms
High-performing contact forms should be concise and intuitive and simultaneously make things easier for the brand representatives on the other end of the form.
https://www.telerik.com/blogs/4-design-best-practices-better-contact-forms
about 2 months ago
0
1
0
"JavaScript now has native support for grouping data with Object.groupBy() and Map.groupBy(). These static methods make grouping expressive, concise, and far more readable..."
allthingssmitty.com/2025/10/06/g...
loading . . .
How to group arrays in JavaScript without reduce() - Matt Smith
Ditch the reduce() boilerplate! Learn how to use Object.groupBy() and Map.groupBy() in JavaScript to group data with cleaner, more expressive code.
https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
about 2 months ago
0
1
0
"...sometimes it’s better to start fresh than to endlessly patch a flawed design. Incremental improvements can only go so far if the underlying structure is broken."
#ux
blog.logrocket.com/ux-design/ho...
loading . . .
How we turned a broken order form into a 95% ticket reduction - LogRocket Blog
I rebuilt our order form from scratch. The result? A 95% drop in support tickets and a smoother experience for everyone.
https://blog.logrocket.com/ux-design/how-we-turned-a-broken-order-form-into-a-95-ticket-reduction/
about 2 months ago
0
0
0
"So how do you overcome creative block? Simply put, you find fun in the process. Treat your failures like exercises and explorations of curiosity rather than reflections on your own capabilities and self-worth."
tympanus.net/codrops/2025...
loading . . .
Developing Creativity & Emotional Design Skills for Beginners | Codrops
Learn how analytical and systematic thinking can lead to natural creative insight, and discover what makes projects emotionally resonate.
https://tympanus.net/codrops/2025/10/01/developing-creativity-emotional-design-skills-for-beginners/
2 months ago
0
2
0
"...quality isn’t a slogan, a program, or a scorecard. It’s a promise kept at the edge by the people doing the work. And, ideally, quality is fundamental to the product itself..."
matthewstrom.com/writing/dece...
loading . . .
Decentralizing quality
Why moving judgment to the edges wins in the long run
https://matthewstrom.com/writing/decentralizing-quality/
2 months ago
0
2
0
A discussion, with examples, of a wide array of
#css
media queries including forced-colors, orientation, and prefers-reduced-motion.
#WebDevelopment
frontendmasters.com/blog/learn-m...
loading . . .
How much do you really know about media queries?
There are a ton more @media queries than
https://frontendmasters.com/blog/learn-media-queries/
2 months ago
0
3
0
"Instead of fighting with each other, the design and development teams should approach collaboration as coowners of the product experience... here are a few tips for making coownership work."
www.nngroup.com/articles/dev...
loading . . .
From Confrontation to Collaboration: The Developer-Designer Relationship
The infamous developer-designer relationship doesn’t need to be toxic. Design and development teams should approach collaboration as coowners of the product experience.
https://www.nngroup.com/articles/developer-designer-relationship/
2 months ago
0
0
0
'Is vibe coding (i.e. letting AI generate code without looking at the code) good or bad? The answer is of course neither, because “it depends”.'
#development
martinfowler.com/articles/exp...
loading . . .
To vibe or not to vibe
Notes from my Thoughtworks colleagues on AI-assisted software delivery
https://martinfowler.com/articles/exploring-gen-ai/to-vibe-or-not-vibe.html
2 months ago
0
1
0
"Every time a user is forced to jump between different screens, tabs, or workflows, they lose momentum, context, and focus... For products where efficiency is critical... this friction can make or break the experience."
#ux
blog.logrocket.com/ux-design/ta...
loading . . .
Task switching slowed my users down. Here's how I fixed it - LogRocket Blog
See how unifying screens in a trading platform redesign halved task time and how you can use the same UX principles in your product.
https://blog.logrocket.com/ux-design/task-switching-ux-redesign/
2 months ago
0
1
0
Using "cos" and "sin" in
#CSS
to create circular layouts, popup menus with circular animations, wavy layouts, and more.
#WebDevelopment
css-tricks.com/the-most-hat...
loading . . .
The “Most Hated” CSS Feature: cos() and sin() | CSS-Tricks
I want to look at practical uses for CSS trigonometric functions. And we'll start with what may be the most popular functions of the "worst" feature: sin() and cos().
https://css-tricks.com/the-most-hated-css-feature-cos-and-sin/
3 months ago
0
2
0
Five ways to reduce a three-column grid to one-column for smaller screens or browser windows, each with their pros and cons.
#css
#WebDevelopment
frontendmasters.com/blog/breakpo...
loading . . .
Breakpoint Columns, Five Ways. Which Do You Like?
There are usually multiple ways to do the same thing on the web. Sometimes... a lot of ways. Which is
https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/
3 months ago
0
3
0
Learn how to write simple web and API servers in
#JavaScript
with
#node
.
#WebDevelopment
2ality.com/2025/09/impl...
loading . . .
Learning web development: Implementing web servers
In this chapter, we’ll write our own web server: It will serve files and manage the data for a browser app.
https://2ality.com/2025/09/implementing-web-servers.html#remote-function-calls
3 months ago
0
3
0
"...developers need to construct an optimal development toolkit for themselves by choosing tools from dozens of frontend frameworks, libraries, languages, build tools, ... deployment tools, and AI tools, even before writing a single code line."
blog.logrocket.com/frontend-too...
loading . . .
Too many tools: How to manage frontend tool overload - LogRocket Blog
Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.
https://blog.logrocket.com/frontend-tool-overload/
3 months ago
0
1
0
"a comparison engine to help you compare AI tools side-by-side" covering Claude, Gemini, Cursor, GitHub Copilot, Windsurf, and more.
blog.logrocket.com/ai-dev-tool-...
loading . . .
AI dev tool power rankings & comparison [Sept 2025] - LogRocket Blog
Compare the top AI development tools and models of September 2025. View updated rankings, feature breakdowns, and find the best fit for you.
https://blog.logrocket.com/ai-dev-tool-power-rankings-sept-2025/
3 months ago
0
0
0
"Think of Cursor as Visual Studio Code’s ambitious younger cousin—the one who not only borrows your syntax highlighting but also brings a full brain along for the ride—and is also a fork of its bigger cousin."
#AI
#Development
frontendmasters.com/blog/getting...
loading . . .
Getting Started with Cursor
Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.
https://frontendmasters.com/blog/getting-started-with-cursor/
3 months ago
0
0
1
"Having accessibility baked into the Design System is critical to prevent redundant issues... creating an audit structure upfront is so important."
#ux
#ui
#WebAccessibility
uxdesign.cc/auditing-you...
loading . . .
Auditing your Design system for accessibility
How to fix A11y issues at the system-level
https://uxdesign.cc/auditing-your-design-system-for-accessibility-49784d15ae56
3 months ago
0
3
1
A discussion of non-mutating
#JavaScript
methods to sort, reverse, and splice arrays, useful for
#React
/ functional programming.
#WebDevelopment
allthingssmitty.com/2025/09/08/f...
loading . . .
Finally, safe array methods in JavaScript - Matt Smith
Learn how to safely sort, reverse, and splice arrays in JavaScript using ES2023 methods toSorted(), toReversed(), and toSpliced(). Perfect for React and modern JS development.
https://allthingssmitty.com/2025/09/08/finally-safe-array-methods-in-javascript/
3 months ago
0
1
0
"...why exactly do browsers bother to throttle setTimeout if web developers can just use scheduler.postTask or MessageChannel instead?"
#JavaScript
#WebDevelopment
nolanlawson.com/2025/08/31/w...
loading . . .
Why do browsers throttle JavaScript timers?
Even if you’ve been doing JavaScript for a while, you might be surprised to learn that setTimeout(0) is not really setTimeout(0). Instead, it could run 4 milliseconds later: Nearly a decade a…
https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/
3 months ago
0
1
0
"Modern JavaScript regular expressions have come a long way compared to what you might be familiar with." Learn "the history of improvements" and proposals of what may be to come.
#WebDevelopment
www.smashingmagazine.com/2024/08/hist...
loading . . .
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and presen...
https://www.smashingmagazine.com/2024/08/history-future-regular-expressions-javascript/
3 months ago
0
2
0
"In this article, we will help developers recognize that AI coding tools could create more problems than they solve when used carelessly, and provide practical strategies to work with AI more effectively."
blog.logrocket.com/fixing-ai-co...
loading . . .
AI coding tools still suck at context — here’s how to work around it - LogRocket Blog
Discover why you might be having difficulty with AI coding tools, and learn some practical strategies to work with AI more effectively.
https://blog.logrocket.com/fixing-ai-context-problem/
3 months ago
0
0
0
Part of a learning
#WebDevelopment
series, here is a primer on asynchronous
#JavaScript
discussing promises and asynchronous functions.
2ality.com/2025/09/java...
loading . . .
Learning web development: Asynchronous JavaScript – Promises and async functions
In this chapter, we learn how to handle tasks that take a long time to complete – think downloading a file. The mechanisms for doing that, Promises and async functions are an important foundation of J...
https://2ality.com/2025/09/javascript-async.html
3 months ago
0
1
0
"Prompting is us designing our own interactions with machines — it uses the same mindset with a new medium."
#AI
www.smashingmagazine.com/2025/08/prom...
loading . . .
Prompting Is A Design Act: How To Brief, Guide And Iterate With AI — Smashing Magazine
Prompting is more than giving AI some instructions. You could think of it as a design act, part creative brief and part conversation design. This second article on AI augmenting design work introduces...
https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/
3 months ago
0
1
0
In
#Angular
, "Unlike the zone-based change detection that runs for entire component trees, signals provide fine-grained reactivity that updates only what actually changed."
#JavaScript
www.telerik.com/blogs/angula...
3 months ago
0
0
0
"To comply with the [European Accessibility Act], websites and apps should implement various accessibility features, including text-to-speech, keyboard navigation, and screen reader compatibility."
baymard.com/blog/europea...
loading . . .
EU Accessibility Act 2025: 5 Best Practices – Baymard
The European Accessibility Act of 2025 has new requirements for making ecommerce accessible. Here are 5 best practices to improve your site’s accessibility.
https://baymard.com/blog/european-accessibility-act-2025
3 months ago
0
0
0
"...why card-based layouts work so well, how they influence user experience, and how to design cards that make content more usable and engaging."
#ux
#ui
designshack.net/articles/ux-...
loading . . .
How Card-Based Layouts Shape Modern UX
Card-based design has become one of the most popular UI patterns across the web and for good reason. From mobile apps and dashboards to news websites and online stores, cards offer a flexible and clea...
https://designshack.net/articles/ux-design/card-layouts-modern-ux/
3 months ago
0
3
0
"Promise.any() is a modern, elegant solution for scenarios where at least one success is enough, and failures are expected. Whether you’re optimizing API calls or enhancing UX with optional features, it’s a powerful addition to your async toolkit."
#JavaScript
allthingssmitty.com/2025/08/25/u...
loading . . .
Understanding Promise.any(): when one success is enough - Matt Smith
Learn how Promise.any() helps you handle multiple promises by resolving with the first success, perfect for fallback APIs and progressive features in JavaScript.
https://allthingssmitty.com/2025/08/25/understanding-promise-any-when-one-success-is-enough/
3 months ago
0
1
0
"...many consumers are simply not aware of how powerful generative AI tools can be in information-seeking, and don’t know how to prompt to achieve better outcomes."
www.nngroup.com/articles/ai-...
loading . . .
How AI Succeeds (and Fails) to Help People Find Information
AI chat and search lets users describe needs without exact keywords, but many don't know AI's full capabilities or how to prompt effectively.
https://www.nngroup.com/articles/ai-information-seeking-keyword-foraging/
3 months ago
0
1
0
"The AI we need isn’t just one that can process text, voice, images, and gestures simultaneously. We need a partner... detecting the unspoken truth in the dissonance between these multimodal signals."
#AI
uxdesign.cc/lifting-the-...
loading . . .
Co-constructing intent with AI agents
How can we move beyond the confines of a simple input field to help agents evolve from mere “tools” into true “partners” that can perceive…
https://uxdesign.cc/lifting-the-fog-co-constructing-intent-with-ai-agents-fbb503599ac0
3 months ago
0
0
1
"Design isn’t about decoration. It’s about creating order... Order takes discipline. Tough decisions. Design is decision-making. It’s about setting constraints."
#ui
#WebDesign
www.telerik.com/blogs/how-th...
loading . . .
How to Think Like a Designer
Use placement and contrast to shape flow and gain clarity. A login form redesign reveals how designers think.
https://www.telerik.com/blogs/how-think-like-designer
3 months ago
0
1
0
"...why it’s so risky to eliminate entry-level roles. If no one has mastered the new [#AI] landscape, we need more hands and perspectives, not fewer."
blog.logrocket.com/dont-let-ai-...
loading . . .
Don’t let AI erase the next generation of dev leaders - LogRocket Blog
If AI snaps up all of their opportunities to learn, junior engineers can never grow into senior roles. Then who’s left to lead the engineering teams of the future?
https://blog.logrocket.com/dont-let-ai-erase-next-generation-dev-leaders/
3 months ago
0
0
0
Explanations and demonstrations of the SVG "path" element, including lines, curves, and arcs.
#WebDevelopment
www.joshwcomeau.com/svg/interact...
loading . . .
An Interactive Guide to SVG Paths • Josh W. Comeau
SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tut...
https://www.joshwcomeau.com/svg/interactive-guide-to-paths/
3 months ago
0
0
0
"Beyond functionality, color is also a powerful tool for brand recognition and emotional connection. Consistent use of brand colors across a digital product reinforces identity and builds trust."
#ux
#ProductDesign
www.smashingmagazine.com/2025/08/psyc...
loading . . .
The Psychology Of Color In UX Design And Digital Products — Smashing Magazine
Rodolpho Henrique guides you through the essential aspects of color in digital design and user experience, from the practical steps of creating effective and scalable color palettes to the critical ac...
https://www.smashingmagazine.com/2025/08/psychology-color-ux-design-digital-products/
4 months ago
0
0
0
"Event delegation streamlines event handling by attaching a single listener to a parent element. When a child triggers an event, it bubbles up to the parent, reducing memory usage and simplifying code."
#JavaScript
blog.logrocket.com/deep-interna...
loading . . .
The deep internals of event delegation: When bubbling isn’t enough - LogRocket Blog
Learn event delegation in JavaScript, optimize event handling, reduce memory use, support dynamic elements, and handle tricky non-bubbling events.
https://blog.logrocket.com/deep-internals-event-delegation/
4 months ago
0
0
0
"The merit of a solution can’t be measured by a binary yes-or-no — and one of the most important reasons to do research is precisely to uncover the nuance between these two extremes."
#ux
www.nngroup.com/articles/res...
loading . . .
In User Research, Don’t Stop at “Yes” or “No”
Product stakeholders see user research as a tool to validate already-made decisions. But binary findings that confirm or reject a design provide little value.
https://www.nngroup.com/articles/research-yes-or-no/
4 months ago
0
0
0
"Advanced prompting is about moving beyond one-shot, throwaway prompts. It’s an iterative, structured process of refining your inputs using different techniques so you can guide the AI toward more useful results."
www.smashingmagazine.com/2025/08/desi...
loading . . .
Designing With AI, Not Around It: Practical Advanced Techniques For Product Design Use Cases — Smashing Magazine
Prompting isn’t just about writing better instructions, but about designing better thinking. Ilia Kanazin and Marina Chernyshova explore how advanced prompting can empower different product & design u...
https://www.smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/
4 months ago
0
1
0
Here's something we don't always think about when designing webpages - quotes. This article goes into shapes, borders, typefaces, and more.
#css
#WebDesign
css-tricks.com/getting-crea...
loading . . .
Getting Creative With Quotes | CSS-Tricks
How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote m...
https://css-tricks.com/getting-creative-with-quotes/
4 months ago
0
1
0
With the Custom Highlight API, "you can apply (some) styling to text that you get your hands on in JavaScript via the Range() class." Useful for search engine result pages, syntax highlighting, etc without adding span tags.
frontendmasters.com/blog/using-t...
loading . . .
Using the Custom Highlight API
You can get your hands on ranges of text in JavaScript, then apply a named
https://frontendmasters.com/blog/using-the-custom-highlight-api/
4 months ago
0
1
0
Regarding design systems - "tools and techniques for syncing tokens, updating components, and keeping docs up to date, showing how automation can make all of it easier."
www.smashingmagazine.com/2025/08/auto...
loading . . .
Automating Design Systems: Tips And Resources For Getting Started — Smashing Magazine
Design systems are more than style guides: they’re made up of workflows, tokens, components, and documentation — all the stuff teams rely on to build consistent products. As projects grow, keeping eve...
https://www.smashingmagazine.com/2025/08/automating-design-systems-tips-resources/
4 months ago
0
0
0
Thoughts on naming color palettes, and why you should create your own palette as "distinction creates identity".
#css
#WebDevelopment
css-tricks.com/thinking-dee...
loading . . .
Thinking Deeply About Theming and Color Naming | CSS-Tricks
Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.
https://css-tricks.com/thinking-deeply-about-theming-and-color-naming/
4 months ago
0
2
0
"Logical assignment operators combine a logical operator (||, &&, or ??) with assignment(=) to create a shorthand form... They solve real-world problems more safely and readably, especially when dealing with mutable state"
#JavaScript
allthingssmitty.com/2025/07/28/l...
loading . . .
Logical assignment operators in JavaScript: small syntax, big wins - Matt Smith
Logical assignment operators (||=, &&=, ??=) streamline conditional assignments in JavaScript, making your code cleaner, safer, and easier to read, especially in modern front-end workflows.
https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/
4 months ago
0
1
0
Load more
feeds!
log in