voronoiJS_introduction

Posted on 2021-11-11 Edited on 2021-11-12

Hey, it’s been a while since the last time I updated my blog. I spent some time learnig html, css and javascript. Though I am still in a very beginner state, I feel like I would like to learn some interesting code I randomly found. Try to breakdown to see what I can learn from them.

The article is about implementing Voronoi-Diagram in Javascript. The resource can be found here.

AEC_Hackathon_@BLOXHUB_2021

Posted on 2021-11-04

Preface

I found this recently hosted AEC hackathon video. To be honest, this will be the first hackathon I knew in AEC industy was held.Just want to memo down some interesting ideas from each project. Oh also, I heard the Glodfinger was the big winner of this event. I would like to dive deep into there source code in near future, and I might write some other posts for that topic.

Sunday Programme

Pollution Solution

People from A to B, might consider not only the distance, but also the air quality as well.

Find alternative routes where pollution levels are significantly lower
Algorithm taking the Google pollution data into account.

How we got here

Google pollution data
Making a graph network
A* shortest path

Readapt

https://readapt-a2656.web.app/

Reuse of components off-site

Reduce
Reuse
Recycle

Scenario 1

Adapt components to building

Scenario 2

Adapt building to components

What is LCA

https://tenbou.nies.go.jp/science/description/detail.php?id=57

Procyon

Fuzzy Bunnies

Fuzzy Logic: Mapping off data

Why

We want to find a way to make LCA/ LCC faster regardless off data with spelling errors or disrupted data.

We know from our day-to-day work in AEC industry in the AEC industry that the data in our BIM-models is sometimes a bit fuzzy/ fluffy/ messy.

https://www.sciencedirect.com/science/article/abs/pii/S0926580518309841
https://www.wbdg.org/resources/life-cycle-cost-analysis-lcca#:~:text=Life%2Dcycle%20cost%20analysis%20(LCCA)%20is%20a%20method%20for,a%20building%20or%20building%20system.&text=Lowest%20life%2Dcycle%20cost%20(LCC,interpret%20measure%20of%20economic%20evaluation.

Learn Carbon

Hypar-Hygge

Goldfinger

LBD hackers

AFRY

Paper Sketch

Google Air Quality

Domovoy

Why Linux Is Better For Programming

Posted on 2021-11-03

Preface

Recently, I found myself tend to absorb some general knowledge in tech-field at late night. I got company with Lofi music from Spotify. This post tend to note down some benefits for programmer switch to Linux instead of other OS, for say Windows or MacOS.

I’ve had this rough ideas about those great programmers tend to work in pure text, command line enviroment a lot, not saying they don’t want to use GUI, it’s just faster if both hands can stick on their keyboard and get everything done.

Resources

https://www.youtube.com/watch?v=otDOHt_Jges

7 things programmers appreicate about LINUX

Security
Improved programming workflow
No rebooting
Powerful Programming tools
Task automation
Performace
Useful Error Messages
(secret one) customized enviornment

Security

LinuxOS is open source, meaning anyone who want to can look at the source code.
Although this might mean anyone who want to attack the other’s machine can find the system flaw easily, it turns out become harder to hack in. Because Linux is a famous OS, thousands of other programmers run the code on their local machine,and they don’t want someone can get a way hack in, they patched the flaws once found it.

Improve programming workflow

For example, if you want to install something:

The scenario in a linux machine will be

1	sudo apt-get install whatever-you-want-to

However, if you are in a MacOS or Windows.

you might need a package manager
Or find the correct link on the correct webpage
click several button while installing
might need to restart your machine

As a developer, we constantly install things and linux make this procedure less pain.

No rebooting

Linux can update the entire whole Operating System without any reboot.
This is neither possible on MacOS nor Windows.
This no-rebooting thing is one of the reason why linux is choosed for running most of the servers.

Many Linux servers on the Internet have been running for years without failure or even being restarted.

Powerful Programming Tools pre-installed

GREP
wget
_corn

Task automation

Linux lend itself very well for automation.
one-liner means short little scripts that you write to automate a task.

Performace

Linux is not neccessary faster than other OS, but it is very lightweight for an OS.

Useful Error Messages

Bootstrap

Posted on 2021-11-03

Bootstrap

The world’s most popular CSS framework

Components

Bootstrap gives us access to a bunch of pre-built components that we can incorporate into our own website.

Grid System

Bootstrap also comes with a grid system, which help us construct our own custom, responsive layouts.

YAML_Intro

Posted on 2021-10-31

Foreword

I went a long long walk today, approximately 21km and took me 6.7 hours. The weather today was just so great. Recently, I noticed that if the article I posted only has the techicial contents, that might be a bit boring. The whole keep posting thing is for me to be motivated, so I decided that I need to write down some thoughts ahead or behind the article, to make it more human.

What’s my thoughts about YAML before learning it.

I have had much knowledge about yaml before I tried to post on github Page. I am currently using the hexo framework, organizing my blogs, and inside the folder, there’s one .yaml file owns a lot of settings we can play around.

Lecture

https://www.youtube.com/watch?v=cdLNKUoMc6c&t=2s

YAML is a data_serialization language, which means it’s basically just used to store information about different things

We can use yaml to define key-value pairs.
Very similar to JSON, but YAML focusing on readability and user friendiness

Format

.yml
.yaml

comment in YAML

1	# This won't be executed in yaml

key-value example in yaml

person:
    name: &name "mike"
    occupation: 'programmer'
    age: 23
    gpa: 3.5
    fav_num: 1e+10
    male: true
    birthday: 1994-02-06 14:33:22   #ISO 8601
    flaws: null
    hobbies: 
        - hiking
        - movies
        - riding bike
    movies: ["Dark Knight", "Good Will Hunting"]
    friends:
        - name: "Steph"
          age: 22
        - {name: "Adam", age: 22}   
        -   
          name: "joe"  
          age: 23
    desciption: > 
        Coming soon, Aeron in Onyx, made with ocean-bound plastic. Same design. Same comfort. Now more sustainable.
    signature: |
        Mike
        Giraffe Academy
        email - giraffeacademy@gmail.com
    id: *name #"mike"

    base: &base
        var1: value1

    foo: 
        <<: *base # var1: value1
        var2: value2

The way that we can define scope inside of yaml is with indentation(tab).

With > before a bunch of text, yaml will render the text in a single line.
With |, this will preserve the format correctly.
& as an anchor mark, * to call that anchor value
& anchor mark can also anchor a entire key-value, the example &base
!!float can force int to float, changing the type

Responsive_CSS_and_Flexbox

Posted on 2021-10-29 Edited on 2021-11-02

Introduction to CSS Flexbox

The Basic

What is it?

Flexbox is one-dimensional layout method for laying out items in rows or columns.

It’s New(ish)

Flexbox is a recent addition to CSS, included to address common layout frustations.

Why ‘Flex’?

Flexbox allows us to distirbute space dynamically accross elements of an unknown size, hence the term “flex”

Flex direction

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Flex Wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

main Axis: left-right
cross Axis: `top-down

Align Item

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Flex-Basis, Grow and Shrink

Flex-Basis

Defines the initial size of an element before additional space is distributed.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Flex-Grow

Controls the amount of available space an element should take up. Accepts a unit-less number value.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Flex-Shrink

If items are large than the container. They shrink according to flex-shrink.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

Flex Shorthands

1 2	/* Three values: flex-grow flex-shrink flex-basis */ flex: 2 2 10%

Responsive Design and Media_Queries_Intro

https://www.ibest.tw/page01.php

The problem

As mobile devices and tablets became widely available, developers had a problem… how do we create websites that look good on all screen sizes?

One approach

Early on, it was common to create separate stylesheets for different devices, or even completely different websites for each size.

Enter Responsive

These days, we typically create ONE website and stylesheet that is able to respond to different device sizes and features.

Media Queries

Media queries allow us to modify our styles depending on particular parameters like screen width or device type.

Example

@media(max-width: 800px){
    .sidebar{
        display: none;
    }
    .main{
        width: 80%;
    }
}

@media(min-width: 30em) and (orientation: landscape){
    #container{
        flex-direction: column;
        justify-content: center;
    }
}

The Power of Media Queries

Breakpoint to find the most frequently used px size

https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints

Other Assorted Useful CSS Properties

Posted on 2021-10-28 Edited on 2021-10-29

rgba(0, 209, 112, 0.5)

alpha 0-1
opacity 0-1

Opacity affect the whole element.

position

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position: sticky is coooool. Go check it out.

Transitions

1
2
3

div:nth-of-type(2){
    transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

The Power of CSS Transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

FancyButton_Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fancyBtn.css">
    <title>Document</title>
</head>
<body>
    <button>Hover me!</button>
</body>
</html>

body{
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #151b29;
}

button{
    background: none;
    color: #ffa260;
    border: 2px solid ;
    padding: 1em 2em;
    font-size: 1em;
    transition: all 0.25s;
}

button:hover{
    border-color: #f1ff5c;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c; 
    transform: translateY(-0.25em);
    /* box-shadow: 12px 12px 2px 1px red; */
    cursor: pointer;
}

The truth about Background

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Google Font is Amazing

I could put whatever font I want. It might work on my machine, but I have no guarantees that same font will exist or be installed on your machine or the average person’s machine.

One option that we have is to actually include a font. As part of our document, we can include a font file so you can buy a font, you can download them.

Google font is free.

https://fonts.google.com/

copy-paste the link part to the <head> in your html file
In css file,

1
2
3

body{
    font-family: Roboto, sans-serif;
}

PhotoBlogCodeAlog_Pt1

In order to do some simple calculation, we can use calc() in css.

img {
    width: 30%;
    margin: calc(10%/6);
}

white space element:

Annoying issue for html, the reason why

1
2
3

<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"><img
    src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"><img
    src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">

NOT

1
2
3

<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg">
<img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg">
<img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">

TheCSS_BoxModel

Posted on 2021-10-27 Edited on 2021-10-28

Box

Some contents related to Box

Display Property

Inline: Width and Height are ignored. Margin & Padding push elements away horizontally but not vertically.
Block: Block elements break the flow of a document. Width, Height, Margin, & Padding are respected.
Inline-Block: Behaved like an inline element except Width, Height, Margin, & Padding are respected.

Hide element

1
2
3

h1{
    display: none;
}

CSS Unit Revisited

Relative

em
rem
vh
vw
%
and more!

Absolute

px
pt
cm
in
mm

em

font-size: em meanings relative value from its parent.
margin: em meanings relative value from itself(font-size).

One problem from em will be if you put em in a nested structure, let’s say a nested list, the factor will either grow or shrink dramatically.

rem

Root ems

Relative to the root html element‘s font-size. Often easier to work with. If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.

Reference

https://www.youtube.com/watch?v=_-aDOAMmDHI

The World of CSS Selectors

Posted on 2021-10-26 Edited on 2021-10-27

https://www.canva.com/design/DAEANYqyik4/tdD7T7i698xhdPQUS_nrtQ/view?utm_content=DAEANYqyik4&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton#6

1
2
3

h1, h2{
    color: white;
}

The ID Selector

https://coolors.co/palettes/trending

#lagout{
    color: orange;
    height: 200px;
}

The class Selector

1	<a class="tag" href="#puppies">Puppies</a>

1
2
3

.tag{
    background-color: #e63946;
}

Descendant Selector

1
2
3

li a{
    color: teal;
}

Adjacent Selector

1
2
3

h1 + p{
    color: red;
}

Select only the paragraphs that are immidiately preceded by an <h1>

Direct Child

1
2
3

div > li{
    color: white;
}

Select only the <li>‘s that are direct children of a <div> element

Attribute Selector

Select all input elements where the type attribute is set to “text”

input[type="text"]{
    width: 300px;
    color: yellow;
}

1
2
3

a[href*="google"]{
    color: magenta;
}

class is one attribute, so as id.
href*=”google” - Fuzzier matching

PSEUDO classes

keyword added to a selector that specifies a special state of the selected element(s)

:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

PSEUDO ELEMENTS

Keyword added to a selector that lets you style a particular part of selected element(s)

::after
::before
::first-letter
::first-line
::selection

SPECIFICITY

Specificity is how the brower decides which rules to apply when multiple rules could apply to the same element. It is a measure of how specific a given selector is. The more specific selector “wins”.

1	ID > Class > Element

How to calculate the importance

ID selector: 100
Class, Attribute, Pseudo-Class, Selectors: 10
Element, Pseudo-Element, Selectors: 1

The combination of the things above:

For example

1
2
3

nav a.active{
    color: orange;
}

0*100+1*10+2*1

https://specificity.keegan.st/

!important tag is superb every calculation above.

CSS Inheritance

1
2
3

button{
    color: inherit;
}

CSS: The Very Basic

Posted on 2021-10-23 Edited on 2021-10-26

CSS - casading style sheet

What is it?

CSS is a language for describing how documents are presented visually - how they are arranged and styled

What does it stand for?

CSS stands for Cascading Style Sheets.

CSS RULES

(almost) everything you do in CSS follows this basic pattern
1
2
3
selector{
property: value;
}

Including Style Correctly

Inline Style: You can write your styles directly inline on each element, but this is NOT A GOOD IDEA most of the time.
The STYLE element: You can write your style inside of a <style> element. This is easy, but it makes it impossible to share styles between documents. Not recommended either
External stylesheet: Write your styles in a .css file, and then include the using a <link> in the head of your html document. Recommended!

Focusing on the third method,

my_styles.css

1
2
3

h2{
    color: indianred;
}

Demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <title>Forms Demo</title>
    <link rel="stylesheet" href="my_styles.css">

</head>
<body>
    
    <h2>I am Jim</h2>
    <h2>I am Cool</h2>
    
</body>
</html>

Demo

I am Jim

I am Cool

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Color Systems: RGB and Named Colors

https://htmlcolorcodes.com/color-names/
https://htmlcolorcodes.com/color-picker/

A typical computer can display ~16000000 different colors

RGB

Red, Green, Blue Channel
Each channel ranges from 0-255

h2{
    color: teal;
    background-color: rgb(89, 151, 0);
}

Color Systems: Hexadecimal

Hex

Still red, green and blue channels
Each ranges from 0-255 BUT represented with hexadecimal

Hexadecimal

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

1	16*16 = 256

so, the rgb becomes -> #0f5679

Common Text Properties

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Font Size Basics With Pixels

Relative

EM
REM
VH
VW
%
AND MORE!

Absolute

PX
PT
CM
IN
MM

PX - BY FAR THE MOST COMMONLY USED ABSOLUTE UNIT

1px does not necessarily equal the width of exactly one pixel!
Not recommended for responsive website

The Font Family Property

https://www.cssfontstack.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family