teleren/devto huggingface dataset:
Always write at least 1 end-to-end test. You'll love it, I promise.
Tags: beginners, testing, webdev, productivity
Published: 2021-03-01 14:56:20

The cover image shows you how I felt the first time I ran an end-to-end test of a web service I was developing. You can feel like that too. If you always write at least one end-to-end test as soon as you start developing a new project or a module in your project. Why?

## Why?

Because even in the early stages of development it will save you a lot of headaches and time: you won't have to check manually if things work every time you make changes to the code.

I shed a tear every time I think about how much time I've spent in my early dev years having to run the code and check that things work every time I changed an env variable name or fixed a bunch of linting errors.

## Bonuses 

- by being lazy like that, you'll join the high echelons of programmers who have the test framework always set up and ready to accommodate more tests when you feel fancy enough to add some
- if you're anything like me and you tend to postpone writing tests on hobby projects, following this principle will help you conceptualize the problem as not-a-big-deal-at-all since you only promised to add 1 test (the rest will eventually follow)

## What kind of test to write? 

For a front-end, it's nice usually nice to have some kind of simple click-through with a login step (if your application consists of such) and making sure that all the views/pages are accessible and rendered. For a micro-service or an API, it's great to have it accept some data and check the response or that it saved things in the database correctly.

## Remember git hooks
You got this far in automating something that takes your time unnecessarily. Then why run the `npm test` command manually? [Husky](https://typicode.github.io/husky/#/) makes git hooks simple and fun. You just write a simple script, call it pre-push and your tests will run automatically before the code gets pushed to the remote.

## Remember Docker
Synchronizing applications and services for testing can be a headache so make sure to have a nice and clean docker setup so you can easily spin up containers that depend on each other for testing purposes.

And if you're not on the Docker train yet, you should definitely incorporate DevOps skills into your practice. It's a must.
DEV.TO is great, you wanna know why?
Tags: random, freelancer, javascript, php
Published: 2021-03-01 14:50:40

First, happy Monday to all around the world! I want to clarify that I am not part of dev.to, but an [independent freelance developer](https://typo3.com/partners/professional-service-listing/detail/typo3-freelancer) and just recently started to write on dev.to. The article reflects my personal opinion after 10 days on this awesome platform.

##How did I come across DEV.TO?
First, I noticed the site particularly often in Google news. I liked some of the headlines and occasionally read some articles. I especially liked the clear and bright layout and the short logo with simple design. I like short brand names, logos and few colors. Perfect for capturing the content it's all about.

##My motivation to write on DEV.TO
I like writing. But I also want to share my knowledge and of course build my status as a freelancer. Here are some of the things I like most about DEV.TO as a writer:

- Clear interface without a lot of bells and whistles
- Fast Markdown editor for posts
- Easy to get started
- Easy login via GitHub or any other platform
- You get attention relatively fast
- You can save several drafts

Maybe I will extend this list later..

##My balance after 10 days:
- 8 (test) [articles](https://dev.to/typo3freelancer) written
- 788 post views
- 10 followers
- 30 post reactions
- 10-20 likes submitted
- 5-10 comments written

### I am going to share my Dashboard stats with you guys
<img src="https://i.imgur.com/wHT2HMi.png" alt="DEV.TO Dashboard Screenshot">

**I am pretty satisfied with that for the start! I figured out that [JavaScript](https://dev.to/t/javascript) seems to be a big topic here amongst some other things.**

## Where do I share the links to my articles?
To promote an article on DEV.TO, I share the link on LinkedIn, Twitter and [EchoJs.com](https://www.echojs.com/). That's enough to start with.

##What will I write about in the future?
My best disciplines are Backend and Frontend Development in general, [PHP](https://dev.to/t/php), pure JavaScript, jQuery, Extbase ([TYPO3](https://dev.to/t/typo3)), HTML, CSS, SASS, screen design, Bootstrap and more. I'm still in the testing phase right now, writing random articles. There will also be articles about the TYPO3 CMS.

**If you have ideas for articles, post them in the comments!**

Thanks for reading!

###Check my other Channels:
- [YouTube](https://www.youtube.com/channel/UC_PtQESDvj-GZNeo9LarRuA?sub_confirmation=1)
- [Twitter](https://twitter.com/koehlersimon)
- [Instagram](https://instagram.com/typo3freelancer)
- [LinkedIn](https://www.linkedin.com/in/typo3-freelancer/)
Style console.log() output with CSS
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-03-01 14:42:41

In this video, I’ll show you how to style `console.log()` output with CSS. We will use a **CSS format specifier** which allows us to customize the display in the console and we will also see few demos related to it.

### Format specifier

A format specifier consists of a `%` symbol followed by a letter that indicates the formatting that applies to the value. The parameters following the string apply to the placeholders in order.

### CSS Format specifier

The CSS format specifier allows us to customize the display in the console. We will need to start the string with the specifier (`%c`) and give the style you wish to apply as the second parameter.

### Demo Code

If we try to copy-paste the below code in the Google Chrome dev tools console,

```js
// Console output, but with green color
console.log("%cHello World", "color: green");
```

and we get an output like this in the console:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oi5uaj36kejvfxshxf9.png)
 
and if we try this:

```js
// Same console output, but with green color & bold font weight
console.log("%cHello World", "color: green; font-weight: bold;");
```

Output:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaf7xnx6cud3bkvda53p.png)

and if we try this below code: 

```js
// Here is another example using multiple CSS style rules
console.log(
  "%cShare on Twitter",
  `color: #fff;
  background-color: #1da1f2;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;`
);
```

and we get an awesome output in the console like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvsz7xsrt7rli45zyoru.png)
 

I have a full video where this is explained in full details if you're interested.

{% youtube 4RTBegxiE50 %}

<center>[How to style console.log() output with CSS](https://youtu.be/4RTBegxiE50)</center>

<hr/>

### Wrap Up

I hope you will find this video useful and learn something new in the process. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, please make sure to [subscribe on YouTube](https://www.youtube.com/channel/UCnnhIfN-A4JPs2ogiN59MRA?sub_confirmation=1).

Happy Coding!
Shorts ( 30 seconds ) read on ReactJS HTTP for every developer
Tags: javascript, webdev, beginners, tutorial
Published: 2021-03-01 14:41:14

ReactJS is a modern and powerful framework for creating front-end applications. Calling an API for retrieving data is a common operation and there are several ways to achieve the same in ReactJS. 

Below are shorts ( #microideations ) on different reactjs HTTP topics that you can save for quick reference. 

They are helpful to get you started as a beginner or refresh your memory if you are an experienced developer.

* [fetch API](https://portal.microideation.com/viewer/ideation/60004e3af11dbd22032ff245)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8wfhv6vk4l242pfcjif.png)
* [axios](https://portal.microideation.com/viewer/ideation/5fff163df11dbd22032ff235)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6wangyb6ht3dp357dbb.png)
* [axios vs fetch](https://portal.microideation.com/viewer/ideation/6001c689f11dbd22032ff2a0)
* [axios interceptors](https://portal.microideation.com/viewer/ideation/600043d9f11dbd22032ff23f)
* [axios request interceptors](https://portal.microideation.com/viewer/ideation/600045b9f11dbd22032ff241)
* [axios response interceptors](https://portal.microideation.com/viewer/ideation/60004ad7f11dbd22032ff243)
* [axios create](https://portal.microideation.com/viewer/ideation/5fff1899f11dbd22032ff237)
* [axios catch error](https://portal.microideation.com/viewer/ideation/6001c1f8f11dbd22032ff27d)
* [axios clean up or finally blokc ](https://portal.microideation.com/viewer/ideation/6001c44af11dbd22032ff29c)
Keep the footer at the bottom
Tags: css, html, webdev, tutorial
Published: 2021-03-01 14:39:40

<!-- Sirage AL DBIYAT -->
<!-- Sirage -->
<!-- iLoveSemicolons i love semicolons semicolons -->
<!-- Lyon web development -->
<!-- javascript developer france lyon -->
<!-- Footer design at the bottom -->
<!-- open source -->




A Page footer should be always kept at the bottom of the page, for some it is maybe a difficult task, taking 1-2 hours to accomplish while it is pretty simple. Probably you are reading this right now because you are stuck on it. Let’s show you how to keep the footer where it belongs in 2 steps (with explanation).

TL;DR Go to the bottom to see the code.


***


1- add a *footer* under your *body* then add a class *.footer* to it, then add these properties to the class.
```CSS
.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}
```
Explanation :
- putting a position absolute in our footer will remove it from the document flow so we are free to give it a new position.
- Since it is a position absolute we give it a bottom: 0, but this wont let the footer go to the bottom of the page, instead it will be placed relatively to the containing block which is the *body* in our case.


------

2- We should now create an HTML element under *body* wrapping all pages content including footer and header, add to this element a class and let’s call it *.mainContainer* 

```CSS
.mainContainer {
    position: relative;
    min-height: 100vh;
}
``` 
Magic !, Now the footer is at the bottom of the page.
Explanation : 
- When an element with a position:absolute contained by an element with a position: relative it will be placed according to the parent element.
- giving a min-height : 100vh means that the *mainContainers* height will always take 100% of the browser page height.


As a final result, you have now the footer at the bottom of the page, contained by *mainContainer*.

------


<h3>TL;DR Here is the code</h3>

```HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div class="mainContainer">
        <div>
            My content
        </div>
        <footer class="footer">
            My footer
        </footer>
    </div>
</body>
</html>
```

in your main.css
```css
.mainContainer {
    position: relative;
    min-height: 100vh;
}

.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}

```
---

- you can [follow me on twitter](https://twitter.com/iLoveSemicolon).

- Check my website [iLoveSemicolons.io](https://ilovesemicolons.io) for more articles/tutorials and Open Source project

Happy coding :)
Increase Root Partition Size On Fedora
Tags: linux, root, partiton, tooling
Published: 2021-03-01 14:38:05

## Introduction

I recently was in the need of extending the root partition size on my system and spent quite some time figuring out the approach to follow in doing so without losing data.

My scenario was I wanted to shrink the /home partition and use that space to increase root partition size. In this blog, I will be sharing how I was able to do the same quickly as possible.

## Backup, Backup, and Backup

Always take a backup before shrinking/expanding or doing any configurations on your partitions. If you already have backups in your place then you are good to go, but If you don't then you can follow along from this tutorial to [create a backup using tar command](https://akashrajpurohit.com/blog/backup-users-home-directory-in-linux-using-tar-command/).

Now if you already have enough space, you can skip the next step of shrinking any partition to get the space available. Although in my case, I did not have extra space, I had to shrink it from the home directory.

## Shrink Home

There are some prerequisites before we start the shrinking process.

To follow along, the first thing that you want to do is to switch yourself to the root user. And by switching means logging out from your non-root user and login in with username as root and your root password.

**Note:** You have to go into root user because your non-root (the current user) would be mounting the home directory, so for shrinking, you would have to unmount the home partition but since some processes might be using this partition it might throw you the error like

```bash
Do you want to unmount "/home" ? [Y|n] y
umount: /home: target is busy.
fsadm: Cannot proceed with mounted filesystem "/home".
  /usr/sbin/fsadm failed: 1
  Filesystem resize failed.
```

You can check if the target is busy or not using the `fuser -mv /dev/mapper/fedora_localhost--live-home`.

Remember you can check where your fedora `root` and `home` partition is mounted using `fdisk -l` command. In my case it is fedora_localhost--live-root and fedora_localhost--live-home)

Now to shrink this partition we will use `lvresize` tool.

```bash
lvresize -L -20G --resizefs /dev/mapper/fedora_localhost--live-home
```

This will shrink 20Gb from home.

## Extend Root Partition

Now you can see available space using the `vgs` command.

```bash
vgs
```

The output will be like this

```bash
  VG                    #PV #LV #SN Attr   VSize     VFree
  fedora_localhost-live   1   3   0 wz--n- 475.35g    20g
```

Now we can add this extra space into the root using the same `lvresize` tool. But now instead of -20G we will add +20G to root.

```bash
lvresize -L +20G --resizefs /dev/mapper/fedora_localhost--live-root
```

And that's it, reboot your system and login with your normal non-root user and you would have your root size increased.

Hope this helped you. See you in the next one.
Building the same app on React Native, Swift and Java!
Published: 2021-03-01 14:33:05

While I was studying Swift I couldn't stop thinking about the similar things that this language has with java(for android dev) and how some things are easier to do in React Native than on the native devices languages, of course, we have awesome things on native languages too. So I decided to create the same app three times: With Swift on Xcode to Ios, with Java on Android Studio to Android, and Javascript with React Native to Android and Ios.

### Summary
 * [ How it will be](#how-it-will-be)  
 * [ Steps](#steps)  
 * [ About the app](#about-the-app)  
 * [ Final thoughts](#final-thougths) 

###### generated with [Summaryze Forem 🌱](https://summaryze-forem.vercel.app/)

## How it will be
This is not a professional comparison with technical benchmarks or some like that, it's just a review or a dev blog, taking about this awesome experience.
I will consider somethings at the end, they are:
- How much time I spent on the project.
- How many external libraries I used.
- How easy it was.
- The project size (files)

## Steps
It clearly will be a series, so, this is the intro post, I suggest you follow me to receive the notifications about the new parts. I will try to do one part for a week (i hope), letting the React Native for the last one part.
I will need to create an API to server the apps, I can use [json server](https://www.npmjs.com/package/json-server) or build a simple API with [nodejs](https://nodejs.org/en/) and [express](https://expressjs.com), I will think about it during the development.

## About the app
It needs to be a very simple app, so I decided to create a simple screen with some posts, like a social network, with a User name, post date, post content, and likes count.
I want to test somethings on this project, they are:

- Ui building time and precision
- Data management
- HTTP requests
- Gesture events (click)

This is the [prototype](https://www.figma.com/file/0El7LnIiaYUu7zgSRsB1Xr/A-mobile-UI-test?node-id=0%3A3&frame-preset-name=iPhone%2011%20Pro%20Max) and how all apps have to be:
![App preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wlwkmcgs7vu1yh30ghc.png)
Clean and very basic.

## Final thoughts 
So, this is it, I hope you like this series cause I am very excited 🤩!
I will prefer Java to Kotlin here cause I already have some experience with Java and Android Studio.
Why not typescript ? I don't think typescript will help me on this very small project.
So, send me good vibes to help me finish this project!  😀
I am looking for people who need a mentor
Tags: help, beginners, codenewbie, career
Published: 2021-03-01 14:20:37

Hi all,

My name is Hossein and I am going to work on a few small (personal) software projects in the coming months, ranging from tiny saas products to just useful features/functionality. I like to share and teach what I do and learn to others along the way. So I am looking for people who need a mentor.

**I use these projects as a source to teach you:**

* How to solve problems with code and how to think like a proper developer
* How to use mental models to improve your coding skills
* How to choose the right technology for the problem
* How to build software products zero to one.
* Help you fill in the knowledge gaps you have
* Explain the concepts you are struggling with. No question is stupid. I try to answer what I know.
* I might put some of these products on the market. You can learn the business side of things as well. You can do the same, and I don’t mind. I love to see you put something out there with what I teach.

**What if you have a project of your own?**

No problem, I can help you with that. You can use the stuff I teach you for your own products.

**Why am I doing this?**
I have been coding since the age of 13 ( I am 38 now). A mentor taught me how to code at that age. The impact of what he did on my life was massive. So I fully understand how valuable having a mentor is. Sadly he lost his battle with cancer in Nov 2020. I am doing this to honor his life.


**For who?**
* If you are a CS student/recent graduate or have done coding 101, I can help you the most. But If you just want to start learning how to code, I need to work on a different curriculum for you.
* People who are confused about what to do after their learning/studying phase is finished. 

**Requirements**
* Massive interest in learning
* You want software development to be your profession. 
* Have a proper and tangible goal (we can work this out together)

**What would be the format?**
* Blog posts, Chat, Email, Zoom, Twitter Spaces.

**Technology focus:**
* I do stuff in Python/Django, Golang, a bit of Javascript, DevOps(AWS, Terraform, Docker, Kubernetes). The majority of the teachings are about backend and infrastructure. 


If you are interested, enter your contact info in this [GOOGLE FORM](https://forms.gle/Yc5xUEXkZ5YWfGhd8) so I can contact you back, and we start planning.


Cheers
Hossein
🚀 NPX CREATE-BLOG-APP
Tags: node, nextjs, tailwindcss, webdev
Published: 2021-03-01 14:07:51

# Introduction

We all love writing blogs. So, here is easy way to build your first blog with less code and more productivity. 🥳

Introducing **`create-blog-app`** command which creates, boilerplate **nextjs + tailwindcss + static site generated blog** ready to be published.

Not to forget it includes *DARK MODE*!

# Installation

Step 1: `npx create-blog-app`
Step 2: Answer few questions asked by CLI
Step 3: Goto localhost:3000! It's there.
Step 4: Star the repo https://github.com/smitbarmase/create-blog-app 

Hehe! It was that easy. Now put that repo to GitHub and use Vercel to publish your blog.

![Screenshot (139)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6efzwqi6txvm7xrfzeem.png)

I'm going to publish write up on **How I created this tool** but on my personal blog created with `create-blog-app` :)

Make sure to follow me on GitHub to stay updated about that.

GitHub: [https://github.com/smitbarmase](https://github.com/smitbarmase)

THANK YOU! 🙈
Composition in Next.js Static Properties
Tags: nextjs, javascript, typescript, webdev
Published: 2021-03-01 13:53:46

---
title: Composition in Next.js Static Properties
published: true
description: This gist exemplifies the use of composition in Next.js static properties
tags: nextjs, javascript, typescript, webdev
//cover_image: https://direct_url_to_image.jpg
---

Composition is a method to write re-usable segments of code. This is achieved by constructing objects of full behavior by using objects with particular behavior.

> It seems like “composition over inheritance” is the new motto. Everyone’s talking about it, and that’s not strange since composition gives you more flexibility by composing functionality to create a new object, while inheritance forces you to extend entities in an inheritance tree.

In the case of `getStaticProps` the full behavior is the complete object of `props` a page needs to be rendered. The particular object is the behavior that fetches a particular property in in the `props`.

```typescript
export async function getStaticProps(context) =>
({ ...(await getHeader(context), ...(await getData(context))})
```

To make this method easier to use, one can write simple helper function.

```typescript
export type TContext = GetStaticPropsContext
export type TComposeFunction<TProps> = (
  ctx: TContext
) => Promise<TStaticPropsResult<TProps>>
export type TStaticPropsResult<TProps> = GetStaticPropsResult<TProps>

export const compose = <TProps>(...funcs: TComposeFunction<TProps>[]) => {
  return async (ctx: TContext): Promise<TStaticPropsResult<TProps>> =>
    funcs.reduce<Promise<TStaticPropsResult<TProps>>>(
      async (result, fn) => ({ ...result, ...(await fn(ctx)) }),
      Promise.resolve(<TStaticPropsResult<TProps>>{ props: {} })
    )
}

export default compose
```

Which can use use like this.

```typescript
export const getStaticProps = compose(getCommonStaticProps, getSpecificStaticProps)
```

Using [Promise.all](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) one can also leverage concurrency in the static props.
SheCoded 2021 ?
Tags: discuss, wecoded, question
Published: 2021-03-01 13:48:32

---
title: SheCoded 2021 ?
published: true
description: will it happen again?
tags: discussion, shecoded, shecodedally, question
//cover_image: https://direct_url_to_image.jpg
---


##Hey lovely DevTeam##
will there be shecoded 2021?
I loved it the past years and it would be great to have it again ❤️

{% tag shecoded %}
{% tag theycoded %}
{% tag shecodedally %}


{% link devteam/join-us-for-shecoded-2020-o6b %}
React App Deploy Problem in Netlify
Tags: react, netlify, deploy
Published: 2021-03-01 13:39:10


### Problem 1: Build script returned non-zero exit code: 2
---
#### Solution

Example build command before the fix:
```
npm run build
```
Example build command after the fix:
```
CI= npm run build
```
[More](https://answers.netlify.com/t/how-to-fix-build-failures-with-create-react-app-in-production/17752)

For Next JS
```
CI= next build
```
### Problem 2: Netlify does not recognize the URL params when using react-router-dom
---

#### Solution

The solution is simple, add a file called `_redirects` to your public folder with this content

```
/* /index.html 200
```
[More](https://stackoverflow.com/questions/56468161/netlify-does-not-recognize-the-url-params-when-using-react-router-dom)