DEV Community: Christian Kaindl

A WebExtension Guide

Christian Kaindl — Tue, 19 Dec 2017 10:37:49 +0000

For those who don't know, WebExtension is a new Add-on architecture/specification that can be used even across browsers (to some extend). It is a browser native API interface with which you can write extensions with just web technologies. The core of the WebExtension API is meant to be standardized for ease of development in the future. For this article, I will be writing in the context of extension development for Firefox but some things may also be true for other browsers.

Getting started

At the heart and at the start of an extension is its manifest. The manifest is a JSON file that contains all sorts of information about the Add-on: Name, version, description, permissions, UI elements, icons, etc.

To create the simplest WebExtension that is possibly possible this is what a manifest.json could look like:


{
  "manifest_version": 2,
  "name": "Super Awesome Extension 👓",
  "version": "1"
}

The 3 JSON keys shown above are the only mandatory keys in your manifest. But, before you add some fancy functionality to it, let me show you how you can actually get to install a local Add-on in the browser:

Go to 'about:debugging' using your URL bar:
Click 'Load Temporary Add-on' and choose the manifest.json from your local Add-on:

Your extension will now be displayed in Firefox' Add-on page ('about:addons' in the URL bar or hamburger menu on the top right and then 'Add-ons') and is ready to use! That is all you need to know to get you Add-on up 'n running. You can go and try it out right now, I'll wait here. Note: When you make any changes to you Add-on during development, don't forget to hit the Reload button on the about:debugging page.

If you want to see potential errors and/or log statements from your Add-on, there is a separate debug window for that (you will need it).

To open it, go to 'about:debugging' (as shown above) and load your Add-on (also shown above). From there, check the 'Enable Add-on Debugging' checkbox and then click on 'Debug' for your Add-on:

Nearly all debugging information will be displayed in this window, we will see later why only nearly.

Links:
> Web-ext tool
> Debugging on MDN

JavaScript!

For WebExtensions, all APIs live in the browser namespace. This means, that your scripts have access to an JavaScript object called browser which has methods for all default APIs and for all APIs that you have granted permissions to through the manifest. So, for example, if you would want to open a new tab from one of your scripts you could write browser.tabs.create({});

Note: Google Chrome uses the non-standard chrome namespace for its APIs. browser uses JavaScript promises as return values for asynchronous APIs, chrome uses callbacks. For cross-browser extensions there is a polyfill for the browser namespace that you can use in Google Chrome. Firefox supports both browser and chrome to make it easier to port extensions from Google Chrome. If you develop a new extension with cross-browser compatibility, use the browser namespace with the polyfill for Google Chrome.

There are three types of scripts in the WebExtension world:

Background Scripts are the highest level of script your extension can run. It has access to all default APIs and all APIs that you have granted through your manifest (such scripts are called 'privileged scripts'). Background Scripts run independent of of any tabs (in fact they even have their own content process in the new Firefox), meaning that it starts its life on browser start-up (or Add-on installation) and ends its life when you close the browser (or uninstall the Add-on). The Background Script also runs across multiple browser instances (e.g. you have more than one Firefox window open at the same time). So, Background Scripts are your go to choice for 1) heavy lifting (there is an API to detect if the user is idle, which could be a good time for heavy tasks! (Please, do not do crypto mining. Ups.) ), 2) enure features that work independent of websites, and 3) use privileged APIs. From Background Scripts you can also register to events such as website visits, and then programmatically insert a script.
Content Scripts are either inserted programmatically (e.g. through a Background Script) or inserted automatically (using the content_scripts manifest key) into a website. Once in, they can directly interact with the site's DOM. Content Scripts are not privileged scripts, that means they have only limited access to WebExtension APIs. Note: If you are unsure what your options are, you can find all APIs that are available to Content Scripts in this MDN article or you can always use a console.info(browser); statement and inspect its attached methods in the console.
Scripts from WebExtension UIs. These include pages from Sidebars, Page and Browser Action popups and Developer Tools. They share a similarity with Content Scripts in that they get terminated as soon as the popup/panel/sidebar is closed. Their debugging information is displayed in the debug window alongside your Background Scripts, and they are also privileged scripts. The fact that scripts that are executed within popups only live as long as the popup is open is a limiting factor. So, depending on your use case, it is very likely that you will also need a Background Script page.

You can access the scope of other priviledged scripts with browser.extension.getViews(), or the scope of the background script(s) only with browser.extension.getBackgroundPage()

Links:
> Differences between browser and chrome
> Anatomy of an extension overview (Background Scripts, Content Scripts, Sidebars, popups, option pages)
> More on Content Scripts

The number of APIs you can use is limited by 1) the permissions that you granted through the manifest and 2) if the script in question is either a privileged script (Background Scripts, Sidebar, Popups) or a Content Script.

Content Scripts can only use certain WebExtension APIs, but have also access to the DOM of the page they were injected in.

Privileged scripts have access to all WebExtension APIs (except for these that require permission, in that case only if you have specified the corresponding manifest key). In case of privileged scripts that have a HTML page with them (Sidebar, Popups) they have access to their DOM. Background Scripts can also access their own DOM, but it won't be rendered anywhere.

To get permissions in addition to the default ones, you can include them in the manifest and are then shown to users when they install the Add-on.

With added permissions, icons and a description, your manifest may look like this:


{
  "manifest_version": 2,
  "name": "Super Awesome Extension 👓",
  "version": "1",

  "description": "Super awesome Add-on for super awesome people.",
  "icons": {
    "16": "assets/logos/logo_small.svg",
    "32": "assets/logos/logo_small.svg",
    "48": "assets/logos/logo_small.svg",
    "64": "assets/logos/logo.svg",
    "128": "assets/logos/logo.svg"
  },

  "permissions": [
    "tabs", "storage", "https://awesome.com/*/", "notifications", "downloads"
  ]
}

UIs

Your Add-on can fully operate without any user interface elements (e.g. only a Background Script) but there is a good chance you will need some. Luckily the browser helps us with this. Here's a list of UI elements you can use in your Add-on:

Browser Action. This is an icon that is displayed in the toolbar, right next to other toolbar icons. When the icon gets clicked, an event is fired on your Background Script which you can subscribe to using browser.browserAction.onClicked.addListener(). Optionally you can also choose to display a popup when the icon gets clicked.
Page Action. This is an icon that is displayed in the URL bar. In difference to the Browser Action, it is only displayed on certain websites (that you can define). When the icon gets clicked, an event is fired on your Background Script which you can subscribe to using browser.pageAction.onClicked.addListener(). Optionally you can also choose to display a popup when the icon gets clicked.
Sidebar. This adds a sidebar (default on the left) and displays a normal HTML page (just as you would do with a normal website). In case of Firefox, threre is a global sidebar which has a dropdown for switching between sidebars. If you use this UI element, you side bar gets added to that dropdown.
Dev Tools panel. Yes, if you want to enhance Firefox' Developer Tools, you can.
Content Script. This is not directly a user interface component but nonetheless, it is a way to interact with you users. As explained further down, Content Scripts are injected into websites and can directly interact with the site's DOM.
Notification. Does what it says.
Address bar suggestion. This let's you listen for inputs in the address bar and then suggest links or actions. Pretty cool.

Browser Actions, Page Actions, Content Scripts (optionally), Sidebars, and Dev Tools are defined in the manifest and can then interact with your extension's (background) scripts.

Debugging popups

If you use a popup you will soon wonder how you can debug it, because it closes itself when it loses focus. That is, when you want to switch to the debug window while having the popup open, it will not work as you want. To overcome this we can "pin" the popups to where they are:

On your previously opened debug window, click the 'Disable popup auto hide' button. This ensures that the popups always stay on top (and do not close themselves as they normally would). Note that it literally always stays atop, even when you switch to a different application. Don't forget to disable this option again when you are done, (it is even saved across restarts), otherwise you will end up with lots of popups_.
On the button to the left from the previous, choose your popup target:
(The button says 'Select an iframe as the currently targeted document')

You can now inspect popups without a hassle.

Let's add a sample Page Action to our manifest:


{
  "manifest_version": 2,
  "name": "Super Awesome Extension 👓",
  "version": "1",

  "description": "Super awesome Add-on for super awesome people.",
  "icons": {
    "16": "assets/logos/logo_small.svg",
    "32": "assets/logos/logo_small.svg",
    "48": "assets/logos/logo_small.svg",
    "64": "assets/logos/logo.svg",
    "128": "assets/logos/logo.svg"
  },

  "permissions": [
    "tabs", "storage", "https://awesome.com/*/", "notifications", "downloads"
  ],

  "page_action": {
    "browser_style": true,
    "default_icon": {
      "16": "/assets/page-action/page-action-16.svg",
      "19": "/assets/page-action/page-action-19.svg",
      "32": "/assets/page-action/page-action-32.svg",
      "38": "/assets/page-action/page-action-38.svg"
    },
  "default_title": "Awesome Page Action!",
  "default_popup": "/page-action/index.html"
  }
}

Links:
> UI best practices
> UI elements:

Content Scripts only have access to limited APIs, but sometimes you need functionality that only privileged scripts can offer from within a Content Script. This is where the Messaging API comes in. The Messaging API is a simple way to communicate with your scripts. It doesn't matter if it is a Background Script, a Content Script, a popup or a sidebar.

To get started, you can use the following APIs:


// Sends a message to all privileged scripts (can be used by Content Scripts, but can't be used to send to Content Scripts)
browser.runtime.sendMessage(optionalID, messageData); 

// Sends a message to a Content Script (from a privileged script)
browser.tabs.sendMessage(tabId, optionalObject); 

// Receive messages sent via methods above
browser.runtime.onMessage(function);

Note: you can not communicate between background scripts because they all share the same scope (like a website). You can include multiple, but they are all executed in the same background context

If I use runtime.sendMessage() from a Content Script, then all privileged scripts (such as Background Scripts) will receive this message. But, if I have to send two different messages for two different tasks, how can I know which one is which?

You can also send objects in messages, so this is how I solved this issue:

/* EXAMPLE */


/* contentScript.js */

// Send a message. In this case, we send an object
browser.runtime.sendMessage({
type: "notification", // Include a 'type' property so the receiving scripts know what to do
data: { url: "example.com", numbers: [1, 2, 3, 4, 5] } // Some data you want to send
});

// ==================


/* background.js */

// Listen for messages
browser.runtime.onMessage(handleMessage);

// Handle received messages
function handleMessage( message ) {
  console.log( message.type )           // "notification"
  console.log( message.data.url )       // "example.com"
  console.log( message.data.numbers )   // Array[1, 2, 3, 4, 5]
}

By sending an object and giving it a type property, I can easily distinguish the notification from other messages the script may get. (Using type and data are just made-up properties, I could have used anything instead)

For more advanced communication needs, you can also use runtime.connect() and tabs.connect() which lets you build up a long term communication channel where you always know who sent the message.

Additionally you have the option to send a return value back to the sender:

/* EXAMPLE */


/* contentScript.js */

// Send a message. Assuming async function context, otherwise we would get a promise back
var returnValue = await browser.runtime.sendMessage({
type: "notification",
data: { url: "example.com", numbers: [1, 2, 3, 4, 5] }
});

// ==================


/* background.js */

// Listen for messages
browser.runtime.onMessage(handleMessage);

// Handle received messages
function handleMessage( message ) {
  // Do something with received message...

  // Return a "response" and fulfill the promise for the message sender
  return 42;
}

Links:
> JavaScript API overview
> runtime.sendMessage()
> runtime.onMessage()
> tabs.sendMessage()

Publishing

For you to be able to permanently install a Firefox extension you first have to sign it. This can be done on Mozilla's Add-on website. To get your Add-on used by people (a.k.a. publishing it) you have two options:

Upload it to Mozilla's Add-on site. This is probably the choice for most people. Your extension gets reviewed and is then listed and searchable on the site and you also get handy usage statistics.
Distribute it yourself. On addons.mozilla.org (AMO) you have the option to only sign your extension and not have it listed on the site. You can then distribute the signed Add-on yourself (e.g. from your website). To provide updates to the extension you then have to provide an update_url manifest key.

Notes about AMO

AMO only uses the icons from your manifest on first submission for their Add-on pages. This means if you want to change your icon that is displayed on AMO after that, you can only change it through their web interface. If you first uploaded your Add-on without an icon and then added them later via an update, you also have to add them manually through AMO (I really hope this changes sometime in the future. This only applies to the icons used for the AMO website, not for Firefox' Add-on manager or other places).

Also, I suggest you to have a well-fed 'More Information' panel. It really helps people with your Add-on and leaves a good impression on visitors. Provide a website (if your Add-on is open source, leave a link to the repository (e.g. GitHub)), support E-Mail, support website (e.g. bug tracker, forums, or 'issues' page on GitHub). Furthermore, you can add a license (MIT, GPL, etc.) and a Privacy Policy (this you will need if your Add-on gets bigger). Everything of these mentioned information can be added through the AMO web interface.

One last note, you can also have Beta releases of your Add-on on AMO.

"A file with a version ending with a|alpha|b|beta|pre|rc and an optional number is detected as beta."

So if your manifest's version is "1.2" and it is a pre-release version you can add one of the mentioned letters, e.g. "1.2a". AMO will then show you this option when uploading it:

Links:
> More info on publishing
> Mozilla's Add-on site (AMO)

Notes on self distributing

When you choose the self distributing route, you will very likely need a update_url key in your manifest. This is done in the gecko key in the applications key, as shows below:

{
"applications": {
  "gecko": {
    "update_url": "https://example.com/updates.json"
  }
}

The specified URL is a update manifest. This is a JSON file specifically used to tell the browser what the newest version is and where to get it.

Links:
> More on self-distribution
> 'applications' manifest key
> Update Manifest

More stuff

Internationalization (i18n)
Depending on the scope of your Add-on you may want to translate it to other languages, so that more users can use it in their native language. This is possible with WebExtensions. I suggest you to read this guide to get started, but the TL;DR is this:

All locales are located in a folder called _locales that is in the Add-on's root directory
Every language has its own folder within the _locales folder that is named with its appropriate language short code
In each language folder is a file called messages.json that contains all the strings for that language
You can get a localized string by calling browser.i18n.getMessage('yourStringYouWantLocalised') from a script.

Note that you have to translate your UIs (HTML pages) yourselves. This means, when an HTML page is loaded you will need some mechanism to apply the translated strings to your HTML. With my Add-on I solved this problem by giving each element in my HTML that is translatable a data-translate attribute. When the HTML page is loaded I have a small helper function called translate() that replaces the text contents of every element with a data-translate attribute. The function uses the value of data-translate to get the corresponding translated string that are specified in the messages.json files.

Forums
If you sometimes feel out of luck and can't find a way around, there is also an official AMO forum. I have no idea how I initially found it, as it is not something that is not easy to find.
You can go and have a look here.

Settings page
You may find yourself in a position where you want to make a settings page for your Add-on. The first step is to specify an options_ui key in your manifest. In that you can put a page key and specify an HTML page like so:

{
  "options_ui": {
    "page": "settings/options.html",
  }
}

Now when you visit your Add-on's page in the Add-on manager, you will see your specified HTML page at the bottom. In here you can add some form elements to let the user choose their preferences. Two things to note:

You will have to actually save the settings. This can be done with the Storage API: browser.storage.set()).
When loading the settings HTML page you will have to initialize the input elements to their stored values. To get values from storage you can use browser.storage.get().

Links:
> AMO forums
> Storage API
> Settings page guide
> My approach to translation
> Link to my translate() helper function

In Firefox 57, Mozilla dropped legacy extension support completely in favor of this new architecture. Before WebExtensions - as a developer making Firefox extensions - you could also use browser internal stuff. This led to a poor compatibility experience as things could easily break with updates and oftentimes there was no documentation for these internal functions. Mozilla tried to ease the development by providing an SDK, but it still wasn't perfect. So nowadays, writing a WebExtension is the only way to get a working Firefox Add-on.

Phew! If you made it this far, congratulations! Writing this article was not easy but also lots of fun. If you have any question or I left something unclear, please leave a comment and I will gladly answer. Thank you.

There is much more possible with WebExtensions than I could have possibly show in this post, so be sure to check out all the APIs and manifest keys on MDN.

The Add-on I was talking about in the beginning (and that is shown in the GIFs) is Trello Super Powers. It is a simple extension that adds some nifty features to your Trello boards. And by the way, it is open source, so you can check it out on GitHub

Use hyphenation on Dev.to?

Christian Kaindl — Tue, 19 Dec 2017 09:46:08 +0000

I think it would be cool to have articles use hyphenation, so their lines are more similar in length.

p {
  hyphens: auto;
}

This can be done with CSS today and has basic support from all major browsers. And hey, if a browser does not support it, it's fine, sentences will be displayed just fine. I guess that is the definition of progressive enhancement :)
With a simple @-rule it could be used together with text-align: justify! <-- This looks totally awesome and professional. #cutting-edge :)
Hyphenation documentation on MDN

I recently read an article where it was used and I was surprised this is already possible, so I think it would give a really nice experience to most people even though it is only a small addition ❤

What does everybody else think on this?

Bases Explained Part 1 - Introduction

Christian Kaindl — Thu, 14 Dec 2017 11:22:43 +0000

In this series, Bases Explained, I want to dive into the various aspects of bases. At the end of this series, you will be able to know what they are, how to convert between them and why they are awesome.

I suspect all of you have at least once touched upon the mathematical term "base". Things like binary and hexadecimal are probably familiar to most of you, but how good do you really know them? I mean, who can't use a hex color code, right? Well, some time ago I explored bases a bit more and I want to share my learnings with you.

Positional notation

At the heart of the concept of bases is the positional notation. That means, depending on the position of a digit within a number, its value is different. 1 from 100 is different than 1 from 1000. The more a digit is on the left side of a number, the higher its value.

This principle is the same throughout all bases. Base 3, 7, 4, 8, 342. They all share this common theme.

The term base in the context of numerical systems actually means "How many digits are used in this number system?" That is, base 2 has 2 digits, base 16 has 16 digits, base 10 has 10, and so on. The digits always range from 0 to one less than the base (e.g. 0-9 in base 10).

With these two things in mind - positional notation and number of digits - we have the building blocks to find out how bases work. As we'll see later, it is just mind blowing when you try to completely think in a different base system, or to imaging that you always thought in a certain base system. Would you see the world differently?

There are infinitely large amounts of bases out there, so it is definitely time to find out.

Bases are important

There are a number (ʕ•ᴥ•ʔ) of reasons why different bases are used for different jobs. It is very easy to think that bases are something abstract or only math related, but the reality is they are not only pretty damn useful, but they also bring a mental value once understood. In the end, we use numbers all the time, oftentimes without even realizing. So being aware of the power that this fundamental concept of our numerical system has can really step up your life-game.

Some applications of bases:

Electronics
Computers use, at their lowest level, base 2 systems to process data. This is due to a restriction in the hardware, e.g. logic gates are either on or off; nothing in-between. It is downright incredible that with just enough zeros and ones, you can have so much flexibility that all these crazy technologies that we use today can exist.

Storage
Storage devices leverage higher base systems, such as base 16, because it allows them to save much more data at less length. Compare 100000002 to 8016. They represent the same data, the latter one is just much shorter.

It's fun
Simple and plain, it's worth playing around with. And getting your head to think in other base systems is also cool. Finding patterns in conversions to other base systems is even more fun! Take the number 100 for example. You can take this number and interpret it in different base systems. 1002, 1003, 1004, etc.

Each of them translate to a different value (when viewed from base 10). 1002 = 410, 1003 = 910, 1004 = 1610. It is really fascinating to see just how relative our base ten system is.

Cultures
Different cultures have historically counted in different base systems. It is a mere coincident that our western culture uses the base 10 notation (some say we chose base 10 because we have ten fingers). Other cultures have used other systems as well such as base 12. That is most likely where words like "a dozen" (meaning 12) come from. But also, some languages such as english have even unique names for the 11^th and 12^th digit: eleven and twelve.

I want to dive into the math of bases a bit deeper in Part 2, e.g. how to convert between them.

Fun fact: you can count to 1 thousand using your two hands.

PS: Bonus points for everyone who can decipher the numbers in the header image.

Things the web can do

Christian Kaindl — Wed, 15 Nov 2017 09:02:47 +0000

Sometimes I stumble upon a rarely discussed feature or watch a CSS talk that has only 451 views or I am looking for a specific feature on MDN and see some awesome JavaScript API. I love these times, it feels great to explore new things that I don't know about yet. But at the same time I always think something like: "Why hadn't I heard of this before" or "Wow, Everyone should know this!" or both of them.

So, that's exactly what this post is about. Awesome features that I think are less talked about:

HTML

output tag
ins tag

CSS

element() function
border-radius slash(/)-syntax

Intl object
Performance interface

Let's start with...

`Performance` interface

Yes, you read that right. The browser has a native interface that let's you do precise performance measurements. The important part is precise, as it let's you do measurements simply not possible with normal JS methods (like Date.now()). It lets you measure time to microseconds. Microseconds. Not Milliseconds, but a thousand of that!

You can also do all sorts of things like marks and highResTimeStamps and gives you a better alternative to Date.time() with Performance.now(). Definitely worth a look!

MDN documentation for the Performance interface

`Intl` object

Ever did a project where you had to deal with number input, or had to display a date in the right format? Well, JavaScripts Intl object is for you.

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

MDN documentation for the Intl object

`border-radius` slash(`/`)-syntax

Ok, so when I first saw this, I could not believe my eyes! I was using Enki to make my daily knowledge workout and then:

You can curve the x and y axis of a corner independently. That is awesome! Why? I immediately thought about an article I read some time ago (and gladly I had bookmarked it!) about optical illusions:

(from https://medium.muz.li/optical-effects-9fca82b4cd9a)

Further down a comment wrote:

[...] In the olden days we had to slice up corner images and use a lot of markup for rounded corners on elements, then border radius made it a lot easier, now to get optically correct rounded corners we’d have to go back to complex markup and background images.

But maybe we can use this slash-syntax to create these 'rounded' corners that also appear round! (Edit: Sadly its not possible with the slash-syntax, but it's interesting anyway )

MDN on the border-radius /-syntax

`element()` function

This is yet another awesome feature CSS has up its sleeve.

Vincent De Oliveira wrote:

To put it simply, this function renders any part of a website as a live image. A. Live. Image! As you see a DOM element rendered right in the browser, you’ll get an image of it. Every changes to that element will be immediately seen in real-time in the image, even text selection.

Some of the possibilities that element() would enable are thumbnails/previews and mirror-like effects. Sadly though this CSS feature only works in Firefox and can thus not be used for production purposes. Hopefully other browser vendors will follow the early efforts from Firefox at some point in the future!

(Credit Vincent De Oliveira)

Read Vincent De Oliveira's full article

`ins` tag

The HTML ins tag represents something that is/was inserted into the current document.

From MDN:

The HTML <ins> element represents a range of text that has been added to a document.

This is a useful tag if you are picky about your markup (as you should be!) because you can use it with an additional cite and/or datetime attribute. cite let's you add an URI which explains the change and datetime let's you add a timestamp for when the change happened.

`output` tag

Similar to ins, output should be used for content that is the result of an equation. Nothing special, but still cool!

Coding and Education

Christian Kaindl — Sun, 05 Nov 2017 12:02:20 +0000

About two years ago I started learning HTML. I was sitting at home in front of my computer, looking at some W3Schools tutorials. When I first started with HTML I asked a friend of mine how it works but could not make much sense out of what he said, but managed to crawl my way through. Then, after HTML came CSS. Same pattern. W3Schools tutorials and (from today's perspective) laughable attempts to create anything with it that seemed useful.

Two years later, I am happily enthusiastic about the web. I learned a lot about HTML, CSS and also JavaScript along the way and I now know that this is my way to go. I learned to love the web so much I often cannot stop talking about it, but not only because I think it is an absolutely mind-bogglingly amazing platform, but also because I see it is missing in my everyday world.

I work in an education project - there's not much "software development" going on - and this field of technology, almost everything that has to do with coding, or computers or technical things seem so far away for the people I work with every day. In some sense, this whole "software development" thing seems to have such a huge bubble, and often I wish that it wouldn't. Coding - and everything that appends to it - is such a useful mental property to have. It is, in my opinion, not about the ability to create something - although that sure is also useful :) - but more about the value that it has for someone's thinking.

I think everyone should learn how to program a computer, because it teaches you how to think.

Steve Jobs, 1995

Now, that is true not only for "technical" things like coding but also for other professions that are not taught in school (actually also the ones that are taught in school!). The bare presence of such highly specialized fields often makes people think "This is only a thing for [insert group of people that are underrepresented in most general education systems]".

I see the focus is changing in a new direction, people are now actively looking for alternatives to this kind of gaps in teaching. One does not have to be an expert in every field, but I'd argue that is it from high value to have an understanding and feeling about why a certain group of jobs are important to our society and myself. That is vital in my eyes. How could a society ever work when there are job groups that most people don't really know why they are important for them. That is what education should essentially do.

It is a bit like the code-comments debates - that so many exist of: "Comments should explain the Why, not the What". And I think for a majority of the time that is spent in early education this is exactly what is important. If you learn to value other peoples work by default, I think you, as a child/teenager/adult, will have it easier when looking for something you want to do in your life. Also you can have the trust that people will be able to look at what you do and find out why it is also from importance for them - and if not, have a conversation about it.

Now you can see one problem with this different approach: We would have to change the way we teach society (not only our children) and this would mean to drastically alter the institutions that are responsible for education. Because: I personally think it is hard - if not really hard - to understand the vital importance of a groups existence if this group is not present. Meaning that a random person that tells e.g. a child that engineers are important won't have a direct, deep, impact to it. The work, ethic and enthusiasm from that group, let them be engineers, coders, managers or whatever group you like, has to be somehow present for someone to really believe that this group's work is valuable.

Schools nowadays, at least where I live, are very isolated environments. A huge portion of job-fields are underrepresented or even completely absent. So there is this strange isolated thing called school (schools aren't bad, they just can be improved) which mostly tries to solve the What and is oftentimes very old-school (pun not intended) in what it teaches. Now, here's the thing, and why this has to do with a coder/hacker community: I see that communities like dev.to and platforms like the web, are missing as a mental value for a lot of people. A huge industry has formed over the last decades, but education systems have not yet adapted fast enough.

And this kinda hurts me. Really, really, deeply, because - and this is the actual reason for this writing - the web is so awesome. I cannot emphasize how much I love it. Just think about it: A platform that has evolved - and this is truly amazing - over the last 25 years, maybe now the biggest shared resources of humanity; With an unbelievably amazing, open environment, has now (from 2016 and ongoing) reached a point where it is mature enough so you can write first class, native like, blazing fast awesome applications like you could never before. PWAs - instant 'ad hoc' experiences on the fly. And unlike platforms like Android and iOS (and macOS and Windows and ...) there are 4 (!) major implementations of the technology stack! WHAT THE FUCK! How amazing is that?. 25 years, so far, have formed the web in a way that no one could have ever designed it to. It is a gem by every means and is having an exciting future with mature decentralization technologies right around the corner.

And the community... I cannot thank everyone - the countless open source projects that drive powerful innovation and that I discover more of every day, communities that are so welcoming and countless people that helped make it a great platform - enough... It is just really beautiful! And I want to deepen my involvement and want to contribute to this platform and its communities as much as I can. That's why I cannot stop being enthusiastic about it, and that is why I cannot stop talking about it, and that is why I think it has a valuable mental value - even to people that do not actively participate in it - for everyone. And that I see is greatly missing in society. It is one part of the hundreds of parts that can ultimately change how we perceive and act in this precious (very precious) world.

And that is the reason I wrote this. <3

I think there is a lot more to say and I would love to have some conversations about education and coding (maybe in the comments c: ). I tried not to write my viewpoint as an absolute, but in the end lines are scarce and it is difficult to always bring that thought down as I meant it. Also, education often is a hot topic so I would love to extend myself a little more if something is unclear.

The strange gap in HTML

Christian Kaindl — Sat, 23 Sep 2017 10:27:43 +0000

There are many frustrations that I have had in my short dev game so far, and one of them crossed my eyes very recently again while I was working on a small project of mine.

It is this strange gap when using the HTML <img> tag that made me go wild already quite a few times:

But not this time!

The solution

The reasoning and the solution to this problem is actually really simple and has to do with the text of the box.

Wait, what? There is no text in the picture!

Brace yourself:

As it turns out, img elements are by default inline elements. This means they basically flow the same as text. As such the bottom edge of the image is aligned with the baseline of the font that is specified with the font-size attribute.

Mystery solved! Here's how you can fix this issue:

Solution 1

On your image, set vertical-align to bottom, top, text-top, text-bottom or middle

Solution 2

Set your image to display: block (Then you also have to specify a width for your image or otherwise everything will fall into the next line)

Edit: You can also fix this issue while using more modern techniques. So, setting display to flex or grid (also needs a width to be set), or their inline counterparts inline-flex and inline-grid will also work while giving more flexibility as display: block (and also work when applied to the image container).

Solution 3

Don't use images all together (makes your site faster)

Solution 4

Maybe this is exactly what you want! Aligning an image or small icon within your text flow on the baseline couldn't be easier!

Solution 5

Set the image container (parent) to line-height: 0 (does not work when the container is an inline element) or font-size: 0 (always works)

Solution 6

On the image, set float to right, left, inline-end or inline-start

In the end the "mysterious image gap" isn't that mysterious at all, and still, it is quite interesting where such simple frustrations can lead. After all, I have a more thorough understanding how inline elements behave now.

Here are some more resources if this wasn't enough:

http://gtwebdev.com/workshop/gaps/image-gap.php
https://developer.mozilla.org/en-US/docs/Images%2C_Tables%2C_and_Mysterious_Gaps
or just search for "html img gap" or "img tag gap" in your favorite search engine and let the thousand Stack Overflow issues sink in your mind

Thank you for reading :)

Edit:

If you want to find out more about the details of HTML layout
You may also want to check out the HTML reference on the Mozilla Developer Network.

Some further reading: