Tips CMD

Mao Le — Tue, 23 May 2023 04:09:58 +0000

Working tips

It just note everything when I researching my working issue.

How to know which network you are using when you turn on both ethernet and wifi connections

After researching some guide on the internet. I summarize it to a one line terminal for checking.

The first thing, I will check the IP address from ethernet connection at network setting

After that I use terminal and type the following command:

route -n get 0.0.0.0 | grep interface |  awk '{print $2}' | xargs ipconfig getifaddr

The result will show the ip was active.

0. CSS - Fundamentals

Mao Le — Tue, 24 May 2022 04:37:39 +0000

In this series, I just noted these things about css which I have learnt CSS from scratch. I hope this series can help everyone remind knowledge about CSS.

Media queries

I can be understand as a condition for doing something.

if(condition) {
 // doing some thing here
}

@media (condition) {
  // Doing something here
}

In the css we have two generalized condition into the media query. They are 'max-width' and 'min-width' conditions.

max-width represent for these screens have width between 0 to max-width value

@media (max-width: 300px) {
  // the css code here only for these devices 
  // has width between from 0 to 300px.
}

min-width represent for these screens have width bigger than the value of min-width

@media (min-width: 300px) {
  // the css code here only for these devices
  // has width bigger than 300px
}

Selectors

It means specify what element will be applied the css styling.

/* All a elements will be applied*/

a {
  color: pink;
  text-decoration: none;
}

/* All a elements into article element will be applied*/

article a {
  color: pink;
  text-decoration: none;
}

/* Only a elements has li parent will be applied */
li > a {
  color: pink;
  text-decoration: none;
}

Pseudo-classes

Pseudo-classes used for external styles like history of the navigator :visited, status of its content :checked, or position of the mouse :hover

button:hover {
  color: blue;
}

You can also learn more here

Pseudo-elements

Pseudo-elements are like pseudo-classes, but they don't target a specific state. Instead, they target "sub-elements" within an element.

We need to use :: syntax instead : as in pseudo-classes

Some common Pseudo-elements

// setting color for pseudo-elements placeholder
input::placeholder {
  color: red;
}

// Adding a pseudo-element before p tag and style it
p::before {
  content: '>>';
  color: blue;
}

// Adding a pseudo-element after p tag and style it
p::after {
  content: '<<';
  color: blue;
}

Colors

CSS includes many different way to represent color.

Using color name

p {
  color: red;
}

Using hex code

strong {
  color: #ff0000
}

Using hsl

// this is opacity is 1
.box {
  background-color: hsl(0deg, 100%, 50%);
}

// Setting opacity is 0.75
// using the '/' as separation for the opacity style
.box {
  background-color: hsl(0deg, 100%, 50% / 0.75);
}

Units

There are 3 units which used for changing size-related of these elements. They are px, em, rem

The px unit is a common unit. It use for set size directly on each element.

// setting width and height are 30px. It is fixed unit on the .box elements.
.box {
  width: 30px;
  height: 30px;
}

The em unit is a relative unit, equal to the font size of the current element.

// padding bottom is equal font-size*2, you can change font-size to view the changing of unit em.
p {
  font-size: 18px;
  border: 1px solid black;
  padding-bottom: 2em; // The real pixel is 2*18 = 36px;
}

The rem unit is quite a lot like the em unit, with one crucial difference: it's always relative to the root element, the tag.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; // equal  2*16
  margin: 0;
}

h2 {
  font-size: 1.25rem; // equal 1.25 * 16
  margin-bottom: 1.5rem; // equal 1.5 * 16
  color: gray;
}

p {
  font-size: 1rem; // equal 1 * 16
}

Typography

We use font-family to change the font.

Font families come in different styles.

The 3 most popular:
- Serif
- Sans-serif
- Monospace

Sans-serif vs Serif

// try to use sans-serif or monospace to see what will happen?

p {
  font-family: serif;
}

Text Formating

3 common formatting bold, italic and underline

Bold Text

/* Light, thin text*/
font-weight: 300;

/* Normal text */
font-weight: 400;

/* Heavy, bold text */
font-weight: 700;

Italic Text

font-style: italic;

Underline Text

/* remove underlines from anchor tags: */
a {
  text-decoration: none;
}

Alignment

We can shift characters horizontally using the text-align property

div.left {
  text-align: left;
}

div.right {
  text-align: right;
}

div.center {
  text-align: center;
}

Text Transforms

/* RENDER WITH ALL CAPS */
text-transform: uppercase;

/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;

Text Spacing

Gap between characters using the letter-spacing property.
Distance between lines using the line-height property.

h2 {
  letter-spacing: 3px;
  line-height: 2;
}

Thank you for reading.
Happy coding!!!

Express doesn't save cookie

Mao Le — Wed, 11 May 2022 06:36:07 +0000

Although the response header has 'Set-Cookie: ...' but I didn't see anything at Application -> Cookie in Developer tool of the browser. So I fixed something at the backend (express) and frontend (React and axios) too.

Step 1: Update configuration credentials at Backend side

Currently, I was use the cors() package. So I update credentials for cors()

const app = express();

// Setting credentials
app.use(cors({
  origin: 'http://localhost:3000', // it depends on your site
  credentials: true,
}));

// Setting cookies
res.cookie('cookie-for-me', 'hello-world');

Step 2: Update configuration credentials at Backend side

It almost done after this step.

axios.defaults.withCredentials = true

Final: Run and checking your cookie

You can check by enter document.cookie at the console of the developer tool of a browser to see the result.

If you have any suggestion about the way saving the cookie, please feel free comment as the following the post :)

Forem: Mao Le