teleren/devto huggingface dataset:
30 Stars ✨ on my Github repository in 1 week!
Tags: github, opensource, hacktoberfest
Published: 2020-10-09 20:55:09

Hey Dev Community! 👋

I recently posted about how I made an [Emoji Search Tool with ReactJS](https://dev.to/braydentw/i-learned-some-react-in-a-week-and-made-an-emoji-searcher-tool-1i12) on Dev.to and now it has gotten lots of traction in the past few days.

💻 View the demo here: https://braydentw.github.io/react-emoji-search/

👨‍💻 Check out the repo: https://github.com/BraydenTW/react-emoji-search

As of now, the [repository](https://github.com/BraydenTW/react-emoji-search) has reached **30 stars and 7 forks!** 🤩

This is a huge milestone for my open-source journey because before this happened, I rarely had anyone checking out my projects but since I posted about it on IH, Dev.to, and HackerNews, I got some decent traction that I'm proud about. 🏆

![Celebrate gif](https://media.tenor.com/images/99cff34bdcb675975b2b0cc661f2e4ce/tenor.gif)

---

If you haven't seen the previous post, be sure to [check it out](https://dev.to/braydentw/i-learned-some-react-in-a-week-and-made-an-emoji-searcher-tool-1i12) and give the repository a ⭐: https://github.com/BraydenTW/react-emoji-search
How to Set Static IP Address on Linux
Published: 2022-08-16 21:10:49

---
title: How to Set Static IP Address on Linux
published: true
date: 2020-10-09 20:52:15 UTC
tags: 
canonical_url: https://blog.livialima.net/how-to-set-static-ip-address-on-linux
---

Different from desktop machines where you can use dynamic IP addresses, static IP address are often required on a server infrastructure.

## RHEL / CentOS / Fedora:

You will need to edit:

```
/etc/sysconfig/network-scripts/ifcfg-eth0

```

Where `ifcfg-eth0` relates to your network interface `eth0`. If your interface name is `enp1s0` then the file that you will need to edit is `ifcfg-enp1s0`.

Add the following fields:

```
DEVICE="eth0"
BOOTPROTO="static"
IPADDR="192.168.1.1"
NETMASK="255.255.255.0"
TYPE="Ethernet"

```

## Debian / Ubuntu:

To setup static IP address in Debian/ Ubuntu, edit the following file:

```
/etc/network/interfaces

```

You may see a line looking like this:

```
auto eth0
iface eth0 inet dhcp

```

Change it so it looks like this:

```
auto eth0
iface eth0 inet static
  address 192.168.1.1
  netmask 255.255.255.0

```

## Restart the networking on your system:

**SysVinit** : `/etc/init.d/network restart`

**SystemD** : `systemctl restart network`

If unsure of what which system manager your distro uses, try this:

```
pidof systemd && echo "systemd" || echo "sysvinit"

```

## Conclusion

You now know how to configure a static IP address on a Linux distro.
How to deploy MongoDB, NodeJS app to Heroku.
Tags: mongodb, node, heroku
Published: 2020-10-09 20:25:44

Below i highlight every single step you need in order to deploy your Node, Mongodb app to heroku:


1. Assumming your code works on localhost
2. Sign Up to **www.heroku.com** and setup your billing information (it won't charge anything but we need it to create a MongoDB add-on to our app on heroku. It won't accept without billing info)
3. On root create a `.env` file.  Inside write  `MONGO_DB_URI=mongodb+srv://<YourUsername>:<yourPassword>@cluster1.qcpvo.mongodb.net/<dbname>?retryWrites=true&w=majority` 
(Your own uri without any string " ")
4. Then change in **index.js** (or server.js based on your setup):  
`const uri = 'mongodb+srv://YourUsername:<yourPassword>@cluster1.qcpvo.mongodb.net/Students?retryWrites=true&w=majority'; ` TO  `const uri = process.env.MONGO_DB_URI || 'mongodb+srv://Ulan:123@cluster1.qcpvo.mongodb.net/Students?retryWrites=true&w=majority'; `
5. On root directory create **Procfile** file. 
    - On terminal run:
    - `touch Procfile`
    - Inside Profile write `web: npm start `
6. On terminal run these commmands **by order**:
 - `git init`
 - `git add --all `
 - `git commit -m" deployment"`
 - `heroku login` (it will open a browser to confirm login. Hit login and get back to terminal)
 - `heroku create your-app-name` (this will output something like this: Creating ⬢ your-app-name... done)
 - ` heroku addons:create mongolab:sandbox ` (It installs mLab MongoDB add-on with the "Sandbox" plan which is free)
 - `heroku config:set MONGO_DB_URI='mongodb+srv://Ulan:<yourPassword>@cluster1.qcpvo.mongodb.net/Students?retryWrites=true&w=majority'`
 - ` git push heroku master ` (push it to heroku master)
 - `heroku open` (or open from heroku app dashboard)
7. If you created routes try CRUD operations  with your new deployed link. 




> P.S:  mLab is shutting down its Heroku add-on on November 10, 2020. You will lose access to your data unless you detach from Heroku or migrate to **MongoDB Atlas** before then.
Todo list combining CLI and HATEOAS
Tags: cli, hateoas, hypermedia, node
Published: 2020-10-09 19:41:54

basically:

```javascript
app.get('/notes', (req, res) => {
  const rawNotesList = fs.readFileSync('../cli/notes.json', {encoding: 'utf8', flag: 'r'});
  const parsedNotesList = JSON.parse(rawNotesList);
  const links = [
    {
      rel: ["self"],
      href: [baseUrl, '/notes'].join('')
    }
  ];

  const actions = [
    {
      class: "add-note",
      href: [baseUrl, '/notes'].join(''),
      method: 'POST',
      fields: [
        {
          name: "command",
          type: "string"
        },
        {
          name: "content",
          type: "string"
        }
      ]
    }
  ];

  const responseWithControlData = {
    class: "note",
    ...parsedNotesList,
    links: links,
    actions: actions

  };

  res.json(responseWithControlData);
});
```

and:

```javascript
app.post('/notes', (req, res) => {

  const body = req.body;

  if (!body.command.includes('add')) {
    return res.status(400).json({
      status: 'failed to add content', 
      content: body.content
    });
  }

  const cliCapture = new CliCapture({
    notesPath: './notes.json',
    command: body.command,
    content: body.content
  });

  res.json({
    status: 'added from server'
  });

});
```

We could analogize this CoAP/CoRE and Amundsen's DARRT approach: anything really can substitute for "CliCapture" and wherever `fs` is available, we can expand its capabilities with a resource directory mapping to HTTP (https://github.com/JelmerT/coap-rd/blob/master/requesthandlers.js#L82) with transitions:

{% youtube 9H3q7Te5v8Q %}

See https://github.com/nerdfiles/notes-cli/blob/master/cli/server/index.js#L19-L56 and https://github.com/nerdfiles/notes-cli/blob/master/cli/server/index.js#L69-L73
The Big "Why?"
Published: 2020-10-09 19:36:02

Prompted with the question "*Why did you decide to study Software Engineering?*," one looks to their history of experiences had and choices made leading up to such a fundamental change in life direction. Whitewater raft guide, tree climber, park groundskeeper, national park interpreter, produce manager--these hats, and more, make up the varied background I've built up as a part of the blue-collar workforce since my 16th birthday. I am thankful for these jobs, as I was able to pay my way through college with minimal debt to show for it. However, due to the physically intense nature of such work, my body experienced measurable decline and I was faced with a dilemma: stay the course and be forced by my body into an early retirement or jump ship and forge a path to a more fruitful and sustainable career and future. The choice, at this point, was easy for me to make, and so I decided to make a change.

But this does not answer the question of "*Why?*" as in "Why study coding?," but instead answers "_Why **not** continue to do what you've already been doing?_"

As I considered alternate career paths that would utilize my mind over body, I read more about the skills required of a programmer and I realized that I fit the bill. As a lifelong enthusiast of logic puzzles and exercises in critical thinking, along with an affinity for math, creativity, and memorization; my hyper-focus for detail; and my ability to organize multiple evolving ideas at once, I became confident in my aptitude to become a successful software engineer.

Fast forward three months and I am two weeks into a 20 week software engineering bootcamp. So far, any doubts I started with have fallen to the recesses of my mind and I am more sure than ever that the choice to jump head-first into this program was the right one. If anything, I wistfully wish I had made the change sooner. But, at least, I made the change.
Definir la version de Node con NVM
Tags: node, nvm, javascript
Published: 2020-10-09 19:35:01

---
description: NVM es la herramienta que te ayudara a controlar versiones de Node y también a definir cual es la versión en uso para tu proyecto.
canonical_url: https://matiashernandez.dev/definir-la-version-de-node-con-nvm
---
Cuando trabajas con Node hay muchas cosas que puede variar de un ambiente a otro, una de ellas es la versión de Node instalada en cada máquina, esto, en algunos casos puede traer problemas. Pero, es posible definir o &ldquo;lock down&rdquo; una versión específica de node.

Una forma de lograr este proceso de manera sencilla es utilizando [\*nvm\*](<https://github.com/nvm-sh/nvm>) (Node Version Manager).


## NVM

**nvm** es un manejador de versione para node, te permite mantener múltiples versiones de node en tu máquina y utilizar la que requieras para cada project.

Instalar es sencillo, tan solo debes ejecutar el script de instalación

    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

Este escript, clona el repositorio de nvm dentro del directorio \`~/.nvm\` y agregar alguna lineas a tu archivo de perfil \`.bash<sub>profile</sub>\`, \`.zshrc\`, \`.profile\`, etc.

El manual de uso te puede ayudar en caso de que tenga algún problema: <https://github.com/nvm-sh/nvm>


## Usando .nvmrc

Si lo que necesitas es definir y **fijar** la versión de node para diferentes proyectos, puedes hacer uso del archivo \`.nvmrc\`.

Este archivo, es un archivo de configuración que le indica a \`nvm\` que versión de node se requiere para este proyecto.

Simplemente crear este archivo y agrega la versión que quieres definir

    echo "12.15.0" > .nvmrc

Después de eso sólo debes ejecutar algunos comandos extra para que nvm instale lo necesario

> 🚨 estos comandos son ejecutados desde el directorio del proyecto

    nvm use
    nvm install
    nvm exec

Listo, ahora tu proyecto tiene la versión de node definida, no olvides agegar el archivo \`.nvmrc\` a tu control de versiones

Y ahora a continuar con tu maravilloso proyecto!
React Prime or Prime React???
Published: 2020-10-09 19:28:45

No this is not a paid subscription on behalf of Amazon. PrimeReact is library of components available within React. I have used Prime React in 2 of my previous applications and plan on implementing it with the app I am building now. The reason why I love Primereact Components is because of its ease of use. All you have to do as a developer is install primereact with 
`npm install primereact --save` and
`npm install primeicons --save`

after that you just browse the list of components on the website and then import directly like so

`import {Accordion} from 'primereact/accordion`;

thats it.

Now if you want to use the component you can just write it directly into you render function like so:

'<Accordion> <Accordion/>

Thats it, It is super easy to use and really easy to adjust with some simple built in CSS
My #100DaysOfCode Challenge Experience Went Well!
Tags: 100daysofcode, webdev, css, codenewbie
Published: 2020-10-09 19:24:35

I found about the 100 days of code challenge from a friend who tweeted about it, at the same time I liked the CSS images people made and share on Codepen, so I decided to start this challenge and make a list of drawings with CSS by the end of it.

## My Experience

I have been making CSS images almost everyday for 50 days regularly, the twitter community were very supportive, they liked what I do and what I share with them.
I started receiving messages saying : " How can I make CSS drawings? " that’s why I decided to start blogging and share everything I know and answer the questions I have been getting.

I made a blog, I wrote about the resources, steps and tricks I have been using to make these drawings.

At the same time, I was learning "VueJs" -JavaScript framework- and I made a small side project ‘jokes app’ just to practice what I have been learning.

## Some Tips To Help You During This Challenge

1.  Make A Plan :

Decide what you will work on, maybe you want to work on a specific technology, programming language..

2.  Engage With The Community:

Sharing your progress with the community will keep you motivated and will inspire others to start the challenge.

You can use the #100DaysOfCode hashtag and tweet about your progress, interact with others and learn from them too.

Encourage others and be respectful to keep the community supportive.

3. Document Your Work :

Always write about your progress, you can use blog posts or tweets to share with others the tasks you have completed, your next ones.

If possible, make your Github repositories public, discuss the code with others and push your changes everyday, don't forget to share the code with the community.

Make some projects you would like to put on your portfolio.

Contribute to open source projects.

4. Avoid Burnout:

Code for the minimum one hour each day, you can incrementally add more time to code each day if you feel you want to code more.

## What I Have Made

With all the support I got from the community, I made more than I expected :

• [A list of 50 pure CSS drawings](https://cssart.netlify.app/)

• [A blog](https://nadialaasri.me/blog)

• Learnt about VueJs and started learning about react native

• Met some amazing people

### Thank you for being part of the community
Pour Explained: R is for Robust
Tags: a11y, beginners, webdev, inclusion
Published: 2020-10-09 19:22:29

## [__Principle 4 -- Robust__](https://www.w3.org/TR/WCAG21/#robust)

### Content __MUST__ be robust so that a variety of user agents and devices can interpret it.  This includes assistive tech.

Again, a quick refresher on the levels:
  - A, AA, AAA
  - Many entities try to maintain a level AA compliance because it is achievable as well as meaningful. Maintaining just a level AA compliance is still falling short in being accessible and inclusive.
  - Every guideline success criterion is necessary to at least some users with disabilities, so don't ignore level AAA compliance.


## __Guidelines:__ 
### __[4.1 Compatible](https://www.w3.org/TR/WCAG21/#compatible)__

Compatability must be at the forefront of planning so that current and future user agents will be compatible.  This includes assistive tech.

### __Success Criteria:__
##### 4.1.1 Parsing
__Level A__

Following these standards:
- Content must be implemented in markup languages
- Elements must have complete start and end tags.
- Element must be nested to their specifications
- Elements don't include duplicated attributes
- Id's assigned to elements must be unique
- Exception:
  - Only where specs allow 

##### 4.1.2 Name, Role, Value
__Level A__

For all UI components:
- Name & Role programmatically determined
- States, Properties, and Values that can be set by users can be programmatically set.
- Changes allow for notifications to the user agents.

_This particular success criterion is primarily for web authors, who build custom controls_

##### 4.1.3 Status Messages
__Level AA__

Content that is implemented by using markup languages, a status message, or messages can be programmatically determined through role or props such that they can be present to the user through assistive tech without receiving focus.

![OMG](https://media.giphy.com/media/jz2VNqCrlFsPe/giphy.gif)

Oh... My... Glob! We've made it! We have covered the POUR Principles of the WCAG 2.0 & 2.1 Guidelines.  That is so exciting!  I'm hoping that this is just the beginning of your journey into exploring accessibility and wish you the best as you continue to study to make software and the web a better place for all.
Great article regarding React Router Hooks
Tags: react, reactrouter, reacthooks
Published: 2020-10-09 19:14:56

I came across a great article written by Agney Menon regarding React Router Hooks. I am currently taking a Udemy course and the content is a bit out dated and the instructor is not using React w/ Hooks. Not saying this is wrong but Hooks make things so much easier and cleaner. Anyways, I'm following along to his videos but instead I am using React w/ hooks and basically doing researching as well as finding solutions on my own. I was stuck in a part where I couldn't figure out how to use React Router's neat history prop and well this article helped me out for this particular section. The article link is [here](https://css-tricks.com/the-hooks-of-react-router/). Not my article and I am not taking any credit whatsoever. HUGE shoutout to **Agney Menon**.
Get started with microservices, a 6-part online education series
Tags: ibmcloud, meetup, video, microservices
Published: 2020-10-13 01:08:54

---
title: Get started with microservices, a 6-part online education series
published: true
date: 2020-10-09 19:06:29 UTC
tags: IBMCloud,Meetup,Video,Microservices
canonical_url: https://maxkatz.org/2020/10/09/get-started-with-microservices-a-6-part-online-education-series/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r34ok2e3ls0hpi3154lg.jpeg
---

IBM Developer Advocate [Pooja Mistry](https://twitter.com/poojamakes) is hosting a 6-part online series on microservices. If you are new to microservices or have been using microservices for some time – you will get high-quality developer education. Register for all six session below. The replay of each session will be available at the same link.

![](https://katzmax.files.wordpress.com/2020/10/beetravels-session.png)

In this tech series, Pooja will be using an example travel application called Bee Travels to dive deep into designing fully scaled cloud-native microservices applications. Bee Travels is a polyglot demo microservices application to demonstrate key capabilities of Kubernetes, Red Hat OpenShift, Istio, Knative, and many other cloud-native technologies. Bee Travels uses best in practice standards for cloud-native development, recommended coding styles in Node, Python, Rust, Go, and Java, and encompasses the full developer life cycle experience.

In this series developers will learn how to:

- Design microservices
- Deploy microservices
- Test and debugg microservices
- Handle data within microservices
- Connect microservices to different services on IBM Cloud
- Monitor and log microservicess
- Communicate between microservices
- Leverage CI/CD with microsercices
- Secure microservices

**Tech Talks with Bee Travels – Part 1: Designing Mircoservices**  
Tuesday, October 20, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part1](https://www.crowdcast.io/e/beetravels_part1)

**Tech Talks with Bee Travels – Part 2: Deploying Mircoservices**  
Tuesday, October 27, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part2](https://www.crowdcast.io/e/beetravels_part2)

**Tech Talks with Bee Travels – Part 3: Debugging Mircoservices**  
Tuesday, November 5, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part3](https://www.crowdcast.io/e/beetravels_part3)

**Tech Talks with Bee Travels – Part 4: Developing Microservices with Node.js**  
Tuesday, November 10, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part4](https://www.crowdcast.io/e/beetravels_part4)

**Tech Talks with Bee Travels – Part 5: Virtual Hands On Building Microservices Lab**  
Tuesday, November 17, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part5](https://www.crowdcast.io/e/beetravels_part5)

**Tech Talks with Bee Travels – Part 6: Data Handling in Mircoservices**  
Tuesday, November 24, 2020  
Register/replay: [https://www.crowdcast.io/e/beetravels\_part6](https://www.crowdcast.io/e/beetravels_part6)
No longer grounded
Tags: career, womenintech, mentalhealth, impostersyndrome
Published: 2020-10-09 19:04:52

I tell myself that everyone suffers from Imposter Syndrome. I'm not special. I'm overreacting. I'm stupid. I'm incapable of doing my job. I will never catch up. I'll be found out for the failure I am. Despite being paid to build websites for the past two years, I'm not really a web developer. 

I'm the only front end developer at my job, surely this is the only reason they keep me around. Now that we just hired a new junior developer, I'll be useless. Found out. Worthless. I know I should focus on "doing the work," but instead, my mind rips away my confidence and leaves a distracted, shriveled mess of myself. Seeing my task list grow only paralyzes me further; this only perpetuates my insecurities.

The most common phrase my imposter whispers to me is, "If you were good at your job, you would know how to do this already." There isn't room for failure, ignorance, or self-compassion. I am who I am, and there isn't any view of myself that I want to see.

Why am I writing this? To receive pity or encouragement? Maybe, but not from you, the reader, but from myself. I hope that seeing my self-inflicted pain will spark the rebel I know I have within me to fight back. 

The feisty 5-year-old, who was told they couldn't be a part of the safety patrol team but snuck into the janitor's closet and grabbed the vest anyway. The defiant 10-year-old, who was grounded for a day and then at midnight, stood in the front yard because she decided she was no longer grounded. I want her back. The curious 15-year-old, who loved exploring new ideas and was unabashedly herself. I miss these dormant pieces of myself desperately.

This is the first step on my journey to rediscovering myself.
How To Add Giphy Gifs into dev.to posts
Published: 2020-10-09 19:01:53

I couldn’t believe there is no liquid tag for Giphy in dev.to. So I thought: “Hmm, maybe the platform is smart enough if I just paste in the HTML embedded tag from Giphy” – but nope. Not working. So, here is how I solved it. First find your gif. I will use the [infamous Picard facepalm](https://giphy.com/gifs/moodman-TJawtKM6OCKkvwCIqX) here.

On that page, click on “copy link”:

<img width="100%" style="width:100%" src="https://www.timo-ernst.net/wp-content/uploads/2020/10/image-2048x1191.png">

Then copy the url from “GIF Link” in the middle:

<img width="100%" style="width:100%" src="https://www.timo-ernst.net/wp-content/uploads/2020/10/image-1.png">

Last but not least create a new post on dev.to and add:

```
<img width="100%" style="width:100%" src="https://media.giphy.com/media/TJawtKM6OCKkvwCIqX/giphy.gif">
```

Don’t forget to replace the url in the src attribute with the url of the gif you chose!

Et voilà, there you have it:

<img width="100%" style="width:100%" src="https://media.giphy.com/media/TJawtKM6OCKkvwCIqX/giphy.gif">

For more dev tips you can follow me here on social media:

- [My Blog](https://www.timo-ernst.net/)
- [On Twitter](https://www.twitter.com/timo_ernst)
- [YouTube Channel](http://www.timoernst.tv/)
Day 26 - Accordion Component
Tags: beginners, codenewbie
Published: 2020-10-09 18:46:22

I made an accordion component! This was a more involved than I expected. Check it out [here](https://josno.github.io/accordion-component/).

## What I Learned
The challenge was to use only CSS for setting the active states in the component. I learned to use the `~` symbol which is similar to the adjacent sibling combinator in CSS. The difference is that the second selector doesn't have to immediately follow the first selector. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/okm5hosckxlxtqbg20si.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqg79p39khgc24obwup4.png)

## How This Will Me
It showed me a useful way of extending my skill in combining selectors.