DEV Community: Takuzen Toh

A Note of Command-T Installation with Vim-Plug

Takuzen Toh — Sun, 23 Oct 2022 07:33:38 +0000

The following codes are all of what I need to write to install Command-T as a user of vim-plug.

# config.lua
### In the block of vim.call
Plug 'wincent/command-t'

### In the outside of vim.call
### declare to use Lua
require('wincent.commandt').setup()

$ cd /path/to/plugged/command-t/lua/wincent/commandt/lib
$ make

P.S.
My instant feedback of this plugin:

Cannot search with ultimate pass?
- From /home, it take like about 1s to show the search bar
How to write less everytime I call (default is |:CommandT|

Galago 14'' vs Lemur Pro 14''

Takuzen Toh — Sat, 17 Sep 2022 08:37:06 +0000

TECH SPECS	Galago 14''	Lemur Pro 14''
OS	Pos!_OS 22.04 LTS or Ubuntu 22.04 LTS	Pos!_OS 22.04 LTS or Ubuntu 22.04 LTS
Firmware	System76 Open Firmware (coreboot, EDK2, System76 Firmware Apps)	System76 Open Firmware (coreboot, EDK2, System76 Firmware Apps)
	System76 Open Source Embedded Controller Firmware	System76 Open Source Embedded Controller Firmware
Processor	12th Gen Intel® Core i5-1240P: Up to 4.4 GHz - 12MB Cache - 4 P-Cores - 8 E-Cores	12th Gen Intel® Core i5-1235U: Up to 4.4GHz - 12MB Cache - 10 Cores - 12 Threads
	12th Gen Intel® Core i7-1260P: Up to 4.7 GHz - 18MB Cache - 4 P-Cores - 8 E-Cores	12th Gen Intel® Core i7-1255U: Up to 4.7GHz - 12MB Cache - 10 Cores - 12 Threads
Display	14.1'' 1920×1080 FHD, Matte Finish	14.1'' 1920×1080 FHD, Matte Finish
Graphics	Intel®︎ Iris Xe Graphics	Intel®︎ Iris Xe Graphics
Memory	Dual-channel DDR4 @ 3200MHz Up to 64GB	DDR4 @ 3200MHz Up to 40GB
Storage	M.2 PCIe Gen4 NVMe. Up to 2TB total. × 1	M.2 SSD (1x PCIe gen4 + 1x PCIe gen3 or SATA) × 2. Up to 4TB total.
Expansion	USB 3.2 Gen 2 Type-C × 1	USB 3.2 Gen 2 Type-C × 1
	Thunderbolt™️ 4	Thunderbolt™️ 4
	USB 3.2 Gen 2 Type-C × 1	USB 3.2 Gen 2 Type-A × 1
	USB 3.2 Gen 2 Type-A × 2	USB 3.2 Gen 1 Type-A × 1
	SD Card Reader
Input	Multitouch Clickpad	Multitouch Clickpad
	Backlit Chiclet US QWERTY Keyboard	Backlit Chiclet US QWERTY Keyboard
Networking	Gigabit Ethernet
	WiFi 6	WiFi 6
	Bluetooth 5	Bluetooth 5
Video Ports	HDMI	HDMI
	USB 3.2 Gen 2 Type-C w/ DisplayPort 1.4	USB 3.2 Type-C w/ DisplayPort 1.4
Audio	Stereo Speakers	Stereo Speakers
	Headphone/Microphone Combo	Headphone/Microphone Combo
Camera	1.0M 720p HD Webcam	1080p FHD Webcam
Security	Kensington®︎ Lock	Kensington®︎ Lock
Battery	Li-Ion - 53 Wh	Li-Ion - 73 Wh
Charger	90 Watts, AC-in 100~240V, 50~60Hz, DC-out 19V, 4.74A	65W, AC-in 100-240V, 50-60Hz
	90W+ USB Type-C Charging Compatible	65W+ USB Type-C Charging Compatible
Dimensions	12.79'' × 8.86'' × 0.72'' (32.49 × 22.50 × 1.82cm)	12.68'' × 8.54'' × 0.65'' (32.2 × 21.7 × 1.65cm)
Weight	3.2 lbs (1.45kg)	2.54 lbs (1.15kg)
Model	galp6	lemp11
	Technical Documentation	Technical Documentation
Price	$999.00	$1199.00

Since I find no comparison chart/function offered, I made this chart above.

Bold points are where I think these two differ or one has some advantage over the other.

I'd like to reinforce this when I get time or more knowledge.

Welcome any comment, suggestion of modification, or expansion.

Happy making!

[Updated on Sep 22, 2022]

Terms for dicision-making

CPU
1 P-Core -> 1 thread
1 E-Core -> 2 thread
(=? 1 Hz 1 calculation)
Memory
- (=? Memory Registers, Caches, and RAM included)
- DDR4 = Double-Data-Rate4

ROM = SSD and HDD

SSD
- PCle = Peripheral Component Interconnect Express Cf Apple adopts Apple Fabric instead of PCIe
- NVMe = NVM Express

Waring:
The =? forms are the points I'm not sure so far.

Boot up Pop OS in 30 mins

Takuzen Toh — Mon, 12 Sep 2022 15:24:32 +0000

Disclaimer:
This article uses USB boot practice with an old PC, clean-installing(replace) its old OS. Thus it's NOT suitable for people who try to run Pop! OS on Virtual Machine or dual-boot multiple operating system.

What you need

An old laptop(of course, any new PC is welcome.)
USB drive

Getting Started

Download BalenaEtcher
- My favorite tool to make bootable drive.
Download Pop!_OS ISO file from their website.
Flash the ISO file using BalenaEtcher into USB drive.

Now the OS is ready, so move to the laptop with which you want to use Pop OS.

Insert the USB drive into the computer, then reboot or power on your system. Hold F1/F2/F7 keys when doing this operation until the boot menu shows up.
Choose to boot up with USB drive.
Please disable fast/secure boot-up, if any.

The details so far: https://support.system76.com/articles/live-disk/

Then just follow their built-in great instruction.

Have you readers followed up here?

I very quickly wrote up this page in the same day I set all up Pop OS, and you know what, I'm writing this content right inside Google Chrome, which is inside Pop OS. I'm so excited for this. Please leave a comment if there's any unclear point or mistake. I would like to help you out or correct.

Also please check here chat.pop-os.org.
It helped me well.

A little bit back story follows.

I heard of this GNU/Linux distribution from my co-worker then I checked out the website of System76(the maker). I just intuitively love their philosophy, UI/UX, that is, most stuffs they offer.

I wanna give it a try without buying anything so I decided to replace my dad's old Windows laptop with this. I have been Mac user about a decade, plus this laptop is from Lenovo with legacy Windows and outdated IE inside. I have no experience using Powershell so I feel very unwilling to learn some basic of it for just accomplish this mission.

I called my good friend @greenteabiscuit just for some complaint and hopefully get some knowledge about Powershell. BUT he insisted that why I don't just use USB drive to boot up, instead of learning Powershell, get a web browser, and do the rest. That was truly an Aha moment. I was totally trapped in the box that I have to ONLY use this old laptop to finish everything.

With his grateful amazing bit of advice, I successfully began the journey of Pop!_OS, following the steps above.

I sincerely wish this piece of page would similarly help you.

Happy making!

what does this '-i' mean?

Takuzen Toh — Tue, 29 Dec 2020 04:11:09 +0000

npm i

I have been wondering what this 'i' means when I copy this line, and I just figure out it's just an alias of 'install".

Maybe nobody gets caught here, but just in case:)

How to embed Google Maps

Takuzen Toh — Fri, 25 Dec 2020 14:04:37 +0000

When I try to embed a map to show the access information to certain point, there're sooo many articles to explain the way to do it.

After taking one day to research the best practice and successfully did it, I found 99% of the articles addressing it too complex.

I want to make it super simple here(in just 6 STEPS).

But be careful, my solution only works as long as you can search and find your destination in Google Maps.

Okay, then let's begin.

1. Search and find your point in Google Maps
2. Tap share button

3. Choose 'embed a map'

4. Copy its HTML

↓
Go to your favorite code editor
↓
5.Declare a object for the map

const AddressMap = () => {
  return (
    <div className="google-map-code">
      [the HTML you just copied]
    </div>
  )
}

export { AddressMap }

6. Insert it to your JSX code
<AddressMap />

That's it.
Does this work for you?

Welcome any comment and feedback.
Happy coding:)

How to add next package

Takuzen Toh — Thu, 24 Dec 2020 08:06:43 +0000

Once when I installed some npm package, all next-related API(such as link, image, and so on) showed errors saying they cannot be found.

So as to fix them, I had to add them again.

At that time,

yarn add next

this single line fixed the problem!

Hope this would help somebody too:)

How to uninstall local packages

Takuzen Toh — Thu, 24 Dec 2020 07:59:59 +0000

** Unscoped package **
npm uninstall <package_name>

** Scoped package **
npm uninstall <@scope/package_name>

** Example **
npm uninstall lodash

Modern Web-dev Setup #1

Takuzen Toh — Tue, 10 Nov 2020 13:45:34 +0000

Our team made our web application's frontend with html/css/js and I've been developing it for a while.

As We're gonna take the service to the next phase, we decided to evolve the way how we develop the web software too.

This is the wrap-up how I swiftly built the environment with the four tagged technologies above.

My Developing environment follows.

macOS 10.15.2
Visual Studio Code 1.49.3

Okay, let's begin then.

First of all, open your terminal and make a folder for your new application.

~$ mkdir new-app && cd new-app
~/new-app$ mkdir back front && touch docker-compose.yml
~/new-app$ cd front
~/new-app/front$ touch Dockerfile

For your information, we do not set up backend in this article. I would show the know-how later on.

Then we should run the command following, so as to get an app created with Next.js and Typescript!

(I personally prefer using 'yarn')

~new-app/front$ yarn create next-app --example with-typescript main

if 'tsconfig.json' is not automatically added_

touch tsconfig.json

Nice.
It's turn to write codes to docker-related files and compose docker.

docker-compose.yml

version: "3"
services:
  front:
    container_name: [your-app-name]-front
    build:
      context: ./front
      dockerfile: Dockerfile
    command: sh -c "cd /front/main && yarn dev"
    ports:
      - "3000:3000"
    volumes:
      - ./front:/front
    tty: true

Dockerfile

FROM node:14.15.0
RUN mkdir /front
WORKDIR /front
EXPOSE 3000

(The node version above is the latest version recommended by Node.js® for most users when I write this article. Feel free to go check https://nodejs.org/en/ and rewrite it with the latest version when you make your application.)

At last it's time to compose docker container!
Do NOT forget to go back to root directory.

~/new-app$ docker-compose up --build -d

(for your information, '--build -d' means 'build(--build) in the back(-d)')

Wait a little bit until the container is ready.

At last it's time to type 'localhost:3000' in your favorite browser to see the first website you made with modern setup.

If this page appeared, you made it! Congrats!!

optional

If you want to use styled-components, please run the two commands followed.

yarn add styled-components
yarn add --dev @types/styled-components

optional extensions recommendation

ESLint
Prettier
vscode-styled-components
Docker
GitLens (if you are not a lone wolf)

optional recommended setting if you use 'prettier'

We have to make a setting file for prettier first.

~new-app/front/name-your-app$ touch .prettierrc

Then we need to add these lines following to '.prettierrc and save it.

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

===

I referred to this Japanese article.

For more details, please visit Next.js Official Docs.

If you found any skeptical point, or any thing can be improved, please kindly leave a comment informing us.

I'm also still learning.

===

In #2, I plan to write some about how to set up global css using Mayer Reset, and also make some adjustment to directory structure.

Looking forward to seeing you soon.

Thank you for reading, and happy coding:)

How to write .gitignore correctly

Takuzen Toh — Wed, 28 Oct 2020 04:49:12 +0000

I've been frustrating when I cannot successfully make git ignore huge files such as 'node_modules' or 'mysql' etc.

Today I totally figured out why sometimes it doesn't work as I wish.

The biggest reason is that I have no idea if I want to ignore certain file, I DO NOT need to write the relative path to it, JUST have to write the name of the file or the folder, without any slash.

As long as you don't have one file with the same name in the same project folder and futhermore you don't want to ignore that one.

The reason why is because only writing the name of the file or the folder would make git ignore all the files with that name.

Example

#1
work

#2 
/work

#3
work/

#4
/work/

#1
every work folder would be ignored

#2
the work folder which is on the same directory with .gitignore would be ignored

#3
same with #1

#4
same with #2

I recommend only having one .gitignore and put it on the root directory.

(you can have two, and if so the one on the deeper layer would be executed first)

Personally I feel it's confusing.

One last thing,
once you added/committed something, you have to delete its cache so you can let git ignore it.
The command following.

$ git rm --cached <file or directory>

Thank you for reading, happy coding:)

ADE Construction

Takuzen Toh — Fri, 09 Oct 2020 10:18:04 +0000

I want share how I build up a web application with Typescript React(frontend) and Django(backend) in Docker, for coders in the world and of course myself a half year later.

macOS 10.15.2
Visual Studio Code 1.49.3

Terminal

~$ mkdir new-app
~$ cd new-app
~$ mkdir backend frontend
~$ touch docker-compose.yml
~$ cd backend
~$ touch Dockerfile requirements.txt
~$ cd ../frontend
~$ touch Dockerfile

~$ code new-app # open VSCode (and start editing files)

VSCode

`docker-compose.yml`

version: '3'
services:
 backend:
   container_name: new-app-backend
   build:
     context: ./backend
     dockerfile: Dockerfile
   command: sh -c "cd /backend/main && python3 manage.py runserver 0.0.0.0:8000"
   ports:
     - 8000:8000
   volumes:
     - ./backend:/backend
   depends_on:
     - db
     - frontend
   tty: true
 db:
   container_name: new-app-db
   image: mysql:5.7
   restart: always
   environment:
     MYSQL_DATABASE: new-app
     MYSQL_USER: root
     MYSQL_PASSWORD: password
     MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
   volumes:
     - ./mysql:/var/lib/mysql
   ports:
     - 3306:3306
 frontend:
    container_name: new-app-frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile
    command: sh -c "cd /frontend/main && yarn (start)"
    ports:
     - "3000:3000"
    volumes:
     - ./frontend:/frontend
    tty: true

`backend > Dockerfile`

FROM python:3.9
ENV PYTHONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
ADD ./requirements.txt .
RUN pip3 install -r requirements.txt
EXPOSE 8000

`frontend > Dockerfile`

FROM node:13.13.0
RUN mkdir /frontend
WORKDIR /frontend
EXPOSE 3000

`backend > requirements.txt`

Django>=3.0.5
mysqlclient==1.4.6
django-filter==2.2.0
Pillow==7.1.1
djangorestframework==3.11.0
django-cors-headers==3.2.1

Terminal

building images

~/new-app$ docker-compose build

making Django & React applications

Django

~/new-app$ cd backend
~/new-app/backend$ django-admin startproject main

React

~/new-app$ cd ../frontend
~/new-app/frontend$ npx create-react-app main --template typescript

VSCode

editing database setting

`backend > main > settings.py`

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['localhost']

DATABASES = {
    #'default': {
    #    'ENGINE': 'django.db.backends.sqlite3',
    #    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    #}
   'default': {
   'ENGINE': 'django.db.backends.mysql',
   'NAME': 'new-app',
   'USER': 'root',
   'HOST': 'new-app-db',
   'POST': 3306,
   'OPTIONS': {
                'charset': 'utf8mb4',
              },
   }
}

internationalization(optional; the case you're in Tokyo)

# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'ja'  

TIME_ZONE = 'Asia/Tokyo'

Terminal

~/new-app$ docker-compose up

Best Favicon Generator

Takuzen Toh — Wed, 07 Oct 2020 12:54:55 +0000

https://realfavicongenerator.net/