Select Page

November, 2022, Desktop View

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)

October, 2022 Desktop View

It has been some time since I posted some thoughts on the current state of web technologies. A lot has happened during recent months. Let’s focus on several key areas:

  • web accessibility,
  • security,
  • JavaScript,
  • and CSS.

More areas may be the focus of subsequent articles. Stay tuned. As always, we at Web Professionals Global are interested in what you think. Let us know in the comments or contact us directly.

Web Accessibility

WCAG 3 has been released as a draft (published in December, 2021). Latest editors draft updated as of July, 2022. The approach is iterative with content ranging from temporary (just a placeholder for future content) to mature (ready for publication). This version is somewhat evolutionary in that it will be easy to understand and provide guidance. A key differentiator is that this version has a broader scope (beyond web content). I encourage you to view the above links and consider helping develop the next version of Web Content Accessibility Guidelines.

Of course, there is also a new ARIA authoring practices guide website. Lots of patterns and resources. Check it out.

Security

This is a bit beyond web security, but definitely something readers should be aware of – ransomware attacks which target home PCs (delivered by fake Windows 10 or anti-virus updates). This is called Magniber (details can also be found at this ZDNet article). Essentially, a visitor is directed to a website (although it looks legitimate, it is controlled by malicious individuals). That site informs the visitor their computer operating system or software is out of date and they need to update it as soon as possible. The visitor is tricked into downloading a malicious JavaScript file which contains the malware payload. Once installed (via as technique called DotNetToJscript) the individual’s hard drive is encrypted. They are directed to a link to negotiate payment to recover their contents. More details can be found in the above article.

As web professionals, we should remind ourselves (and our clients of some fundamental tactics which help mitigate these sorts of attacks.

At a minimum, never act on anything that purports to have an extreme sense of urgency. That is what malicious individuals want. Act before you have a chance to think about the implications. It is also good practice to never click on links in emails or text messages. Instead, open a browser and type the site directly (or use a reliable search engine). Lastly, only install updates from trusted sources (and use the traditional channels where those updates are distributed).

JavaScript

The creator of JSON made an interesting comment about JavaScript a couple months ago. Douglas Crockford stated that “The best thing we can do today to JavaScript is to retire it.” Yes, JavaScript is the world’s most popular programming language (used by over 65% of developers according to a StackOverflow survey). Yes, it is bloated (and is becoming more so over time. However, it powers the majority of web sites. Of course, JavaScript is supported in every browser so making a change to something else would be a monumental undertaking. We are curious what your thoughts are about JavaScript. Is Douglas Crockford correct? Please discuss in the comments below.

CSS

Remember the days of aural style sheets (yes, they were a thing). Of course, no browsers supported them. However, a recent article (October, 2022) has raised some hope for me again. Why we need CSS speech is the article. What are your thoughts about CSS speech? Again, reach out to us in the comments.

Of course, there are many enhancements in the works for CSS. These include items such as:

  • The ability to nest selectors is presently in the works. This is possible a good way to organize your CSS code. Of course, no browsers yet support this.
  • Cascade layers (which give authors the ability to group their CSS and affect how the cascade applies). The linked article should give you a much better understanding. This is like nesting selectors, but much more. Is this feature ready for prime time? No, but you might want to start learning about them.
  • CSS subgrid allows for styling on a page to inherit the parent’s grid styling. MDN has a nice overview with examples. That is the reference linked at the start of this bullet.

Now you know a little more about what is happening with respect to web accessibility, security, JavaScript, and CSS. Please let us know if you find this information helpful and provide more thoughts in the comments below.

Best always,
Mark DuBois, Executive Director
Web Professionals Global (a.k.a. World Organization of Webmasters)

 

 

What’s happening with CSS

What’s happening with CSS

Why shouldn’t we be fans of CSS? It’ constantly revolutionizes itself while trying to strive for its renowned form of simplicity. The end result is the creation of browser functionality that is arguably above and beyond what can be created with just JavaScript. Let’s examine some recent CSS enhancements and insights in the way i can be used. Some examples include blurred borders, setting a dark/ light mode switch (with a little help from JavaScript) and more.

CSS Features That Are Changing Web Design

The design landscape has changed a lot in recent years. We’re equipped with new and powerful tools — CSS custom properties, CSS shapes and CSS writing-mode, blurred borders in CSS, and sophisticated partitioning with CSS Grid – to name a few.

What is sophisticated partitioning with CSS Grid?

In the article written by Rob Weychert, he experimented with CSS grid to create a Tinnitus Tracker. He designed the grid pattern and then he worked on the partitioning of the grid.

These grid patterns mainly have the following 3 objectives:

  • Maintain a (somewhat) consistent whitespace.
  • Give the appearance of randomness.
  • Don’t forget about prime numbers.

Also adding CSS Grid, partitioning and typography as a cherry on top altogether gives a different look to the website and reaches to a different level of advancement. We encourage readers to follow the above link to learn more about how this was accomplished.

Blurred Borders in CSS

If we want to target an element and just visually blur the border of it. There is no simple, built-in feature we can apply. But we can get it done with a little CSS trickery.

After giving a code this effect, one can enhance it with rounded corners, extend support so it works cross-browser, what the future will bring in this department and what other interesting results can get starting from the same idea!

This article has step by step code details to show how we can add the blurred effect to the CSS.

New CSS features

In the article written by Daniel Crisp is about exploring the most exciting new properties coming to CSS. These include:

  • Fixing layout problems
  • Exploring feature queries
  • Use ‘not’ for a cleaner outcome

We encourage readers to follow the above link to learn more. We also came across these resources which may help you better understand how CSS is being used currently.

Additional Resources:

For those who prefer videos:

Every day things change in web design and development. We hope you are excited about these new approaches. CSS has certainly exceeded expectations of what was once considered achievable.

We hope you found these resources and overview useful. We always look forward to your comments and feedback (whether you are a member or not).

March Update – CSS Animation

March Update – CSS Animation

Animation – A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. Animation on computers is one of the chief ingredients of multimedia presentations. There are many software applications that enable you to create animations that you can display on a computer monitor. In this article we provide you references for CSS3 Animation without using jQuery or JavaScript. We hope you find these resources and overview useful.

What is CSS Animation?

CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS animations are made up of two basic building blocks.

  1. Keyframes – define the stages and styles of the animation.
  2. Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.

The Article CSS Animation for Beginners covers following important elements in creating CSS Animation with code.

(more…)

February Updates – CSS Grid Layout

February Updates – CSS Grid Layout

In January we reviewed recent CSS updates. As a web professional you must be aware of constant changes taking place in our world. CSS Grid Layout is now supported by nearly 90% of modern browsers. It was adopted as a candidate recommendation by the W3C on December 17, 2017.

CSS Grid Layout

In this article I would like to focus on CSS Grid – a powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

CSS Grid Layout

CSS Grid Layout

In the article A Complete Guide to Grid, Chris House provides many details about CSS Grid Layout along with examples.

Here are some key-points:

  1. In his introduction, Chris references two great resources – Rachel Andrew’s book (Get Ready for CSS Grid Layout) and Chris Coyier’s Complete Guide to Flexbox.
  2. He reviews the basics (including getting started with your container element display:grid, setting rows and columns and placing child elements).
  3. Of course, it is important to know the proper terminology (including grid container, grid item, grid line and more).
  4. He then provides a very useful overview of properties for the grid container and grid items.

Everything you need to learn CSS Grid Layout

In Rachel Andrews article Grid by Example explained basic concepts of Grid Layout which gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Her 2016 book “Get Ready for CSS Grid Layout” has a meaningful quote by Eric Meyer in the forward. We think this nicely sums up the importance of CSS Grid Layout.

“Grid Layout is to Flexbox as PNG is to BMP, and then some.”

Resources

Here are additional resources about CSS Grid we believe are useful for Web Professionals.

  •  A collection of resources & tools to help you manage the Grid link 
  • Great examples which include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Examples by Rachel Andrews
  • This is an older example (but still useful) which tells how CSS grid are becoming popular these days. As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.
  • 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. MDN Web Docs also have great examples of CSS Grid.

We hope you find these overviews and examples in CSS Grid world useful. As always, we look forward to your comments and feedback (whether you are a member or not). What have been your experiences with employing CSS Grid in real world applications for clients. How was the work received? Did any issues arise?

For those who would like to have a little fun, try out CSS Grid Garden.

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. These include the fundamentals of CSS and HTML (and much more). As a member, your first class is free.

 

January HTML/CSS Updates

January HTML/CSS Updates

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.

Latest news about HTML and CSS

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…)