Start learning web development right here!

If you’ve been looking for a place to begin learning how to code web content, here’s a great online tutorial you need to consider.

Scrimba HTML and CSS tutorial screenshot
HTML and CSS tutorial by Scrimba

The tutorial is created by Scrimba, and is suited for beginners. No previous knowledge is necessary. You’ll be learning the elementary building blocks of the web: HTML and CSS.

There is no need to create an account or provide payment info. Just go on in and start learning.

I can readily vouch for Scrimba’s online learning resources, because I’ve used them before and found them extremely valuable for satisfying my needs.

The tutorial presentation is really, really neat. The learning environment is similar to an IDE, which is the standard tool programmers use to code.

Each lesson in the tutorial is a pre-recorded screen cast with the instructor speaking but also actively coding. The screen cast captures not only the instructor’s audio, but also his coding changes – which you can see in the IDE – right before your eyes! This is great because you can follow along with the code to reinforce learning. There is a window where you can see the output of the HTML and CSS code.

Scrimba learning environment screenshot
Scrimba tutorial environment

The IDE also lets you jump right in and try out your own code. This is really great for practice and experimentation.

Seriously – if you’ve been wanting to jump into web development, definitely have a look at this resource. It’s broken into individual lessons lasting anywhere from about 3 to 8 minutes, so you can learn at your own pace, whenever you have the time.

While there’s no need to create your own Scrimba account, you’ll get some additional benefits by doing so. And if you want to dig deeper after this HTML and CSS tutorial, your next step would be to learn JavaScript – they have a free lesson for that too.

Safari deserves (a little) more respect

In 2021, the Safari browser was in the midst of a critical firestorm from a number of bloggers.

I just happened to be one of them. My little blog post from July 2021 became overwhelmingly the most popular article on my blog, bringing in some 15,000 daily views at one point and making its way to the top 10 of Hacker News. (For reference, I think the 2nd most popular post on my blog peaked at under 80 daily views.)

The criticisms had to do with Safari’s constrained support for many modern web capabilities, especially those associated with creating and running web apps (PWAs or Progressive Web Apps) – despite being readily supported by Chrome, Android, Edge, and Windows.

As a reminder, for iOS, Apple only allows the WebKit web browser rendering engine (which powers Safari). That means Chrome, Edge, and Firefox for iOS can only run WebKit – and not their own engines.

So what’s happened a year later? I’ve noticed some (incremental) signs of progress.

  • There has been a little more support added or announced for Progressive Web Apps – including home screen icons and push notifications. Here’s a running list of PWA features supported by Safari and iOS.
  • Apple brought onboard Jen Simmons, a widely known and well-respected web standards advocate to help expedite development of WebKit and Safari. Based on what I’ve been seeing on the WebKit blog, she is working to make WebKit better support modern web specifications and improve Safari’s reputation.
  • Safari became the only the 2nd browser to cross the milestone of 1 billion users (after Chrome which has 3.3 billion users). This is according to an analysis by Atlas VPN, which puts Safari as the 2nd most popular browser with an estimated 19% market share, behind Chrome with a 63% share.

Late-breaking development: just before publishing this blog post, the UK competition watchdog declared Apple’s mandate on WebKit for iOS, and prohibiting cloud gaming in the App Store to both be anti-competitive practices. It remains to be seen whether a similar judgement will happen in the US.

Create buttons and tooltips with HTML and CSS

It’s quite remarkable that visual shapes and many other objects can be created with just HTML and CSS.

Of course, that means you don’t have to turn to an external illustration tool, which translates directly to valuable time savings.

In a previous blog post, I presented some examples of basic shapes with HTML and CSS.

There are many practical use cases for shapes created natively on the web. Perhaps the most apparent is a button ⎼ an essential interaction element with forms and other user interfaces. Another common usage for shapes is a tooltip, or the visual callout that pops up when you hover or click on something.

Making a button

Here’s an example of a button, and the code behind it.

CLICK ME
<!-- define a button -->
<div class="button">CLICK ME</div>
div.button {
	width: 180px;
	height: 60px;
	border-radius: 30px;
	text-align: center;
	line-height: 60px; /* enables vertical text centering when set to same value as the height */
	color: #fff;	
	background-color: midnightblue; 
}

It’s actually more semantically and functionally “correct” to use the HTML native <button> tag, rather than <div>. If you do use <button>, then you’ll want to reset some default CSS before applying your own styling.

<!-- define a button -->
<button>CLICK ME</button>
button {
	border-width: 0; /* reset default CSS */
	padding: 0; /* reset default CSS */
	… /* your styling goes here */
}

Making a tooltip

Let’s now look at creating a tooltip. Basically it begins with a rectangle and some text inside.

CALLOUT
<!-- define a tooltip -->
<div class="tooltip">CALLOUT</div>
div.tooltip {
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px; /* enables vertical text centering when set to same value as the height */
    color: #fff;
    background-color: teal;
}

Tooltips usually have an arrow pointing to the object that the user has hovered over or tapped. Let’s add an arrow here that points left.

callout

To create the arrow, you’ll need to dig into a little more CSS and add what’s known as a pseudo-element to latch on some additional content. It’s basically tacking on a triangle shape, then positioning it precisely to align with the rectangle.

To enable the positioning, you need to define some CSS position properties.

div.tooltip {
    position: relative; 
    … /* your styling goes here */
}

/* create the arrow with a pseudo-element */

div.tooltip::before {
    content: '';
    position: absolute;
    /* define the triangle shape */
    border-width: 10px;
    border-style: solid;
    border-color: transparent teal transparent transparent;
    /* position the triangle */
    top: 50%;
    left: 0%;
    margin-left: -20px;
    margin-top: -10px;
}

Flexing to the content

A key benefit of web-native visual shapes and objects is that they can adjust to the amount of content contained in them.

For example, you can have a tooltip resized automatically to the text.

Tooltip text
This is some more text in a tooltip

In this case, the width is fixed while the height adjusts to the text. This auto-sizing can only be accomplished with web-native visual objects, when compared to creating them externally with Photoshop or Illustrator.

Making simple shapes with HTML and CSS

In web development, HTML is for laying out content such as text and images, while CSS is for visually styling the content defined in the HTML.

For the web, it used to be the case that if you wanted to bring in any sort of imagery, you had to create it first in Photoshop. Not just photos, but even basic illustrations such as shapes.

But today, it’s actually possible to create shapes and a whole lot more, right on the web. Take a look here at a square and circle. They were coded with HTML and CSS.

Here is the code used to create them. You can see that it’s rather simple.

<!-- define a square -->
<div class="square"></div>
<!-- define a circle -->
<div class="circle"></div>
div.square {
	width: 120px;
	height: 120px;
	background-color: darkcyan;
}

div.circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: tomato;
}

The HTML <div> tag is used to define a region on a webpage. The size of the region is determined by the width and height dimensions in the CSS.

To make this a square shape, we simply fill the space with a color (background-color). To make this a rectangle, just make the width different from the height.

For a circle, we add one extra step, by incorporating border-radius to round the 4 corners of the square. If you set the radius to 50 percent of the size of the square, you end up with a circle.

To create an oval, apply the same 50 percent border radius to a rectangle.

 
 

Can you create a triangle? Yes, certainly!

 
 

The underlying CSS is interesting.

<div class="triangle-up"></div>

<div class="triangle-right"></div>
div.triangle-up {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 120px solid indigo;
}

div.triangle-right {
	width: 0;
	height: 0;
	border-top: 60px solid transparent;
	border-left: 120px solid lightseagreen;
	border-bottom: 60px solid transparent;
}

At first, it’s not easy to intuitively grasp what’s happening in the CSS. Creating the triangle shape involves some CSS trickery, a play on the use of borders.

Basically, you designate a border with a size that sets the width of the base of the triangle, and a color that “fills” the triangle. Then, define the two surrounding borders at half the size and make them transparent. When all three borders are combined, you get the shape of a triangle.

There are, of course, many other shapes you can create with CSS. You can get more creative and make some interesting visual objects, too. And, there are several web development tools ideal for making artwork and illustrations, including SVG, the Canvas API, and most recently, the CSS Paint API.

WordPress: the latest insights

I recently listened to an insightful podcast interview with Matt Mullenweg, co-founder of WordPress and the CEO of Automattic. Mullenweg of course is the most prominent face of the greater WordPress community, and its biggest proponent of the open-source WordPress web creation and content management platform.

Matt doesn’t give very many interviews, but whenever he does, the WordPress community always pays attention, as often does the wider tech crowd. He also delivers a yearly State of the Word keynote to update on what’s been happening over the past year, and get everyone excited by previewing new things to come.

In this most recent interview, with The Verge, I came away with some rather interesting insights which I’d like to share with you.

Massive popularity that only continues to grow

To date, WordPress is said to be powering 43% of all websites out there on the internet. That is astounding, given that not too long ago, it was something like one-third of all sites which I thought was already unbelievable. WordPress continues to grow and grow in influence, gaining new adopters every day while sustaining the confidence by its vast community, and countless professionals and agencies that serve up WordPress-based websites around the world.

When I started dabbling with WordPress in 2013, some 25% of websites were built on it. The one-third figure was reported about three years ago. The accelerated growth as of late is especially notable considering fast-growing competition from platforms such as Wix and Squarespace. If that wasn’t enough, Matt is boldly predicting the market share for WordPress will reach up to 85% in the next decade.

WooCommerce is growing really fast, too

WooCommerce is the online selling companion to WordPress. It too is open source. Matt stated that WooCommerce is now growing about as fast as Shopify. That’s remarkable given that Shopify is basically the king out there when it comes to e-commerce hosting and implementation. It’s long been thought that Shopify would overtake WooCommerce as the preferred platform for online merchants.

Shopify provides a lot of powerful conveniences, but it’s a closed platform and you do pay for it. WooCommerce is open source and free (though there are paid add-on extensions to enhance its capabilities). I’ve been hearing as of late from WordPress community members that they’re getting more and more client requests to migrate their online stores from Shopify over to WooCommerce.

Matt has corroborated on that as well, and noted that many high-end merchants have switched over because of the need to bring down costs, while desiring the detailed customization that only WooCommerce can provide as an open platform.

WordPress.com is seriously getting legit

The conventional way to get a WordPress site up and running is to find a web hosting service of your choosing, grab a free download from WordPress.org, and install WordPress in your host account. But there’s a much easier way if you don’t want to do the legwork, by opting for the WordPress.com service that’s basically ready to go once you sign up and create an account.

WordPress.com had always been known for its simplicity and user convenience, but without the freedom of installing themes and plugins as you could with your own WordPress install. However, I learned from the podcast that you can now use WordPress.com both as a full-service host, and also be able to bring in themes and plugins of your choosing. The price of the WordPress.com service, with site customization flexibility is actually comparable to many third-party services that manage WordPress for you.

Automattic has put in a lot of investment into WordPress.com, to make it a bonafide web creation and hosting platform, and compete aggressively with the likes of Squarespace. And they’ve flexed a lot of their marketing muscle behind it, which should be evident from all the television commercials you’ve seen.

Learning Web Components

As part of my continual quest to upskill, I’m now learning how to use a modern web development capability – something known as Web Components.

The desire to know how to use Web Components doesn’t just stem from a desire for greater knowledge. It’s coming out of some real pain points I’d like to resolve.

Recently, I added a navigation bar to my website. It sits at the top of the window on every page.

I really like having this feature to so visitors can easily navigate around my site. It’s defined by this underlying HTML code:

<nav class="menu-bar">
    <img class="logo" src="img/thinktech-icon-wht.svg" />
    <div>
        <a href="/resume/">Resume</a>
        <a href="/portfolio/"><span class="normal">Portfolio</span><span class="smartphone">Work</span></a>
        <a href="https://blog.perrysun.com">Blog</a>
    </div>
</nav>

For the navigation bar to always appear on the site, I added this code on each page.

However, that is not ideal. It’s generally not good practice to duplicate code repeatedly. In fact, one of the basic principles of coding is DRY, or don’t repeat yourself.

Instead, you should create the code just once, and then reuse it whenever needed by referencing it rather than duplicating it multiple times. Doing so makes your code much more efficient and easier to manage down the line.

With today’s modern web development tools and APIs, this is where Web Components comes in. Multiple lines of code are replaced with a custom HTML tag with a name of your choosing. Something like this:

<my-nav-bar></my-nav-bar>

The code itself is stored in a special JavaScript file. You can reuse the code wherever you wish by simply placing this tag in your HTML document.

The name of the custom tag is entirely up to you – just as long as there is at least one dash in the name. The dash is what distinguishes a Web Components tag from a conventional HTML tag.

<sales-contact-card></sales-contact-card>
<photo-gallery></photo-gallery>

In addition to the custom HTML tag, another line of HTML is needed to instruct the browser to load a JavaScript file with the specific Web Components code.

<my-nav-bar></my-nav-bar>
<script src="myNavBar.js"></script>

There is actually a lot in terms of what you can do with Web Components.

As a simple example, you can pass your own data to a Web Component for display within the HTML, or whatever else you want to do.

Let’s say you wanted to create an entry for a photo gallery, and have it display the person’s name and corresponding image. You can do this by defining your own attributes and data within the custom HTML tag, like this:

<photo-gallery-entry name="John Smith" photo="john-smith.jpg"></photo-gallery-entry>

I hope this provides at least a basic introduction to Web Components. I’ll follow up with more insight and examples as I apply them in parts of my website.

If you’re interested in learning about this cool stuff, here’s a great video to help get you started.

Regarding code presentations

Any web or software developer (or engineer) frequently turns to the web as a resource for seeking help with a coding task, or learning something new.

Google can really be your friend when you feel stuck in the middle of a project and need assistance getting over a hump.

As a casual web developer for several years, I can’t even begin to count the number of times I’ve turned to the web for info that helped me achieve an objective in my personal creations.

At work, web searches have saved my butt in helping solve problems that expedited important content creation needs for our corporate website.

One thing that’s always essential is analyzing and understanding the code snippets you’ll always encounter when visiting the developer-related websites and blogs via your Google searches. If you find something useful for your needs, you’ll want to be able to bring it into your projects.

For this reason, proper presentations of code samples are always very helpful when they’re easy to read and analyze, especially at a quick glance when you’re in a rush and really need to grasp the info ASAP. I’ve always benefited from code that’s clearly presented, and simple to understand. And I’ve learned a lot just from examining code samples.

I’ve always admired web development sites and blogs with code snippets that are both presented beautifully and pleasing to the eyes – which of course translates to straightforward, quick, and efficient reading.

I’ve drawn a lot of inspiration from the creations of others offering great resources on web development. And I have used that inspiration as my motivation to share some insights of my own on this blog.

This always begins with great code presentations.

Ways to present code

If there ever were any definitive rules for presenting code on the web, the first would most certainly be that you want the code to clearly stand out from the main text on the page. For example, let’s see what some code would look like with no distinct formatting.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener(“click”, function() {
        this.style.display = “none”;
        document.body.classList.remove(‘noscroll’);
        bodyScrollLock.enableBodyScroll(this);
    });
}

The code is maybe OK to read, but it’s certainly far from ideal. Thankfully, you never see code presented this way. It’s conventional to present code in a monospaced font like Courier.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener("click", function() {
        this.style.display = "none";
        document.body.classList.remove('noscroll');
        bodyScrollLock.enableBodyScroll(this);
    });
}

For more distinction, it’s actually very common to find code sectioned off from the main content over a shaded background.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener("click", function() {
        this.style.display = "none";
        document.body.classList.remove('noscroll');
        bodyScrollLock.enableBodyScroll(this);
    });
}

This is basically good enough as far as presentation is concerned. But you can really take this further and make code look prettier, and arguably, even easier to read.

When I was learning to create things on the web, I stumbled across sites like CSS Tricks and really liked how they were displaying their code samples. So I took some direct inspirational cues and applied them here in creating my own presentation styling.

The first was to tweak out the styling toward making a real distinction from the main content, beginning with the content contrasted against a dark background.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener("click", function() {
        this.style.display = "none";
        document.body.classList.remove('noscroll');
        bodyScrollLock.enableBodyScroll(this);
    });
}

To make code stand out even more and make it easier to understand, you’ll frequently see what’s known as syntax highlighting, which color codes different types of syntax depending on the coding language. I’ve applied that here, with the help of a superb resource called Prism.js.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener("click", function() {
        this.style.display = "none";
        document.body.classList.remove('noscroll');
        bodyScrollLock.enableBodyScroll(this);
    });
}

Finally, to top it all off I added a banner to identify the coding language.

for (let l = 0; l < modClose.length; l++) {
    modClose[l].addEventListener("click", function() {
        this.style.display = "none";
        document.body.classList.remove('noscroll');
        bodyScrollLock.enableBodyScroll(this);
    });
}

Here’s another example with CSS code.

div.logoSection {
    position: absolute;
    font-size: 1px;
    left: var(--logoPadding);
    top: var(--logoPadding);
    z-index: 10; /* Logo will float over other content */
}

More considerations

If I had to define a rule for code presentations, it would most certainly be to allow others to copy and paste your code. After all, you want others to benefit from your work, just as you’ve similarly benefited.

Some sites display code snippets as bitmaps, unfortunately making copying and pasting impossible. This is because it’s way easier to just spit out an image of your work, usually via a plugin for your code editor. I see this on Medium or social media, because users have no control over visual text styling.

Another consideration is how you would present long lines of code. You can choose to either wrap them, or have the user scroll horizontally to see them.

// this line wraps
var ctx = document.getElementById(['cvChart', (index+1)].join('')).getContext('2d');
// this line wraps
var myChart = new Chart(ctx, chartConfig(x, 'Daily New Cases', ['7-Day Average', dataSets[stateID].name], [yavg, y], [movingAverageColor, dataSets[stateID].color], ['line', 'bar']));
// no line wrapping - scroll to see more
var ctx = document.getElementById(['cvChart', (index+1)].join('')).getContext('2d');
var myChart = new Chart(ctx, chartConfig(x, 'Daily New Cases', ['7-Day Average', dataSets[stateID].name], [yavg, y], [movingAverageColor, dataSets[stateID].color], ['line', 'bar']));

Generally, it’s just a matter of personal presence between the two. I probably see more of the latter.

Summary

Developers always use the web as an important reference for help and learning. For them, proper presentation of code is very important. To be useful, code needs to be clear and easy to read. I’ve learned a lot by examining code snippets, and I’ve always wanted to share my web development insights through my own code presentations.

For developers, Apple’s Safari is crap and outdated

Until its recent demise, Internet Explorer was the browser hated most by web developers.

Internet Explorer is now a thing of the past, replaced by the far-better Microsoft Edge.

Why did developers and software engineers hate IE so much? Because IE was seriously outdated, lacking support for cutting-edge web APIs and technologies enabling the modern websites and web apps we use today.

With IE now out of the way, the distinction of ‘most-hated browser’ goes to Apple’s Safari – which all along had been a close second to IE.

In a similar vein, Safari has consistently lagged behind competing browsers in supporting modern web APIs and features, presenting considerable challenges for developers wanting to create products that work consistently across all the major browsers (Chrome, Edge, Firefox, and Safari).

However, the annoyance with Safari gets deeper and more nuanced, which I’ll explain further below.

Progressive web apps

Did you know that it’s possible today to create something for your browser that works like a native app on your device?

This is enabled through what’s known as progressive web apps (PWAs) – a collection of modern browser technologies that together let you create a site that looks, feels, and performs similar to a native app on your smartphone, tablet, or desktop.

Progressive web apps are really cool, because they can give you the following capabilities that you would normally expect with a native app:

  • Run full-screen (no visible browser UI)
  • OS-level notifications and alerts
  • Ability to use the app when the device is offline
  • Local data storage and retrieval
  • Install an app icon on your smartphone’s home screen
  • Access to hardware functions such as the camera, microphone, USB port, etc.

PWAs don’t require compiling, nor submission to app stores for approval. A few examples of progressive web apps in use today: Starbucks, Twitter, and Uber.

Apple dragged their feet in adding support for PWAs in Safari, and when they finally did, limited the capabilities of a PWA so that native-like app functionality wouldn’t be possible, like notifications or a home screen icon shortcut – to name just a few of the many restrictions imposed by Apple.

But it goes beyond that. On iOS, the only web rendering engine allowed is Apple’s own WebKit, which runs Safari. Third-party iOS browsers such as Chrome can only use WebKit, not their own engines (as would be permitted in Windows, Android, or macOS). And it’s WebKit that governs PWA capabilities.

The reason for Apple’s self-imposed limitations on PWA-related web APIs? They’ll tell you they’re for user privacy reasons, which may be valid in certain cases.

But most of us know the dominant reason is because fully-capable PWAs would compete against the iOS App Store – robbing Apple of 30% cut in revenue it rakes in when an app is purchased, or an in-app purchase is executed.

Until recently, the controversy over Apple’s halting PWA support was fairly confined to the web developer community. But now, it’s been laid bare to the public, thanks to the Epic vs. Apple case, and the possibility of anti-trust regulatory actions.

Apple may ultimately be compelled to fully expand PWA or third-party iOS browser support as a concession to satisfy government regulators. We’ll see what happens.

Lagging support for WebRTC and other features

Web developers and engineers have long lamented about slow or lack of support of key web APIs and CSS features that are commonly available with other browsers.

… Apple don’t give a f**k about any modern APIs. PWA, streams, who the f**k needs that? Well, dear Apple, a f**king lot of web devs need that nowadays.

Reddit user

Take WebRTC, for example. WebRTC is prominently used in video and audio communications over the web. It’s also used to send files, and share screen content.

Apple took years to finally add WebRTC support to Safari, far enough behind Chrome and Firefox that it practically became a running joke among developers and even industry observers.

Despite the support now available, WebRTC is known to be buggier on Safari desktop compared to other browsers. Developers have found it a mess to support in iOS that it’s practically not even worth the effort.

There’s been past criticism for Safari not supporting the VP9 video codec or the WebP image compression format. Some good news: as of late 2020 they’re now supported – though it’s worth nothing they’ve been around for years with other browsers and have proven very popular.

Now, Apple just needs to get its act together and support the AV1 video codec and related AVIF image format. This may be a tall order, though, since Apple collects royalties for the competing HEVC codec, and is a big proponent of the HEIC image format.

Bug and infrequent updates

I often read about developers frustrated with the many bugs in Safari’s implementation of web APIs and CSS features, and in particular, the slowness of seeing them addressed.

How are we supposed to keep up with this? Isn’t Apple one of the richest company in the world? Invest in your f**king browser.

Reddit user

Further contributing to the frustration is the fact that unlike Chrome or Firefox, Safari updates are not automatic on regular basis. They’re only shipped together with the infrequent updates to the entire OS.

Seriously! Microsoft employs automatic updates to the Edge browser. So surely, Apple can find the *courage* to do so as well.

A matter of priorities

Don’t get me wrong, Safari is very good web browser, delivering fast performance and solid privacy features.

But at the same time, the lack of support for key web technologies and APIs has been both perplexing and annoying at the same time.

The enormous popularity of iOS makes it all the more annoying that Apple continues to hold back developers from being able to create great experiences over the web that work across all platforms.

But not exactly surprising either, given that Apple has staked its future on service-based revenue that includes sales generated from the App Store.

Apple has been known to stand down in the face of public pressure. Maybe there will be enough of it to lead to some serious changes to Safari.