The “Design Systems” specialization in frontend development focuses on creating and maintaining consistent, reusable design patterns, components, and guidelines that ensure a cohesive and user-friendly experience across digital products and platforms. Here’s a detailed overview of this specialization:

1. Component Library Development:

   • Componentization: Breaking down user interface elements into reusable components, such as buttons, forms, cards, and navigation bars, that can be easily assembled and customized to create consistent UI designs.
   • Atomic Design Principles: Following atomic design principles (atoms, molecules, organisms, templates, pages) to structure and organize components at different levels of abstraction and complexity.

2. Design Language and Guidelines:

   • Visual Language: Defining a visual language that encompasses typography, color palettes, spacing, and other design elements to maintain visual consistency and brand identity across products.
   • Design Principles: Establishing design principles and guidelines that govern how components should be designed, implemented, and used to ensure consistency, accessibility, and usability.
   • Pattern Libraries: Creating pattern libraries or design systems documentation that document design patterns, usage guidelines, and best practices for designers and developers.

3. Responsive Design and Adaptability:

   • Responsive Components: Designing components and layouts that adapt gracefully to different screen sizes, resolutions, and devices, ensuring a seamless user experience across desktops, tablets, and smartphones.
   • Flexibility and Customization: Building components with flexibility and customization in mind, allowing designers and developers to adjust styles, layouts, and behaviors to meet specific design requirements and user needs.

4. Cross-functional Collaboration:

   • Design-Development Collaboration: Fostering collaboration between designers and developers to ensure alignment between design vision and implementation, and to facilitate the integration of design systems into frontend development workflows.
   • Stakeholder Engagement: Engaging stakeholders across the organization, including product managers, marketers, and executives, to gather feedback, validate design decisions, and promote adoption of the design system.

5. Tooling and Workflow Integration:

   • Design Tools Integration: Integrating design tools (e.g., Sketch, Figma, Adobe XD) with development workflows to enable seamless handoff of design assets, specifications, and prototypes to developers.
   • Version Control and Documentation: Using version control systems (e.g., Git) to manage changes to design system components and documentation, and ensuring that design system assets are well-documented and easily accessible to all team members.

6. Maintenance and Evolution:

   • Iterative Improvement: Continuously iterating and improving the design system based on user feedback, usability testing, and evolving design trends and technologies.
   • Governance and Maintenance: Establishing governance processes and roles to oversee the maintenance, evolution, and governance of the design system, including versioning, deprecation, and retirement of components.

By specializing in design systems, frontend developers can streamline the design and development process, improve consistency and efficiency, and ultimately deliver better user experiences across digital products and platforms. This specialization requires a combination of design skills, technical expertise, collaboration abilities, and a deep understanding of user-centered design principles.

The post Front-end specialisations: Design systems appeared first on ProdSens.live.

We all use wave emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it…

@keyframes bell-keyframes {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.bell-animation {
  animation-duration: 1s;
  animation-iteration-count: var(--times, 1);
  animation-name: bell-keyframes;
  transform-origin: top center;
}

I have also created a codepen for it:

The post Animation can make bell🔔 much more than emoji! appeared first on ProdSens.live.

For all its promise, integrating AI into healthcare demands a safety-first mindset. This article looks at why we must prioritize patient well-being, navigate ethical complexities, and address potential risks to fully realize the positive impact of this technology. Read more »

The post AI in healthcare: The promise and peril of transformation with a safety-first approach appeared first on Mind the Product.

The post AI in healthcare: The promise and peril of transformation with a safety-first approach appeared first on ProdSens.live.

Technology: CSS
Topic: Pseudo-classess explained
Version: 1.1
Author: Cezary Mazur
Author Website: https://cezarymazur.pl

CSS is developing more and more. In addition to various frameworks based on CSS or Sass (BootstrapCSS, TailwindCSS), CSS assembly itself is developing based on the needs and problems reported by developers. With development comes changes, new products, and often new things that are intended to make our programmers’ lives easier. This is also the case with the new pseudo-classes in CSS.

In today’s article I will briefly focus on the new pseudo-class :has().
This article will explain:

1. What is the :has() pseudo-class and what does it refer to?
2. How to use the :has() pseudo-class in practice?
3. Examples of using the :has() pseudo-class

If you are interested in how to start with TailiwndCSS, check out my latest article about: Tailwind CSS – Beginner’s Guide: Where to Start?

1. What is the :has() pseudo-class?

To explain what the :has() pseudo-class is, first we need to explain what pseudo-classes in CSS are.

A pseudo-class is a keyword added to a css selector that specifies a special state of the selector.

The basic pseudo-classes are, for example:

• :hover – state after hovering over the element
• :focus – state when focusing on an element
• :active – element activity status

We already know what a pseudo-class is, so now let’s say what a :has() pseudo-class is responsible for

The :has() pseudo-class selects an element containing the specified content. For example, a:has(img) selects all elements containing a child element.

2. How to use the :has() pseudo-class in practice?

:has() in CSS is like a special tool that allows you to change the appearance of a parent element based on whether it contains a specific child or another element. This might seem a bit different from how we usually think about CSS, where styles are applied from parent to child. Until now, there hasn’t been a direct way to style the parent based on its content, and there are technical reasons for that.

For example, you might want to style links only if they have images inside them. With :has() you can do this. This opens up new possibilities, like adding styles conditionally depending on the content of an element, which wasn’t easily achievable with standard CSS.

The :has() selector is part of the CSS Selectors Level 4 specification, the same set of rules that include the handy :not() pseudo-class.

3. Examples of using a pseudo-class :has()

Let’s assume you want to add a bottom margin to the element, but (!) only to the one that contains the element:

.a:has(img) {
  margin: 0 0 2em 0;
}

.heading h2 {
margin: 0 0 1.5em 0;
}

.heading-group:has(h2):has(.subtitle) h2 {
margin: 0 0 2em 0;
}

You could argue that the CSS :has() selector goes beyond being just a “parent” selector, and that’s exactly what it is! In the example with subheadings, it’s not necessarily about selecting the ultimate parent; instead, you might choose the parent based on a condition and then proceed to select a child element from there.

For instance:

figure:has(figcaption) { ... }

figure:has(figcaption) img { ... }

Here, the second selector specifically targets a child , not just the parent containing the