teleren/devto huggingface dataset:
How to jumpstart a React application
Tags: reactjsjavascript
Published: 2019-10-22 14:38:07

---
title: How to jumpstart a React application
published: true
description: Quickly initialize a React app with create-react-app
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/create-react-app.jpeg
---

## Quickly initialize a React app with create-react-app

`create-react-app` is an `npm` module that sets up a skeleton React application from scratch. It will quickly and seamlessly create a scaffolding with all the directories, files, and libraries required to jumpstart an application.
You can find the project homepage [here](https://github.com/facebook/create-react-app).

`create-react-app` sets up the environment for developing and running a React application. It creates a project directory and initializes a `package.json` file with all the required dependencies, including Babel, and tools like react-script that do the transpiling automatically.

This is the command we run to create a React application. Replace `app-directory` with the name of the directory that contains the application.

```
npx create-react-app app-directory
```

Running this command creates the named directory and a `package.json` file inside of it.
It then downloads all the necessary `npm` modules and adds a `start` script that we can use to start the React application.

We can also run `create-react-app` from inside an existing directory, but we should make sure the directory is empty or we wouldn’t be able to run the command:

```
// run the command from inside a directory

npx create-react-app .
```

We can run the `start` script either with `npm` or `yarn`, from inside the project directory.

```
npm start

// or 

yarn start
```

The application will be started and automatically served on port `3000`.
We can open the base application in our browser by navigating to `http://localhost:3000`

`create-react-app` builds a directory structure with a `public` directory and a `src` directory.
Within the `public` directory there's an `index.html` file that is used as the entry point of our application.

`index.html` contains a `div` element with an `id` of `root` that functions as the mount point for the React application.
The whole React application will be contained within this root element, and as
we will see, it will be built up of many components.

Tomorrow we are going to see how to build React functional components.
Streamlining the setup of a new user workspace on Ubuntu/Fedora
Tags: linux, scripting, automation, shell
Published: 2019-10-24 14:28:52

---
title: Streamlining the setup of a new user workspace on Ubuntu/Fedora
published: true
date: 2019-10-24 13:40:38 UTC
tags: Linux,Scripting,automation,shell
canonical_url: https://www.eddinn.net/2019/10/24/streamlining-the-setup-of-a-new-user-workspace-on-ubuntu-fedora/
cover_image: https://i2.wp.com/www.eddinn.net/wp-content/uploads/2019/10/initial-package-install.png?fit=1212%2C421&ssl=1
---

I’ve been wanting to streamline the process of how I set up a new workspace with all the base packages, programs, addons and dotfiles I use and need when I set up a new computer, so I decided to write a script that does exactly that for me.
Sure, I could use Ansible or Puppet and even just Git, to store, save and apply all my settings and programs, but you know.. I like shell scripts!
Also, this gives me the advantage to install everything without having to set up Ansible, Puppet or Git beforehand..

- - - - - -

So, lets go over what the scripts do and what they install (*the* ***README.md*** *in the repo goes into more detail, so make sure to read it*)

#### Looking at the initial-package-install.sh and post-initial.sh scripts

The **initial-package-install.sh** script checks what Linux distribution I’m using (*I only use Fedora and Ubuntu, so those are the only options, but it’s easy to add other distros if needed..*), and based on that information, installs the corresponding packagebase that I’ve selected, along with Google Chrome and TeamViewer, so that I have the tools I need without having to install them all by hand.
The **post-initial.sh** script then installs all the snap applications that I want, some Python3 pip modules, my dotfiles (*via* ***stowit.sh*** *which utilizes the* ***stow*** *command in a function*), Oh-My-Zsh for zsh and lastly all the extensions that I use for VSCode and Gnome-Shell.

#### What to take into consideration before running these scripts

1. Read the **README.md** to further familiarize yourself with what the scripts do and how `stowit.sh` works
2. Make sure to look over the packagebase and change out/add any packages that you want/need
3. The same goes for the snaps and Python3 pip packages and VSCode/Gnome-Shell extensions
4. Edit and/or replace the dotfiles that you need/use in the `./dots/` directory
5. Remember, this is not an replacement for an complete configuration, the scripts are just to get you up and running faster, you still need to configure individual settings and applications

- - - - - -

The scripts will keep on evolving and I will add new features as I need them to further streamline my workspace setup.
Go ahead and check out the initial-package-install script repository on my Github!

[Check out this repository on GitHub.com (this link opens in a new window)](https://github.com/eddinn/initial-package-install)

[Streamlining the setup of a new user workspace on Ubuntu/Fedora Read More »](https://www.eddinn.net/2019/10/24/streamlining-the-setup-of-a-new-user-workspace-on-ubuntu-fedora/)
Remote job php, js
Tags: php, javascript, react, laravel
Published: 2019-10-30 02:18:51

---
title: Remote job php, js
published: true
description: How to find a remote job
tags: php, js, React, laravel
---
I can code with php without framework and some framework (laravel, codeIgniter) and Javascript(vanilla, React). I want to find a remote job to work with. Is it available in here?
Day 28 : Where do we go now?
Tags: hiphop, code, coding, lifelongdev
Published: 2019-11-07 00:31:10

_liner notes_:
- Professional : Got up early to sit in on some talk prep sessions. Picking up some tips. Also did some research to help out someone that had a question in the community. I found some stuff I think will help, but I won't know till maybe tomorrow because of the time difference. Looking to see where do we go now that I have this voting application done. I may do a write up or start another project, possibly involving IoT.

- Personal : Finally sat down to finish some training for the radio station. They were pretty long! Looking to go through more tracks for this week's show. Also want to start the new project. I keep saying that. haha

![Kluane Nat'l Park, YT, Canada landscape with mountains and pine trees](https://thepracticaldev.s3.amazonaws.com/i/i6np2kkrv94yhnog9fwi.jpg)

Tomorrow, going to clean up the code for my application some more. Hopefully I was able to help the person in the community. If not, I'll work on that some more and do some research on my next application.

As far as personal work, more radio show tracks and personal side project. Getting back to working on this radio show.  

Have a great day!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube j_R8JpG2A8g %}
Skills/learning roadmap 
Tags: beginners, bootcamp, discuss, womenintech
Published: 2019-11-07 05:27:19

<h2>Greetings Dev Community.</h2>

I am currently enrolled in an introductory web development course and would like to further my studies with front end language and skills. 
I learn best in classroom environments vs online study, which reflects my choices for current and future learning pursuits.

So far I've learned the following:

<ul>
<li>fundamentals of html5</li>
<li>fundamentals of css + flex-box</li>
</ul>

<img src="https://media.giphy.com/media/SiKqNZqksVYWmQEMjd/source.gif">

I've been exploring learning opportunities to pursue once I complete this introductory course, while I continue practicing my html + css skills


Some ideas I've been looking into are:

Pursue a two week javascript course.
Then
Pursue front end development bootcamp.

<h3>OR</h3>

Pursue front end development bootcamp in January.


I know many of you either share similar or different journeys on how you've 
became developers. I would like to hear your insights on your learning journey. As a beginner to where you are today.

<ul>
<li>Did you pursue bootcamp? if so, how did you prepare yourself.</li>

<li>Did you work on the fundamentals of html+css and javascript before immersing yourself fully into a bootcamp/ developer program.</li>

<li>Are there certain developer tools you felt were easy to learn yourself?</li>
</ul>


Thank you,

LJTea
Configurando LetsEncrypt con Apache en Debian
Tags: apache, letsencrypt, debian, servers
Published: 2019-11-19 07:55:29

---
title: Configurando LetsEncrypt con Apache en Debian
published: true
description: Guía para configurar paso a paso LetsEncrypt con Apache en Debian.
tags: apache, letsencrypt, debian, servers
---

Siguiendo con el post LetsEncrypt en Nginx vamos a ver como configurarlo con Apache en Debian.

{% link https://dev.to/jpblancodb/configurando-letsencrypt-con-nginx-en-ubuntu-2ini %}

1. Instalamos certbot en el servidor:

```
echo 'deb http://ftp.debian.org/debian jessie-backports main' | sudo tee /etc/apt/sources.list.d/backports.
sudo apt-get update
sudo apt-get install python-certbot-apache -t jessie-backports
```

2. Configuramos el ServerName de Apache

```
sudo nano /etc/apache2/sites-available/000-default.conf
```

Tener en cuenta que 000-default.conf es la configuración por defecto de Apache pero si tienen otro archivo de configuración, deben configurar el ServerName y ServerAlias según corresponda dentro del tag <VirtualHost></VirtualHost>

```
    ServerName dominio.com
    ServerAlias www.dominio.com
```

3. Reiniciamos Apache:

```
sudo systemctl restart apache2
```

4. Configuramos el firewall:

Ejemplo ufw:

```
sudo ufw allow 'WWW Full'
```

Ejemplo iptables:

```
sudo iptables -I INPUT -p tcp --dport 443 -j ACCEPT
```

5. Generamos el certificado con certbot:

```
sudo certbot --apache
```

Listo! Ya tenemos configurado nuestro certificado con LetsEncrypt y Apache. Recuerden que el certificado hay que renovarlo, para ver el instructivo de como se configura la renovación automática pueden verlo en el paso 5) de Configurando LetsEncrypt con Nginx en Ubuntu.

Cualquier duda o consulta no duden en dejar sus comentarios o bien me pueden consultar vía [Twitter](https://twitter.com/jpblancodb).

Saludos!
Day 5 of⚡️ #30DaysOfWebPerf ⚡️: Your laptop is a filthy liar
Tags: webperf, devtools, webpagetest, webdev
Published: 2019-11-07 14:32:24

{% twitter 1192448463717437440 %}
{% twitter 1192448470419943429 %}
{% twitter 1192448472202518531 %}
{% twitter 1192448473196613633 %}
{% twitter 1192448474379423744 %}
Don't throw away your old MBP, upgrade it!.
Tags: hardware, mac, beginners, upgrade
Published: 2019-11-07 16:00:39

I have a Mid-2010 MBP that my kids use for homework, youtube and "stuff".

Back then Apple allowed you to swap out some of the internal components (HDD, RAM, Battery) and perform upgrades. If you still have one of these MBPs it's still worth it to do some small upgrades and get some more life out if.

So far I've done the following 👇

🧠 Upgraded RAM from 4GB to 16GB!
💾 Swapped out the 250 GB HDD for a 512GB Samsung EVO SSD
🔋 Replaced the original battery

The difference in terms of performance is huge, an SSD and 16GBs of RAM are worth it!.

Best of all, it's very simple to do, just open up the bottom cover and swap the parts, just like old times!.

If you need some guides to walk you through it head over to [iFixIt](https://www.ifixit.com/Device/MacBook_Pro), they cover pretty much everything. 

For parts I usually compare between [MacSales](https://www.macsales.com/) and Amazon. Getting quality parts through MacSales is usually better and not that expensive.
What is cloud computing, benefits and services?
Tags: aws, linux, cloudcomputing
Published: 2019-11-08 03:28:36

Cloud computing provides a simple way to access servers, storage, databases and a broad set of application services over the Internet.

Benefits of Cloud Computing:

Flexibility
Pay per service
Security
Environmental Friendly
Disaster Recovery

Read More: https://realprogrammer.in/what-is-cloud-computing-benefits-and-services/
What's the most inefficient thing you do?
Tags: discuss, workflow, watercooler
Published: 2019-11-08 11:03:54

---
title: What's the most inefficient thing you do?
published: true
tags: discuss, workflow, watercooler
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j1egpfb1l5pamnsfseec.jpg
---

We all have weird things we do, long ways around short problems. We should probably get around to sorting them out, but we've gotten used to That Way Of Doing Them.

Sometimes we've created monster workflows that Rube Goldberg or Heath Robinson would eye suspiciously before backing away from. Sometimes we hold onto them because they're comfortable, sometimes because fixing them seems too difficult, sometimes just because we don't know any better until it's way too late to make any difference.

What do you do that fits this description? Well, what are you vaguely embarrassed to admit to, anyway?

--
Cover image by [Valentin Petkov](https://unsplash.com/@thefreak1337) on Unsplash.
Dual-booting Linux Mint
Tags: linux
Published: 2019-11-21 17:53:10

---
title: Dual-booting Linux Mint
published: true
date: 2019-11-08 05:00:00 UTC
tags: Linux
canonical_url: 
---

## Why Linux

I’ve always heard that Linux is the way to go but I never tried it. I had Windows and it worked fine for me. I took some training at work that required Linux so I started using it inside a virtual machine. I got comfortable with it and decided it would be fun to try at home.

## Why Mint

Based on this [Dev.to](https://dev.to/pluralsight/which-distribution-of-linux-should-i-use-51g7) article it sounded like where a Linux newbie like myself should start. I tried a couple versions inside VirtualBox before committing. I used [OSBoxes](https://www.osboxes.org/) to quickly get them up and running.

## Why Dual-Boot

I chose to dual-boot because I didn’t want to risk losing Windows if I messed up the Mint install. Also because the Mint install made it really easy.

## How I did it

### Disclaimer!

I’ll recount the steps I took and the references I used but can’t guarantee any of it for anyone else.Also it’s a good idea to follow along with [Mint’s install docs](https://www.linuxmint.com/documentation.php).

### 1. Back Up Data

I backed up my data because there’s always a chance it could get wiped from existence.

### 2. Download Linux Mint

I grabbed the 64bit Cinnamon version from [here](https://linuxmint.com/download.php).

### 3. Create a Bootable USB

I used [Etcher](https://www.balena.io/etcher/) to flash the image onto my USB drive but any flashing software should do the trick. ![Etcher](https://www.cavender.dev/assets/images/linux-dual-boot/etcher.png)

### 4. Create Disk Space

My first attempt didn’t take because I didn’t have any room. I ended up freeing up some space from my Windows partitions. ![Disk Management](https://www.cavender.dev/assets/images/linux-dual-boot/disk.png)

### 5. Update Boot Configuration

I had to disable secure boot and change the boot order in the BIOS.

### 6. Install Mint

I followed the on-screen instructions at this point. Here are the important bits:

- Dual booting with Windows
- Create partitions
  - Root (I used 20Gb)
  - Swap (I used 8Gb)
  - Home (I used the rest of my free space)A few more on-screen instructions and I was ready to go!

### 7. Use Mint

Mint is installed and ready to go. I’m on a Razer Blade Stealth and everything works out of the box except for closing the lid. I’m sure there are other things that don’t quite work that I haven’t encountered yet. When I close the lid Mint is supposed to suspend but when I open the lid back up I have to hard shutdown before my laptop will wake up and respond. Other than that I’m very happy with Mint and hope that this article helps you!
Spartan Breakpoints!
Tags: responsive, css, breakpoints, ux
Published: 2019-11-08 22:57:39

---
title: Spartan Breakpoints!
published: true
description: Just wanted to get some opinions from other UI Enthusiasts about the breakpoints they are using for their UIs
tags: responsive, css, breakpoints, ux
---

![res](
https://thepracticaldev.s3.amazonaws.com/i/kgzm8zqnlfi3k1gy5dri.jpg)

So I know this topic has probably been talked about more than enough, there is even a [really awesome article about it](https://dev.to/rstacruz/what-media-query-breakpoints-should-i-use-292c) on Dev.to but I wanted to get some feedback on a slightly new set of breakpoints. 


I was hoping to make them even more generic and get some feedback and thoughts from the incredible developer community here on Dev.to.

I was going to call this new set of breakpoints "the spartan breakpoint system" because the media queries are approximately every 300 pixels.

I was planing on using it in a component library I am building for fun to teach myself some of the various custome element APIs and enhance my web accessibility skills.

Here's a table comparing a few different CSS Framework breakpoints: 

| Size | Devices | Spartan Breakpoints | [Bootstrap](https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints) | [Bulma](https://bulma.io/documentation/overview/responsiveness/#breakpoints) | [Tailwind](https://tailwindcss.com/docs/breakpoints/) | [Foundation](https://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html) | [Semantic UI](https://github.com/Semantic-Org/Semantic-UI/blob/383871090cda527df916e1751279b3de79b07480/src/themes/default/globals/site.variables#L208-L216) |
| ---- | ---- | --------- | -------- | --- | ---- | ---- | ---|
| Extra Small (xs) | small phone | 0 - 300px | 0 - 575px | 0 - 768px| 0 - 639px | 0 - 640px| 320 - 767px |
| Small (sm) | phone | 301 - 600px | 576 - 767px | 769 - 1023px | 640 - 767px | 641 - 1,024px | 768 - 991px | 
| Medium (md) | large phone/small tablet| 601 - 900px | 768 - 991px| 1024 - 1,215px | 768 - 1,023px| 1,025 - 1,440px | 992 - 1,199x |
| Large (lg) |  tablet | 901 - 1,200px | 992 - 1,200px|  1,216 - 1,407px | 1,024- 1,279px | 1,441 - 1,920px | 1,200 - 1,919px |
| Extra Large (xl) | desktop/large tablet | 1,201 - 1,500px | > 1,200px | > 1,408px | > 1,280px | > 1,921px | > 1,920px |



Thanks in advance everyone for your feedback!
problem rendering images in react app
Published: 2019-11-08 18:39:36

Hello
I am fairly new to react & node. I have an app which displays image buttons amongst other things. When starting from visual studio code they render perfectly  unless my associated node listener is started first on the same port, in which case they don't render at all. 404 is returned for all. Why is that and what's the fix please ?
Cheers
Python: Compile standalone executable with nuitka
Tags: python
Published: 2019-11-09 02:07:47

So nuitka compile python code into an executable. I have always impress with Go ability to generate single binary and even cross compile for different OS. I wish we can have the same thing with python.

As always, let's start with just a simple script first:-

```
import requests
  
resp = requests.get("https://httpbin.org/get")
print(resp.content)
```

Actually the first I try is with just a simple `print("hello world")` but that just too simple. I want to see if nuitka can handle more significant code like the requests library above. To compile the code:-

```
python3 -mnuitka --follow-imports hello.py
```

It will generate a file called `hello.bin` in the same directory you run the command above. Execute the file (`./hello.bin`) and it works! But if you copy the file to different system (I compiled it on ubuntu 18.04 and try to run it on my laptop running Manjaro), I got this error:-

```
./hello.bin: error while loading shared libraries: libpython3.6m.so.1.0: cannot open shared object file: No such file or directory
```
So it still need the same python libraries that it get compiled with. And since my manjaro system using python 3.7, hence the error. Fortunately there's second option:-

```
python3 -mnuitka --follow-imports --standalone hello.py
```

This time it will generate a folder instead named `hello.dist`. Inside the folder you'll see various `.so` files and a file named `hello`. This time when I copied the folder `hello.dist` from Ubuntu 18.04 to my Manjaro's laptop, the command works!

Unfortunately the reverse didn't work though. When compiling on my Manjaro and try to run it on Ubuntu 18.04:-

```
./hello: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /home/kamal/hello.dist/libpython3.7m.so.1.0)
./hello: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28' not found (required by /home/kamal/hello.dist/libpython3.7m.so.1.0)
```

This is because manjaro is using more recent glibc than ubuntu 18.04. We can check this with ldd:-

```
ldd --version
ldd (GNU libc) 2.30
```

And the only workaround for this is to compile is on the oldest system you want to support. I try this with ubuntu 14.04, it work for simple script but then failed with missing ssl certs when compiling my [tgcli] script.

So a standalone distribution of your python program kind of work. For my tgcli, the installation look like:-

```
tar xzf tgcli.dist-glibc-2.27.tar.gz
sudo mv tgcli.dist /usr/local/
sudo ln -s /usr/local/tgcli.dist/tgcli /usr/local/bin/tgcli
```

For more fun story on getting standalone python program, can also read this sharing from [syclladb].


[tgcli]:https://github.com/web2gram/tgcli
[syclladb]:https://www.scylladb.com/2019/02/14/the-complex-path-for-a-simple-portable-python-interpreter-or-snakes-on-a-data-plane/
Noob Exercises
Tags: html, tutorial, css, javascript
Published: 2019-11-09 14:48:38

Just started with a place, where I am trying to give some of people, I have been teaching some assignment, thought if there are more people interested in it, would be a good share.

We are starting with Vanilla JS, CSS and HTML

I will be personally looking at all submission and will do my best to comment on the submissions to my full knowledge.

{% github th3n00bc0d3r/Noob-Exercises %}