Forem: ann lin

Console.log with CSS Style

ann lin — Mon, 25 Mar 2019 17:34:25 +0000

I remember when I was young and naive, I accidentally right clicked on Facebook browser and saw this HUGE ASS WARNING. I thought it was cute. Guess who has the same warning. (Something that ends with plus)

Spoiler alert, it's still there.

Most modern browsers support styling for console.log(), except for Safari. (Whut) Add %c before the text in the first parameter and CSS style in the next parameter.


 js
      console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );

Tip: Right click on this page and click on inspect. Paste the above code in the console now.
Another tip: This tutorial is meant to impress noob. If you already know this, move on with your life.

You can have multiple CSS styles in a console.log() by using the format below.


 js
console.log('%cb %cb ', 'color:blue;border:1px solid black', 'color:black;border:1px solid black');

You may be able to use CSS style with other methods in Console. While I still enjoy misusing the good old console.log in my code, the right approach would be to use a debug module like https://www.npmjs.com/package/debug that allows you to show and hide the log easily.

Demo,

Right click in this page to see the console.log().

Question,

What does the c in %c stand for?
a. CSS
b. Custom
c. Character
d. None of the above

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/console

New day new cringey video,

Drawing Pixelated Image with CSS box-shadow

ann lin — Mon, 04 Feb 2019 15:54:39 +0000

Do you know that you can draw with CSS box-shadow? Neither did I until I came across a pretty dope pixelated Ralph by Jason Delia. Check out that Wreck a Ralph demo and my ugly Millennium Falcon drawing.

Let's get started!

First, create a block using `div`.

The box shadow will follow the div's width and height. You can apply multiple shadows to a box-shadow by separating the attributes of a shadow position-x position-y blur-radius color with commas.

Basic building block:

.block {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 black, 10px 0 0 black;
}

<div class="block"></div>

Second, plan your image using coordinates.

I patiently drew out the coordinates (x,y) of my perfect heart for your reference. You're welcome. The div starts at the top left box with coordinate (0,0). Each box shadow has the same height (20px) and width (20px) as the div.

Notice I added margin-bottom in .heart-shadow. As obvious as the name sounds, box-shadow is a shadow that does not increase the size of div. You may want to set margin to prevent covering other DOM elements.

Code snippet in HTML and CSS:

.heart {
                width: 20px;
                height: 20px;
                margin-bottom: 100px;
                box-shadow: 20px 0 0 #60748c, 40px 0 0 #60748c, 60px 20px 0 #60748c,
                    80px 0 0 #60748c, 100px 0 0 #60748c, 120px 20px 0 #60748c,
                    0 20px 0 #60748c, 60px 20px 0 #60748c, 120px 20px 0 #60748c,
                    0 40px 0 #60748c, 120px 40px 0 #60748c, 20px 60px 0 #60748c,
                    100px 60px 0 #60748c, 40px 80px 0 #60748c, 80px 80px 0 #60748c,
                    60px 100px 0 #60748c;
            }
<div class="heart"></div>

We hardcode everything in this tutorial because I am lazy. However in real life, we try not to hardcode anything at all. @vyvit gave a good suggestion to use CSS var(). For repeated values such as the colour code, you can assign it as a CSS variable using the prefix -- and then add it in the :root element. Now you can use it everywhere since the variable is set in the global scope.

Using CSS var():

:root {
    --pink-color: #d87385;
}

.heart-shadow-with-color-variable {
    width: 20px;
    height: 20px;
    margin-bottom: 100px;
    box-shadow: 20px 0 0 var(--pink-color), 40px 0 0 var(--pink-color),
    60px 20px 0 var(--pink-color), 80px 0 0 var(--pink-color),
    100px 0 0 var(--pink-color), 120px 20px 0 var(--pink-color),
    0 20px 0 var(--pink-color), 60px 20px 0 var(--pink-color),
    120px 20px 0 var(--pink-color), 0 40px 0 var(--pink-color),
    120px 40px 0 var(--pink-color), 20px 60px 0 var(--pink-color),
    100px 60px 0 var(--pink-color), 40px 80px 0 var(--pink-color),
    80px 80px 0 var(--pink-color), 60px 100px 0 var(--pink-color);
}

More detailed explanation over here:

There're many pixel box-shadow generators available online to help you calculate the coordinates of your drawing. I drew the offline dinosaur with the most beautiful generator I could find online, the Pixelator. Good to have features for Pixelator would be a history of previous drawings (undo, redo) and the ability to drag and color the pixels. I wanted to animate the dinosaur but I kept forgetting the coordinates. We shall see.

Check out my dino here. My dinosaur blinks. 😂

(@vms20591 hope you are seeing this, this is for you! Sorry it took freaking long.)

P/S: Anyway,

New Year Resolution: Becoming a Youtuber

ann lin — Tue, 01 Jan 2019 16:59:54 +0000

HELLO WORLD 2019, I AM STARTING A YOUTUBE VLOG AND PULLING ALL MY NON TECH/TECH FRIENDS INTO THE TECH SCENE AND THE YOUTUBE WORLD. IT WILL BE FUN AND CHAOTIC. :)

Amazing video and sound quality brought to you by IPhone. Still saving up for my camera and microphone.

Automate folder creation with specified name using Bash Script

ann lin — Sat, 22 Dec 2018 12:29:15 +0000

I've been creating new folder with a specific naming pattern in the Terminal.
A folder named /dayX-title that contains a README.md file.

E.g: /codingclub/challenge/dayX-title/README.md

linxea at tmo in ~/codingclub/challenge
$ ls
day0-the-beginning-of-the-coding-club
day1-may-the-odds-be-in-your-favour
day2-so-far-so-good
day3-oh-man

This is how I create a new file in a new folder. I manually look through the list of folders to get the next count. Then type the title-with-dash-and-dash-and-dash.

$ touch day4-time-to-automate/README.md

I'm getting lazy so we'll write a bash script to do that.

I'm looking to write a commmand ./new time to automate to create /day4-time-to-automate with a README.md in it.

Steps:

Iterate through all the folders
Find the largest number of day
Create a new folder with a README.md file with the given input filename

#!/bin/bash

# Take in all arguments in one variable
input="$*"
folderTitle=$input

# Check if there is input, otherwise exit script
if [[ -z "${folderTitle// }" ]]; then
  echo "Where is your awesome title yo?"
  exit 1
fi

# Replace space to -
folderTitle=${folderTitle// /-}

# Loop through the list of directories and find the biggest number
biggestNumber=-1
for dir in $(ls)
do
  number=`sed 's/[^0-9]//g' <<< $dir`
  if (( number > biggestNumber )); then
    biggestNumber=$number
  fi
done

# Increment the biggest number by 1
((biggestNumber=biggestNumber+1))

# Create a new folder and README.md file
newName=day$biggestNumber-$folderTitle
mkdir -p $newName
echo -e "TITLE: Day $biggestNumber $input\n" > $newName/README.md

# Print success message to make me feel good
echo Created $newName yo 🦄

Tada, now you just have to make the script executable by running chmod -x and run the command ./new.sh with title after that.

$ chmod -x new.sh # make the script executable
$ ./new.sh as usual this task takes longer than i expected

Uploaded my script to Repl.it, check it out at https://repl.it/@linxea/Create-New-Folder-and-File . You may need to login to play with it.

DOES IT WORTH THE TIME TO PICK UP BASH TO AUTOMATE SUCH A TINY MATTER?

a tiny yes.

Another Problem Another Day to Solve,

I wanted to extract the number 123 between day123-title-that-may-contain-123 using sed but regex is messing with my mind. 🤯 How do I do that? How to I write a regex that only returns number between day and -everything-else-after-dash? Explain regex like I'm 5 please.

End

Star Wars Hyperjump

ann lin — Thu, 20 Dec 2018 17:28:15 +0000

Recreating the hyperjump effect from Star Wars using translateX.

@keyframes hyperjump {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  1% {
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(-100vw);
  }

P/S: Can anyone find a video clip for the hyperjump effect? I can't seem to find it on youtube or anywhere else.
P/P/S: To leaky and jiji, I didn't do this during working hours. I work hard at work. 🌝

Credits:
Stars from http://pluspng.com/png-141250.html
I drew the millennium falcon from http://elrumordelaluz.github.io/Pixelator/

Wreck it Ralph 2 Virus Popup

ann lin — Mon, 17 Dec 2018 17:58:58 +0000

I just watched Ralph Breaks the Internet 😍

and I absolutely love the scene where Ralph is popping everywhere on the screen.

Ralph in CSS

Because it's late and we need Ralph in CSS so I stole the amazing CSS pixel art by Jason Delia using box-shadow. We need to play with box-shadow again.

WRECK-IT-RALPH DEMO

Simple Popup Animation

Hide the original Ralph so the first Ralph is always at random position.

<div id="ralph"></div>

Duplicate Ralph using cloneNode and put it in body.

const body = document.getElementsByTagName("body")[0];
const ralph = document.getElementById("ralph");

function duplicateRalphAtRandomPosition() {
    const ralphClone = ralph.cloneNode(true);
    ralphClone.style.display = "block";
    ralphClone.style.top = getRandomPercentage();
    ralphClone.style.left = getRandomPercentage();
    ralphClone.style.transform = `scale(${getRandomSize()})`;
    body.appendChild(ralphClone);
}

Place cloned Ralph in random position with random size.

// Return 0% to 100%
function getRandomPercentage() {
    return Math.random() * 101 + "%";
}

// Return 0.3 - 1
function getRandomSize() {
    return Math.random() * 0.8 + 0.3;
}

Keep doing it every second until the Internet breaks using setInterval

// Duplicate Ralph every second yo
setInterval(function() {
    duplicateRalphAtRandomPosition();
}, 1000);

Git Github Gitflow

ann lin — Wed, 12 Dec 2018 17:29:48 +0000

What is Git

Git is a distributed version control system created by Linus Torvalds in 2005. The same guy who created linux. Genius.

Centralized vs Distributed

Before Git, Apache Subversion (SVN) was one of the popular version control systems. SVN is a centralized version control system which stores all the files in 1 central server. If two developers are working on the same file, they will have to resolve conflicts all the time. The developers cannot commit the changes if they are offline unlike Git.

On the other hand,

Git commands

Below is a list of basic commands to save your changes as commits and push them up to the server (Github) using Terminal. I'm a terminal person. No GUI. I know that VSCode has built-in user interface for git. There are existing Git Clients too.

git checkout develop # Go to develop branch
git add . # add all the files you have edited
git commit -m "Add changes to the files" # add commit message to the files you've added
git push origin master # Push the commits to master branch in the server

Check out this git cheatsheet

Github

A hosting service that works with Git. There are alternative hosting services that work with Git as well. For example, Bitbucket and Gitlab. However, I like Github the best because the UX is smooth af. FYI, Microsoft acquired Github and I find this tweet hilarious.

// Detect dark theme var iframe = document.getElementById('tweet-1003640405705887744-398'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1003640405705887744&theme=dark" }

Gitflow

A popular branching strategy created by Vincent Driessen. My team at HOOQ is using it. We use it together with Git Hubflow and we are puking rainbow. There's no right or wrong branching strategy, you just have to find the most suitable model that suits your team.

Trunk-Based Development Workflow

Everyone works on master branch only. This is useful to avoid long lived branches which result in accumulating merge conflicts.

Branches

Master branch

Pros

Force developers to do small commits and changes frequently
Easy to understand
Iterate quickly, ship faster

Cons

Incomplete features may be released if no feature flag is used
Introduce bugs easily
Frequent merge conflicts if developers work on the same files

Gitflow Workflow

Master branch is the stable branch. Nobody touches it. Everyone works on their own feature branch then opens a pull request to merge feature branch into develop branch. A release branch is branched out from develop branch and then merged back to master and develop branches. This encourages continuous delivery.

Branches

Master branch
Develop branch
Feature branch
Release branch
Hotfix branch

Pro

Easy to work in parallel
Release branch is useful to track releasable features

Cons

A little complicated for first time user

I will direct you to an authentic Gitflow explanation over here by the creator himself.

Git Hubflow

One-line commands for using Gitflow with Github. This amazing tool is created by DataSift You guys are da MVP.

Normal Git commands

git checkout develop
git pull origin develop
git checkout -b release/production-1.0.0
git add .
git commit -m "Add new release"
git push origin release/production-1.0.0
git checkout master
git pull origin master
git merge release/production-1.0.0
git tag production-1.0.0
git push --tags origin production-1.0.0
git checkout develop
git pull origin develop
git merge master
git push --delete release/production-1.0.0

Amazing Git Hubflow Commands

git hf release start production-1.0.0
git add .
git commit -m "Add new release"
git hf release finish production-1.0.0

What is the best workflow?

There are numerous factors to consider when deciding what is the best branching strategy for your team. Does your team require continuous delivery? How comfortable are your team members adopting an entire new workflow versus tweaking existing workflow to suit their needs?

Personally, I like gitflow because of the separation of concerns for different features and the ease of creating a release with releasable features. But I do believe there is no single best workflow.

There are more articles over here and here that compare different workflows and their benefits.

Disclaimer

I have not tried SVN. Not entirely true, I tried playing with SVN but it was too complicated for my liking. I am spoiled by git. There may be parts in the illustration that are inaccurate, please correct me!

Also talk to me at Twitter @linxea_. I'm bored over there.

Also, I made a slide for my workshop tomorrow at https://linxea.github.io/git-github-gitflow. Feeling fancy with reveal.js.

References

https://docs.microsoft.com/en-us/azure/devops/repos/git/git-branching-guidance?view=vsts
https://datasift.github.io/gitflow/IntroducingGitFlow.html
https://www.endoflineblog.com/oneflow-a-git-branching-model-and-workflow

What happens when you enter URL in a browser [Part 1: URI]

ann lin — Thu, 22 Nov 2018 17:35:13 +0000

What really happens,

Enter a website link in the browser, www.example.com.
Browser knows it's a website and adds https:// in front of it.

`https://` is one of the many URI Schemes

URI = Universal Resource Identifier
URL = Uniform Resource Locator
URN (not that urn 🌝) = Uniform Resource Name

URN and URL are subsets of URI. URN is just a name or a reference, there may not be a way to locate that thingy. URL knows exactly where the resource is located and returns that thingy.

URL Example (paste on your browser):

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
- Hello, World!
tel:+6598765432
- Open facetime in computer, call number in mobile device
https://example.com
- Open a website, meh
file://path
- Open a file in your local machine
mailto:test@gmail.com
- Open email
telnet://0.0.0.0
- Open terminal to log into remote computer
and more over here

URN Example:

urn:isan:0000-0000-9E59-0000-O-0000-0000-2
- The URN for "Spider-Man (film)", identified by its audiovisual number

This concludes part 1 of "What happens when you enter URL in a browser".

P/S: Current browsers are already using Internationalized Resource Identifiers (IRI), a new protocol which is an extension of URI, which allows unicode character encoding. E.g. https://en.wiktionary.org/wiki/厉害 (Thanks @jxerome for pointing that out)

References:
https://www.immagic.com/eLibrary/ARCHIVES/GENERAL/WIKIPEDI/W110302U.pdf
https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

Talk to me at Twitter

🤦: Thanks for pointing out the mistakes in the post! @joeflateau, @dangtu_work

Holographic Effect on Web

ann lin — Wed, 14 Nov 2018 18:59:19 +0000

Demo

HOLOGRAPHIC EFFECT IS AWESOME,

so I'm going to make my own version of holographic effect today.

Demo Code below, open in mobile browser to see my little achievement.

css

Google and colour-pick a random holographic picture to get the lovely colours for our linear-gradient. Set background-size to 200% so we can move the colours around later on.

#holographic {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(
        to right,
        rgb(194, 255, 182),
        rgb(255, 163, 182),
        rgb(221, 169, 255),
        rgb(162, 209, 255)
    );
    background-size: 200%;
}

Detecting Device Orientation

I use alpha and set the maximum background-position to be 100% so that the linear-gradient will not repeat from the start. Everyone should play with device orientation events, they're freaking fun.

window.addEventListener("deviceorientation", handleOrientation, true);
      function handleOrientation(event) {
        const z = event.alpha; // rotation degrees from 0 to 360

        const holographicElement = document.getElementById("holographic");
        holographicElement.style.backgroundPosition =
          Math.min(Math.abs(z), 100) + "%";
}

Feedback

It kinnnndda works, I think we can find better calculation to make it smoother and less buggy. But for now, within the time limit I set for myself, I'm prettty satisfied with the slight holographic effect achieved by rigorously rotating or moving my phone. :>

YES I MADE A VIDEO WITHIN 2 FREAKING HOURS. GIVE ME A CLAP.
FOLLOW ME AND SUBSCRIBE TO MY YOUTUBE CHANNEL.
CLICK HERE AND CLICK THERE AND CLICK EVERYWHERE.

Build a frontend to backend web application (Windows 95 style)

ann lin — Wed, 14 Nov 2018 02:19:14 +0000

Look ma, I'm fullstack.

Today I start to play with database. I found a gem at https://dev.to/aspittel/objection--knex--painless-postgresql-in-your-node-app--6n6. @AliSpittel, you are dah MVP.You should first head over to the tutorial which covers objection.js + knex pretty well.

Objection.js + Express = Web App

Disclaimer

This is a beginner's attempt to begin fullstack. I wanted to keep it freaking simple. No webpack no babel no nothing. As vanilla as possible.

I have selected Postgres/Knex/Objection for my database and Express for backend and just vanilla HTML, CSS and JavaScript for frontend. I'm a simple girl.

This project is like a random doodling process. Expect chaos in the code.

Before we start,

Here's the Demo and Code.

User Requirement

As a human being, I need a place to jot down what I do everyday to remind myself how much time I have been wasting doing nothing but sleeping.

[Oh shit, I enjoy writing nonsense too much.]

1. Design

I don't want to care about frontend this time. I am looking for a MVP, a minimal viable product.

But we need to design the database schema. Since we want to document each day as an entity, we will create a model named Day with the fields below:

{
    "id": 1,
    "exercise": false,
    "achievement": "I started dev.to 🤗.",
    "demo_link": "http://dev.to/linxea",
    "mood": "Good vibes",
    "woke_up_at": null,
    "slept_at": null,
    "created_at": "2018-05-28T16:00:00.000Z"
}

2. Develop

Setup

Download the example code here..

Install these in the terminal:

brew install psql
brew install knex

Database

Create a database called life locally by running the command:

createdb life

Create .env in folder by running the command:

npm run create:env

Open .env file and update DATABASE_URL variable with your own username/password/database_name. It should look something like this:

PORT=8000
APP_ENV=local
DATABASE_URL=postgres://username:password@localhost:5432/life-database

Scheme is defined in the knex generated file in migration folder, which is created by the command knex migrate:make create_days. I've already created one named TIMESTAMP_create_days in /deploy/db/migrations. Migrate whatever inside the migrations folder by running the command:

knex migrate:latest

To feed the database with default information from /deploy/db/seeds, running the command:

knex seed:run

Server / Client

Install the dependencies:

npm install

Run the freaking app:

npm run start

Yes I copied the content from my README file.

Optional

If your database screws up or if you want to reset the database content, you can delete the database and do everything again by running the commands:

dropdb life
createdb new-life
// Remember to update the `database_name` in .env file
knex seed:run

3. Deploy

You need to run server for this web app. Heroku provides a free and easy way to host node app. (I wish firebase hosting could do it too. T.T) However, free account means that the server will fall asleep after 30mins of non-activity. So the first load time for the lucky first person will always take reaaaaaaaaaaaaaaally long. It's not my app having really bad performance okay.

You can create a free AWS account to create a database over at RDS. ( I actually missed this part out in my video, README, everything. opps) I'm pretty new to RDS, the response time to connect to the database takes a while. Sometime I can't access the database as well due to long response time. :<

Deploy to Heroku

You can also deploy to Heroku easily using these commands (Heroku is awesome!):

brew install heroku
heroku login
heroku create you-can-name-anything-you-want-here
git push heroku origin
heroku open

Follow me at https://twitter.com/linxea_
I intend to make a video a day like Casey Neistat and Nas Daily but I spent way too long on one video, waaaaaaaay too long. T_T

Quick Sort

ann lin — Tue, 06 Nov 2018 14:22:48 +0000

Hey Chenge, this is for you.

Here's my take at Quick Sort. I realised I didn't have the best example half way through the animation. It was too late. All the drawing and animating while on the train to work... Put it as a lesson learned.

Here's the code:


def quicksort(start, end, array):
    if start < end:
        pivot = partition(start, end, array)
        quicksort(start, pivot - 1, array)
        quicksort(pivot + 1, end, array)


def partition(start, end, array):
    actualPivotPosition = start
    pivotValue = array[end]
    for i in range(start,end):
        if array[i] < pivotValue:
            array[i], array[actualPivotPosition] = array[actualPivotPosition], array[i]
            actualPivotPosition += 1

    array[actualPivotPosition], array[end] = array[end], array[actualPivotPosition]
    return actualPivotPosition

array = [5,7,8,1,3,2,4,6]

quicksort(0, len(array) - 1, array)
print ("Array:", array)
# Array: [1, 2, 3, 4, 5, 6, 7, 8]

Steps:

Given an array, set the last position to be a pivot
Move the pivot to the actual sorted position in the array
Continue to sort the subarray before and after the pivot with Step 1

The worst case is when the pivot is always the smallest or biggest. To prevent that from happening, you can choose a random position, swap the random position with the last head, then continue with the same sorting thingy.

Check out a better tutorial at https://www.geeksforgeeks.org/quick-sort/

Build A Cool Thing (Street Fighter Website)

ann lin — Mon, 29 Oct 2018 19:29:03 +0000

DEMO (You can see it live here.)

Today nostalgia hit me hard,

so I did a video on my first cool thing. Googled for a Street Fighter splash screen. Entire ideation is recorded in the video below. Give me some love. <3

This screen gives me goosebumps.

Loading Animation

Check out the first load animation which is an attempt to simulate a boot up effect from the screen of an arcade game. So we do a blur of 2px and hue-rotate the color to a number that looks good. Do it for 800ms then 500ms in the opposite direction. (I didn't know we can do backwards. I know nothing.)

/* Stole this idea from twilioquest, it's freaking sick. */
.load {
  animation: load 800ms 500ms backwards;
}

@keyframes load {
  0% {
    filter: blur(2px) hue-rotate(-150deg);
  }
}

Arcade Retro Screen Overlay

Who would have known a single line image would trigger nostalgia and make a good screen overlay. We literally paste a translucent background image on the screen, and disable any click effect on it using pointer-events: none so it will not block any interaction of other buttons (not that there is any at the moment).

Matthieu Pétel gave a really good suggestion to use repeating-linear-gradient instead of svg for the retro overlay effect. (I've updated the code with slight tweak to the colors)

/* Stole this from twilioquest too. ^^ */
body:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: repeating-linear-gradient(#0D122B, #0D122B 2px, #565B73 2px, #565B73 4px);
  opacity: 0.2;
  z-index: 100;
  content: "";
  pointer-events: none;
}

Retro Text

Google font is our best friend here. I choose the font Permanent Marker which is the closest I can find to replicate the Street Fighter text and also the font Press Start 2P which is used in most retro games.

`SOFTWARE ENGINEER`

Use a little skew and rotate and translate to tilt the text Software and Engineer. I give them separate class name because we want to adjust them a little differently.

.title-top {
  transform: skew(-10deg) rotate(-10deg) translateX(-2rem);
}
.title-bottom {
  transform: skew(-10deg) rotate(-10deg) translateX(1rem);
}

Clipping the background turns out cool and works well on Safari, Chrome, Firefox, Opera browser. I am amazed.

.title h1 {
  background: -webkit-linear-gradient(rgb(255, 18, 18) 30%, rgb(255, 215, 38));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

And I use <span> to set some of the letters to be slighly bigger. So it looks more like the splash screen earlier.

`PUSH START BUTTON`

The retro text ("PLAYER 1 OR PLAYER 2" etc) is done using text-shadow. One text-shadow (move it a little on the right and bottom behind the text) is enough to replicate the arcade style text in my opinion. I have two text-shadows for the credit © to make it "pop".

.grey-with-red {
  color: rgb(192, 192, 192);
  text-shadow: 2px 2px 0 rgb(192, 11, 11);
}

.purple-with-blue {
  color: rgb(147, 154, 255);
  text-shadow: 2px 2px 0 rgb(47, 61, 255);
}

.yellow-with-darkyellow {
  color: rgb(226, 179, 24);
  text-shadow: 0 2px 0 rgb(107, 77, 11),
    2px 0 0 rgb(151, 109, 19),
    2px 2px 0 rgb(151, 109, 19);
}

Source code over here:

I will add more interactions in the next one. I got to sleep now. Bye.

Follow me at https://twitter.com/linxea_

Forem: ann lin

Console.log with CSS Style

Demo,

Question,

New day new cringey video,

Drawing Pixelated Image with CSS box-shadow

First, create a block using div.

Second, plan your image using coordinates.

New Year Resolution: Becoming a Youtuber

Automate folder creation with specified name using Bash Script

Steps:

DOES IT WORTH THE TIME TO PICK UP BASH TO AUTOMATE SUCH A TINY MATTER?

Another Problem Another Day to Solve,

End

Star Wars Hyperjump

Wreck it Ralph 2 Virus Popup

I just watched Ralph Breaks the Internet 😍

Ralph in CSS

Simple Popup Animation

Git Github Gitflow

What is Git

Centralized vs Distributed

Git commands

Github

Gitflow

Trunk-Based Development Workflow

Branches

Pros

Cons

Gitflow Workflow

Branches

Pro

Cons

Git Hubflow

Normal Git commands

Amazing Git Hubflow Commands

What is the best workflow?

Disclaimer

References

What happens when you enter URL in a browser [Part 1: URI]

What really happens,

https:// is one of the many URI Schemes

URL Example (paste on your browser):

URN Example:

Holographic Effect on Web

Demo

HOLOGRAPHIC EFFECT IS AWESOME,

css

Detecting Device Orientation

Feedback

Build a frontend to backend web application (Windows 95 style)

Look ma, I'm fullstack.

Objection.js + Express = Web App

Disclaimer

Before we start,

User Requirement

1. Design

2. Develop

Setup

Database

Server / Client

Optional

3. Deploy

Deploy to Heroku

Quick Sort

Build A Cool Thing (Street Fighter Website)

Today nostalgia hit me hard,

Loading Animation

Arcade Retro Screen Overlay

Retro Text

SOFTWARE ENGINEER

PUSH START BUTTON

First, create a block using `div`.

`https://` is one of the many URI Schemes

`SOFTWARE ENGINEER`

`PUSH START BUTTON`