Skip to content

Instantly share code, notes, and snippets.

View LucienLee's full-sized avatar
🦌

Lucien Lee LucienLee

🦌
View GitHub Profile

Definitely, CSS Grids is most expected feature in production enviroment. The reason behind that is Grids free us from one way flow layout to two dimensions layout, which enable more creative and possibility on web design. In the pass, we layouted element in normal flow and exploited float and absolute positioning to get more complex layout. That limited us think layout as flow stream, which is from left to right, top to bottom. To make complex layout, we had to used absolute positioning and calculate the position in js.

Grids change that in more elegant way, like table layout but more responsive, flexible and semantic. We could think layout as a two dimensions cells grid(table) and align elements by specifying the cells, which is more intuition and clear. The best part is that cell size is responsive. For exmaple, minmax() could assign mininum and maximum of grid size and fr unit provide the way to assign partitions of each grid cells.

Moreover, grid-gap provide elegant way to set gutt

@LucienLee
LucienLee / anomalies.js
Last active August 6, 2021 07:14
JavaScript Anomalies
/* Closure */
const buttons = document.getElementsByClassName('three-buttons');
for (var i = 0; i < 3; i++) {
buttons[i].addEventListener(function(){
console.log(i)
});
}
// Click 1st button -> 2
// Click 2nd button -> 2
// Click 3rd button -> 2
@LucienLee
LucienLee / longest-bi-value-seq.js
Created July 17, 2019 11:23
find longest bi-value sequence
function solution(A) {
let mark = new Set();
let curLength = 0;
let consecutiveSeq = 1;
let allSeqLength = [];
for(let i = 0; i < A.length; i++) {
let num = A[i];
if (!mark.has(num) && mark.size < 2) {
curLength++;