Articles

Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

Source

The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

The JavaScript language has a long history. There are a lot of developers out there who are still learning the basics. But, if you’re trying to learn the language and make your first steps into it, you need to know what mistakes new developers make.

You have already researched JavaScript development tutorials, and you know that it’s one of the most popular languages in the world. You’ve started to use it for your website or app, but there’s still something that feels wrong with it, isn’t it??

Source de l’article sur DZONE

The majority of web products use AJAX (Asynchronous JavaScript and XML), where elements on the page are loaded at varying time intervals. This can lead to timing issues when automation testing is performed using the Selenium framework. What if a test is run on a WebElement that is not present in the DOM? The findElement function will raise ElementNotVisibleException.

Here are other scenarios that can cause issues in Selenium due to the dynamic loading of elements:

Source de l’article sur DZONE

Alert windows are widely used across websites where an alert message acts as a mode to ‘interrupt’ the current flow of the user journey. A simple example of a JavaScript alert would be someone filling in details on the sign-up page and submitting the details without entering some mandatory information. This user flow also needs to be verified when Selenium automation testing is performed on the web product. 

Handling pop-ups and alerts are one of the common test scenarios that should be tested using Selenium WebDriver. In this post of the Selenium Python tutorial series, we look at how to handle JavaScript alerts in Python. It is worth mentioning that the core fundamentals of JavaScript alerts and popups remain unchanged irrespective of the programming language used for Selenium.

Source de l’article sur DZONE

Websites haven’t always been as adaptable as they are today. For modern designers, “responsivity” is one of the most significant defining factors of a good design. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes. 

However, the shift to responsive design didn’t happen overnight. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today. 

Today, we’re going to take a closer look at the history of responsive web design.

Where Did Web Design Begin?

When the first websites were initially created, no one was worried about responsivity across a range of screens. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.  

Even when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. However, they still found a few ways to work with different monitor and browser sizes.

Liquid Layouts

The main two layout options available to developers in the early days were fixed-width, or liquid layout. 

With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. You can see an example here

Alternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design. 

Liquid layouts could adapt to different monitor resolutions and browser sizes. However, content could also overflow, and text would frequently break on smaller screens. 

Resolution-Dependent Layouts

In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size. This technique became known as “resolution-dependent layouts”. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design. 

The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers.

With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away.

The Rise of Mobile Subdomains

The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too.

Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications. 

Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. However, at the same time, developers then needed to manage two variations of the same website.

Back at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. For instance, even simple layouts used the max-width: 100% trick for flexible images.

Fortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device. 

A New Age of Responsive Web Design

Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images. 

Fluid Grids

The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. 

On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space). 

Flexible Images

Flexible images introduced the idea that, like content, images should be able to grow or shrink alongside the fluid grid they’re located in. As mentioned above, previously, developers used something called the “max-width” trick to enable this. 

If you were holding an image in a container, then it could easily overflow, particularly if the container was responsive. However, if you set the “max-width” to 100%, the image just resizes with its parent container. 

Media Queries

The idea of “media queries” referred to the CSS media queries, introduced in 2010 but not widely adopted until officially released as a W3 recommendation 2 years later. Media queries are essentially CSS rules triggered based on options like media type (print, screen, etc), and media features (height, width, etc). 

Though they were simpler at the time, these queries allowed developers to essentially implement a simple kind of breakpoint – the kind of tools used in responsive design today.  Breakpoints refer to when websites change their layout or style based on the browser window or device width.

Viewport Meta tags need to be used in most cases to ensure media queries work in the way today’s developers expect. 

The Rise of Mobile-First Design

Since Marcotte’s introduction of Responsive Web Design, developers have been working on new ways to implement the idea as effectively as possible. Most developers now split into two categories, based on whether they consider the needs of the desktop device user first, or the needs of the mobile device user. The trend is increasingly accelerating towards the latter. 

When designing a website from scratch in an age of mobile-first browsing, most developers believe that mobile-first is the best option. Mobile designs are often much simpler, and more minimalist, which matches a lot of the trends of current web design.

Taking the mobile first route means assessing the needs of the website from a mobile perspective first. You’d write your styles normally, using breakpoints once you start creating desktop and tablet layouts. Alternatively, if you took the desktop-first approach, you would need to constantly adapt it to smaller devices with your breakpoint choices.

Exploring the Future of Responsive Web Design

Responsive web design still isn’t perfect. There are countless sites out there that still fail to deliver the same incredible experience across all devices. What’s more, new challenges continue to emerge all the time, like figuring out how to design for new devices like AR headsets and smartwatches. 

However, it’s fair to say we’ve come a long way since the early days of web design. 

 

Featured image via Pexels.

Source

The post A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

The NonNullable type is a utility type in TypeScript that creates a new type, whilst removing all null or undefined elements. It lets us take existing types, and modify them so they are more suitable in certain situations. Let’s look at how it works.

Custom Types

This article covers custom types. To learn more about custom types, read my guide about it here.

Source de l’article sur DZONE

The underlying theme of this month’s collection of new tools and resources is development. Almost every tool here makes dev a little easier, quicker, or plain fun. There are a few great tutorials in the mix to help you get into the spirit of trying new things and techniques.

Here’s what is new for designers this month…

Cryptofonts

Cryptofonts is a huge open-source library of icons that represent cryptocurrencies. There are more than 1,500 CSS and SVG elements in the collection. Cryptofonts includes all scalable vector icons that you can customize by size, color, shadow, or practically anything else. They work with Sketch, Photoshop, Illustrator, Adobe XD, Figma, and Invision Studio, and there’s no JavaScript.

 

Reasonable Colors

Reasonable Colors is an open-source color system for building accessible and beautiful color palettes. Colors are built using a coded chart. Each color comes in six numbered shades. The difference between their shade numbers can infer the contrast between any two shades. The differences correspond to WCAG contrast ratios to help you create an accessible palette. This is a smart project and a valuable tool if you work on projects where color contrast and accessibility are essential (which is all of them).

 

Chalk.ist

Chalk.ist is a fun tool to make your code snippets look amazing. Add your code (there’s a vast language selector), pick some colors and backgrounds, and then download it as a shareable image. Your code has never looked so beautiful!

 

WeekToDo

WeekToDo is a free minimalist weekly planner. Improve productivity by defining and managing your week and life easily and intuitively. Plus, this tool is focused on privacy with data that is stored on your computer (in your web browser or the application). The only person who has access to it is you.

 

Bio.Link

Bio.Link is a tool that collects all your links – from social media to blog posts to any other kind of link you want to share. It’s free to use, includes 15 design themes, visitor stats, and is super fast.

 

Spacers

Spacers are a set of three-dimensional space characters that you can use in projects. Characters are in multiple poses and ultra high-def formats to play with.

11ty

11ty is a super simple, static website generator. Try it for small projects and read the documentation to see everything you can do with this tool.

Scrollex

Scrollex is a react library that lets you build beautiful scroll experiences using minimal code. You can create scroll animations in all kinds of combinations – vertical, horizontal, almost anything you want to try. The documentation is fun and easy to understand if you’re going to see how it works.

GetCam

GetCam is an app that lets you turn your smartphone into a webcam for your computer. It works with any iPhone and a Mac or Windows computer. It works with most video conference and streaming tools as well as browser-based apps.

Flatfile

Flatfile is a data onboarding platform that intuitively makes sense of the jumbled data customers import and transforms it into the format you rely on. You won’t have any more messy spreadsheets or have to build a custom tool.

Loaders

Loaders is a collection of free loaders and spinners for web projects. They are built with HTML, CSS, and SVG and are available for React and copypasta.

Lexical

Lexical is an extensible JavaScript web text-editor framework emphasizing reliability, accessibility, and performance. It’s made for developers, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.

Picture Perfect Images with the Modern img Element

This tutorial is a primer on why the img element is such a powerful tool in your development box. Images are so prominent that they are part of the most important content in over 70% of pages on both mobile and desktop, according to the largest contentful paint metric. This post takes you through how to better optimize and improve core web vitals simultaneously.

Building a Combined CSS-Aspect-Ratio-Grid

Building a Combined CSS-Aspect-Ratio-Grid provides two solutions for creating the title effect. You can define an aspect ratio for the row or use Flexbox with a little flex grow magic. Learn how to try it both ways.

QIndR

QIndR is a QR code generator made for events and appointments. The form is designed to capture your event information so you can quickly build and use a QR code for listings and even allow users to add it to their calendars! It’s super quick and easy to use.

On-Scroll Text Repetition Animation

On-Scroll Text Repetition Animation shows you how to create an on-scroll animation that shows repeated fragments of a big text element. This is a fun and easy lesson that you can use right away.

Eight Colors

Eight Colors won’t do anything for your productivity, but it is a fun game that you may not be able to stop playing. It is a block-shifting game with the goal to shift circular blocks to reach the target given.

Creative Vintage

Creative Vintage is a pair of typefaces including a thin script and vintage slab serif (with rough and smooth styles). The pair is designed to work together for various uses or can be used independently.

Hardbop

Hardbop is a vintage-style typeface with a lot of personality. It would work great for display, and the family includes seven full-style character sets.

Kocha

Kocha is a funky ligature-style typeface perfect for lighter design elements, including logos or packaging. It includes clean and rough versions.

Magnify

Magnify is a large font family with 16 styles and plenty of fun alternates. You can use it straight or with the more funky styles that create less traditional character forms.

Stacker

Stacker is a fun and futuristic style font with a triple outline style. Use it for display when you really want to make an impression.

Source

The post Exciting New Tools for Designers, May 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Are you a creative person looking for the perfect career path to take? If so, there are not many more creative professions than that of a web designer.

However, becoming a web designer can be challenging, especially if you do not know where to start. For example, do you need to attend college to become a web designer? And what kind of computer and software do you need to own to be successful as a web designer?

This guide aims to answer all these questions and show you the steps you need to follow to build a career in web design.

Web Designer: Main Skills and Responsibilities

Generally speaking, a web designer is a professional who creates, manages, and maintains content for the web. Nothing is left out from designing pages and visual elements via programming languages and creating user-friendly websites.

Web Designer (Hard and Soft) Skills:

  • UX, UI, and visual design knowledge (web fonts, colors, etc.)
  • Management of design software (e.g., Adobe Photoshop)
  • Coding knowledge (HTML, CSS, JavaScript, etc.)
  • Time management
  • Communication skills
  • Problem-solving and teamwork skills
  • Research skills

Web Designer Responsibilities:

  • Plan and create web pages
  • Design appealing layouts
  • Use codes to create user-friendly pages
  • Ability to meet deadlines
  • Listen and advise clients
  • Able to work as part of a team and effectively solve occurring problems
  • Analyze the client’s niche, explore new web design opportunities/ innovative digital marketing approaches

If you feel overwhelmed reading this table, don’t be! You do not have to master all of the above skills. No one expects you to either. Becoming a top-notch web designer takes some dedication, but ultimately it’s nothing more than a series of steps. Let’s dive deeper into them.

Becoming a Web Designer: 7 Essential Steps

1. Gaining the Knowledge Needed: Theory and Certifications

Let’s start with the most common question, “Do I need to go to college to become a web designer?” Research shows that more than 65% of web designers are self-taught (fully or partially). Of course, that does not mean you can jump into design from the start.

Instead, we recommend that you learn some essential web design elements and how to use them in your future projects. This includes UX (user experience), UI (user interface), protocols, and patterns. The same goes for technical knowledge like programming languages, frameworks, and design software.

2. Developing Certain Skills

So, there are numerous aspects you can explore regarding technical skills. To be specific, your first steps in web design include developing the following skills: 

  1. Theory and certifications: Learning the theory to understand how the web and the market work
  2. Web design tools: Finding the web design tools you need to start designing (.e.g Webflow, Sketch, Figma). This will allow you to learn how to prototype web design mock-ups.
  3. Graphic design tools: Becoming familiar with software like Photoshop, Illustrator, etc.
  4. Programming languages: Especially if you think of becoming a freelance web designer, you should at least learn how to use fundamental languages (HTML, JavaScript, CSS).
  5. SEO (Search Engine Optimization): Learning how to optimize your web pages to rank on search engines is crucial.  

3. Mastering Web Design Software 

What software do you need as a beginner to start creating web designs? There are numerous apps that will help you gradually enter the fascinating world of web design. 

When it comes to CMS platforms, WordPress is by far the most popular in the market. The good thing about WordPress is that it is very beginner-friendly and comes with thousands of pre-built themes and plugins that you can use when creating a website.

But the same is true for InVision Studio. Unlike WordPress, InVision Studio is specifically designed to help web designers prototype and design a website. Finally, when it comes to graphic design software, we recommend you start with Photoshop (for creating visual samples and prints) and Sketch (for UI designs). 

4. Learning How Much Computing Power you Need

Although online CMS platforms like WordPress do not require special hardware, that’s not true for web design and graphic design software. To be precise, both InVision Studio and Photoshop have quite demanding system requirements. 

Still, a mid-range desktop or an entry-level gaming laptop can easily handle such applications. You need a reliable CPU, 8 GB RAM, and a dedicated graphics card.

I find working with two screens perfect when it comes to prototyping. You do not need to spend thousands of dollars to buy a laptop or desktop for web design.

5. Practice, Practice, and Practice

As with any other profession, practice makes perfect in web design. Therefore, the good idea is to get involved with personal web design projects before you start seeking clients or applying for job offers. This way, you can gradually acquire the technical skills you need.

Also, by working on some personal projects first, you can build a professional portfolio.

6. Creating a Professional Portfolio

If you want to draw attention to your talent, you should have a comprehensive portfolio as a web designer. This way, potential customers to trust you by having a look at your work and previous experience.

When creating a portfolio, make sure to showcase all aspects of your work and make it user-friendly. In other words, think of your online portfolio representing your talent and treat it accordingly.

7. Choosing the Web Designer Type That Best Suits Your Needs and Preferences

Last but not least, before working as a web designer, you should know that there are three main types of web designers: Freelance web designers, Agency web designers, and In-house web designers.

If you prefer to be self-employed and believe that you have the required soft skills, freelancing is probably the best path.

On the other hand, working for an agency or a company is usually easier (especially for beginners) and will provide you with a stable income. But, in the end, it all depends on your needs and preferences.

Wrap Up

Being a web designer can be an exciting career. As long as you have the necessary dedication and willingness, nothing will stand in your way.

Learning different aspects of the profession and mastering specific software will only make you better. All you need to do is respond positively to (and ask for) incoming feedback and practice!

 

Featured image via Pexels.

Source

The post How To Take Your First Steps in Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

A breakdown of a simple app, from UI design to deployment, that shows off why coding is a magic tool for designers.

Figma, Adobe XD, Photoshop, Wacom Tablet, sketchbook… all tools for interfaces and web designers, yes? Take 2 minutes, and try to remember why you want to become a designer and why you enjoy designing stuff.

Chances are it’s because you like to create; you’re a creative person. Maybe you started with artistic experiences as a child, then turned that creative energy into problem-solving while continuing to express it visually: You became a designer, a creative problem solver.

Today, I’ll try to show you how coding is an underrated tool to express your creative problem-solving mindset by building a real SVG generator from scratch. So let’s get into it!

Step 1: Don’t get an idea; solve a problem

We didn’t go into deep business considerations here, but seeing problems you face and deciding to solve them yourself is a great way to start.

During client work, I needed some SVG waves for illustrations. So I looked for a wave generator: There were a ton of wavy colorful wave generators with parametric inputs but no simple, perfect sine waves generator. I decided to draw it on my math tool GeoGebra and then export it to SVG.

Okay, but not fast. And we like to get our jobs done quickly. But wait… Why don’t we create a perfect sine waves generator? Without equations & boring math software to open, just a curve and an export button. You got it, now let’s design it.

Quick tips: If you are looking for a problem, look for memes in your field. They always show a deep, painful, well-known problem.

Step 2: Design the solution simple as possible

Two main rules: First rule, think about who will use it; the second rule, predict what they expect from how it works. So who? Front-end developers. What are they waiting for? A curve that can be edited with direct feedback and an export button.

Wireframe design

High-Fi design

A quick tip: You can grab the Figma design of the app for more technical tips on the design.

Step 3: Build it for real

As a designer, stopping at step two is perfectly fine. But imagine if you could build what you design! You already know you can create everything you want.

You can see coding as a way to translate your UI that will surely end with a .com application that is usable by everyone. This is why “best languages” don’t matter; coding is just a tool to express your creativity and build stuff for others. And as a designer, a creative person, this might sound…interesting.

UI to functionnal app

UI to functional app

Every web app interface can be translated from UI design to code with HTML/CSS/JS. There is how we can see the role of each of those 3 “languages”:

HTML: I want a button.

CSS: I want my button to look rounded.

JS: I want something to happen when I click on my button.

To build our app, I’ll use Svelte. Svelte is a JavaScript compiler that allows us to use all those three “languages” in one place. So, let’s see how code can translate our UI to functional things.

HTML button code

“Hey web browser, I want a button named “exportButton” and everything in a function named “downloadSVGpath” to be carried out when someone clicks on the button :) Thanks”

CSS style button code

“Hey web browser, I want you to apply these style rules to my basic HTML button: I want a beautiful rounded corner at 16px, a mouse pointer when we hover it, I don’t want any borders, but I want a cool color gradient as a background color. Then, I want the font inside the button to have its color set to #fcfcfc and use the Inter typeface (bold, please). Like my Figma design, I also want to center stuff in the button and add padding. Oh, and add a subtle shadow :) Thanks.”

Drawing SVG curve function

“Hey, web browser, each time our slider moves, I want to run this function: I want you to draw a curve inside a frame that I have defined inside my HTML code. I also want my curve stroke to look rounded at each cap and have a color and width I’ve defined inside variables. You will take the sine function parameters from the stored values of the sliders. Finally, while your x variable hasn’t reached the total width in the x-axis of our frame, you will solve the y-axis point position of the sine equation and draw the curve :) Thanks.”

Quick tips: You can grab the source code files of the app to explore them.

Summary

  • Coding is just a tool that allows us to translate our very visual metaphors into something that everybody can use. How cool is that?!
  • Coding helps us to envision our design goals and forces us to see beyond the visual range: how is my button will be supposed to work? How does it look when hovering? How my popup modal can be designed for mobile devices?
  • Coding allows us to create the weird idea we designed “just for fun” instead of pushing the design case study into our portfolio under the “personal project” tag.
  • Coding shows us how much work is required to achieve what we designed. So we can better understand our design clients’ needs, challenges, and resource management.
  • Coding is flexible. You can replicate the Netflix website pixel perfect with pure HTML/CSS, the Vue Framework, or any other Web framework.

Source

The post Designers Should Code: Build an App From Scratch first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

DopeUI – Free Modern UI Design Templates

How to Create a PureCSS Tabs Navigation

If Design Principles are for Designs, then Design Values are for Designers

Contember – Open-source, Headless CMS Without Limits

Buckle Up! We’re Diving into the World of Travel Website Design

Rust from 0 to 80% for JavaScript Developers

Three Methods to Increase User Autonomy in UX Design

Scrollex – A React Library to Build Beautiful Scroll Experiences

3 Essential Design Trends, May 2022

No-Code Builder – Place to Find the Right No-Code Tool to Build your Idea

Creating Realistic Reflections with CSS

Source

The post Popular Design News of the Week: May 2, 2022 – May 8, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot