teleren/devto huggingface dataset:
Hosting a Node.js HTTP server on your local internet
Tags: node, http, javascript, server
Published: 2021-04-12 23:13:51

# Intro

I was trying for a long time to figure out how to host a simple Node.js HTTP server on my internet, for testing purposes. However, I just couldn't find anything on how to do it, but then one day I discovered a simple way to do it.

This way does involve your *private IP* address, so if you're not comfortable with using it this method will not work for you. *However*, only people on the same internet as you will be able to access this server.

# Requirements

- Node.js installed
- npm installed
- A text editor (I used jEdit, but you can use whatever satisfies your needs)

# Setup

In a folder of your choice, create a `server.js` file. We'll come back to this.

Now we need to make sure we have the `http` Node package installed.

You can always install it globally, this way you won't have to install it again. (I could be wrong on this, but I think when you install Node.js, it automatically comes with the HTTP package)

```cmd
npm i -g http
```

# Programming!

**Open your `server.js` file**. In this file, you will want to simply create an HTTP server. If you don't know how to do this, the code is at [the end](#final-result).

**Now on to finding your private IP address**. To do this, you can simply run the command below (in command prompt):

```cmd
ipconfig
```

*The output of this command*:

```cmd
Windows IP Configuration

Ethernet adapter Ethernet:

  Media...

... (some other things you don't need to pay attention to)

Wireless LAN adapter Wi-Fi:

   Connection-specific DNS Suffix  . : lan
   Link-local IPv6 Address . . . . . : xx00::0xx:x0x0:00x0:x00x%00
   IPv4 Address. . . . . . . . . . . : <YOUR_IP> **(this is the important one)**
   Subnet Mask . . . . . . . . . . . : 000.000.000.0
   Default Gateway . . . . . . . . . : 000.000.00.0
...
```

**Now that you've found that address**, just replace the `hostname` variable's value with this address.

Example:
```js
const hostname = '<YOUR_IP>';
```

**That's it**! You can now run the command (in the folder that your `server.js` file is):

```cmd
node server.js
```

It should (if you included this part) say something like this:

```cmd
Server running at http://<YOUR_IP>:3000
```

Now whatever you chose to run on your server is on your local internet!

<a name="final-result"></a>
# Final result

```js
const http = require('http');

const hostname = '<YOUR_IP>';
const port = 3000;

const server = http.createServer((req, res) => {
		res.statusCode = 200
		res.setHeader('Content-Type', 'text/plain')
		res.end('Hello world')
});

server.listen(port, hostname, () => {
		console.log(`Server running at http://${hostname}:${port}`)
});
```

# Reference

These are pages or other articles that either directly contributed or lead me to my solution.

https://stackoverflow.com/questions/14293370/publish-node-js-server-on-the-internet
Day 343 : Always a Good Thing
Tags: hiphop, code, coding, lifelongdev
Published: 2021-04-12 23:04:47

_liner notes_:
- Saturday : Didn't get a chance to finish up the radio show during the week. Got up early to get everything ready. Then I came up with an idea for when I start doing live streams. It will be a feature during the show. I'm thinking about separating it out into it own thing, so I bought a domain name. Before buying the domain, I wrote up a quick document on some of the technologies I'll be using and how it will work. I have a problem with buying domain names. haha This way, I was forced to map things out before just buying so I have a better chance of actually making the application. haha Then it was time to do the radio show. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of DMX with his arms above his head in the form of an X holding a microphone with the words April 10th 2021 1%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnmpabmwmc9kzdrb75r7.jpg)

- Sunday : Finished up the radio show post promotional work. Did a little light coding and mostly research. Watched a couple of episodes of the "Dr. Stone" anime. Then I watched "Fear The Walking Dead" and "Gangs of London". A relaxing day to get ready for the week.

- Professional : Had a few meetings to start the week off. A couple of them were actually user test for some changes we made to a tutorial. Got some really good feed back. Good news is that both users were able to successfully complete the tutorial. Pushed some small changes to the tutorial based on the feedback. Put some work into a new blog post for this week. Not a bad day.

- Personal : Pretty excited about the new application I'll be building. It's going to involve Web Components which is always a good thing. haha I just need to get the current side project done. I'm trying to finish one thing before I start the next.

![Above the clouds view from Haleakala Crater, HI, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw96dprhtscx01ry97li.jpg)

Going to work on my side project. Really want to get this project going. I may take out some features so I get it done sooner and add them later. Going to go work on that and maybe watch an episode of "Dr. Stone".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube pYooYBdhEA0 %}
Awesome CSS Button Hover | Animation Effects | Using Only HTML & CSS
Tags: codepen, css, showdev, webdev
Published: 2021-04-12 22:28:36



---
title: Awesome CSS Button Hover | Animation Effects | Using Only HTML & CSS
published: true
tags: codepen, css, showdev, webdev
---

<hr/>

{% youtube Dg-LouCg7FI %}

<hr/>

> [**Please do not forget to subscribe in my channel:**](https://www.youtube.com/AhmadEmran?sub_confirmation=1)

<hr/>




{% codepen https://codepen.io/ahmadbassamemran/pen/eYgMpoe %}
Fullstack Jamstack 2021: Architecting Fullstack Solutions in a Jamstack World
Tags: jamstack, headlesscms, react, webdev
Published: 2021-04-12 22:19:47

Jamstack is primarily a set of technologies to drive UIs.

It empowers frontend developers to wrangle backend APIs into compelling experiences easily. That leaves many developers wondering where "everything else" goes - things like user registration, authentication, restricted access, user-generated-content, commerce and search.

In this session, two Jamstack superstars - Joel Varty and Brian Rinaldi will take you through a Jamstack architecture that has more than just a frontend.

This workshop will help you architect and build solutions that enable you to solve all of your customers' requirements.

## What you will learn

1 | Learn the kinds of solutions that Jamstack is great at solving

2| See how you can add existing APIs onto your Jamstack solution

3 | Learn how you can build new APIs to solve unique customer problems as part of your Jamstack website

## Why you should attend

1 | You want to start using modern web JAMstack technology stack

2 | You've heard about JAMStack, but you think it's only for new builds

3 | You want to get a head start on a popular technology

## What is JAMstack?

JAMstack represents a new way of developing software based on build-time and client-side rendering, that doesn’t depend on web servers for outputting websites and apps. 

JAMstack solves many of the problems other tech stacks face and enables quicker development, but before we talk about why and how JAMstack has become one of the hottest stacks in 2020 and beyond, let’s take a look at the world before JAMstack. 

## Hosts

### Joel Varty - President at Agility CMS
[Joel Varty](https://twitter.com/joelvarty) is President at Agility CMS, a SaaS headless content management platform that combines flexible and fast Headless architecture with familiar and easy Authoring tools for editors. When it comes to cloud computing, development and software architecture, Joel is as good as they come. Beyond his knowledge, Joel's diligence is enviable.

### Brian Rinaldi - JAMstacked Dev Advocate at StepZen

[Brian Rinaldi](https://twitter.com/remotesynth) is a Developer Advocate at StepZen with over 20 years experience as a developer for the web. Brian is actively involved in the community running developer meetups via CFE.dev and Orlando Devs. He’s the editor of the Jamstacked newsletter (Subscribe!) and co-editor of Mobile Dev Weekly and co-author of The Jamstack Book from Manning.

[Sign up today!](https://agilitycms.com/resources/events/fullstack-jamstack)
The ultimate interesting ways of Using 2D Animation for Business
Tags: animation, 2danimation, businessstrategy, businessgrowth
Published: 2021-04-12 21:40:48

 
 Well, a big businessman knows about the crucial role of 2D animation in business growth. Some budding entrepreneurs may not aware of the amazing end results of utilizing 2D animation in their brand development.

Before scrutinizing the use of 2D animation for your business, one should know what is 2D animation and why is so imperative for business? [Grab the facts here within two minutes.](https://dev.to/pixlnexs/every-businessman-should-know-about-2d-animation-kl9)

Let’s unfold the most interesting ways of using 2D animation for achieving your business goal and vision.

**1.Explainer Video**
An explainer video is a short-time online video that describes a brand’s product or service. Typically, you may notice the explainer videos on a landing page, home page, or on the prospective product or service page on the website.

It aids the users to explore, and learn about the product. Also, a 2D animation explainer video enlarges your brand by outreaching more target audience with its stunning visuals.
 
Animation videos fascinate people as well as captivate their feeling by demonstrating them realistic illustration.

**2.Recruitment video**
It’s essential for startup firms to allure the right candidates to develop their business. Recruitment videos are displayed on the job sites of a company to attract the perfect candidates for a prospective job role.

2D animation Recruitment video explains the vision, mission of a company, and specifies the distinctiveness of the firm that evokes the determined candidates to apply for the respective job role.

**3.Viral video**
Viral video is a booming video, goes viral by circulating it on several social media and builds more viewers, and engages with users within a short time. Making and proficiently marketing a video is a challenging task for every production team.

2D animation video or character design helps to enhance your business globally. It makes the company stands out and aids in developing your potential audience.

**4.Interactive Video**
 An interactive video plays a crucial role to delight and retains your customers, When a brand has a mascot design, can use the mascot as a protagonist to demonstrate the products or service.

This in turn will trigger the interest amidst the prospective audience and enthralls them. Ultimately, it provokes an impact of compelling products to buy in the minds of users.

Grow your business with striking 2D visuals. 
[Thinking of 2D animation for your next project and need help?](https://www.pixlnexs.com/)
[we are here to aid and create your 2D animation project to boost up your brand.](https://www.pixlnexs.com/2d-Character-design)
Scoore Futball With React Hooks
Tags: react, javascript, 100daysofcode, api
Published: 2021-04-12 21:37:41

Scoore Futball Using React Hooks & Scorebat API 😍

Demo : https://scoorefutball.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day34

API : https://www.scorebat.com/video-api

My #100DaysOfCode Challenge : 
https://github.com/saidMounaim/100DaysOfCode/
SEO Jobs in Berlin - 2021
Tags: hiring, jobs, seo, marketing
Published: 2021-04-12 21:36:33

Here's a list of companies that hire Search Engine Optimization (SEO) specialists as part of their Marketing teams, in English or German as business language.

**Searchmetrics**
Make search and content decisions based on powerful data and analytics. Discover the possibilities of a complete digital marketing solution!
Jobs 👉 https://www.arbeitnow.com/companies/searchmetrics

**notebooksbilliger.de**
notebooksbilliger.de, der Testsieger-Shop mit günstigen Preisen. Bei NBB findest du Schnäppchen rund um Notebooks, Tablets, PCs, Smartphones, Gaming, uvm.
Jobs 👉 https://www.arbeitnow.com/companies/notebooksbilligerde

**Helpling GmbH & Co. KG**
Book home cleaning services in Ireland at just €13.90 per hour with Helpling formerly Hassle. Finding domestic cleaners is so easy!
Jobs 👉 https://www.arbeitnow.com/companies/helpling-gmbh-co-kg

**Carl Finance GmbH**
At Carl, we support owners of small and medium-sized companies on their way to a successful company sale.
Jobs 👉 https://www.arbeitnow.com/companies/carl-finance-gmbh

**Fairmint**
Jobs 👉 https://www.arbeitnow.com/companies/fairment
The Template tag: using the DRY principle for HTML
Tags: javascript, html, webdev
Published: 2021-04-12 21:29:02

Don't repeat yourself.  It's one of the golden rules for good code. for some reason when writing HTML it's almost completely ignored, especially by new devs who try to hardcode everything. 

[This example uses bootstrap 4 for the table, but it is not necessary to use bootstrap for templates]

What you need to use is the `<template></template>` tag.

Lets say you have a simple program, printing numbers in a range.  You can see the layout of the finished page on [github](https://github.com/sbrevolution5/TemplateExample), using index.html (example code below)

```
function displayData(start, end) {
    let result = ""
    for (let i = start; i <= end; i++) {
        result += ` ${i}`;

    }
    document.getElementById("result").innerHTML = result;
}
```
You can easily do this as I've done above with a string concatenation, but its not impressive.  Since you don't know how many numbers you'll need, you couldn't hardcode a table.... or can you?
Lets add a template element to our HTML page, it can go anywhere, but it should look a bit like 
```
<template id="dataTemplate">
        <tr>
            <td id="col1"></td>
            <td id="col2"></td>
            <td id="col3"></td>
            <td id="col4"></td>
            <td id="col5"></td>
        </tr>
</template>
```
This template is for a table, elsewhere in the HTML I have the body set up.  
```
            <table class="table table-striped" id="resultTable">
                <thead class="thead-dark">
                    <tr>
                        <th colspan="5">Results</th>
                    </tr>
                </thead>
                <tbody id="resultsBody">
                    
                </tbody>
            </table>
```
I then link these elements together in the javascript:
```
const template = document.getElementById("dataTemplate");
    const resultsBody=document.getElementById("resultsBody")
    resultsBody.innerHTML = ""
```
Now in our loop, we setup a datarow constant, and add each element into the textcontent as we loop. Then appending the new datarow as a child to the resultsBody, also incrementing by 5 every loop, since we're adding elements 5 at a time.
```
for (let i = start; i <= end; i+=5) {
        const datarow = document.importNode(template.content, true);
        datarow.getElementById("col1").textContent = i;
        datarow.getElementById("col2").textContent = i+1;
        datarow.getElementById("col3").textContent = i+2;
        datarow.getElementById("col4").textContent = i+3;
        datarow.getElementById("col5").textContent = i+4;

        resultsBody.appendChild(datarow)

    }
```
Now you can put inputs for 1 through 100 and get 20 rows of numbers!  

Templates done easily with only vanilla JS.  No complicated frontend frameworks needed.  

This example does have some problems, if you aren't working in multiples of 5 you'll end up with extra numbers.  Hopefully its showed you that templates are super easy to use.
What Script Run? New Package
Tags: npm, tooling, javascript
Published: 2021-04-12 21:09:48

Hello guys!

I'm working on a monorepo with micro frontend architecture and it has many npm scripts to remember, so it is so boring to open an text editor, copy the comand, run one and repeat to another one...

So I create and publicaded my first npm package, it's a small tool to help us to choose a script to run xD

## Installation
`npm install -g what-script-run`

## Usage
Go to your npm project directory, then, run the command:
`wsr`, see the gif bellow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw6otr7qxn3stsoh6k8x.gif)

Here is the npm link: https://www.npmjs.com/package/what-script-run
Here, the github link: https://github.com/ronaldohoch/what-script-run#readme
It's open source, so, PR's are welcome, you can localize to your language.
How to uninstall Sysmon
Tags: sysmon, windows, diagnostics, documentation
Published: 2021-04-12 21:24:57

Sysmon is great until you need to uninstall it, in which case the documented instructions don't work. If you get an odd `the service sysmon64 is already registered` message, do this:

1. Stop the Sysmon service in `Services.msc`.
2. Open an elevated PowerShell prompt in the folder containing `sysmon64.exe`
2. Run `sysmon64.exe -u` or `sysmon64.exe -u force` (if the 1st command doesn't work)

That should uninstall Sysmon completely. I've created a corresponding [Microsoft Docs PR](https://github.com/MicrosoftDocs/sysinternals/pull/372).
Compiladores
Published: 2021-04-12 21:22:26

Sinceramente, podría decirte que llevando al menos cuatro años en el rubro, nunca me ha tocado estar desarrollando a tan bajo nivel, es más siempre trabajo con lenguajes más elaborados, de sintaxys un poco más entendible, probablemente voy a ser el comentario me gustaría haberlo aprendido a verlo en la universidad o it, pero no al parecer no lo encontraban importante. Pero hoy en día me ha dado la curiosidad, me encuentro leyendo las primeras paginas del conocido dragón rojo.

"Compilers: Principles, Techniques, and Tools" de 1986 Alfred Aho, Ravi Sethi, Jeffrey Ullman, Monica S. Lam


En un comienzo, explica las etapas más importantes de como interactúa un compilador con nuestro código origen armando una serie de transformaciones, para finalmente llevarlo código maquina.

Espero poder contarles un poco más a lo largo que avance y si en algún momento me motivo a continuar publicando en dev.
Bezos' Calculator
Tags: html, css, javascript, webdev
Published: 2021-04-12 20:54:18

---
title: Bezos' Calculator
published: true
description: Weekend project: a small web page that calculates how much Jeff Bezos makes while you read it.
tags: html,css,javascript,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3106whyi3i24ld8r7mwm.jpg
canonical_url: https://alvaromontoro.com/blog/67974/bezos-calculator
---

Some developers use their weekends to develop cool and grandiose projects to learn new technologies and to double down as second (or third) sources of income... instead, I used this past weekend, to develop a small and silly project.

I developed a web page that calculates how much money Jeff Bezos makes while you read it: **[Bezos' Calculator](http://bezoscalculator.com/)**.

It is a mixture of tongue in cheek and social criticism (bubbles pop up with milestones comparing it to other salaries and goods.) The numbers are based on these articles by [Bloomberg](https://www.bloomberg.com/news/articles/2020-07-01/bezos-s-wealth-soars-to-171-6-billion-to-top-pre-divorce-record) and [BuzzFeed](https://www.buzzfeed.com/mjs538/jeff-bezos-wealth), which calculate Jeff Bezos' gains increase by $3,605 every second.

Initially, the counter was not animated. But the original animation did not work on Safari, so I opted for going with the non-animated version... until @afif provided some feedback and recommendation in the comments, and I updated the animation to this:

{% codepen https://codepen.io/alvaromontoro/pen/ZELrvbo %}


One fun thing about the project is how equally it distributed it is:

![Screenshot of Github showing the project languages distribution: CSS is at 34.9%, JavaScript is at 32.8%, and HTML is at 32.3%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpmhqh8oifyzwkpsn795.png)

It is a tiny thing (just one page), so it makes sense that the percentages of HTML, CSS, and JavaScript are more or less proportional. It's just the first time I see it like that. Normally one of the languages would dominate the project.
CI 4 Class not found error
Tags: codeiniter
Published: 2021-04-12 20:47:41

I am trying to implement the Repository Pattern in Codeigniter.. 

this is my file ContactsRepository.php in 
App/Repository folder...


use CodeIgniter\Model;
class ContactsRespository extends Model{
...
}



use App\Repository\ContactsRespository;
class Contacts extends Controller
{
    public function index()
    {
        $model = new ContactsModel();



then I got and error!
Class 'App\Repository\ContactsRespository' not found
The Right and Wrong World of Debugging,  Reflections from a Bootcamp Grad
Published: 2021-04-12 20:39:13

I just wrapped up my last review for my web development bootcamp - and the thought hit me, I never thought I would be here.  Not that I didn't think I survive once I got going (though times do get tough in the middle!) but I never thought I would even do a bootcamp in the first place.  Here is something crazy, I applied to Flatiron School without even having looked at single code tutorial online or watched a how to video...  It seems like now kids are born knowing they want to code, meanwhile, my grade school "computer" classes brought me years of The Oregon Trail and that spelling game where they cover up the keyboard and you have to race the clock to type out words.  Needless to say, coding was never on the table.  But I had a break between jobs that only 2020 could bring and an inkling to try it.

At the start of the bootcamp we were encouraged to embrace the uncomfortable and told that things would get uncomfortable.  And uncomfortable they did.  While some people thrive on the thrill of debugging, I constantly felt like I was wrong, then more wrong, then less wrong, then the wrongest and at some unknown point I could stumble upon something that put me in the righter direction.  But the concept that I was "wrong" and didn't know how to get myself out of it to be "right" was sometimes overwhelming.  I think it's safe to say I would have given up before even applying if I had started down the tutorial route.  

I come from an art and design background so I am used to the only limit to "right" options being my own imagination, my own creativity.  Does this shade of pink go with this particular shade of coraly orange? I like it, so I think it does, so I'm right.  But if I didn't like it, I have a whole rainbow to pick from.  At first debugging seemed so black and white and so limiting.  Fast forward to the end of the bootcamp experience, I have had some good practice hanging out in the "wrong" camp while debugging and I now see that there are many approaches to problem solving.  And I imagine that within the complexities of a large scale program and in a workplace environment, there are many more creative ways to lay out logic and problem solve along the way.  If bootcamp was about getting comfortable being uncomfortable, I am looking forward to my first job in web development to keep me on my toes and once again challenge me to the uncomfortable! 


ps - portfolios are very important in my previous career and I was somewhat surprised to find out they are important in the code world as well.  Curious if anyone has any ideas on a compelling way to marry a design and technical portfolio? Thanks!
Ansible Cranked to 11
Published: 2021-04-12 20:18:34

On the [Building SaaS with Python and Django](https://www.twitch.tv/mblayman) Twitch stream, I tried out a new tool to see if it would improve my deploy time. We configured Ansible to use [Mitogen](https://mitogen.readthedocs.io/en/latest/ansible.html) and it was an incredible success.

**With Mitogen, the Ansible deploy was 4.5X faster!** Check out the YouTube video to watch how quickly we could get Mitogen going.

{% youtube iZy4qC9ToAw %}

<!--more-->