Essential web developer tips from an industry veteran
Back in 1998, when our family home echoed with the unmistakable screech of a 28.8kbps dial-up modem, my passion for web development began. Equipped with Netscape Navigator 2, Microsoft Notepad, and the ability to "View Source" on any website, I dove headfirst into the world of HTML. In those days HTML was on version 3.2, CSS 1.0 was barely supported, and JavaScript was nothing more than a fledgling scripting language to make button hover effects and snowflakes float down your screen.
Throughout the past 25 years, I've navigated the ebb and flow of 'best practices', witnessed the rise and fall of numerous frameworks and languages, and observed the transition from desktop to mobile as the primary means for accessing websites. Now, with a quarter-century of experience under my belt, I believe it's a good time to impart some wisdom to those embarking on their web development journey. In the following post I’ll outline some key advice that I believe anyone looking to prosper in the industry should take advantage of.
Learn how to code HTML
Like it or not, the World Wide Web serves up HyperText Markup Language. From its initial origins as a layer atop the Internet, at its core every web page remains a collection of XML-like tags rendered by browsers (it actually did become true XML during its XHTML1.0 phase). While it's feasible nowadays to construct a website or web app with almost no HTML tags, using a JavaScript framework to populate the DOM (Document Object Model), such an approach is a slightly myopic view of web development.
HTML is a rich document language which is a living standard and ever evolving. Failing to understand its nuances can significantly impede a site’s ability to be discovered by search engines, be shared and embedded on social media, and offer a satisfactory user experience to both ‘average’ users and those with accessibility requirements. As professionals, it is important to understand the output of our tools. So getting to know the HTML specification - even if your HTML code happens to be automatically generated by a framework - will go a long way to realising this.
There’s no better way to learn than by doing; so create yourself a web page in a plain text editor, save it with the file extension `.html`, then load it directly in your web browser. Take some advice from online resources such as W3 Schools or Mozilla, and play with your page like it’s 1998 again. No package managers, no compilation, no dependencies, no external assets, and no web servers necessary.
Discover the differences between `<img>` , `<picture>`, and?`<figure>` tags. Learn why a definition-list (`<dl>`) may be preferred to an unordered-list (`<ul>`).?Figure out how to manually create a table (`<table>`) containing a header (`<thead>`), a body (`<tbody>`) , a footer (`<tfoot>`) and a caption (`<caption>`). Understand why it is important to include `<title>`, `<icon>`,?`<meta>` and `<og:>` tags in your page’s header (`<head>`). Find out why it’s important to section your pages with `<head>` , `<menu>`, `<main>` and `<aside>` tags. Build a form (`<form>`) with validation using nothing more that HTML elements (`<fieldset>`, `<input>`, `<button>`). And enhance your page’s accessibility by knowing the correct uses of `aria`, `alt` and `title` attributes.
The list goes on and the rabbit hole is deep… but the HTML specification does have a limit. Becoming an expert takes no time at all, and can form the foundation for your entire career.
Learn how to code CSS
Back in the early 2000s and the decade that followed, there was large movement to separate content from presentation.?HTML documents were seen as just that, pages of text; and the presentation of how to display them in a browser was made the responsibility of CSS files. Recently however, the presentation logic for websites and web apps have either been moving back inline to the page via CSS frameworks like Tailwind, or injected onto the page through JavaScript frameworks.
Vanilla CSS files and the separation of content and presentation is still one I favour, but I’m not stating that the ‘modern’ way is wrong. I do however recommend that everyone learns how to code CSS before they consider using any kind of presentation framework. As with HTML, it’s vitally important to understand how CSS functions, and how you can manipulate it to do what you want, even if you do eventually employ a framework.
Again, learn by doing. Load up Notepad, and start creating files ending with a `.css` extension. The same W3 Schools and Mozilla resources provide a great insight into the specification, and illustrates the functionality required to turn your HTML document into a beautifully presented web page.
I would also advise that you read up on ‘CSS Normalisation’ to avoid any cross-browser nasties by setting a standard baseline across them all; and take a look at Sass which regards itself as a ‘CSS extension language’ to help reduce repetition within your CSS files.
领英推荐
Learn about image formats
TLDR; Photographs, use JPEG; illustrations, use PNG.
In the world of imagery, as a rule of thumb, there are two types of image: ones where every pixel in the picture is a different colour from the ones around them; and ones where the picture contains vast blocks of pixels with identical colours. The former are what photographs fall into, and the latter are what logos, icons and illustrations fall into (usually).
These two image types are able to take advantage of compression in different ways.
For the first image type, it’s possible to lose some information from them and your eyes and brain will not notice. Such as for every 1 pixel, make the 8 pixels around it be the same colour. This is called “lossy” compression and works really well for photographs, or other “busy” images with a lot of colour variation. The term lossy comes from the fact that you are losing data from the original image during compression, and it’s not possible to get back. However for a one-way export for web usage, this is fine, and JPEG is the ideal choice for these types of image.
For the second image type, it’s possible to use algorithms to state that a range of pixels are the same colour, rather than specify the colour of every single pixel. This is a form of lossless compression and is very suited to logos and illustrations. PNG is the ideal choice for these types of images.
But, and this is a big one, they do not work well in reverse. Save a photograph as a PNG and you’ll not be able to compress it very much (and it could even increase in size!). Save a logo or illustration as a JPG and it will become blocky and low quality. This is why it is important to understand the common image formats and when to use them.
This is a very (very) high level take on image compression, but one that’s vital to helping reduce the size and increase speed of websites and web apps, as well as ensuring that images appear at their highest possible quality. I could go on into when to use vector formats (SVG), how and when to resize images, and how to use the `<img srcset="">` attribute to serve up responsive images… but I’ll save that for another post.
Learn how to code the 'backend'
A lot of focus for new web developers these days is in the front end, using JavaScript frameworks (React, Vue, Angular) to process and render information provided by an API. Have you considered, however, that you’re about to enter yourself into a hyper-evolving landscape of ever new frameworks, standards wars between browsers, and having to deal with small mobile screens all the way up to mega-wide gaming monitors? So before you jump into the fire, give the backend a go. Whether designing and programming an API, or going full on into a server-side rendered MVC app, it may be a landscape that can provide a more stable and less stressful career.
A major benefit of the backend is that you are dealing with a single environment executing your code, unlike the potential thousands/millions of browsers running front end code, all with their unique platforms, versions, and configurations. This is a huge benefit when it comes to guaranteeing that your code will run as you expect, so no nasty surprises when all of a sudden your code breaks with the latest version of Chrome or iOS.
So in whatever language takes your fancy, whether that’s PHP, Python, or NodeJS, it’s worth giving it a go. If anything, it’ll give you appreciation for how that API your consuming on the front end works, and may possibly provide you an alternative career direction.
Learn the origins of the World Wide Web
As my final piece of advice, becoming familiar with the origins of the internet and the World Wide Web will provide a rich context for you as a new professional in the industry. Delving into the foundational concepts, from the birth of ARPANET to the adoption of TCP/IP protocols, and Tim Berners-Lee’s vision for the World Wide Web, offers a deeper appreciation of the evolution of today’s digital tools. This knowledge will not only help with understanding past trade-offs, but also equips you in making informed decisions in the present.
The journey of the internet, marked by challenges and triumphs, stands as a testament to human collaboration and ingenuity. It serves as a source of inspiration and motivation to push boundaries and innovate. Furthermore, being aware of the early intentions behind the internet, a space envisioned as decentralised and open, can influence perspectives on current debates like net neutrality, privacy, and data ownership. As the digital landscape continually evolves, being informed of such ideas puts you in a better position to make ethically sound and impactful decisions.
Chief Marketing Officer | Product MVP Expert | Cyber Security Enthusiast | @ GITEX DUBAI in October
1 年Phil, thanks for sharing!