teleren/devto huggingface dataset:
Leaf | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 03:19:35

In order to make a leaf, you can make every corner have a different value, creating unique shapes.



{% codepen https://codepen.io/rembertdesigns/pen/xxPLjqY %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Mobx State Management in React
Tags: mobx, react, pubsub, observable
Published: 2022-05-19 03:18:04

[Github Repo](https://github.com/bronifty/mobx-state-management-in-react)

[Youtube Video](https://youtu.be/__51bI7mCLo)

MobX (v6) State Management in React (v18) using clean / onion architecture for streaming data extract transform and load with 2-way data bindings and 1-way data-flow (base layer => aggregate view => component UI) 

Using clean / onion code architecture to extract, transform and load data in a base layer (data model - aka repository), then to broadcast changes to a view model, which is like an aggregate layer (to flatten for presentation). This view model layer then broadcasts to the UI layer, where it is presented in components (React). Streaming changes with pubsub pattern.
Right Angled Triangle | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 03:11:09

You can even offset triangles to point to a specific corner. For instance point to left bottom

{% codepen https://codepen.io/rembertdesigns/pen/dyZzepj %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Day 564 : I Still Believe
Tags: hiphop, code, coding, lifelongdev
Published: 2022-05-19 02:49:51

_liner notes_:
- Professional : Pretty good day. Had the meeting that I recorded the video for and it went really well. People told me they really liked it. I still believe it gave folks a good update on where we are with the project and where we are going in the future. Had some more meetings and got some projects pushed from my old laptop to GitHub so I can work on them on my new laptop.

- Personal : Last night, basically just worked on recording the video for today. My work laptop was running pretty slow. After that, watched an episode of Atlanta and did some thinking on my next side project. Then went to sleep.

![Overhead shot of a beach in Herzliya, Israel with turquoise water with rock formations coming out and the beach covered with rocks ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jbus8uslxt6163tp6up.jpg)

No clue where the time went. Last thing I remember was getting my projects up on GitHub and the next thing I know it's night time and I haven't written this blog post. haha. Probably look into some stuff for my side project and call it a night. I really need to work on the radio show also.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube P8tIwHzHwXY %}
Parallelogram | Pure CSS
Tags: codepen, css, beginners, 100daysofcode
Published: 2022-05-19 02:31:09

In order to make the parallelogram, we first have to make a rectangle, and then we add the _transform:skew(20deg)_; property. We can also change the degree values according to our own choice.

{% codepen https://codepen.io/rembertdesigns/pen/LYOjmPe %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Ellipse | Pure CSS
Tags: codepen, css, beginners, 100daysofcode
Published: 2022-05-19 02:25:06

Draw a simple rectangle. Your choice of height and width, of the rectangle, will dictate the size and shape of the ellipse.

The **border-radius** refers to the curvature at the corners of the ​shape; it should be set to a very high value (50% to 100%).

To draw a circle (a special case of ellipses) keep the height and width equal.

{% codepen https://codepen.io/rembertdesigns/pen/eYeEMoz %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
How to access localized messages of nuxt-i18n inside the setup function
Tags: nuxt, i18n, hacks, compositionapi
Published: 2022-05-19 02:16:37

Quick snippet, log inside a client check if to avoid server logs get forwarded to browser console, it works server side too.
Im mostly writing this to rember it, i allways forget how to doit 😅️.

Tested in `@nuxt-i18n` 7.X on a nuxt 2 project

```js
setup(props,  ctx ) {

   const { root } = ctx;
   // all the stuff is in the root, who would imagine that ha

   if (process.client) {
      // ctx.root.$i18n.t
      console.log(ctx.root.$i18n.t('my.message.path'))
    }

}
```

And that's how to use `$t` is `nuxt-i18n` inside `setup` function folks.
Semi-Circle | Pure CSS
Tags: codepen, beginners, css, 100daysofcode
Published: 2022-05-19 01:54:50

A Semi-Circle or a Half-Circle shape can be easily created using HTML and CSS. We will use the border-radius property to draw the desired output.

{% codepen https://codepen.io/rembertdesigns/pen/LYOjebm %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Triangle | Pure CSS
Tags: codepen, css, beginners, 100daysofcode
Published: 2022-05-19 01:23:59

Triangles are tricky. You have to set the borders on the element to match a triangle. 

If you want to have a triangle/arrow pointing in another direction, you can change the border values corresponding to what side you want visible. You can also rotate the element with the _transform_ property if you want to be fancy.

{% codepen https://codepen.io/rembertdesigns/pen/gOXxoOq %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Circle | Pure CSS
Tags: codepen, beginners, css, 100daysofcode
Published: 2022-05-19 01:18:00

To create a circle, you can set the border-radius on the element. This will create curved corners on the element.

If you set it to 50%, it will create a circle.

{% codepen https://codepen.io/rembertdesigns/pen/podrdqv %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
The 5 Visual Studio extensions you must have if you are a Frontend Developer
Published: 2022-05-19 01:12:09

Extensions are very useful while working on a project, they help us to be more efficient and to get rid of repetitive actions that take us time as Front End developers and that's why I want to give you my 5 essential extensions that I use in everyday life.

## 5. Code Spell Checker
[Download here](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

This is one of my favorite ones, it's a spell checker in our editor. 

How many times you spell a word incorrectly and you don't realize until it is too late and your code is huge and now you have this disgusting problem.

Or how many times you know that you wrote a word incorrectly but you don't care and you decided to spell it correctly later.


![Code Spell Checker preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2qgeunxspakpw04g915.gif)

It has support in many other languages too.

## 4. Auto Rename Tag
[Download here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

Stop changing html tags twice! This extension saves you time, it automatically rename paired HTML/XML tag, same as Visual Studio IDE does.


![Auto Rename Tag preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1branh5d7tkos1vmslk.gif)

## 3. Prettier - Code formatter
[Download here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.

You can have your own rules to format your code.

![Prettier ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ru7cid0vbehdljptk9f.gif)

## 2. Color Highlight
[Download here](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

With this extension you can visualize your colors in hex, , rgb, rga, etc…
This makes it very easy to see at a glance which colors you’re using.

Just look at this! 


![Color Highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sm8vac9g5rhrpy8glcb.gif)

## 1. JavaScript (ES6) code snippets
[Download here](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Literally I only need these 6 extensions in my code editor, I love them because I really use and need them.

Do you have any other useful extensions I should try? Let me know, it is free!

Follow me on twitter for more content like this @joselatines33
Square | Pure CSS
Tags: codepen, beginners, css, 100daysofcode
Published: 2022-05-19 00:32:07

How To Create A Perfect Square with CSS.

{% codepen https://codepen.io/rembertdesigns/pen/podrdVz %}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these [CSS Examples](https://codepen.io/collection/OLbyor).

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
I have a question!
Published: 2022-05-19 00:13:34

I have a question! design patterns and SOLID principles are the perfect way to use enhancement performance and clean code 
when searching for design patterns I found this question 
Why Are Singletons Bad?
when I read the article I found him opinion's true
so I want to open a discussion on this point 
design patterns and SOLID principles are the perfect or not?
start with Singletons design patterns
 #design_patterns
#SOLID
How to easily make a type from a function's return value in TypeScript?
Tags: typescript
Published: 2022-05-19 00:00:00

---
  title: How to easily make a type from a function's return value in TypeScript?
  published: true
  tags: TypeScript
  date: Thu May 19 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/easily-create-new-type-from-functions-return-value-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-c27cbf55566ee09e393ca9d83296020c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/easily-create-new-type-from-functions-return-value-typescript)
  
To easily make a type from the function's return value in TypeScript, you can use the `ReturnType` utility type and pass the function type declaration which you need to get the type of return value from as the first type argument.

### TL;DR

```ts
// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}

// make type from function's return value
// using the `ReturnType` utility type
type FunctionReturnType = ReturnType<typeof sayGreeting>; // string
```

Let's say we have a function called `sayGreeting` that accepts 2 return value called `name` and greeting both having the type of `string` like this,

```ts
// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}
```

Now to get the type of return value in the `sayGreeting` function, we can use the `ReturnType` utility type and then pass the type of the `sayGreeting` function.

Now you might ask how can we get the type of a function, for that we can use a nifty operator called `typeof` followed by writing the name of the function. This will automatically infer the function's entire type including the return value type. We can then pass this as the first type argument to the `ReturnType` utility type.

It can be done like this,

```ts
// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}

// make type from function's return value
// using the `ReturnType` utility type
type FunctionReturnType = ReturnType<typeof sayGreeting>; // string
```

Now if you hover over the `FunctionReturnType` you can see the type as `string` which is exactly the return type of the `sayGreeting` function.

We have successfully made a type from the function return value in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/easily-create-new-type-from-functions-return-value-typescript-m3q59v?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Day 40: Redux again
Published: 2022-05-18 23:34:13

Hi!
Redux again, today was more of relearning redux basics for me but luckily I found a better way to explain redux concepts and I had to revisit the article I was working on to add the new approach to it and it should be ready by tomorrow hopefully :)
Tomorrow as time is flying so fast after setting redux I should get started with the landing page or looking into more about Material UI and styled components.
by the way it' day 40!!! a month and 10 day and still counting this have is a fun amazing journey of struggling and learning can't wait for 2 months
[Pure CSS] Frank Stella - Harran II (1967)
Tags: codepen, css, art, html
Published: 2022-05-18 23:11:09

A CSS reproduction of Frank Stella's painting.
[Click here](https://www.guggenheim.org/artwork/4003) to see the original one...

{% codepen https://codepen.io/emilio-dominguez/pen/VweLOEm %}
Make your GitHub account attractive and professional
Tags: github, html, design, git
Published: 2022-05-18 22:16:20

If it is in your plan, after graduating from university or from learning programming, to arrange the README for your Github account so that it is ready and looks very good for any job or training..
You are in the right place

In fact, the topic is delicious and simple. I advise anyone to try it from now on, and update everything they like

[https://youtu.be/NTa0hOSPRHI](url)

Learn to design a GitHub README profile
How to setup Flarum in Docker
Tags: webdev, tutorial, opensource, github
Published: 2022-05-18 22:12:00

**To begin**

**Pull from hub.docker.com**
`docker pull mondedie/flarum:latest`

**or build it manually**
`docker build -t mondedie/flarum:latest https://github.com/mondediefr/docker-flarum.git`

**Next setup the docker-compose.yml**

> version: "3"
> services:
>   flarum:
>     image: mondedie/flarum:stable
>     container_name: flarum
>     env_file:
>       - /mnt/docker/flarum/flarum.env
>     volumes:
>       - /mnt/docker/flarum/assets:/flarum/app/public/assets
>       - /mnt/docker/flarum/extensions:/flarum/app/extensions
>       - /mnt/docker/flarum/storage/logs:/flarum/app/storage/logs
>       - /mnt/docker/flarum/nginx:/etc/nginx/flarum
>     ports:
>       - 80:8888
>     depends_on:
>       - mariadb
>   mariadb:
>     image: mariadb:10.5
>     container_name: mariadb
>     environment:
>       - MYSQL_ROOT_PASSWORD=xxxxxxxxxx
>       - MYSQL_DATABASE=flarum
>       - MYSQL_USER=flarum
>       - MYSQL_PASSWORD=xxxxxxxxxx
>     volumes:
>       - /mnt/docker/mysql/db:/var/lib/mysql

**Customise the MYSQL settings to your setup!**

**Create a environment file (see docker-compose: /mnt/docker/flarum/flarum.env)**

**nano /mnt/docker/flarum/flarum.env**

> DEBUG=false
> FORUM_URL=http://domain.tld
> DB_HOST=mariadb
> DB_NAME=flarum
> DB_USER=flarum
> DB_PASS=xxxxxxxxxx
> DB_PREF=flarum_
> DB_PORT=3306
> FLARUM_ADMIN_USER=admin
> FLARUM_ADMIN_PASS=xxxxxxxxxx
> FLARUM_ADMIN_MAIL=admin@domain.tld
> FLARUM_TITLE=Test flarum

**Run your docker compose**

`docker-compose up -d mariadb`
**Wait a moment for the creation of the database**
`docker-compose up -d flarum`
O QUE NÃO FAZER EM UMA ANÁLISE DE PULL REQUEST
Tags: webdev, programming, github, frontend
Published: 2022-05-18 22:01:41

Todas as pessoas que precisam de uma análise para Pull Request já passaram por estas situações:

1° comentários desnecessários
2° opiniões sem **fundamento**
3° tempo gasto em situações que não levaram a lugar algum

Hoje ainda é comum ouvir um dev dizendo a seguinte frase

> “Ah, mas eu faria deste jeito…”

Mas você deve se atentar pois nenhum dev programa da mesma forma.

Se o comentário não tiver **FUNDAMENTO** sobre o porquê aquela linha de código deve mudar você NÃO DEVE FAZER ESTA ALTERAÇÃO.

Vale frisar que padronização de código como clean code, arquitetura, warning do sonar, entre outras padronizações são **fundamentos** para um comentário do PR.

E para você que pratica este tipo de comentário/comportamento, sempre hà tempo de evoluir. Existe uma grande diferença entre o dev Sênior avaliando um PR e o dev Junior, ou seja o dev que ainda está aprendendo como se comportar em situações que exigem um esforço mais técnico, e são em situações como está (exemplos acima) que evoluímos como programadores, focando o esforço em códigos que tem essa possível melhoria com um **fundamento**.

Se você tem esta dificuldade de entender a diferença, você pode se fazer a seguinte pergunta "Esta mudança mudará o comportamento do sistema?" Se não, pode ser que seja irrelevante, pois travaria o dev de subir a sua tarefa apenas para deixar da forma como você achou melhor.

Reserve um tempo para revisar um PR corretamente. Revisar código não é apenas apontar dedos. É também uma oportunidade de aprender com os outros, e para aprender precisamos do **FUNDAMENTO**.

Indico que crie um checklist para sua empresa para alinhar o que realmente estão analisando em seus PR’s.

DICAS DE CHECKLIST 
[https://devchecklists.com/pull-requests-checklist/](https://devchecklists.com/pull-requests-checklist/)
[https://sourcelevel.io/pull-requests-checklists-metrics-and-best-practices-a-definitive-guide](https://sourcelevel.io/pull-requests-checklists-metrics-and-best-practices-a-definitive-guide)

E tenham documentado uma lista de prioridades do que deve ser debatido em um Pull Request, como por exemplo: 

- Erros de código
- Códigos com potenciais bugs
- Padrões de desenvolvimento da empresa (CLEAN CODE, ARQUITETURA, ETC)
- Boas práticas de programação fundamentadas em literatura

LEMBRE-SE 

Se você é Junior, você pode analisar os PR’s tranquilamente de um Sênior, mas sempre tenha evidências(**FUNDAMENTOS**), como LINKS de apoio para apresentar no seu comentário.


Espero que tenha ajudado!:) Deixo aqui meu [linkedin ](https://www.linkedin.com/in/stefany-repetcki/) e [github ](https://github.com/StefanyRepetcki)❤️

Adicionais:

> E complemento que analisar é sobre entender o real impacto e a motivação da mudança/funcionalidade. Analise estática e de estilo em sua grande maioria resolvesse com um CI bem configurado. @MarcosEllys
response.json is not a function TypeError
Tags: json, javascript, webdev, beginners
Published: 2022-05-18 21:39:35

### If you are using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)


The fetch() method returns a Promise that response to a Response object. The json() method basically parses the response for JSON which is then changed to a native JavaScript object.

Use the json method on `response` with correct call to fetch.

 

```
useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
       console.log(data)
       }
 }));
```



### If you are using [axios](https://www.digitalocean.com/community/tutorials/react-axios-react)

Axios keeps parsing the response in check, so we just look into the `data` property of response as it contains the data sent from the server.

```
import axios from 'axios';

useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos")
    .then((response) => {
        const ex = response.data.json();
        console.log(ex);
     });
}
```