Internationale Web News
- Inclusively HiddenScott 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.
- How to Get a Progressive Web App into the Google Play StorePWA (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 № 484This 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 ApplicationsFor 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 DockA 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 NowThere 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 ExampleHey 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 RequestsPart 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!(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 BusinessWeb 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 DesignWith 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.
The post Clever code appeared first on CSS-Tricks.
- Simplistic Website Design Ideas to Transform Your Online PresenceYour 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 HintsModern 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 PluginsThere 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 VueVue 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 ShoesEvery 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(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.
- The Four Ways That Freelancers Are Often MistreatedTo 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 BookI’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 FigmaThis 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 DesignsWhen 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 DesignThere’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 № 483This 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“‘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.
- The Battle of Stability vs. GrowthOne 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 ShapesLast 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 LineCommunication 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 ExperiencesPart 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 …
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)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 DisplayA 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.
- Privacy UX: Common Concerns And Privacy In Web FormsMany 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(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 ApplicationIf 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 BuddyOne 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.