by Mark | Mar 31, 2024 | AI and Machine Learning, CSS3, HTML5, JavaScript, State of the Web, Web Accessibility, Web Security, WWW 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.
- CSS – Chris 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 Trends – Diego 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 Trends – Christopher 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 2024 – Vera 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.
by Mark | Jan 31, 2023 | CSS3, HTML5, JavaScript, Web Security
Hard to believe January is almost behind us. Yes, time flies. As Executive Director, I am now in my 31st year of working with web technologies (yep, started in 1992). Obviously a lot has changed over three decades. And things continue to change at a rapid pace. Since it has been 3 decades, I found it entertaining to review the site focusing on web browser engines from 1990 until today. Nice bit of history for those who want a refresher (and for educators). [Note: these links will all open in a new browser tab.]
OK, now that the past is behind us, let’s see what is happening with the following web technologies (a few articles which caught my attention in these areas).
- CSS
- HTML
- JavaScript
- Security
CSS
If you are using CSS animations, you might consider AnimatiSS (a collection of CSS animations for your web project).
I also enjoyed reading more about the :has() pseudo-class including real world examples.
When working with media queries, I like the MediaQuery.style site. It has many of the more commonly employed ones readily available.
Although this is still a work in progress, the CSS fingerprint site demonstrates how one can use CSS (and only CSS) to track visitors. It is not really scalable as it presently requires over 1 MB of CSS downloads. However, it is an interesting concept. It does avoid technologies such as NoScript.
HTML
Yep, there are still changes happening to markup and tags. After much discussion, there has been some consensus on how to best use the dialog element. Actually, how it should handle its initial focus. You can read more at the post titled “Use the dialog element (reasonably)“. Note that this may not be implemented in all browsers, but it should be in subsequent releases of said browsers.
JavaScript
For those teaching JavaScript, you might find the beginners guide to Chrome tracing useful. Sometimes a DevTools trace is not enough.
I also came across this interesting article explaining why using document.write() is not always a good idea. It is fairly in depth and explains why the placement of suck code matter as well.
Security
Microsoft recently published their 2022 Digital Defense Report. You can follow the link to read much more. Here are some of the highlights (scary though they are).
- 921 password attacks happen every second (up 74% from last year).
- they blocked 37 billion email threats last year.
- Attackers are leveraging vulnerabilities in IoT device firmware to gain access to corporate networks.
- The average cost of a data breach reached $4.35 million.
- People are now the primary attack vector. Identity driven attacks account for 61% of breaches. Phishing remains the most common form of cyber attack.
Your thoughts?
These are some of the articles I have encountered and found interesting over the past month. What have you found in addition? We look forward to your comments and insights.
by Mark | Nov 30, 2022 | CSS3, ECommerce, HTML5, Web Accessibility, Web Security
Here at Web Professionals Global, we hope everyone has been experiencing a successful November. It is time again to focus on a few items which caught our attention during the month. We never cease to be impressed at how quickly web technologies change. Let’s briefly focus on these areas for now:
- CSS,
- Accessibility, and
- Security
CSS
Browsers are beginning to support media query range syntax. Sure, it is not supported in all browsers on all devices yet, but knowing this is coming is huge. It should save significant time coding CSS. Instead of having to specify specific media sizes, we may soon be able to employ mathematical symbols such as >, <, <=, and so forth. Perhaps we can avoid min-width and similar bits as this is supported more and more. Readers are encouraged to follow the above link (it will open in a new tab) to learn more. Please let us know what you think about the possibilities of this via comments.
Accessibility
Adrian Roselli posted an article earlier this year on buttons, enter and space. From a user experience perspective, this is a great refresher on what happens when you use native keyboard interactions. Adrian even provides a working example (with counters). His last word in the article is something we advocate all the time – test. What are your thoughts about keyboard interactions?
Let’s not overlook e-commerce accessibility either. We came across this article specifying UI elements using roles. As many of our readers know, specifying the purpose of UI elements is critical when visitors to a site rely on assistive technologies. We thought this article provided a great number of insights and examples. We look forward to your thoughts on this topic as well.
Security
As we approach the end of the year (and many of us have to provide tech support to family and friends as they receive new devices), it might be wise to bookmark the OUCH newsletter site. Disclosure, Mark (your executive director) is one of the monthly reviewers of these articles before they go live. Each month, a security professional provides a timely overview of one aspect on security. Articles are kept short and are suitable for sharing with those not as savvy in various aspects of technology.
That is all for our November desktop view. We know your time is valuable and appreciate you reading this post. If you would like us to include additional articles or focus on additional aspects, please let us know via your comments below. Until next time…
Best always,
Mark DuBois, Executive Director
Web Professionals Global (aka World Organization of Webmasters)
by Harshala | Jan 19, 2018 | CSS3, HTML5
What’s been happening with HTML and CSS?
Just like having the ability to speak a foreign language, this sort of skill is helpful in almost all professions. HTML and CSS are the foundational languages of the web. As web professionals we should know what updates are taking place in HTML and CSS world. I came across few articles about what’s new about both CSS grid and HTML.
CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. (more…)
by Mark | Jun 7, 2017 | HTML5, Sponsored Content, User Experience
This article was written by Abid Ullah. He is Director of Search at Marketing Wind. He is an experienced SEO Outreach expert and advertisement specialist. His interests lie in Digital Marketing Management. He is an internet marketing enthusiast and his specialty is in search engine optimization outreach and content marketing.
At Miami SEO (part of Marketing Wind), we work with web professionals regularly Based on our analyses, we have created a list of 5 indispensable skills web professionals must know in 2017. If you are an aspiring web-professional, then look below and invest in learning these skills in 2017.
Create a Great User Experience
As a web professional, you already know that user experience is essential. This means when creating a site, you need to build an excellent interface and great user experience. Avoid user experience errors. Review your efforts with those who will be using the site and confirm the site is not only usable, but is easy to navigate and understand. Have you ever visited the Amazon online store? It is among the best online retailer stores on the Internet. They have used a variety of features and user interface elements that make purchasing and browsing seamless. As it is an e-commerce store, they have made sure the purchasing and delivery system is spot on. Just with an input of delivery information, you can confirm your order and get done with the process that easily. Try to offer your consumers a similar fluid experience so that they stay on your website for a longer time.
Security
This is a must in 2017, many companies are processing payments from their sites. You must protect the site from hacking, SQL injection, and user requests that could be considered as spam. If you are uncertain whether your site is secure, hire a qualified professional to review your site and identify/ resolve any vulnerabilities.
HTML
It has always been important to learn Hyper Text Markup Language (HTML). In 2017 web professionals can also use editors that do not require detailed HTML knowledge. Nevertheless, if you want to be a professional web designer and have professional web design skills for long-term and an in-depth understanding of your work then you must learn HTML and understand semantic markup. HTML is source to streamline your lifestyle and business line. Not learning how to use HTML will leave you behind in the web designing and development process. You’ll miss out on easy-to-use visual HTML building tools, latest updates and on ways to enhance your blogging techniques. HTML helps a lot when it comes to formatting your blogs, pasting content from word to CMS, while making a guest post and during content formatting. As the content is worldwide known as the king of web and marketing, who wouldn’t want to learn a coding program that helps in putting the content into limelight?
SEO
Search Engine Optimization is not just about content. It depends greatly on the functionality of a website. As a web designer you should know Search Engine Optimization so that you can build a SEO friendly website which has the chances of getting ranked high in search engines. If you are a beginner, you can search about SEO. The web provides a series of SEO learning tutorials and videos. The official Google SEO tutorial is a good place to start. Moreover, the marketing team of the company can carry out conferences/ webinars with the leading SEO experts who can guide through how to do search engine optimization and how to make your website fully optimized for Google and other search engines. Another way to learn more about SEO is to experiment and see for yourself the results that different practices produce.
CSS
Basic CSS knowledge is essential; it is important to make sure that you know how to create CSS files from scratch. The CSS (cascading style sheets) is actually a styling sheet language. Through this you can give an effective style to your website along with the use of HTML. It makes the web page more appealing and easily manageable. Thus, learning CSS is a sure shot success key and web professionals must spend their time on it.Learn the new features of CSS-3 as well.
Web Server
It is preferable to have the knowledge of the web server you’re launching your website at, to name your website properly and to understand secure FTP. This knowledge about the web server helps you find out how well it works with the operating systems, how capable it is to handle the server-side programming and about its security characteristics. Moreover, the knowledge gives you an insight of the search engine and site building tools that it comes with.
Web development is a broad category which also includes web-design and web-optimization, the above skills are taken from all aspects, but in some cases, you might only be focusing on web-designing which will require different skills than web-development. So, pick your category and decide whether you want to work on one aspect or all aspects and start learning.
by Mark | Mar 27, 2017 | HTML5
Our colleague, Colin Cieloha, American author and content marketer at Skilled.co recommended the HTML5 canvas cheatsheet developed by his company (and embedded below).
Colin writes about everything that will draw his attention with a focus on the mobile and e-commerce space. When he is not writing he is spending his time traveling the globe and snowboarding. You can follow him on his Twitter at @ColinCieloha or on Linkedin. We asked Colin a number of questions about this resource. Details are below.
Become a Canvas Master with this HTML5 Cheat Sheet by Skilled.co
Skilled.co has released a new cheat sheet that enables new and experienced web developers alike to create original illustrations and animations. With the use of HTML5 advanced technology, coding enthusiasts of all experience levels are able to read and use this cheat sheet to create impressive designs. Canvas can also respond to all the usual JavaScript events, like clicking and keyboard commands and button clicks, so it’s even easier to use. Here we will explore the benefits of using the Canvas cheat sheet and how Canvas holds up against traditional Camel Case. It’s sure to save you time, effort, and headache.
Why is it important for web professionals to know/ use this cheat sheet?
It saves time! Instead of having to remember all the coding or search for individual codes, an HTML cheat sheet provides all of the most used codes in one easy place. There’s a lot to be said for having all of that extra effort minimized, the common codes are just a click of your bookmarks away. This is convenient for those freelance designers that are in a time crunch as this allows them to complete their work faster and reach deadlines.
Why should they be focused on canvas now?
Canvas technology is amazing because it’s super easy to use. For example, Canvas can draw colorful text to help your message pop on the screen – and you can even animate it! HTML <canvas> objects can move, too, whether it’s just a few bouncing balls or an intricate animation that tells a story. For designers interested in gaming software, the <canvas> element is a brilliant choice for building characters, worlds, and then setting it all into motion.
Canvas isn’t magic (close, but not magic). You’ll still need a basic understanding of HTML and JavaScript to make these codes work for you the way you want, but the <canvas> element is simple and easy to use. The HTML <canvas> element’s purpose is to create graphics, according to lines of script, but it’s only a container. The <canvas> element draws paths, boxes, circles, text, and helps you to create images. It also provides the user with graphs and charts to order their graphic data designs. To draw graphics, Canvas uses a JavaScript context object, which makes it easy and fast to create graphics in your design.
The <canvas> element runs into some trouble with older browsers, however, and may not be supported. Canvas is, however, supported in all recent versions of all major browsers, so as long as your browser is updated, Canvas should work just fine. Canvas’s default size is three hundred pixels by one hundred and fifty pixels, width and height respectively, but is customizable. You can adjust the size of the canvas by using the HTML height and width property in the program.
With Canvas, function names are short and easy to recognize, unlike functions written in CamelCase. Identifiers in CamelCase often require lowercase where it would be more convenient to use all caps. For example, acronyms. It’s much easier to identify a function, if acronyms like HTML or SQL are written in full capitalization, but CamelCase sometimes negates this convenience.
This causes a serious headache for designers when two acronyms need to be side by side in a line of script: “parse DBM XML” would become “parseDBMXML” or when the function starts with an acronym, like “SQL server” (which the designer would be forced to convert to “sQLServer”). Even if a programmer considers acronyms lower case words and writes “oldHtmlFile”, “parseDbmXml” or “sqlServer”, it causes a mess because it makes it difficult to discern if it an acronym or not. Best case scenario, the designer wastes time. The worst case scenario, they make a mistake and now must comb through complicated lines of script to amend the problem.
Conclusion
Hopefully this sheds light on the massive benefits of the Canvas cheat sheet. Using this cheat sheet will save you time and help you to become a more efficient programmer, web designer, or even help you gain more solid experience as a beginner in this field. I encourage you to go check out Skilled.co‘s Canvas cheat sheet below and begin to create using their helpful, easy to read codes. Have fun creating and I hope this saves you more time!
