by Mark | May 31, 2023 | AI and Machine Learning, CSS3, JavaScript, Web Accessibility
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.
by Mark | May 24, 2023 | AI and Machine Learning, Content Strategy
As readers know, we live in the age of significant disinformation. From political campaigns in various nations to recent untrue reports of an explosion at the Pentagon, such misinformation is meant to sow distrust, confusion, and other malicious intents. Given the rise of artificial intelligence (large language models) and the ease of creating images, video, audio and more, we at Web Professionals Global have joined the Content Authenticity Initiative. [Like all links, this will open in a new browser tab.] You might have to scroll a bit as there are now over 1,000 members of this initiative (organizations and citizens).
What is CAI?
Essentially, CAI (Content Authenticity Initiative) is a community of tech companies, non-governmental organizations (like Web Professionals Global), academics and others working to “promote adoption of an open industry standard for content authenticity and provenance.” What is the source of the image, video, audio in question? How was it created? If something has been tampered with, this is tracked and evident when examining the meta data. If you are not a member, we encourage you to join (either as an individual or a company). We are all about community (it is the first item in our tag line). We also believe strongly in copy rights as well as origin of media. CAI easily fits into our world view.
Not only will this help disprove misleading information, these tools can also help verify atrocities being committed. There are even apps one can include on a mobile phone which can be used to prove the provenance of any image taken by that device (and any subsequent manipulation).
An example (how to get started)
If you are using tools like Photoshop 2023 or Lightroom 2023, new capabilities exist to help with content. For our purposes, let’s use Photoshop. First, one needs to enable this beta capability. From the main menu, select Window > Content Credentials (Beta).
You then enable content credentials and link to your social media accounts. In this case, I have linked both our Twitter feed and Instagram feed. This provides and identifies references for individuals viewing your work.
One can also choose to publish your content credentials to the cloud. The alternative is to attach them to your files (which would increase the file size of each file). When you refresh the Content Credentials panel, one would see the linked accounts in Photoshop.
When you work with images, you can then preserve the content credentials as part of your file saving/exporting process. In this case, I removed the background from one of my orchid photos (generated by stacking a number of images together). Before exporting, these are some of the data one can include.
Ok, content credentials are now in the meta data. Now what?
Inspecting images
Perhaps one encounters the stacked image of an orchid online. We all know it is not possible to take a macro photo of a flower with such detail unless there has been some manipulation. One can use a tool like Verify (at the Content Authenticity Initiative site) to learn more about the image. Note that the image is being examined on your local computer (and is not being uploaded during this checking process). This is what I see when I examine the orchid image.
Note that there is recognition that there have been prior edits to this image (before the CAI was activated). However, one can also see the additional information. In addition to the inspection tab, there is an overview (for those who like to see the origins).
Of course, that was an overview of my efforts working with actual images. What about AI-generated images?
AI and C2PA
Tools (like Adobe Firefly) utilize open-source tools (C2PA in this case). If you follow the link to C2PA, there is an introduction video. Without going into all the weeds, here is what one sees when testing the content authenticity of a Firefly-generated image. Note, there is no visual overview as this was just machine-generated. One can clearly see the origin of the image.
Perhaps the CAI will help us better deal with the wave of misinformation being generated. Time will tell. In the interim, we encourage you to try out these open-source tools. As always, we are curious what you think. Let us know in the comments.
by Mark | May 8, 2023 | AI and Machine Learning, Industry News, JavaScript
April has been a very busy month at Web Professionals Global. In addition to running the SkillsUSA national web design and development competition, we have been helping more and more states with their statewide web design and development competitions. This year we connected with a significant number. We provided the contest assets (including a work order), a coding environment, judging rubric, and associated videos to help both competitors use the online environment and judges review the work of competitors. This means our monthly update on what is happening in the world of the web is running a bit late.
Here are some of the articles we found interesting. We hope you enjoy learning more about what is happening. As always, we are interested in learning what you are most keen to learn about. Please add a comment and let us know. Here are some categories for the articles we found interesting. As mentioned in previous posts, all links will open in a new browser window/ tab.
- AI and current uses
- Browsers
- JavaScript
AI and current uses
You will note there is a featured image associated with this weblog post. In the past, this was manually generated (using tools such as Adobe Express or similar). The image this month was generate from a test entry describing to Adobe Firefly what was desired. In this example, I entered text asking for a photo of a desktop with an open laptop, an open notebook, pens and pencils on the desk and blooming orchids. The result is what you see. It was generated in under 10 seconds. Yes, AI saves time.
We have also been using AI to generate the client assets for our web competitions. Logo creation, text content, and more are all generated using AI (which saves us considerable time).
As an organization, we support the recently formed Content Authenticity Intiative. We encourage readers to follow the link to learn more about this important initiative.
Browsers
It appears Google is considering updating the venerable padlock depicting SSL sites.They are considering a variant of the tune icon. Read more about it on the Chromium blog. They present a solid rationale for making this change. For example, only 11% of those surveyed really understood what the padlock meant. As they mention, even the FBI mentions the lock icon is no indication of website safety. We are curious as to your thoughts about this change. It appears this will be coming to a Chrome browser near you one of these releases. Let us know your thoughts in the comments.
Speaking of browsers, in case you missed it, April 30 marked the 30th anniversary of the licensing of the web for general use and at no cost. 30 years. WOW. Yes, that was a pun.
One more article you may find of interest – the calm web: a solution to our scary and divisive online world. Karolina Szczur provides many thoughtful insights. She also offers practical ways one can get started. For example, stripping away unnecessary code and removing low quality content.
JavaScript
Although this article is over a year old, it might be worth reviewing (and pointing this out to aspiring web professionals – perhaps those you teach). A web components primer seems a good introduction to the topic. For those of you teaching web technologies – do you discuss web components? Why or why not? What are your thoughts about this article?
Your turn…
That is a quick overview of some articles we found intriguing. We hope you enjoy them as well. What did you find helpful? What would you like to learn more about? Please tell us in the comments.
by Mark | Mar 27, 2023 | AI and Machine Learning, CSS3, Web Accessibility, Web Professional Trends
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.
