As a frontend CoP (Communities of Practice) core team, my colleague and I create the frontend developer roadmap, hoping this would be the learning path for frontend developers in the organization.

Disclaimers

  1. This roadmap is inspired by roadmap by Kamran Ahmed.
  2. This roadmap is developed under frontend CoP of FLCIT organization so it might not necessarily reflect other organizations or the whole company. The roadmap is somewhat related to the organizational context. For example, we put GraphQL at the later of the roadmap as we haven’t seen any adoption. Another example, we put the starter kit in the roadmap because our…


this is a subtopic of “Create a website calling for democracy in Thailand with Svelte and Azure Static Web Apps

This image is adapted from File:010-Democracy Monument.jpg by Photograph: Nawit science

What is Azure Static Web Apps?

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

from Azure Static Web Apps documentation


React Hooks is a course by Kent C. Dodds and is part of Epic React

Disclaimers: the purpose of this article is not to summarise the course content nor review it, but to make a note on how it affects me.

What I forgot to mention in the previous blog is my impression on the learning structure — it made me feel like the time I was in the university where I need to read the assigned articles and do the courseworks.

Point#1 What impresses me is not the main contents

As expected, the main subjects are about the common hooks, i.e., useState, useEffect, custom hook, useRef. What I…


React Fundamentals is a course by Kent C. Dodds and is part of Epic React

Disclaimers: the purpose of this article is not to summarise the course content nor review it, but to make a note on how it affects me.

I found the following points make this course interesting and different than others.

Point#1 This will be compiled down to common Web APIs

Instead of going straight to React API, this course aims to create the mental model how React is working underneath the hood. Let me give an example from the course:

  1. The course starts with how to use Web APIs to insert the text element in the…


Just JavaScript is a course provided by Dan Abramov, known as a member of the React team, and a co-author of Redux and Create React App.

stars floating in the sky are the analogy to Javascript primitive and non-primitive values

Disclaimer: the purpose of this article is not to summarise the course content nor review it, but to make a note on how it affects me.

I found out that the main goal of Just JavaScript is to (re-)create my mental model how I perceive Javascript primitive values and non-primitive values.

The author illustrates the concept of Javascript primitive and non-primitive values by analogy with the stars floating in the sky i.e. primitive values…


this is a subtopic of “Create a website calling for democracy in Thailand with Svelte and Azure Static Web Apps

In this blog, I will show you how to layout the the page into columns and rows and let the grid items automatically flow into columns and (if overflow) wrap into new row(s).

This can be simply achieved in couple lines of codes with CSS Grid Layout.

CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. (Chris House, 2021)

Requirements

Per below, I…


this is a subtopic of “Create a website calling for democracy in Thailand with Svelte and Azure Static Web Apps

Reason from migrating from JS Date objects

When I look at the code, it is so confusing that I need to keep incrementing the month value by one before I can translate it into the actual month. The concept is not natural, at least for me. Look below example, Jatupat Boonpatraksa aka ‘Pai Dao Din was jailed on 8th March 2021 and was freed on bail on 23rd April 2021.

  • new Date(2021, 2, 8)=>month value is 2 => increment by 1 => 8th March 2021
  • new Date(2021…


this is a subtopic of “Create a website calling for democracy in Thailand with Svelte and Azure Static Web Apps

In this blog, I will show you how to use {#if...}expression and {#each...}expression to display the images of each Thai pro-democracy activists.

images of Thai pro-democracy activists
  1. Download images from https://drive.google.com/drive/mobile/folders/15SmPO5AQKhHzylszDeWDFH0JJ7z1O87f?usp=sharing and put it in the /public/assets folder. Rename the image file names to person nicknames e.g. pai.jpg, ammy.jpg, penguin.jpg. Later, I will use the person nickname to dynamically refer to image file in the markup.
  2. Replace the personobject with array of person object — and name it people. Notice that I add 2 more…


this is a subtopic of “Create a website calling for democracy in Thailand with Svelte and Azure Static Web Apps

I am using Svelte to build the web application.

Svelte and SvelteKit

What is Svelte?

Svelte is a component framework — like React, Vue, or Angular — but with these differences that make Svelte shine out.

  • Write less code: from an example in the article, to create the component that receives two user inputs and prints the sum of these inputs, React and Vue takes 442 and 263 characters respectively while it can be done in 145 characters in Svelte.
  • No virtual Dom: Svelte takes different…

Totsawin Jangprasert

Lead Developer at ExxonMobil. Passion in frontend development. Love minimal design, travelling, reading, watching and Wes Anderson. Support Thai democracy |||

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