DEV Community: Jad Joubran

Exploring CSS' new "if conditions"

Jad Joubran — Thu, 10 Jul 2025 09:36:15 +0000

CSS now has an @if rule that lets you add conditional logic to your declarations.

In this short 8-min video, I explore how and why it can be used.

Progressive Web Apps tutorial from scratch

Jad Joubran — Thu, 06 Sep 2018 14:42:51 +0000

The modern web is super exciting. There's a whole new range of possibilities for us web developers thanks to a set of new Web APIs, collectively popularized under the term Progressive Web Apps.

When somebody asks me what is a PWA, it's always hard to come up with a concise definition that doesn't include a lot of technical terms. However, I finally came up with a definition that holds true in most scenarios:

A Progressive Web App is a modern Website that consistently delivers a superior User Experience. ✨

The reason why I think this holds true in most scenarios is because it covers most of the technical features possible by PWAs. Here's an example:
Making your website work offline is about the User Experience. If your user gets interrupted with the Offline Dinosaur because they briefly lost connection, then this is a bad User Experience.

Everything revolves around User Experience.

How do you learn it?

Now the big question is, how do we learn Progressive Web Apps?

Here's why I have an extremely important 3-step recommendation:

Set your front-end framework of choice aside
Learn Progressive Web Apps from scratch
Apply what you learned in PWAs to your front-end framework

Front-end frameworks are great, but the web platform has been moving so fast that we as web developers need to keep up with it by understanding how these new Web APIs work.

Having a wrapper on top of these APIs is great for productivity, but terrible for understanding how something works.

This is exactly why I recorded a free video series on YouTube that teaches Progressive Web Apps from scratch. We start from a repository with a simple index.html, app.js & app.css all the way to building a simple PWA.

Watch the 📽 PWA Video series for free!

Code to go: helping you find updated snippets for common use cases

Jad Joubran — Sun, 17 Dec 2017 16:21:47 +0000

Code to go is a website that aims to help developers learning JavaScript find up to date, accurate and ready to use snippets of JavaScript for common use cases.

The motivation behind Code to go is that if you're teaching somebody JavaScript in 2017, they will most likely search on google some simple questions, such as:

How to split a string into array of characters in JavaScript

However, this search result will yield a Stackoverflow question that was asked 7 years ago, marked as duplicate and that has an accepted answer that recommends using split('').

While it may not be a big deal to use split('') here, the learner will immediately lose their confidence of finding the correct answer here, as the comments clearly state that they should not be using split('').

I realized that there's a gap that stackoverflow isn't able to fill, which is providing short snippets of code that are ready to be used, especially by beginners.

And this is exactly what Code to go does.

Answers presented on Code to go are most of the times self-sufficient. They can be understood easily and they represent generic scenarios which allows the developers to adapt those snippets to their own scenarios.

At the time of writing, Code to go has 50 use cases that you can browser or search for.

We are planning on adding more, however our top priority is to maintain quality rather than quantity.

You can also suggest a Use case if you couldn't find it on the website. You can simply click on the Contribute button or head over to the github repository and create a new issue.

It's also important to mention that Code to go does not aim to replace documentation. Whenever possible, our answers link back to the official Mozilla Developer Network documentation like in this example below.
This allows the answers to be easily absorbed by beginners while also letting them dive deeper into the documentation.

I hope you this makes learning javascript even more enjoyable!