
---

## CSS and one-line text truncation

Let’s say, that you have long paragraph and want to show just first line of it and three dots in the edge of that paragraph’s container:

```hmtl
<p>Ipsum dolor sit amet, consectetur adipisicing elit, do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

All you have to do in CSS is to write some extra code:

```css
p {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

Result:

```html
Ipsum dolor ...
```

- **white-space: no wrap** → all text is in one line, there is no line breaks
- **overflow: hidden** → part of text which is outside of selected width (100px) is invisible
- **text-overlflow: ellipsis** → add three dots in the end of visible text

## Multiline text truncation

What when you need to show multiline text? Solution below:

```css
p {
  width: 150px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
```

Result:

```text
Ipsum dolor sit amet,
consectetur adipisicing
elit, do eiusmod tempor
incididunt ut ...
```

You have to hide unwanted text by **overflow: hidden** and use **-webkit-box** as a property of display. Next you need to just to set number of visible line with: **-webkit-line-clamp** and let know that yor content will be lays out vertically with **-webkit-box-orient**. This approach has almost 96% of browsers support according to [caniuse.com](https://caniuse.com/?search=display%3A%20-webkit-box). That is something that you have to be aware of - this solution will not work on all devices.

---

> see you around!


Text truncation with css


---

# Why use that tools together?

Prettier and ES Lint can work together. _Prettier_ can keep your code in wanted format (e.g. use only single quotes) , _ES Lint_ make sure to keep code style in good shape (e.g. always use imported variable). Prettier has more built-in rules, is less editable than ES Lint. ES Lint, on the other hand, is very flexible and you can choose the rules yourself. You can find a list of React rules examples [here](https://www.npmjs.com/package/eslint-plugin-react).

## First steps

Make sure that you have both extension installed in your code editor. You can read how to install Prettier in one of my previous posts. ES Lint can be installed by following steps:

1. install ES Lint into your project:

```js
npm install eslint --save-dev
```

2. create configuration file:

```js
npm init @eslint/config
```

After answering a few questions **.eslintrc.json** file will appear in your root folder inside application. Make sure to add:

```json
"extends": ["plugin:react/jsx-runtime"]
```

to be sure, that you don't have to import _React_ in every file inside your project. You can now add your rules inside to be sure, that ES Lint watch them. If you set value to **1** VS Code will throw a warning if you break that particular rule and if you set **2** will be an error. Example below show how to make sure that you can have only one component in every file:

```js
"rules": {
		"react/no-multi-comp": 1
}
```

## Combine it together

When you installed extension and have both file:

- .prettierrc.js
- .eslintrc.json

install two more packages:

- **eslint-config-prettier** which turns off all ES Lint rules that could conflict with Prettier
- **eslint-plugin-prettier** which integrates the Prettier rules into ES Lint rules

by typing inside terminal:

```html
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

Last thing you have to do is update _.eslintrc.json_ to have following configuration:

```json
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}
```

That's it. From now on, there should be no conflicts between these two packages.

---

> see you around!


Prettier + ES + React


---

Prettier is popular **extension**, used in several code editors to keep your code in restricted styling frames.

## Yes, yes, documentation

Like always, [documentation](https://prettier.io/) allows you dive deeper into this subject.

## Set up JavaScript config file

After installation this extension in your code editor (e.g. VS Code), you can manage some basic settings inside extension's settings. But easy and common way to control your code style is to create in project root directory file named: _.prettierrc.js_. Inside you should use _module.export_ and define an object with code styling:

```js
module.exports = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};
```

## Auto help

Keep in mind, that if you want to have auto correct your code, you should let know about it your code editor. In VS Code, check two places:

1. if auto save is turn on --> use shortcut **ctrl + ,** to start VS Code settings (or open it manually), in filter type **format on save** and make sure that you have checked box: **format on save**.
2. if _prettier_ is default code formatter --> use shortcut **ctrl + ,** to start VS Code settings (or open it manually), in filter type **formatter** and set **Prettier** as default one.

## Your options

You have a lots of possible options. Below you can find some most important in my opinion:

- arrowParens: **"always"** (default - always put parenthenses around a solo function parameter) | **"avoid"** (dont put it)
- bracketSameLine: **true** (put the > of a mulit-line HTML, JSX element at the last line) | **false** (default - put > alone on the next line)
- bracketSpacing: **true** (print spaces between brackets in object literals - default) | **false**
- singleQuote: **false** (default) | **true** (use '' instead of "")
- trailingComa: **"es5"** (where valid in ES5 - default) | **"none"** (no trailing commas) | **"all"** (wherever possible)
- endOfLine: **"lf"** (\n - default) | **"crlf"** (\r\n) | **"cr"** | **"auto"** (set on the basis of the first line)
- tabWidth: **2** (default - number of spaces per indentation-lever) | **some another int**

All list of options you can find [here](https://prettier.io/docs/en/options.html).

---

> see you around!


Config your Prettier


---

## What is SVG?

Scalable Vector Graphics – **SVG** is a universal format of two-dimensional vector graphics (static and animated), free of licenses and patents. SVG was developed for use on the Web. SVG belongs to the XML family, so it can be integrated with other languages, such as XHTML. Vector graphics is a type of computer graphics where the image is described by geometric figures placed in a mathematically defined two-dimensional coordinate system. Vector graphics - also called object graphics - is related to the fact that the image is described by primitive objects, i.e. simple geometric figures such as: segments, curves, circles or polygons. The objects are uniquely defined which mean they have its position defined by parameters and its appearance by attributes. SVG files do not lose their sharpness when scaled, because they are not a collection of pixels, but vectors (objects) and the quality depends only on the accuracy of the description of the data of the constituent objects of the image. Another advantage of it is that they take very little memory and can be placed directly in the page code, no need to download it.

### How to insert it into code?

SVG files can be putted between <svg> tag or as source in <img> tag. In the first case, we have more control over the element, because we can add a class to each figure in the image and change its appearance in css, however it usually take up many lines of code. When we download the svg file to the <img> tag, we do not have such control, even if in the external file the classes are assigned. In addition we have to put xmlns=”http://www.w3.org/2000/svg” inside svg open tag.

![example of putting svg into code](svg-example-one.svg)

### Use one SVG multiple times.

Put the code with the SVG at the very bottom of the page where it won't make a mess, wrap inner code in a <symbol> tag with a unique ID and now it can be recalled anywhere with the <svg> and <use> tags with particular ID. Without recall the image will not display, thanks to the <symbol> tag. Example below.

```js
//declaration
<svg width='200' height='200'>
  <symbol id='example'>
    <rect width='100%' height='100%' fill='red' />
    <circle class='circle' cx='150' cy='100' r='40' fill='green' />
    <text x='100' y='125' font-size='60' text-anchor='middle' fill='white'>
      SVG
    </text>
  </symbol>
</svg>
```

```js
//calling
<svg>
  <use href='#example'></use>
</svg>
```

_Note that Safari does not support 'href' attribute in the <use> tag. It needs this syntax: xlink:href="#ID" and it is best to type both, just to be sure._

### Creating shapes

In general, we add shapes, lines or text between the opening and closing <svg> tags. Each of these elements must have a specific position on our canvas and appearance. Many attributes are set by default (e.g. background color to black). The order in which elements are entered in the code determines which element is above which. In the example below, we draw a circle by using the appropriate <circle /> tag and specifying it in the viewport: radius 50px, center located 100px horizontally and 100px vertically from the start of our canvas (i.e. the top left corner). Fill color: blue.

```js
<svg width='100' height='100'>
  <circle r='50' cx='50' cy='50' fill='blue' />
</svg>
```

Some shapes:

- <circle /> - circle, requires attributes: radius **r**, horizontal position **cx** and vertical position **cy**.
- <rect /> - rectangle, we control the position of the upper left corner: **x**,**y**, also: **width** and **height**. We can round the **rx** and **ry** corners.
- <line /> - line, requires a starting point **x1**, **y1** and an ending point **x2**, **y2**, **stroke** and **stroke-width**.
- <poligon /> - polygon, the next vertex points are given in the points attribute, in pairs, separated by spaces: **points=”50,50 200,50, 200,200”**.
- <polyline /> - lines, its next points are given in the points attribute, in pairs, separated by spaces: **points=”0,0 30,50, 100,100”**, require setting **stroke**, **stroke-width** and set **fill to none**.
- <text>my text</text> - require position of upper left corner of text : **x**,**y**.

Some attributes:

- fill – background color: fill = "# ccc", if we do not want a background, enter 'none'. The default is black.
- fill-opacity – background transparency, 1 - full color, 0 - transparent.
- stroke – border: stroke=”black”.
- stroke-width - border width.

### Defining the canvas size

In the <svg> tag itself, we specify the canvas dimensions. We can use two options here:

- viewport - the dimension of our canvas defined by its width (width) and height (height). We can define the attributes directly in our <svg width="50" height="50" > tag, or assign a class in it and define the width and height in css.
- viewBox - optionally, next to the viewport - controls how we see our canvas, it's like a zoom, we give it the coordinates of the upper left corner (where it should start in relation to our viewport) and then the width and height, which will create a visible rectangle, cut from our viewport (zoom-in), or fitted to it(zoom-out).

![defining the viewport](svg-example-two.svg)

Same viewport, but we add a viewBox that starts in the center of the circle and is 300px wide and 300px tall, all fitting into the existing viewport dimensions:

![defining the viewBox](svg-example-three.svg)

It may by a little confusing, I hope picture below can explain it more. It show how to use viewBox to zoom-in an object.

![explaining the viewBox](svg-example-four.svg)

### Do you want more?

I hope I have introduced you to the topic of SVG graphics, if you want to know more, there is a lot of information on this in the Internet. You can check it out [here](https://www.w3schools.com/graphics/svg_intro.asp) or find it on your own.

---

> see you around!


How to start with SVG?


---

NextJS is a **framework for ReactJS**.

_framework_ is bigger then library (e.g. React), contains rules and more build-in elements. NextJS solves many basic problems and makes it easier to build React applications.

![what give us NextJS as framework](next-framework.png)

### What makes Next special?

As see above, thera are three major reasons to use NextJS:

1. preparing pages content on the server, not in browser
2. simple file-based routing
3. possibility of making backend code

#### 1. SEO and SSR or SSG

Google robots, when looking for your page created by plain ReactJS, don't see your content, because server sending all your pages inside JavaScript, which controls what you see in browser. It is not good if you care about SEO (Search Engine Optimization). NextJS has a solutions for that:

- SSR - static site rendering - pages are generated at build time with the 'build' script and possibly, if we add such an option, updated every specified period of time to keep the content up to date, which may change after the upload (e.g.: comments added by users).
- SSG - server site generation - pages are generated 'on the fly' after deploying, after each request received.

SSR and SSG use special function, which you can put inside javascript files inside _pages_ folder (about _pages_ folder below). Just there. Both function's code is visible only on server, so your credentials are safe here, NextJS take care about that.

SSR use function **getStaticProps()**, which looks like that:

```js
export async function getStaticProps(context) {
  //fetch some data here
  return {
    props: {
      data: myFetchedData,
    },
    revalidate: 60,
  };
}
```

- context - argument giving us access to our url to create dynamic pages.
- return - function return an object, which have to contain key: _props_ which value is another object whit data passing to our component as props.
- revalidate - another key, which take number as value. That number is a period in seconds after which pages will be re-rendered if they are requested.

This is just a brief highlighting of the topic. If is that interesting for you, you can read more in official [documentation](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering).

#### 2. Page folder.

NextJS has a file-system based router built on the concept of pages. When a file is added to the _pages_ folder, it is automatically available as a route.

- index routes: the router will automatically route file name _index_ to the root of the directory:

```js
'pages/index.js' -> '/'
```

- nested routes: if you create a nested folder, files will automatically routed in the same way. Next route to the index.js file when route fit to the folder name, if you want reach files inside folder with specific name, rout must contain it:

```js
'pages/blog/index.js' -> '/blog'
'pages/blog/my-post.js' -> '/blog/my-post'

```

- dynamic routes: to match a dynamic segment, you can use the bracket syntax. This allows you to match named parameters:

```js
'pages/blog/[slug].js' -> '/blog/:slug' '(e.g. /blog/id-1)'
'pages/[username]/my-posts.js' -> '/:username/my-posts' '(e.g. /tom/settings)'
'pages/posts/[...all].js' -> '/posts/*'  '(e.g. /posts/2020/id/title)'
```

More information inside [documentation](https://nextjs.org/docs/routing/introduction).

#### 3. Fullstack App

NextJS allows you to put backend code inside _getStaticPrpos()
_ and _getServerSideProps_ but also allow you to make your own REST API to make requests and responses to reach some data. You just need to make in folder _pages_ folder named: **api**. Inside, similar to file-based routing, name of js file is our api endpoint.

```js
'pages/api/fetchData.js' -> '/api/fetchData'

```

Inside you can write code similar to Node and express.js where you have access to response and request object of http request. If you want, you can [read more](https://nextjs.org/docs/api-routes/introduction).

---

> see you around!


Why do we need NextJS?


---

## What is Markdown?

Markdown is a lightweight markup language that you can use to add formatting elements to your plain text in documents. Created by John Gruber in 2004. Main goal of this language syntax is to make it as readable as possible, even before rendering it. Idea is easy: you just put some special characters inside your text (for example: **# Heading One**) and you receive a special tag (**<h1>Heading One<h1/>**) after rendering whole text document. The questions is why use such tool as markdown when you can use some WYSIWYG editor like Notepad, Microsoft Word instead? So, there are answers:

- versatility – you can use markdown to write websites, documents, notes, books, presentations, emails and messages
- portable – files containing markdown-formatted text you can open by any application which supported that format
- independent – you can create Markdown-formatted text on any device running any operating system
- safe – even in the future, if application you are using stops working, you will still be able to read your documents because of readable syntax
- common – a lot of webpages support this language (all readmes in GitHub use Markdown).
- easy – it does not take long time to learn Markdown syntax

### How does it work?

When you write in Markdown, the text is stored in plaintext file that has an .md or .markdown extension. Next some application (like Dillinger) open your text and convert Markdown-formatted text to HMTL so it can be displayed in web browsers. Alternatively you can use this app to save the text in a different format (e.g. pdf).

### How does Markdown syntax looks like?

The rules are simple: every line of text is rendered into paragraph tag <p> unless you use some special syntax that let know to the compiler that some piece of code should be treated differently. For example, below you can see some example how achieve this:

```md
# h1 title
```

Code above will return:

```html
<h1>h1 title</h1>
```

The more \# characters, the smaller the header. If yo want bold text, simply wrap content between to asterixes:

```md
**bold content**
```

Code above will return:

```html
<strong>bold content</strong>
```

To italicize text, add one underscore before and after a word op phrase:

```md
_italic text_
```

Code above will return:

```html
<em>italic text</em>
```

Want put a link? No problem, just use special syntax and enclose the link text in brackets and then follow it immediately with the URL in parentheses:

```md
[Duck Duck Go](https://duckduckgo.com)
```

Code above will return:

```html
<a href="https://duckduckgo.com">Duck Duck Go</a>
```

And so on! There are so many places in the Internet with Markdown's syntax documentation, where you can read more, for example open-source [Markdown Guide](https://www.markdownguide.org/). If you want to practice and see in real time result of your work, you can use one from many online applications to write in Markdown, like recommended by Markdown Guide [Dillinger](https://dillinger.io/).

### How I use Markdown?

All posts on this blog are made thanks to Markdown. In a simple and fast way, using the appropriate syntax, I write the content and save it in a file with the _.md_ extension. Then I import the content of these files via **Next.js** and convert it to HTML, then display in the browser. I am using the [react-markdown](https://github.com/remarkjs/react-markdown) package as a converter.

---

> see you around!


All Posts

Text truncation with css

Prettier + ES + React

Config your Prettier

How to start with SVG?

Why do we need NextJS?

Markdown language