- Inclusively Hidden
Freitag 21:31 – Chris Coyier at CSS-Tricks
Scott O’Hara recently published „Inclusively Hidden,“ a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions:
Hidden for everyone? display: none; or visibility: hidden; or the hidden attribute. (But watch out for that hidden attribute, says Monica Dinculescu.)
Hidden visually, but present for assistive
… Read article
The post Inclusively Hidden appeared first on CSS-Tricks. - Tabs: It’s Complicated™
Freitag 21:14 – Chris Coyier at CSS-Tricks
I’ve said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes. const button = document.querySelector(„.my-button“); const element = document.querySelector(„.content“); button.addEventListener(„click“, function() { element.classList.toggle(„sparkles“); }); We could use that skill to build some tabs, right? Right. We got this. Say we have this changing classes ability in our skillset now and we need to build a tabbed interface. If we just add a little more code that deals … Read article The post Tabs: It’s Complicat … - How to Get a Progressive Web App into the Google Play Store
Freitag 16:29 – Mateusz Rybczonek at CSS-Tricks
PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: „Will my users be able to install the app using app stores?“ The answer has traditionally been no, but this changed with Chrome 72 which shipped a new feature called TWA (Trusted Web Activities).Trusted Web Activities are a new way to integrate your web-app content such as your PWA with yourAndroid app… Read article
The post How to Get a Progressive Web App into the Google Play Store appeared first on CSS-Tricks. - Weekly News for Designers № 484
Freitag 13:10 – Speckyboy Editors at Speckyboy Web Design Magazine
This week’s Designer News (№ 484) includes Animation Performance 101, Top Font Combinations, Front-end Developer Handbook 2019, Art Direction For The Web Using CSS Shapes, Why you should use CSS env(), Diagonal Containers in CSS, Stack Overflow Developer Survey Results 2019 and much more.
The post Weekly News for Designers № 484 appeared first on Speckyboy Web Design Magazine. - Sketch vs Figma, Adobe XD, And Other UI Design Applications
Freitag 11:00 – at Articles on Smashing Magazine — For Web Designers And Developers
For a while now, Sketch has been the application of choice for many UX and UI designers. However, we have lately seen many new contenders for Sketch’s position #1 as a universal UI design tool. Two apps that I think stand out mostly from the rest (and that have made the biggest strides in their development) are Figma and Adobe XD.
This article is oriented towards user interface designers and developers. - Remove Recent Applications from Dock
Freitag 4:01 – David Walsh at David Walsh Blog
A Mac user’s dock is a sacred place. We customize our dock to no end, and if you’re ultra organized like me, you even use dock separators to group your app icons. Apple recently implemented a feature which displays three recently used apps in the dock. For basic users that’s reasonable, but for power users […]
The post Remove Recent Applications from Dock appeared first on David Walsh Blog. - Faking env() to Use it Now
Donnerstag 19:21 – Chris Coyier at CSS-Tricks
There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with „The Notch“ but it has made it’s way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.That spec doesn’t seem to suggest how we’ll actually set those env() values just yet. If you want them now, the easiest way to … Read article
The post Faking env() to Use it Now appeared first on CSS-Tricks. - Creating Reusable Base Classes in TypeScript with a Real-Life Example
Donnerstag 17:14 – Bryan Hughes at CSS-Tricks
Hey CSS-Tricksters! Bryan Hughes was kind enough to take a concept from an existing post he published on converting to TypeScript and take it a few couple steps further in this post to elaborate on creating reusable base classes. While this post doesn’t require reading the other one, it’s certainly worth checking it out because it covers the difficult task of rewriting a codebase and writing unit tests to help the process. Johnny-Five is an IoT and robotics library for … Read article The post Creating Reusable Base Classes in TypeScript with a Real-Life Example appeared first on CSS-Tricks. … - Privacy UX: Better Notifications And Permission Requests
Donnerstag 17:00 – at Articles on Smashing Magazine — For Web Designers And Developers
Part 1: Privacy Concerns And Privacy In Web Forms Part 2: Better Cookie Consent Experiences Part 3: Better Notifications UX And Permission Requests Part 4: Privacy-Aware Design Framework Imagine you are late for one of those meetings that you really don’t want to be late to. You hastily put on your shoes and your coat and fetch your door keys and grasp for the door handle — just to head out in time. - An Event Apart Boston is Coming. Save Now!
Donnerstag 16:37 – Geoff Graham at CSS-Tricks
(This is a sponsored post.)
An Event Apart Boston is almost here! We’re talking, like, less than a month away. If you’ve been holding off from registering, this might be your last chance because time and seating are both limited. Besides, we’re talking about three days of pure knowledge-dropping by an impressive lineup of speakers on a wide range of topics. Seriously, just look at the full schedule and prepare to be get stoked for a great time.But, … Read article
The post An Event Apart Boston is Coming. Save Now! appeared first on CSS-Tricks. - What to Do When Someone Wants to Partner with Your Design Business
Donnerstag 14:17 – Eric Karkovack at Speckyboy Web Design Magazine
Web designers seem to get a lot of unsolicited business offers. Over the years, I’ve received notes from people who wanted to either buy my business or partner with it…
The post What to Do When Someone Wants to Partner with Your Design Business appeared first on Speckyboy Web Design Magazine. - 10 Creative Code Examples of Media Player Design
Donnerstag 5:52 – Eric Karkovack at Speckyboy Web Design Magazine
With the power of HTML5 and the ease adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And, while it’s…
The post 10 Creative Code Examples of Media Player Design appeared first on Speckyboy Web Design Magazine. - Clever code
Mittwoch 16:00 – Robin Rendle at CSS-Tricks
This week, Chris Ferdinandi examined a clever JavaScript snippet, one that’s written creatively with new syntax features, but is perhaps less readable and performant. It’s a quick read, but his callout of our industry’s fixation on cleverness is worth… calling out:…we’ve become obsessed as an industry with brevity and clever code, and it results in code that’s sometimes less performant, and typically harder to read and make sense of for most people.He made a similar argument late … Read article
The post Clever code appeared first on CSS-Tricks. - Simplistic Website Design Ideas to Transform Your Online Presence
Mittwoch 15:28 – Sam Selders at Web Design – WebFX Blog
Your web design is typically one of the first interactions potential clients have with your brand. First impressions are key, and your website is your chance to make a lasting first impression on users. With over 1 billion websites on the Internet (and growing by the second), your website has to stand out among the […]
The post Simplistic Website Design Ideas to Transform Your Online Presence appeared first on WebFX Blog. - Optimizing Performance With Resource Hints
Mittwoch 12:30 – at Articles on Smashing Magazine — For Web Designers And Developers
Modern web browsers use all sorts of techniques to help improve page load performance by guessing what the user may be likely to do next. The browser doesn’t know much about our site or application as a whole, though, and often the best insights about what a user may be likely to do come from us, the developer.
Take the example of paginated content, like a photo album. We know that if the user is looking at a photo in an album, the chance of them clicking the ‘next’ link to view the following image in the album is pretty high. - Simple Ways to Customize WordPress Plugins
Dienstag 21:12 – Eric Karkovack at Speckyboy Web Design Magazine
There are times when a WordPress plugin’s functionality gets you close to what you need – but not quite the whole way. In addition, there are also situations where you’ve…
The post Simple Ways to Customize WordPress Plugins appeared first on Speckyboy Web Design Magazine. - The Power of Named Transitions in Vue
Dienstag 16:05 – Travis Almand at CSS-Tricks
Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component.
A simple example of this is with a single v-if based on a Boolean. When the Boolean is true, the element appears. When the Boolean is false, the element disappears. Normally, this element would just pop … Read article
The post The Power of Named Transitions in Vue appeared first on CSS-Tricks. - The User’s Perspective: Using Story Structure To Stand In Your User’s Shoes
Dienstag 16:00 – at Articles on Smashing Magazine — For Web Designers And Developers
Every user interaction with your website is part of a story. The user—the hero—finds themselves on a journey through your website on the way to their goal. If you can see this journey from their perspective, you can better understand what they need at each step, and align your goals with theirs.
My first article on websites and story structure, Once Upon a Time: Using Story Structure for Better Engagement, goes into more depth on story structure (the frame around which we build the house of a story) and how it works. - WooCommerce in a Data-Driven World
Dienstag 14:54 – Geoff Graham at CSS-Tricks
(This is a sponsored post.)
WooCommerce recently made an entire overhaul of its highly visible dashboard screen in the WordPress admin available as a new plugin that can be downloaded free from the WordPress Plugin Directory. The new design is gorgeous, of course. I mean, anytime WooCommerce touches an admin screen, other plugin developers really pay attention because it influences they way many of them approach UI in WordPress.
But the real reason the new dashboard struck me is … Read article
The post WooCommerce in a Data-Driven World appeared first on CSS-Tricks. - 7 Useful JavaScript Tricks
Dienstag 14:38 – David Walsh at David Walsh Blog
Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let’s have a look at seven JavaScript tricks you can start using today! Get Unique Values of an Array Getting an array of unique […]
The post 7 Useful JavaScript Tricks appeared first on David Walsh Blog. - The Four Ways That Freelancers Are Often Mistreated
Dienstag 1:51 – Eric Karkovack at Speckyboy Web Design Magazine
To many web professionals, freelancing means freedom. The freedom to work on what you please, when you please. It seems to be the perfect career path in this on-demand world…
The post The Four Ways That Freelancers Are Often Mistreated appeared first on Speckyboy Web Design Magazine. - A Website is a Car and Not a Book
Montag 19:03 – Robin Rendle at CSS-Tricks
I’ve been wondering for a good long while why it feels like web design and development isn’t respected as much as native app development, and why the front-end role in many organizations is seen as a nice-to-have rather than a vital part of the business. Why is it so hard to see that this gig we call „front-end development“ is crucial for business and even the day-to-day lives of users?Is it just me that feels this way?We depend … Read article
The post A Website is a Car and Not a Book appeared first on CSS-Tricks. - Design At Scale: One Year With Figma
Montag 13:30 – at Articles on Smashing Magazine — For Web Designers And Developers
This article will be about how large teams can benefit from using more open, collaborative tooling and how to make adoption and migration feasible and pleasant. Also, in case you didn’t guess from the title of the article just yet, a lot of it will be about Figma and how we succeeded at adopting this design tool in our team.
The intended audience is experienced designers working in larger teams with design systems, developers or product managers looking to improve the way cross-functional teams work in their organization. - Exploring the Simple Beauty of Business Cards with Geometric Designs
Sonntag 23:02 – Nataly Birch at Speckyboy Web Design Magazine
When it comes to geometric designs, the first thing that comes to our mind is of course simplicity. It feels like it is one of the most primitive and easiest…
The post Exploring the Simple Beauty of Business Cards with Geometric Designs appeared first on Speckyboy Web Design Magazine. - Fun Examples of CSS Imitating Print Design
Samstag 11:06 – Eric Karkovack at Speckyboy Web Design Magazine
There’s still some value in having a document or other printed product that you can hold in your hand. And as much as the web has promised a “paperless” world,…
The post Fun Examples of CSS Imitating Print Design appeared first on Speckyboy Web Design Magazine. - Weekly News for Designers № 483
Samstag 11:01 – Speckyboy Editors at Speckyboy Web Design Magazine
This week’s Designer News (№ 483) includes Designer Bio Generator™, Create a Stunning Crossroads Slideshow, a Free Material Admin Kit, Native Image Lazy-Loading for the Web!, Animating SVG with CSS, Play CSSBattle, Web Design Concepts Explained Through Illustration and much more.
The post Weekly News for Designers № 483 appeared first on Speckyboy Web Design Magazine. - Monthly Web Development Update 4/2019: Design Ethics And Clarity Over Style
Freitag 14:44 – at Articles on Smashing Magazine — For Web Designers And Developers
“‘Ethics’ and Ethics” is more than a typical article. It’s a detailed essay exploring what the term ‘ethics’ really means, how its meaning changed in recent times, and how diffusion of responsibility makes it hard to address and fix problems in big organizations.
Implementing design ethics, tech ethics, or business ethics as individual responsibilities might seem like a quick and easy solution, however, it’s not a very effective one as they all lack context when they don’t have support from other people who provide the foundation for their work. - 10 Free CSS & JavaScript Select Box Snippets
Freitag 14:41 – Jake Rocheleau at Speckyboy Web Design Magazine
The default HTML select boxes have served us well for decades. But in the modern era, it’s fair to say they’re a little… stale. Designers can do better and thanks…
The post 10 Free CSS & JavaScript Select Box Snippets appeared first on Speckyboy Web Design Magazine. - The Battle of Stability vs. Growth
Freitag 11:53 – Eric Karkovack at Speckyboy Web Design Magazine
One of the great challenges for any freelancer or small design shop is in finding a consistent level of work. We often run into that old feast-or-famine cycle that seems…
The post The Battle of Stability vs. Growth appeared first on Speckyboy Web Design Magazine. - Art Direction For The Web Using CSS Shapes
Donnerstag 13:30 – at Articles on Smashing Magazine — For Web Designers And Developers
Last year, Rachel Andrew wrote an article that took a new look at CSS Shapes in which she reintroduced readers to the basics of using CSS Shapes. For anyone keen to understand how to use properties like shape-outside, shape-margin, and shape-image-threshold, Rachel’s is the ideal primer.
I’ve seen many examples of using the properties, but very few go beyond Basic Shapes, including circle(), ellipse(), inset(). Even examples using polygon() shapes rarely go far beyond them. - Open FaceTime Call from Command Line
Donnerstag 3:53 – David Walsh at David Walsh Blog
Communication tools are always associated with UIs, and for good reason — if you want communication to be easy and intuitive, you need easy and intuitive interfaces. We need communication tools to provide the lowest barrier of entry, since not all users will be tech savvy. For tech experts like us, however, we love command […]
The post Open FaceTime Call from Command Line appeared first on David Walsh Blog. - Privacy UX: Better Cookie Consent Experiences
Mittwoch 15:00 – at Articles on Smashing Magazine — For Web Designers And Developers
Part 1: Common Concerns And Privacy In Web Forms Part 2: Better Cookie Consent Experiences Part 3: Better Notifications UX And Permission Requests Part 4: Privacy-Aware Design Framework With the advent of the EU General Data Protection Regulation (GDPR) in May 2018, the web has turned into a vast exhibition of consent pop-ups, notifications, toolbars, and modals. While the intent of most cookie-related prompts is the same — to get a user’s consent to keep collecting and evaluating their behavior the same ol’ way they’ve been doing for years — implementations differ significantly, often making … - Understanding Subresource Integrity
Dienstag 12:30 – at Articles on Smashing Magazine — For Web Designers And Developers
If you’ve ever used a CDN-hosted version of a JavaScript library, you may have noticed a strange looking integrity attribute on the script tag. This attribute contains seemingly endless alphanumeric junk that you may be tempted to strip out in the quest for cleaner code.
All that junk is actually a really useful security feature called Subresource Integrity (SRI) that can help to defend your site against certain types of hacks and compromises. - AI-Based Video Preview from Cloudinary (Sponsored)
Montag 15:55 – David Walsh at David Walsh Blog
The early days of video on the web weren’t great. We started with custom browser plugins and codecs, then moved to Flash, and eventually we found our way HTML - Digging Into The Display Property: The Two Values Of Display
Montag 13:00 – at Articles on Smashing Magazine — For Web Designers And Developers
A flex or grid layout starts out with you declaring display: flex or display: grid. These layout methods are values of the CSS display property. We tend not to talk about this property on its own very much, instead concentrating on the values of flex or grid, however, there are some interesting things to understand about display and how it is defined that will make your life much easier as you use CSS for layout. - How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)
Freitag 12:00 – at Articles on Smashing Magazine — For Web Designers And Developers
If you haven’t heard, here’s the TL;DR: WebAssembly is a new language that runs in the browser alongside JavaScript. Yes, that’s right. JavaScript is no longer the only language that runs in the browser!
But beyond just being “not JavaScript”, its distinguishing factor is that you can compile code from languages such as C/C++/Rust (and more!) to WebAssembly and run them in the browser. Because WebAssembly is statically typed, uses a linear memory, and is stored in a compact binary format, it is also very fast, and could eventually allow us to run code at “near-native” speeds, i. - Privacy UX: Common Concerns And Privacy In Web Forms
Donnerstag 16:30 – at Articles on Smashing Magazine — For Web Designers And Developers
Many conversations in our industry tend to circle around strong opinions and universal answers. Choosing a shiny new technical stack or sticking to an old-school paradigm; betting on a trendy framework or building a custom light framework of your own; using an attention-grabbing pop-up or sticking to calmer, less annoying solutions. We tend to have strong opinions about design and development, and so we agree and disagree, and argue endlessly, trying to protect and explain our views. - Going Serverless With Cloudflare Workers
Donnerstag 15:00 – at Articles on Smashing Magazine — For Web Designers And Developers
(This is a sponsored article.) It is a truth universally acknowledged, that a website in pursuit of success must be in want of speed. And so, it goes serverless.
At its core, serverless is a strategy for a website’s architecture, based on deploying static files (the good old HTML, CSS and image files) on cloud-based hosting, and augmenting the website’s capabilities by accessing cloud-based, charge-per-use dynamic functionality. There is nothing mystical or mysterious about serverless: its end result is simply a website or application. - Managing Z-Index In A Component-Based Web Application
Mittwoch 14:00 – at Articles on Smashing Magazine — For Web Designers And Developers
If you’ve done any complex web UI development, you must have at least once furiously tried driving an element’s z-index up to thousands, only to see that it’s not helping position it on top of some other element, whose z-index is lower or even not defined at all.
Why does that happen? And more importantly, how to avoid such issues?
In this article, I’ll recap what z-index actually is and how you can stop guessing whether it might work in any specific case and start treating it just like any other convenient tool. - Awesome Automation and Integration with Buddy
Dienstag 16:07 – David Walsh at David Walsh Blog
One of my favorite services for years has been IFTTT (If this then that). Having a service that allows me to trigger a host of functionalities with one simple action is amazing! Posting a picture to Instagram can trigger IFTTT to send a tweet, post to Facebook, email to friends, etc. I’ve always wanted the […]
The post Awesome Automation and Integration with Buddy appeared first on David Walsh Blog.