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…

Since July last year, at least 581 people have been charged in connection with political activities related to the protests, such as taking part in rallies or posting supportive comments on social media, according to Thai Lawyers for Human Rights.

At least 82 people face cases under Thailand’s lese-majesty law, which states that anyone who “defames, insults or threatens the king, queen, heir apparent or regent” can face up to 15 years on each charge. UN rights experts have previously said such laws “have no place in a democratic country”. (The Guardian, 2021)

The protests in Bangkok drew hundreds of thousands of people to the streets last year. (Adam Dean for The New York Times)

Two Thai students imprisoned for leading mass…


These are my recommended collection of Micro Frontends related materials

MartinFowler.com / Cam Jackson

Cam Jackson is a software developer and consultant at ThoughtWorks.

Recommend for those: who are new and would like to understand Micro Frontends concept in one place.

Micro Frontends by Cam Jackson

Blog Posts

  • Micro Frontends
    My feedback: This article is highly recommended for me. If someone asks me about micro frontends, this is the very first in the list that I will refer to. This article does not focus on any approach specifically, rather it tries to discover all possible ways to accomplish as well as analyse pros and cons of each approach. This is suitable for everyone — those who want to start implementing micro frontends…

Background

“One of the natural wonders of this area are the huge strangler figs. They seed in the upper branches of a tree and gradually work their way down the tree until they root in the soil. Over many years they grow into fantastic and beautiful shapes, meanwhile strangling and killing the tree that was their host. … This metaphor struck me as a way of describing a way of doing a rewrite of an important system.” wrote Martin Fowler.

What I use?

  • Design Pattern: Strangler pattern
  • Technique: Micro frontends
  • Integration approaches: Build-time integration via Web Components
  • Package custom elements (also called Web Components) from Angular framework: Angular elements
  • Repository: Monorepo
  • Development tool: Nx

Why rewriting?

My company would like to rewrite the application from the existing monolith legacy application (AngularJS). There are many good reasons why we need to do that:

  • Long Term Support: The framework (AngularJS) will end of LTS in December 2021. There is no easy way to migrate AngularJS application to Angular without rewriting.
  • Software Regression: The legacy application doesn’t have the unit tests (or have very small amount). There is…

This is the how-to tutorial to generate custom element with Angular elements and inject into the legacy AngularJS project as well as pure HTML and vanilla Javascript.

Disclaimer: This article is adapted from “[Tutorial] How to create Custom Angular Elements?” by Alain Chautard. The additional steps are added for the build-time integration with vanilla Javascript and legacy AngularJS application

Prerequisites: I assume you have Node, Npm, and Angular CLI installed. If not, please follow the Angular document.

What are Angular elements?

Please see the description from Angular.io

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

Custom elements are a Web Platform feature currently supported by Chrome, Edge (Chromium-based), Firefox, Opera, and Safari, and available…

Totsawin Jangprasert

Team Lead at ExxonMobil. Have 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