Welcome to Web Dev May 2022 edition, featuring the latest web development technologies. This month features the latest release of WordPress 6.0. We have a look at a new tool available to create beautiful screenshots of your code. As usual, we will discuss all the latest and greatest resources in the coding and web design world.
Table of contents
WordPress 6.0 Released
WordPress 6.0 was recently launched on the 19th Anniversary of its initial release. Codenamed Arturo after a jazz musician. The update boasts a thousand enhancements and bug fixes.
The Gutenberg editor which I must admit took me a while to get used to has many updates. If you type [[ into the editor this will bring a display of your latest posts. You can now transfer styles across when changing one block to another. You can select text over multiple blocks and they can be also locked. Any new buttons you create will keep the styles.
Under the hood, the page and post-loading speed are quicker. As a result execution times for navigation types and other queries are faster.
Accessibility has had many improvements to help users who use assistive technologies.
Source
Web Design Resources
One of the key parts of web design is getting started and building a mockup to show a client. This process is the most efficient and cost-effective way to showcase your design. From here you can discuss and confirm features with the client. Of course, finding the right tool to create your mockups can be quite daunting with so many to choose from. Here are 27 free web mockup tools to help with your search.
Alt text is an important accessibility feature in web design. It gives those who use screen readers a description of the image in place of the image. One question about this text is How long should alt text be? There is no such limit required. The general consensus is that you should be clear and focused when writing a description.
Web design is an ever-changing industry. If you tried it in the 90s you will either be in shock or thankful to see how it has changed. Websites are not made up of tables anymore. They are more intricate pieces of art that now allow for interactivity. You can incorporate animation and fonts etc. There are so many ways to build a website compared to the 90s.
Do you go for a ready-made template and create your own static site. There are so many to pick from. Do you go for an all-in-one platform that builds and hosts your site such as Wix? Do you go for a full-blown WordPress installation? There are so many options available to suit both novices and professionals. There are so many options available to suit both novices and professionals. Whichever method you choose you will need to brush up on those web development skills.
Coding Resources
This year I embarked on creating a new portfolio. In the past, I used Jekyll Static Site Generator to create my portfolio as well as other static sites. This time around I wanted to try something new. I thought about using Nuxt which I looked into and definitely sounds promising. In my research, Astro kept popping up so I thought I would take a look at it. Astro is a static site generator for the modern web. It does not tie you down to using a certain ecosystem, such as Vue or React. One of Astro’s many positives is that you can bring in your own frameworks if you do so wish. If you have created Vue components in the past you can still use them in Astro. Currently, Astro 1.0 is in beta and so far my project is going well. Once my portfolio is up and running I will do a more comprehensive review. In the meantime take a look at what Astro can do. You will be amazed.
Web Tool Of The Month
More recently I have seen tools that allow you to create images of source code. I recently came across Chalk.ist which is a web application built using Vue. It supports many programming languages including JavaScript and TypeScript. It also has support for CSS, JSON, handlebars, Bash and many more. You can configure the theme, width, padding, window controls and line numbers. Once you have achieved the desired look and feel you can export it as a link, into your clipboard or as a PNG. Take a look at the following for an example.
The Best of the Rest in May 2022
- Whats That (Dev) Tool
- 100 Project Ideas for Web Developers
- 10 Free API Resources for Beginners
- Object Orientated Programming in JavaScript
- How to Develop a Linux Application Part 1
- How to Develop a Linux Application Part 2