Note from Mark. I plan to periodically provide article summaries and insights. I am hoping this will happen once each month. Hope is the operative word. Here are my thoughts as we begin May, 2021. I welcome your comments about additional topics you would find helpful as well as your thoughts about these articles. I found them most interesting/ thought provoking.
Accessibility
Using Modern CSS to Improve Accessibility. This article by Stephanie Eckles provides a quick overview of what it means to have an accessible website. Stephanie then covers using some of the newer CSS to enhance accessibility. This includes use of outline-offset to position the outline away from the element. The focus-visible pseudo-class will display an outline only when the user agent determines it needs to be visible. There is so much more in this article, I encourage you to set aside time to read it in its entirety and digest how these CSS features can be used to solve real world accessibility issues.
A.I.
GPT-3 is a language supermodel which is quietly ushering in the A.I. revolution. This article by Luke Dormehl explains why this text generating algorithm makes a difference. The main difference with prior algorithms is that limited training is required. In the past, significant input was required for A.I. to “learn.” This no longer seems to be needed. Think. About. That. Here is a key quote from the article (it certainly resonated with me).
“Machine learning has been transformative in all sorts of ways over the past couple of decades. But machine learning requires a large number of training examples to be able to output correct answers. GPT-3, on the other hand, has a “few shot ability” that allows it to be taught to do something with only a small handful of examples.”
Ok, Mark, what does all this A.I. have to do with Web design and development? One example mentioned in the article is a layout generator which”renders a functional layout by generating JavaScript code from a simple text description.” Another example is a GPT-3 based search engine. I think you will find this article most interesting and informative. Our industry is changing and A.I. is going to have a major impact. Plan accordingly.
FLoC
Federated Learning of Cohorts is Google’s replacement for tracking cookies. Our advisory board member, Deborah Edwards-Orono, has a great article about this effort and her concerns. Simply put, FLoc is included by default in the new version of the Chrome browser [see our recent post on the popularity of this browser] and collects your recent browser activity. It takes that activity and labels it then shares the “cohort” with other websites and advertisers. The main concern with this approach is privacy. She also discusses a new WordPress plugin Disable FLoC which is easy to install and has no configuration settings, it just does what it claims to do. If you would like to learn more about the implications of FLoC, the Electronic Frontier Foundation has a solid overview as well.
For those not using WordPress, Marko Saric has an overview article at Plausible which also includes the snippet of code you can add to your .htaccess file to disable FLoC as well.
Future of the WWW
Professor Sir Tim Berners’Lee (inventor ot the WWW) thinks his creation is out of control. In this interview, he explains his plans to save it.The big issue these days is privacy. He proposes Solid (a new system to decentralize the Web). His core idea is PODS (Personal Online Data Stores) which each person has control over. The fundamental change is that anyone wanting to use your information must ask for your permission. After you review the interview, I would be keen to learn your thoughts about this approach. Comments are open.
Hardware
Gizmodo recently discussed the fact that Verizon is recalling 2.5 million of its hotspots because they are literally too hot. There have been 15 reports of the devices overheating (6 instances of fire damage). Review the article to see if you have one of these hotspots (various models sold between April, 2017 and March, 2021).
WordPress
Easy WP Guide has been released for WordPress 5.7 (most current version). No discussion of PHP or the technical details, just a comprehensive guide to help you edit the content of your site. This is a free download. Web Professionals who build sites using this technology may wish to share this document with their clients (if you haven’t already). You can purchase the guide which allows you to brand it as you wish.
For those developers using Elementor as part of their WordPress installations, you may wish to review the recent Wordfence post discussing recent vulnerabilities with Elementor. For those who are not aware, Elementor is installed on over 3.5 million WordPress sites. The Wordfence team found over 100 vulnerable endpoints.
Final thoughts
Hopefully, you found these articles and insights helpful. What else would you like to see in future articles? What did you think about these? I look forward to reading your comments.
Best always,
Mark DuBois, Executive Director
Web Professionals (a.k.a. World Organization of Webmasters)
WebProfessionals.org Announces Certification Grants to Support Small Businesses Impacted by COVID-19
WebProfessionals.org, a not for profit association for the global web design, development and web community, is proud to announce certification grants for web students and teachers in the U.S.
In this unprecedented time that has caused economic and educational uncertainty, WebProfessionals.org, along with industry and member support, is making these certifications available to meet high job demand for web professionals. The goal of this effort is to help the U.S. economy and small business especially pressing now during the COVID-19 pandemic.
“WebProfessionals.org certifications established with the support of the U.S. Department of Education provide competent and ethical employees and contractors. We’re proud to be a supporter of this important initiative,” said Steve Waddell, Director of Education and Training of WebProfessionals.org and Founder and Lead Developer of curriculum development partner CTELearning.com.
How will small businesses benefit?
Small businesses adjusting to the economic disruptions resulting from COVID-19 will need to improve their online presence to continue meeting customer and client needs. To do so they will need skilled web professionals who also know how to reach target markets. A group of members in the Web Professionals Organization is making these certifications available to meet this high job demand with competent employees and contractors who can ensure businesses stay competitive through a robust web presence.
Who qualifies?
Qualifying schools in all of the 50 U.S. states and Puerto Rico will receive grant certifications for select schools, districts and students.
How to participate
Eligible middle and high school students who complete eligible web professional training courses such as Web Development and Design; Coding Internet Games, Apps and Sites; and Web and Mobile Application Coding and Design can apply.
Webprofessionals.org certifications have been created with the backing of industry and small business hiring managers making them extremely valuable portfolio additions for students who may wish to pursue high-demand STEM fields and the digital arts as career pathways.
Support material
Courseware offered by WebProfessionals.org curriculum development partners gives students the chance to continue learning from home during COVID-19. Courses can be taught and learned 100% online, so students can continue to grow and work toward these certifications from their own kitchen or dining room table.
About Webprofessionals.org
Established in 1997, WebProfessionals.org is a non-profit professional association dedicated to advocacy and supporting individuals and organizations who create, manage and market websites, apps and web technologies. The organization provides education, training resources and certifications for those who work and teach in web technologies as well as those aspiring to enter this growing career field. WebProfessionals.org also manages and heads up the Web Design National Competition with a team of industry experts with SkillsUSA, the largest student to work organization in the U.S.
About SchoolofWeb.org
Sponsored by WebProfessionals.org the School of web provides web design, web development and web business training and education.www.schoolofweb.org
First in Nation to Earn STEM/STEAM Stackable International Industry-Recognized Certificationsdeveloped by Webprofessionals.org
Haven, Kansas May 6, 2019 – Three Haven High School Students are the first in the U.S. to earn Associate Level Web Developer WebProfessionals.org stacking certifications from two separate courses at Haven High School. Additionally, nine more students earned Web and Mobile Application Industry Certifications also offered by WebProfessionals.org and three others earned Web Designer certification.
Graduating with WebProfessionals.org Certifications
All of these students will be graduating high school with industry-recognized WebProfessionals.org certifications, which is quite an accomplishment.
Haven High School is in its fifth year teaching these courses and providing students the opportunity to earn credentials. This continued success is led by the Haven Business Education Department, and the business educator responsible for this program is Jessica Wilson.
Steve Waddell—founder of CTeLearning and WebProfessionals.org curriculum development partner—was asked to visit Haven HS and present a banner on behalf of the WebProfessionals.org to recognize it as the most credentialed school in KS. Haven students have earned more industry-recognized certifications than any other school in Kansas.
Haven High School currently runs both the Web and Mobile Application Development and Web Development for Business courses by CTeLearning.com. These courses are stackable and enable students to earn a Webprofessionals.org International Industry-Recognized Certification (IIRC). These exams are proctored at the school site to maintain exam integrity and ensure each participant has met all of the minimal requirements to sit for the credential.
Power of Rural STEM and Business Education
Steve Waddell said, “Never underestimate education in the rural parts of the U.S. or the dedicated educators, administrators and students who thrive there. These students here today are gaining world-class credentials from an international professionals association like the WebProfessioanals.org. This is not just another test delivered by a testing company. These students have received an international industry-recognized certification. This shows that high tech, high-demand career education can happen and should happen everywhere. We love being a part of rural STEAM/STEM and business education.”
“Wherever a student calls home should not restrict their opportunity to discover their passions and talents for these high-demand STEM careers. Only a few short years ago the wisdom of the day was that to work in these types of technology careers you had to leave the rural community and move to suburban or urban spaces. Times have changed, those days are gone, and Jessica’s students are proving that.”
The Path to WebProfessionals.org Certifications
In addition to the Web Development for Business and the Web and Mobile Application Development courses, Ms. Wilson teaches other career and technical education courses, including Business Entrepreneurship and Coding and 3D Video Game Design. This recent success is demonstrating that Haven High is a regional STEM/STEAM/CTE powerhouse.
In these courses, students learned web and app coding, created sites and apps, and built a future-ready portfolio with real-world projects. As of today, they get to add industry credentials they can show college recruiters or future employers.
“As educators we thrive in reaching for what seems to be impossible, especially when it comes to doing what is best for our students and helping them be successful. It is always appreciated to have an administration that helps to support you in these kinds of endeavors. I am very lucky here at Haven and I just want to extend a thank you to Principal Travis Moore, Curriculum Director Marty Niensteadt and our Superintendent Clark Wedel for their ongoing support of this fantastic opportunity. It is with their help and the determination and hard work of my students that we are able to continue the tradition of excellence here at Haven High. As much as I appreciate the recognition, as their teacher none of this would be possible without the work my students put into their learning and their support of one another,” said Jessica Wilson.
The certification earned by the Haven HS students is delivered by WebProfessionals.org, Executive Director Mark DuBois and educational team were key in creating and maintaining the international industry-recognized certifications.
“Many students take the course only for high school credit. Those who want to gain the coveted WebProfessionals.org industry-recognized credential must receive a minimum course grade, meet all project performance requirements, exhibit professionalism in all class activities and receive a recommendation to sit for the exam by their course instructor. Ms. Wilson’s students took the proctored exam at Haven High” said Steve Waddell.
“We welcome the Haven students to the exciting world of web technologies. We are very proud of Ms. Wilson’s students. Haven has an incredibly strong program and we continue to see students succeeding at Haven and earning industry certifications year after year. All of us here at WebProfessionals.org love seeing students take these first important steps towards high-demand STEAM/STEM careers in web and app development,” said Mark DuBois, Executive Director of the WebPrfessionals.org
Courtesy of Haven High School Yearbook
Congratulations for Earning Stackable WebProfessionals.org Certifications
The three Haven High School Students who are the first in the nation to earn their Associate Level Web Developer by stacking certifications from two separate CTeLearning.com courses at Haven HS are:
Kelton DeBord: Junior
Caleb Fredrickson : Senior
Ronnie Voss: Sophomore
The nine newly minted Mobile Application Industry Certification recipients are:
Joshua Clodfeldter: Freshman
Ethan Earls: Freshman
Dakota Fox: Sophomore
Z’Hakari Huffman: Sophomore
Maverick Lane: Freshman
Cole Long: Freshman
Nathan Schmidt: Sophomore
Holden Schneider: Freshman
Cole Zongker: Freshman
Congratulations to Jessica Wilson’s 2019 class of industry-recognized certification recipients. We can’t wait to see the class of 2020.
Imagine this… You manage a website for a company. Someone
from Legal approaches you with a question, “Is the company’s website Section
508 compliant”? How would you respond?
Your first reaction might be to cringe. Or, maybe you get
that “deer in the headlight” look because honestly, you haven’t dealt a lot
with web accessibility. You wonder, “What is that anyway?”
Web accessibility can be a scary thing, especially if you
don’t have much experience with it. But
fear not! There is good news!
Here are five things to consider when establishing an
accessible, and ultimately optimized, web experience for all.
1. There is no such thing as a completely 100% accessible website.
It might be of some comfort to
know that it is pretty much impossible to create a web experience that is
completely 100% accessible by all. Most websites are not built with web accessibility
in mind, so know that you will be retroactively fixing problems.
Also know you will run across a
variety of issues. Some issues you will be able to fix easily, while others
will be much more challenging. You may even come across issues that you won’t
be able to fix at all. Understand that applying accessibility to an established
website can be like uprooting a well-established tree. It can be done, but it’s
going to take a lot of effort.
2. Web accessibility is not a binary thing.
You can’t just answer the question
with a “yes” or “no” response. It is not just one or the other. Web
accessibility will always have some shades of grey. The site you manage will
probably have some accessible features already, like alt descriptions for
images, and heading tag <h1 – h6> tags.
The website you manage is probably
already somewhat accessible. The question is, “what shade of grey is it?” Remember
there is no such thing as a 100% accessible website.
3. WCAG and Section 508 standards are similar but different.
If you do your research, you’re
going to run across something called WCAG and Section 508. It’s important to
know that these things are similar, but different.
The Web Content Accessibility
Guidelines (WCAG) is advice developed by the World Wide Web Consortium (W3C),
with the goal of establishing standard practices regarding web content. These
standards are aimed at teaching individuals and organizations how to develop
web content for all people, including those with physical and mental
disabilities.
Section 508 also deals with
creating accessible web content, but it is different than WCAG. WCAG is a
cooperative web standard. Section is a law that requires government agencies to
make their websites, and other technology, accessible to people with
disabilities. If you manage a website that uses government money like a
university or health insurance website, you might have to abide by Section 508.
4. What is the ultimate goal of web accessibility?
Is the ultimate goal of web
accessibility just to be compliant? I would say no. Approaching web
accessibility with the ultimate goal of compliance in mind is short sighted.
The ultimate goal of web
accessibility is to create a web “experience” that is accessible by as many
people as possible, regardless of ability. This issue is really about humans
and their ability to access the information that they need. Yes, the law is
involved in some instances, but ultimately we are talking about being
compassionate towards others, and good stewards of the information that we
manage.
5. If you must have benchmarks and metrics, create a checklist.
Now the person from Legal is
probably looking for some sort of concrete evidence that they can use to defend
the company. Here is one way to approach this:
What is the law, and what does it state that the website must have?
Think about the senses you have as a human being (sight, touch, and sound etc.), which ones do you use to take in information?
How will you modify the website based on someone who is visually impaired, doesn’t hear well, or doesn’t have use of their hands?
Don’t “forget” about memory retention! What types of modifications will you make for people who have a cognitive impairment?
Write these things down and create a list. Do an audit of the site. What do can you do differently?
Think about your website and the content in terms of numbers. Maybe you have 20 PDFs and none of them are accessible. Can you create a metric around this? Can you strive for all 20 PDFs to be accessible by the end of the year?
Take this information to Legal and work with them.
So, going back to the original question? Is your website Section 508 compliant? How
would you respond?
Understand that Legal is probably going to want to resolve this issue in a concrete way. Their job is to protect the company from legal trouble; however they don’t necessarily understand websites and web content. Your job is not to understand the law entirely, but to understand how the web works.
Remember you are the web expert. Respond appropriately and move forward in a collaborative and productive manner. Together you can create a wonderfully optimized web experience for as many people as possible, while keeping the company out of legal trouble.
After a long break let’s take a look at another Static Generator – Hexo.
Hexo is powered by Node.js and is mostly aimed at blogging. It has a deploy integration for GitHub which makes it a great fit to build a documentation site for a GitHub project as well. If you are a JavaScript developer, the setup should be relatively easy. Like many other general purpose generators, you’ll probably want to write your content in Markdown. The default templating engine is Swig, which is once again well suited for JavaScript developers. However, Hexo is extensible to allow other templating engines to be used if you want.
The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.
Installation of Hexo
Installing Hexo is quite
easy. However, you do need to have a couple of other things installed first:
We reviewed static site generators when we began this series of articles. If you need a quick review – a static site is a collection of pages contained in basic HTML files. A static site generator (SSG) is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server. Static site generators are systems that compile templates into static HTML pages. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs (including lower maintenance costs) and, potentially, higher revenues.
What is the difference between WordPress and Hexo?
When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.
Advantages of Hexo
Hexo has
many pros:
it is blazing fast,
it is easy to deploy to GitHub pages or any other host with one deploy command,
it is powerful with solid Markdown support,
it is highly extensible,
it is open source and there are many open source themes, and
there are available free plugins.
With Hexo, one can create markdown files and HTML layouts which will be converted to static HTML files when deployed. Hexo provides a deploy configuration which builds our static files into a GitHub branch. This means one can maintain documentation as markdown in our project’s master branch and deploy it, with one command, to gh-pages.
My experience working with Hexo
I decided to create a blog post for Hexo without any graphics. I found creating the blog post in Hexo to be easier than Jekyll. Readers may recall that I discussed Jekyll as part 2 of this series. The default theme also looks good on the site. I decided to just run the site locally. If time permits, I may post some of these examples on a Web Professionals server and link to them. In the interim, here is a screen capture of the results. I did not encounter any major issues when working with Hexo locally.
Example of Hexo blog post
Final Thoughts
During my course of study as a Web Developer I tried many CMS systems and installed a lot of software. I found working with Hexo a little easier than most. It also has a little learning curve. One must use the command prompt to run different commands. I was able to get desired output to display locally with not that much effort. Each time I made changes I had to run ‘hexo server’ command on command prompt. That is the essence of static site generators (one must remember to constantly update the resulting web pages when changes are made).
One may find it simple and easy to build sites using Hexo or one may face problems initially installing and running and deploying. It all depends how the computer configuration/set up is. I am curious as to your experiences with Hexo. What did you like/ dislike? Please update the comments with your experiences.
Jekyll remains the most widely used static site generator. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The Liquid templating engine is used to place this Markdown content into the HTML template, and to combine templates representing various parts of a page (say, header, footer and content) in a modular and re-usable manner. It also has support for Sass for those with a preference for CSS pre-processing, and it’ll play fine with libraries like Bootstrap. Also included with Jekyll is an HTTP server which can be used to easily deploy and test your static pages locally.
Importers is a feature which enable an existing site to be migrated to Jekyll with relative ease. For example, you can take an existing WordPress site as a starting point with Jekyll using one of the importers.
If you have a GitHub repository, you’re able to create a GitHub pages site for free using Jekyll. This can be a convenient way to give a polished landing page to your GitHub project.
The big downside of Jekyll – and this applies to most generators – is that it can seem complex at first and is a new technology to master.
You first need to install the Ruby DevKit or you will experience errors. If you are installing Ruby only for the purpose of running Jekyll, Portable Jekyll will give you a full working Jekyll install in less than 5 minutes.
Few easy steps:
To set up your site locally with Jekyll, follow these steps:
Create a local repository for your Jekyll site.
Install Jekyll using Bundler.
(optional): Generate Jekyll site files.
Build your local Jekyll site.
Keep your site up to date with the GitHub Pages gem.
Configure Jekyll.
Does Jekyll generate valid HTML?
Jekyll essentially a parser that converts plain text content written in a special formatting language called Markdown into HTML. These content blocks get inserted into one or more templates to build final output for a static page or a post. Markdown is a styling language used to prepare written content such as blog posts in Jekyll that can eventually be converted into HTML. Markdown allows user to focus on content by using an easy-to-read and easy-to-write plain text format, which can then be converted to valid HTML.
My experience working with Jekyll
Jekyll is widely used Static Generator. I tried working with Jekyll. I followed easy steps to install and run a Jekyll post locally. I first installed Ruby, then used the command prompt to get the desired Jekyll output locally.
Here are some screen captures to get an idea how the site look like. It is a simple blog post without any graphics.
I transferred all generated files and also post I created via FTP to a server. It didn’t give the desired output shown in above images. For example, the link to the CSS file appears to be broken upon transfer.
During my course of study as a Web Developer I tried many different CMS and installed different software, but working with Jekyll is little different. It has a bit of a learning curve and I think someone before working may need someone to have a little technical background. I am still trying to see what I need to change in the background code when it is transferred to a server. Clearly, something did not work properly.
These are my initial observations on using the tool. You may have different experiences and we look forward to your comments. The biggest issue with using any static generator is that you must generate the entire site each time you make updates (so all the links work). You would then need to transfer the appropriate files to the server each time. In my opinion, there are other tools (such as WordPress) which would seem to be more efficient (although less secure as they interact with a database).
