VS Code 터미널에서 Fish shell 설치 및 테마 설정, 아이콘 깨짐 해결

  1. 폰트설치

    VS Code 종료 후 windows에 폰트를 다운 받아 설치한다.

    MesloLGS NF Regular.ttf

    MesloLGS NF Bold.ttf

    MesloLGS NF Italic.ttf

    MesloLGS NF Bold Italic  

2. VS Code 터미널 폰트 변경

   GitHub - romkatv/powerlevel10k: A Zsh theme 참고.

   설정->사용자>기능->터미널->Integrated: Font Family->MesloLGS NF 로 설정

   설정 후 고정폭 글꼴이 아니라는 안내창 나오면 해당 창 닫고 VS Code restart

   

3. fish shell 설치 fish shell

   $ sudo apt-add-repository ppa:fish-shell/release-3

   $ sudo apt update

   $ sudo apt install fish

4. fish 테마, 플러그인 매니저 설치

   여기선 Fisher를 사용한다. GitHub - jorgebucaran/fisher: A plugin manager for Fish.

   $ fish => 먼저 fish 쉘 실행

   $ curl -sL https://raw.githubusercontent.com/jorgebucaran/fisher/main/functions/fisher.fish | source && fisher install jorgebucaran/fisher

5. prompt manager 설치. 테마이다. 이쁘게 쉘 꾸며주는.

   GitHub - IlanCosman/tide: 🌊 The ultimate Fish prompt.

   여기선 Tide 설치. 마찬가지로 fish 쉘에서 설치해야한다.

   $ fisher install IlanCosman/tide@v5

  설치된 후 바로 원하는 모양으로 선택하는 화면이 나온다. 본인의 입맞에 맞게 선택 후

  마지막에 Y 

6. 설치 및 셋팅 완료 후 쉘이 위 이미지처럼 나오면 OK. 아이콘이 깨져나오면 폰트 설치 및

   셋팅을 다시 확인해 본다.

 

18 Commands That Will Change The Way You Use Linux Forever

18 Commands That Will Change The Way You Use Linux Forever - YouTube

1. `cd -` : back to the last directory we've been to.

2. `ctrl+l`: clear screen

3. `reset`: clear on steroids - resets terminal session

4. `pushd /var` + few other `cd` commands + `popd`: commands that allow you to work with directory stack and change the current working directory

5. `vim /etc/ssh/sshd_config` + ctrl+fz : isn't closing, but minimizing the window to the back ground

`fg` : bring back the window to the front.

6. `apt update`: would fail - cuz we fogot sudo

 `sudo !!` : would run the last command as sudo

7.

8. run command that already been run - `history`, choose a number of command

and run it `!102` -> the 102 command from the history would run again

9.HISTTIMEFORMAT="%Y-%m-%d %T"

`history` would should the history commands by the format.

another way to add the format, is add it to the `~/.bashrc` file with `vim` or `nano` commands.

10.cmatrix -> let you look cool + ctrl c to escape

11.adjust font `shift +` or `shift -`, `reset` command would reset the font size

12. `ctrl a` - start of the line

`ctrl e` - end of the line

13.chainning commands -> `ls -l; echo "hello" `

or -> `ls -l && echo "hello" `

&& - would stop when meets an error

; - would pop up an error and keep on running the second/next command

14. `tail` / `head` commands to see top or bottom of a file.

15. truncate (be cautious while using this one - its risky)

it allows to change the size of a very large files (like log files)

for example `truncate -s <size_of_file> <name_of_file>` == truncate -s 0 hello.txt to empty the hello.txt file

16. `mount | column -t` : make sure all the output shows in columns 

any verbose and messy command output would look better using `| column -t`

Laravel에서 constant or global variable 정의 best practice

 namespace App\Constants;

abstract class KeyConst

{

    const KEY_1 = "TUWYC";

    const KEY_2 = "DeNda";

    const KEY_3 = "tkz0w";

    const KEY_4 = "kVZLp";

    const KEY_5 = "g0sKJ";

}

해당 경로에 class 생성.

controller에서 아래 처럼 사용

use App\Constants\KeyConst;

$env_result = KeyConst::KEY_1;

혹은

config/app.php 에 alias 추가 후

'aliases' => [

  //...

  'MyConst' => App\Constants\KeyConst::class,

 Save

Finally use them wherever you like (controllers or even blades) :

controllers or blades 에서 사용

MyConst::KEY_1;

상수 추가 후 composer dump-autoload 등으로 로드해줘야 함.

브라우저 개발모드 팁!

*  document.designMode

open the browser console and type the following:

document.designMode = 'on';

꼭 알아야될 10가지 JavaScript 기본 컨셉

 

1. Arrow Function

1. Traditional functions have ‘this’ keyword but arrow functions have no ‘this’ keyword.
2. Traditional functions have ‘arguments’ keywords but arrow functions have no ‘arguments’ keywords.
3. Traditional functions can use as ‘constructors’ but arrow functions can not use as ‘constructors’.

const sum = (a, b)=> {
  return a+b;
}
console.log(sum(5, 7)) // output, 12const multiply = (a, b) => a*b 
console.log(multiply(5, 7)) // output, 35const double = a => a*2
console.log(double(5)) // output, 10

2. Default parameters

function add(a, b=5){
  return a+b;
}
console.log(add(7)) // output, 12function add(a, b=5){
  return a+b;
}
console.log(add(7, 4)) // output, 11

3. IIFE Function

IIFE full meaning — Immediately Invoked Function Expression

(function (){
  console.log(5+7); 
})(); // output, 12

4. Spread operator

Spread operator(…) or three dots are the es6 Features. You can concat array, object, and string by using the spread operator. It is used for array expression or string to be expanded or an object expression to be expanded in places. You can copy all the elements of an array, all the properties of an object, and all iterable of the string.

const numbers = [1, 8, 5, 15, 10];
console.log([...numbers]) // output, [1, 8, 5, 15, 10]
console.log([...numbers, 65]) // output, [1, 8, 5, 15, 10, 65]const user = {name: 'Shuvo'}
console.log({...user}) // output, {name: 'Shuvo'}
console.log({...user, id: '1'}) // output, {name: 'Shuvo', id: '1'}

5. isNaN() Method

isNaN() Method returns true if the argument is NaN, Otherwise it returns false.

console.log(isNaN(12)); // output, false
console.log(isNaN("false")); // output, true
console.log(isNaN("12")); // output, false
console.log(isNaN("")); // output, false
console.log(isNaN("12as")); // output, true

JavaScript has two types of data types. Primitive and Reference or Objects and Functions.

6. Primitive Values

There are 7 Primitive data types. They are___

1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. Symbol
7. BigInt

console.log(typeof(5)) //output, "number"
console.log(typeof('Hello')) //output, "string"
console.log(typeof(true)) //output, "boolean"
console.log(typeof(undefined)) //output, "undefined"
console.log(typeof(null)) //output, "object"**In JavaScript, typeof null is "object". We can consider it a bug in JavaScript and we can think it should be "null".

7. Reference or Objects and Functions

Without primitive data types, javaScript’s other data types are reference data types. They are ____

1. Object
2. Function

Arrays, regular expressions, and dates are the Object type.

console.log(typeof({name: 'Faysal'})) //output, "object"
console.log(typeof([1, 2, 5])) //output, "object"
console.log(typeof(() => 4+4)) //output, "function"
console.log(typeof(/exp/)) //output, "object"

8. Double Equal(==) vs Triple Equal (===)

console.log(5=="5") // output, true
console.log(5==="5") // output, false
console.log(1==true) // output, true
console.log(1===true) // output, false
console.log(0==false) // output, true

9. Ternary Operator

const number1 = 5;
const number2 = 8;
const largest = number1 > number2 ? number1: number2;
console.log(largest) // output, 8

10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces { }. In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator = and on the right side, we use that object.

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol[]. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator = and on the right side, we use that array.

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces . In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator and on the right side, we use that object.{ }=

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator and on the right side, we use that array.[]=

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

// array destructuring
const [num1, num2] = [5, 10];
console.log(num1, num2) // output, 5, 10
const [, num2] = [5, 10];
console.log(num2) // output, 10
const [num1, ...other] = [5, 10, 15];
console.log(num1, other) // output, 5, [10, 15]// object destructuring
cosnt {num1, num2} = {num1:5, num2:10};
console.log(num1, num2) // output, 5, 10
const {num2, num1} = {num1:5, num2:10};
console.log(num2, num1) // output, 10, 5
const {num2} = {num1:5, num2:10};
console.log(num2) // output, 10
const {num1, ...other} = {num1:5, num2:10, num3: 56};
console.log(num1, other) // output, 5, {num2:10, num3: 56}

:where() :is()

 

:is()

Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}.nav li,
.nav p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter, quicker, and more elegant way.

.main :is(h1, h2, .heading){
  line-height: 1.2;
}.nav :is(li, p) {
  padding: 5px 10px;
}

Imagine all the many lines you’re saving!
This is very similar to how nesting works with preprocessors such as SCSS.

The pseudo-class function :is() (AKA “Matches Any”) takes a selector list and selects any element that can be selected by one of the selectors in that list.
It can also be chained with other selectors such as :not() , :firstchild() etc.

9 HTML Features

 1. The <optgroup> element

 2. The <base> element

 3. The <del> and <ins> elements

 4. The <wbr> element

 5. The <fieldset> element

 6. Opening the Device Camera

Did you know that you can use HTML to access a user’s device camera? By using the attribute, you can open either the front or back camera of a mobile device to capture images. Simply add the attribute to the file input element and specify either "user" for the front camera or "environment" for the back camera.

<input type="file" capture="user" accept="image/*">
<input type="file" capture="environment" accept="video/*" />

 7. Spellcheck Activation

<input type="text" spellcheck="true" lang="en">

8. Preventing Translation

<p translate="no">Brand name</p>

9. Customizing Form Validation Messages

<input type="text" required oninvalid="this.setCustomValidity('Please enter a valid value.')">

10. Responsive Images with srcset

<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg3x" src="image.jpg" alt="Responsive Image">