Select Page
March, 2024 Desktop View

March, 2024 Desktop View

Spring is officially here (in the northern hemisphere). A lot has been happening both in the organization and the world of web technologies. Readers of this blog know we are in the midst of helping many states with their SkillsUSA web design and development competitions. Winners at the state level are then eligible to compete at the national level in June (in Atlanta). We are glad to be helping these states.

For those who suspect, the featured image was created with AI (Adobe Firefly in this case). Readers of this blog will also recall that all links will open in a new browser tab.

Web Technology Updates

  • Accessibility trends – we found this overview of 7 accessibility trends to watch in 2024 an interesting read. Web accessibility testing will become more automated with greater reliance on AI (Artificial Intelligence). Personalized accessibility solutions and more integration of voice technology also top the list. We encourage you to review the article to learn more about these trends.
  • CSSChris Coyier created a bookmarkable guide to a list of recent enhancements to CSS. We like the overview of these along with notes about when you should care and what browsers support these capabilities now. Working examples (which allow you to also view the code) are highly useful and helpful. Emphasis is on container queries, the :has( ) pseudo selector, View transitions, anchor positioning, and much more. We encourage readers to review and reference his article.
  • Frontend TrendsDiego Petrecolla provided a solid overview of frontend trends for early 2024. This includes a nice overview of BFF (Backend for the Frontend) patterns, PWA (Progressive Web Apps), JavaScript and more.
  • Web Development Trends – We found this informative article useful as it combines an overview of where these technologies came from (HTML, CSS, JavaScript) along with where they are going (use of AI in web development, voice search optimization, Web Assembly, and cyber security measures). Definitely a lot to think about as we move into the second quarter of 2024.
  • Web Design TrendsChristopher Lara reviews 24 web design trends (since it is 2024, after all). From scrolling animations to claymorphism to dark mode to frosted glass effects to voice activated interface, there is a lot to unpack in this article.
  • Cybersecurity trends of 2024Vera Cooper (Splashtop) provides an overview of many cybersecurity trends which are emerging in 2024. AI and machine learning top her list. IoT is a close second. Phishing attacks, mobile security, and much more are discussed in her article as well.

These are some of the articles/ trends we are watching evolve in 2024. What additional trends do you see? Let us know in the comments. We always look forward to insights from our members.

February, 2024 Desktop View

February, 2024 Desktop View

February (and a leap year no less). One extra day. Seems like an appropriate time to post my monthly desktop view. For those who already suspect, the featured image was generated by AI (Adobe Firefly in this case).

This is what we are reading and thinking about these days. As always, we look forward to your comments and insights.

Here are some articles we found interesting.

  • CSS – Heydon Pickering posted a rather humorous (and insightful) article concerning utility-first CSS. Assuming readers are familiar with CSS, the article goes into great depth what seems to be happening with some frameworks. Not in a good way at all. But, a rather interesting read. Let us know what you think in the comments.
  • In another article concerning CSS, Stephanie Stimac reviews the CSS property “field sizing.” Although this feature is a trial (you need to set the Experimental Web Platform features flag in Chrome or Edge), it seems to make a lot of sense. Particularly if you are trying to fill out a form and want the input field size to adjust with the content.
  • Our colleague, Aaron Gustafson, posted an interesting article a couple months ago concerning sharing articles on social media without allowing them to be tracked. Lots of insightful information and useful examples. We really encourage you to review his article.
  • For those teaching semantic markup, we thought you might find this article concerning the UX of HTML most interesting. Often, it is how we present a topic, isn’t it?

Ok, a relatively short synopsis of what we found interesting this month. Admittedly, there is much more we could discuss (and will in coming months).

2024 competitions starting soon

Right now, we are focused on our state and national web design and development competitions. They start in early March in conjunction with SkillsUSA. As always, we focus on helping competitors better understand why it is important to understand the problems they are being asked to solve for a particular business. They then need to provide an accessible, semantic, responsive, and workable solution for the client. This is what the judges will then review.

January, 2024 Desktop View

January, 2024 Desktop View

Web Professionals Global hopes that 2024 is off to a great start for everyone reading this post. It is hard to believe January is almost concluded. WOW! That being said, it is time to catch up on various aspects of what we have been investigating recently. Although we don’t specifically address AI in this post, the featured image was generated with Adobe Firefly. Let us know what you are keen to learn more about.

Here are our areas of focus for January:

  • accessibility (always an important topic),
  • CSS,
  • HTML web components
  • JavaScript

Accessibility

We noted the UK government is making changes to the design system to meet WCAG 2.2. For those needing a bit of a refresher – Web Content Accessibility Guidelines 2.2 was published in October, 2023 by the W3C. Many components are affected by this change (ranging from back links and breadcrumbs to tags). There are also changes to patterns to ask users to supply information and patterns to help users do things.There are also page pattern changes. We encourage you to review the article to learn more. Yes, this is the UK, but we are expecting these enhancements will ripple worldwide relatively soon.

CSS

Stephanie Stimac provides a great introduction to CSS media query for scripting support. With the release of Chrome 120 (November, 2023), this support is now available. “Simply, this media query allows you to test whether scripting language are available and tailor page content and styles depending on support.” Progressive enhancement has come a long way since we first started thinking about such concepts.

HTML Web Components

Zach Leatherman provides great insights via his Attempted Taxonomy of Web Components article. “These components layer on interactivity and add behaviors in true progressive enhancement fashion. This is the bread and butter use case of web components.” Of course, he expands significantly in the article and even discusses JavaScript web components. We encourage readers to check this article out. It is well worth reading.

For those who are not that familiar with HTML web components, perhaps the Web Components  in Earnest article will help put things into better perspective.

JavaScript

During some recent internal discussions, I was reminded that we have not touched much on JavaScript and frameworks in a while. Of course, this discussion came up as part of our ongoing web design and development competitions. Hard to believe that we have been doing these competitions on the national stage for over 2 decades (and almost 2.5 decades in Illinois). Which got me to thinking – rather than discuss what is happening with ES and JavaScript, perhaps we should ask our readers for their opinions about the current state of JavaScript. Therefore, what are your thoughts about Vite? For readers unfamiliar, here is the why Vite development guide. How are you using this in your projects today? We look forward to your comments. Perhaps we will focus on additional projects in the coming months. A lot depends on the number of comments we receive *wink wink – now is the time to comment.*

Yes, there are many other articles we could have posted. However, we thought this mix would be a good introduction to what is happening with web technologies as we begin 2024. As always, we appreciate and look forward to your comments.

 

December, 2023 Desktop view

December, 2023 Desktop view

As 2023 draws to a close, we thought it would be helpful to share some of the articles we have been reading. We have tried to focus on a handful of articles (covering the categories below). As we have noted on previous articles, all links will open in a new browser tab/ window.

Artificial Intelligence

As readers are well aware, the pace of change in AI is hard to fathom. This article summarizes what we should be looking for in late 2023 and early 2024. Perhaps we will look back at this article in mid-2024 and see how the predictions fared.

As you may suspect, the “featured image” accompanying this post was generated by Adobe Firefly.

Accessibility

Web Content Accessibility Guidelines (WCAG) 2.2 were released on October 5. There are many aspects to consider. We found Craig Abbott’s analysis most helpful (this is definitely worth a read).

CSS

If you are even a little curious where CSS might be heading, we encourage you to review Eric Meyer’s article concerning Nuclear Anchored Sidenotes. Of course, you will need a fairly recent version of the Chrome browser with the “experimental web features” option enabled if you want to try out his examples.

JavaScript

JavaScript continues to evolve as well. Here is a good article concerning new features for 2023 and expectations for 2024. Some of the main features discussed including the ability to change an array by copy without mutating the original array. One can also find within an array starting at the end and working backwards.

WordPress

WordCamp US concluded several months ago. However, these presentations provide an overview of many insights provided at this venue. Of course, the annual keynote address by Matt Mullenweg (State of the Word) is scheduled for December 11 (from Spain). We are definitely curious what will be covered in that keynote.

Feedback please!

It has been a few months since we have posted a “desktop view” article. Do you enjoy reading these articles? What other topics would you like to see us cover (to learn more about)? Please let us know in the comments.

May-June, 2023 Desktop View

May-June, 2023 Desktop View

Hard to believe we are almost at the middle of 2023. Time flies. As we prepare for our 20th national web design and development competition in Atlanta (beginning June 20), we thought it might be useful to share some of the articles we have been reading.

AI and images

Before we cover those articles, we feel it is important to mention our featured image. This was generated using Adobe FireFly. We used the following text to have the image generated. Note that we were rather specific in what we asked for (and the technology complied).

Looking at a desktop holding a phone, tablet and laptop along with a notebook with a pen. The desktop has one succulent plant. Sunlight is coming through a window to the left of the desktop.

If you expand the image, you will note that there is a tag assigned in the lower left corner indicating this image was generated using AI. We never cease to be amazed at how quickly one can create images (and how detailed they are).

We recently became members of the Content Authenticity Initiative. As we have mentioned in earlier weblog posts, the purpose is “to provide media transparency to allow for better evaluation of content.” We encourage readers to check out this initiative (and consider becoming members). In our view, as AI generated images become more prevalent, it is important to inform everyone that the image has been computer generated. We view this in a vein similar to copyrights. If one uses something that has not been created by the author, it is important to inform (and respect) where the images come from. That is why we commit to not only providing the source, but the text used to generate these images.

Accessibility

For those who missed it, May 19 marked Global Accessibility Awareness Day. The GAAD Foundation was launched in 2021 to mark the 10th anniversary. The focus is to make accessibility a core requirement. We encourage you to review the site (and focus on accessibility every day, not just May 19th).

CSS

We recently encountered a nice review of what’s new in CSS and UI. The article outlines 20 recent developments.These include responsive design improvements (such as container queries and style queries). The :has( ) selector lets one check if a parent element has specific children. There are many other enhancements which professionals can take advantage of (either now or very soon). We encourage readers to review the article to learn more about changes happening this year.

Also, we recently learned that scoped CSS is back. “Scoped styles allow you to contain a set of styles within a single component on the page.” We encourage readers to review the capabilities discussed in this article. Some nice examples are also provided.

We also came across this article (written in January) discussing new CSS relative units. Did you know there are roughly 50 CSS length units?

JavaScript

We recently encountered this nice overview of new JavaScript features coming in ECMAScript 2023. Many of these changes may have significant uses in your code. For example, change array by copy and array find from last. In addition to these smaller proposals, there are 4 larger ones. These include iterator helpers, temporal, decorators, and making resource management obvious.

National Web Competition

This year marks our 20th year of providing a national web design and development competition with SkillsUSA (yes, we started as a demonstration competition in 2004) and we have been running this ever since (even during the pandemic). We could not do this without the help of many people. We really appreciate their help and are posting additional articles. We managed to provide assistance to a number of states this year. We hope to see the winners of those state competitions at our national competition in June.

Feedback please!

That is what we found interesting this month. As always, we are keen to learn what you found interesting (and what you would like to learn more about). Please let us know in the comments.

March, 2023 Desktop View

March, 2023 Desktop View

March has been a most interesting month in terms of new advancements in web design and development. Here are just a few articles we found interesting this month. Perhaps a bit of a directed stream of our thoughts supported by articles. Admittedly, some were published prior to March and we just encountered them. We encourage you to review these articles and follow along with the stream as we focus on:

  • AI (and accessibility) – yes, they go together in many ways,
  • CSS,
  • JavaScript, and
  • Website sustainability.

AI (and accessibility)

First, let’s examine a recent post by Brad Frost concerning “design systems in the time of ai.” As mentioned at the end of the article “…AI makes it crystal-clear we need to be focusing on why we create things vs what/how we create.” In a nutshell, AI can be used to improve efficiency in what is created. We can be leveraging the power of AI to reduce the mundane tasks and focus on what is important.

So, what does AI have to do with accessibility? It can help tremendously. Last year, Accessibility.com published a great overview of “How Artificial Intelligence is Improving Accessibility.” This is a rapidly evolving landscape, and we can think in terms of AI-supported voice assistants helping those with visual impairments, AI driven transcribing can help with those experiencing hearing impairment. Likewise AI tools can help with speech impairments (think in terms of Parkinson’s or brain injuries)as well as mobility impairments. We encourage you to read the linked article to learn more.

Accessibility

Focusing solely on accessibility, we found the Guide to Accessible Form Validation by Sandrina Pereira to be most informative. She correctly asserts that when we build form validations from scratch we often overlook accessibility. Sandrina focuses on both usability and accessibility. We found this article to be a solid introduction and encourage aspiring web professionals to develop such an approach in all their work.

We also encountered this solid article dealing with color contrast. Yes, this is something everyone finds very annoying. We liked the subtitle – “Web Accessibility for Text & UI Design.” Good thesis – always make your UI components easy to identify.

CSS

Getting started with style queries by Una Kravets is a solid read also. The ability to query a parent object’s inline size along with container query unit values has achieved stable support in modern browser engines. Una covers the fundamentals of working with these and provides useful examples (including code snippets). Of course, this technology continues to expand and you should be come familiar with these approaches whether you are a practicing web professional or an aspiring one.

JavaScript

Sandworm audit is a command line tool to identify vulnerabilities, malicious scripts, license, and metadata issues. It is free and open source and works with any JavaScript package manager. Have you tried it out? What are your thoughts?

For those who like a bit of spice with their JavaScript, we encountered Jared White’s “Great gaslighting of the JavaScript Era” article. This article represents a cogent view of many of the internal discussions we have been holding for several years. The web is built on standards and protocols. Your site is based on HTML, but can be served from any operating system on any hardware any place on our planet. You do not need a JavaScript framework to build a simple website. We seem to have forgotten that. Yes, I have personally seen sites relying on large JS libraries to display what could be done in a few lines of HTML (and stuled with a bit of CSS). Good article (and we agree with you Jared). This article is also a great segue to the issue of website sustainability (see below).

Website Sustainability

Alexander Dawson published an interesting article on the carbon impact of web standards in January, 2023 (yes, we just encountered this one and it is worth reading). Given that the Internet is a major source of carbon pollution, it is important to think in terms of sustainable web design. Yes, Greenpeace recently reported that if the Internet were a country, it would be in the top 10 carbon emitters. The BBC published an overview of the extent of the problem a few years ago. Yes, the WWW is highly dependent on electricity (and the source of much of that electricity is not carbon neutral). Alexander focused on HTML and CSS and how much energy was required to render a basic boilerplate. He relied on different browsers, different hosting providers, different equipment and different locations (among other variables).

His test suite consisted of nearly 300 HTML elements and attributes, over 500 CSS rule, selector, and property tests, and over 50 media and other specification tests. He noted that embedding interactive content caused the use of a significant amount of CPU, GPU, RAM, and data usage. Non-standard code triggered rendering issues as well. with respect to CSS, animation (specifically keyframe animation) and the use of custom fonts caused a dramatic impact. For media formats, SVG is the best. We thought his conclusion (below) summarized that major changes are needed.

Existing evidence shows that websites are getting more bloated [54], sites remain largely inaccessible [55], and with JavaScript taking higher importance than basic semantics in tooling practices, the backbone of the web (HTML & CSS) have become clogged with un-performant code. The existing web needs a firm shake-up if it is to meet it’s commitments to become sustainable (and user-friendly).

Your thoughts?

Yes, that was a lot to examine this month. We are keen to learn what you liked and what areas you would like us to examine in greater detail. We look forward to your comments.