Image for post
Image for post

In the mid 2018 I have played with Parcel to build a VueJs Progressive Web Application (PWA).

Back then it was kind of quirky to do so.

Reworking on it, I can tell how it compares with Webpack and and how Parcel improve its PWA experience.

Reminders

If you’re already familiar with the title, you can skip this part 🥳.

Progressive Web Application (PWA)

To be very very short a PWA is a website that use a certain set of web technologies in order to be used like a regular iOS/Android application.

To dig a little more into it:

  • it’s not restricted to mobile device
  • it’s not restricted to any framework, it just needs to use web…


Image for post
Image for post

In the first and the second part we’ve seen the basis of how to write an HTML document.

Now we’re going to play with that and expand our HTML document.
This will help us to learn more about HTML and how we can easily make it more accessible for people with disabilities.

Enhance with more HTML elements

Image for post
Image for post
A very inspired author

Why not showing who wrote this amazing piece of art? (short answer: me)

If we look which HTML element seems the most appropriate, we can see that <address> seems the right one.

The HTML <address> element indicates that the enclosed HTML provides contact information for a person or people, or for an…


Image for post
Image for post

You’re ready to make your new application.
You take Vue 2 as your framework

But you want your application to be:

So you decide to make a Universal Web Application with Nuxt 2 & Koa 2
It will:

  • fasten the first rendering
  • be able to run without JS activated on the client side

Notes:

  • You will need to be familiar with Koa/Nuxt.
  • Be aware that both Nuxt and Koa use the concepts of context (ctx) & middleware. …


Image for post
Image for post

Vue.js is a solid option for building web applications.
To use it we have two major tools:

  • Vue CLI 3 the Standard Tooling for Vue.js Development
    The official solution to quickly setup a Vue application.
  • Nuxt Universal Vue.js Applications
    Yeah, we will talk about that.

But how dœs Nuxt differ from a Standard Vue Application?

[TL;DR]

[UPDATE] use now Nuxt 2

installation

There’s two ways Nuxt can be installed:

  • with vue-cli
  • a basic npm install nuxt or yarn add nuxt if you’re a yarn person, create some folders and add some modules if you want to use…


Image for post
Image for post

Both React 16 & Vue 2 are Javascript libraries that solve the same issue: writing components which are kept in sync with your application’s state.

Having used both of them lately, here is my opinion on the main differences between them.

I’m not trying to convince anyone of which one is better here, but more to describe how comfortable I was while learning & using them.
When it’s about making stuff, just choose your preferred tool (if you have the choice).

[TL;DR] Vue feels more webby and React more tecky (If that means something 🙃)
And coming from a web-developer background, I feel using Vue is more natural for me. …


Image for post
Image for post

In this era of libraries needing a build step (even if you can use them without it, c’mon it’s better to do so) I want to talk about the parcel bundler.

The baseline is: Blazing fast, zero configuration web application bundler.

How this holds up?

The history of bundling

I feel like it’s important to know where we came from before talking about what Parcel is trying to solve.

That’s my personal take about how we get there 🤓

  1. In the beginning, bundling wasn’t a thing: just reference javascript/CSS files in your HTML and you were done (the good ol’days in a way (but damn I hated IE6)). …


Image for post
Image for post

If you want to handle a SQL Database in NodeJS, you may want to use Sequelize.

It’s a nice ORM with a promise based API that makes it easy to:

  • defines models
  • defines relations between those models
  • retrieves those relations when accessing an instance.

But I find it hard to handle COUNT and SUM functions inside instances even
after reading issues, trying without success to find the Sequelize way®.
Nothing was working for me 😭

And so this is the story of how I solved it with squel, a SQL query generator

  • Some knowledge into the sequelize API will really helps understanding this article…


Image for post
Image for post

With html basic (part 1) we’ve seen how to:

  • use a proper text editor to create and edit a HTML document
  • what is a HTML element

Now we will see how to build more upon that!

What can we improve?

  • A more detailed article, like enumerate the toys
  • Add an image
  • Add a title to the page

Enumerating toys: nesting HTML elements

Image for post
Image for post
An amazing cast

It could be nice if we make a list of toys 🐑
Something like:

  • a bunch of sheep
  • a shepherd
  • a dinosaur
  • a wolf

How this translate to HTML?

Semantic of ul & li

As seen before, HTML elements carry a semantic value:

  • ul stands for unorganized list (unorganized because it’s bullet points and not a numeric…

Image for post
Image for post

There are a few nodeJs web frameworks, and one of the most popular ones is express.js. I want to explain why I decided to move from express.js to koa, when writing server code.

To understand this article, you should know about:

TL;DR

With NodeJS version 7 came the support of async/await function.
Koa just plays more naturally with them ➡️ use Koa.

Express

We will write a simple route that will:

  1. query a database to get some…


Image for post
Image for post

As seen in basic web understanding the HTML file is the backbone of a web-page.
The purpose of this post is to have a better understanding of those, and how you can write a simple one!

Like on the basic understanding, I will omit some stuff to keep it simple.
As more posts will be published, we will clarify those 🤓

Why HTML?

Every device (computer, mobile phone, TV…) has a web-browser. So it’s the most universal language you can learn!

With it you can make:

  • blog
  • sales sites
  • video games
  • books
  • and a lot more!

And it also can be read by people with disabilities! …

About

hiswe

A full stack javascript developer who like to draw

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store