teleren/devto huggingface dataset:
HOW TO CREATE A NODEJS SERVER WITHOUT USING A FRAMEWORK
Tags: node, httpserver, javascript, express
Published: 2021-01-03 19:17:17

NodeJS is a Javascript runtime built on Chrome's V8 Javascript engine that allows
programmers run Javascript on the backend. Creating a *http server to respond to http request in NodeJS is quite simple and straight forward. 
In this short tutorial we are going to learn how to create our own http server without using a framework or library like ExpressJS.
NodeJS comes bundled with all that we need to run an http server. To run or developed a Node application, Node must be installed in your computer. You can download Node [here] (https://nodejs.org/). If you have node installed, let look at some code.

```javascript
 const http = require("http");
 const server = http.createServer(function(req,res){
 res.end("Hello world");
});
server.listen(3000, function(){
  console.log("server listening on port 3000");
});
```
We required and stored the http module baked in node in a variable called http. The method createServer is called on the http object we just required. A server is created and a response is sent to the client that simply say Hello world. 
Our server can be started by running the file the above code is contained. The server runs on port 3000 and to visit our simple server we can make a request to http:localhost:3000 from the browser or from a terminal using curl. By running this simple code we have successfully created an http web server.
What JavaScript variable names are valid in ES5
Tags: javascript, variables, identifiers, es5
Published: 2021-01-03 19:11:38

ECMAScript 5.1:

An Identifier is an IdentifierName that is not a ReservedWord.

The reserved groups are: keywords, future reserved words, null literals and boolean literals.

Keywords in Javascript are tokens with special meaning: break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

Future reserved words are the tokens that may become keywords in a future revision of ECMAScript: class, const, enum, export, extends, import, and super. Some future reserved words only apply in strict mode: implements, interface, let, package, private, protected, public, static, yield.

Null literal: null.

Boolean literals: true, false.

An identifier must contain any character from the following Unicode categories  “Uppercase letter (Lu)”, “Lowercase letter (Ll)”, “Titlecase letter (Lt)”, “Modifier letter (Lm)”, “Other letter (Lo)”, or “Letter number (Nl)”.

The article is a summary of the excellent article of Mathias Bynens:
https://mathiasbynens.be/notes/javascript-identifiers

Here is a validator for Javascript variables: https://mothereff.in/js-variables#%E0%B2%A0%5f%E0%B2%A0
Azure Data Factory Automation — Adding Log Analytics for Monitoring
Tags: azure, azuredatafactory, azureloganalytics, monitoring
Published: 2021-01-03 19:01:48

---
title: Azure Data Factory Automation — Adding Log Analytics for Monitoring
published: true
description: A scriptable way to add Azure Log Analytics to Azure Data Factory
tags: azure, azuredatafactory, azureloganalytics, monitoring
cover_image: https://miro.medium.com/max/1400/0*_A9ybNhfMM98s1F3
---

One of the challenges, that I often faced with automating deployment of Azure Data Factory has been to add monitoring to the Azure Data Factory in a scriptable way.

The monitoring is essential to broad system health. For example, to generate alerts failures or if a pipeline is running longer than expected. The preferred and documented way of generating this alert has been to push the logs to Azure Log Analytics and analyzing the logs to generate alerts or provide a broad monitoring capability integrated with other parts of the infrastructure on Azure.

The [Azure Data Factory documentation](https://medium.com/r/?url=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fdata-factory%2Fmonitor-using-azure-monitor%23enable-diagnostic-logs-via-the-azure-monitor-rest-api) does provide a method using the Azure Monitor REST API. However it is little unwieldy to use, , especially in CI/CD pipelines.

There is another method to do this is actually that is well documented but not often referred to. It is available in the documentation for [Azure Monitor](https://medium.com/r/?url=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fazure-monitor%2Fplatform%2Fdiagnostic-settings%3FWT.mc_id%3DPortal-Microsoft_Azure_Monitoring%23create-using-azure-cli).

So, associating an Log Analytics as a diagnostics log and metrics sink for Azure Data Factory using Azure CLI becomes as simple as running the script below:

```bash
az monitor diagnostic-settings create \
 - name LogAnalytics02-Diagnostics \
 - resource /subscriptions/(your-subscription)/resourceGroups/(your-resource-group)/providers/Microsoft.DataFactory/factories/(data-factory-name) \
 - logs '[{"category": "PipelineRuns","enabled": true}]' \
 - metrics '[{"category": "AllMetrics","enabled": true}]' \
 - workspace /subscriptions/(your-subscription)/resourcegroups/(your-resource-group)/providers/microsoft.operationalinsights/workspaces/(your-log-analytics-workspace-name)
```

The pre-requisite to run this scripts are - Azure Data Factory Instance and Log Analytics workspace should already be provisioned.

Just substitute the values for subscriptions and resources with values that applies to you. The example above shows just adding the logs for _PipelineRuns_ but you can add more values in JSON string for _logs_ parameter.
Raspberry Pi and JavaScript
Tags: javascript, node, raspberrypi, webdev
Published: 2021-01-03 18:44:44

Jeff Atwood, co-founder of Stack Overflow famously stated the following in 2007 which is referred as Atwood's Law

> Any application that can be written in JavaScript, will eventually be written in JavaScript.

It is no wonder that, you can run JavaScript in Raspberry Pi as well. The following post details you a step by step guide on how to run JavaScript (Node.js) in Raspberry Pi 3. Read the tutorial here.

[Part-1](https://medium.com/til-js/raspberry-pi-and-javascript-a-simple-site-health-check-monitor-part-1-e3f913d377c0)

[Part-2](https://medium.com/til-js/raspberry-pi-and-javascript-a-simple-site-health-check-monitor-part-2-d30b6a2c9805)
A simplistic PDF reader
Tags: showdev, javascript, css
Published: 2021-01-03 18:44:04

For my project's needs I needed a simplistic pdf reader that works on mobile browsers.

Hence I did that:

https://codepen.io/pc-magas/pen/gOwezdo

I used pdf.js and I render the whole pdf into a dynamically generated specified div. Then once I read it I render each page on a dedicated canvas element. 

Once pdf is rendered then I hide a spinner and I show the pdf.
How to create colorful text inputs with CSS
Tags: css, hmtl
Published: 2021-01-03 18:37:14

# CSS never ceases to amaze me

Every few and then, I check the [web design subreddit](https://www.reddit.com/r/web_design/) to check some of the ideas proposed on there, because there are really talented people out there showing their work, and that might inspire you.

But sometimes, you find CSS related stuff that not only it's helpful, but also it blows your mind. What if I tell you that you can change the color of the caret of an input? That's cool right? The only thing we need is this property:

![carbon (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609340904240/N1zZ7MHwj.png)

The [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color) describes the property as the following: 
> "The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. By default, it is black, but its color can be altered with this property."

By using this property, we would get something like this (click on the input to see the effect):

{% codepen https://codepen.io/daviddiaz/pen/wvzyovZ %}


This simple line of CSS can be very helpful, and I'm pretty sure a lot of you can imagine lots of usages for this.

But what if I tell you that we can animate this input even more? With just a little bit more of CSS we can get something as cool as this:

{% codepen https://codepen.io/daviddiaz/pen/vYXdXbR %}


One might think that this is a little bit too much, and that might be right, but sometimes we just wanna have some fun with the styles, and this is one of those times.

The point of this post, appart from showing you this CSS property, is to show how inmense is CSS and how much stuff we can learn and create that we don't even know about yet. Fascinating, right?
Water Cooler Talk: How do you Practice Coding ?
Tags: practice, how, watercooler
Published: 2021-01-03 18:31:13

With the start of the new year lots of Devs have goals of sharpen up a their coding skills. 

My question to you is how do you practice coding ? I'd like this to be a place to share our best practices and help kick off 2021 with new perspectives to improve ourselves :D

Leave a comment below on ways you've figured out to practice coding ! :D
TOP 5 REACTJS PROJECTS FOR WEB DEVELOPERS! 🔥
Tags: react, javascript, development, programming
Published: 2021-01-03 18:27:58

Today we will focus on the top 5 **React JS** projects for you to land a job as a developer in 2021!!

When it comes to projects, focus on what you are up to, So if you want to be a front-end developer or a backend dev, Here are 5 front end as well as backend projects that will land you a job as a dev in 2021!  

## Front-End 

1.[Netflix-Clone](https://netflix-clone-989.web.app/)
<img src="https://justinn.me/images/portfolio/netflix-clone.jpeg" alt="">

- This Includes CSS  
- This will show you, how to fetch api's
- This will use other libraries of react to display dummy videos

2.[Hotstar-Clone](https://hotstar.justinn.me)
<img src="https://justinn.me/images/portfolio/hotstar.PNG" alt="">

- This Includes CSS
- This will show you how to map data from [Firebase](https://console.firebase.google.com) 

3.[Hulu-Clone](https://hulu-clone-989.web.app/)
<img src="https://justinn.me/images/portfolio/hulu.PNG" alt="">
- This includes CSS
- this will show you how to fetch and map data from [TMDB](https://themoviedb.org/) api 

4.[Prime-Video clone](https://primevideo.justinn.me/)
<img src="http://justinn.me/images/portfolio/prime.PNG" alt="">

- This includes the carousel in the home page
- this will show you how to map data from [firebase](https://console.firebase.google.com/)

5.[Airbnb-Clone](https://airbnb-clone-989.web.app/)
<img src="https://justinn.me/images/portfolio/airbnb-clone.png" alt="">

- This includes CSS

## Back-End
1.[Facebook-Clone](https://facebook-clone-981.web.app/)
<img src="https://justinn.me/images/portfolio/fb.PNG" alt="">
- This includes CSS
- This includes user authentication
- This includes database
- This includes react-context API
- This has the ability to text each other

2.[Discord-Clone](https://discord-clone-989.web.app/)
<img src="http://justinn.me/images/portfolio/discord.PNG" alt="">

- This includes CSS
- This includes User Auth
- This includes Database
- This includes Redux
- This has the ability to text each other

3.[twitter-clone](https://twitter-clone-989.web.app/)
<img src="https://justinn.me/images/portfolio/twitter-clone.PNG" alt="">
- This includes css
- This includes database

4.[Spotify-Clone](https://sc.jenovs.com/)
<img src="https://futurefive.co.nz/uploads/story/2015/05/26/windows_10_music_app_spotify.jpg" alt="">

So, That's it for today, Make sure you like, share this post, will meet in next blog

Thanks
[Justin](https://justinn.me/)
Resources for learning Go
Tags: go
Published: 2021-01-03 18:24:23

### Let's talk about Go.

For those who do not know (I do not blame them), Go is a programming language that was created back in 2009, although it is in recent years that it is getting more relevance.

Without going any further, in the [Stackoverflow annual survey](https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages-loved) where they analyze the most used technologies From the developers (among other things) we can see that Go is in a worthy 5th position:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608509036387/AFe4cI7Ww.png)

In addition to being the 3rd highest paid technology only behind Perl and Scala:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608509128913/ihMmXm287.png)


And it is not surprising, since Google has put a lot of effort into this project and it has gone from being a curiosity for developers to being a language to take into account according to which projects. In fact, Docker and Kubernetes are written in Go, 
maybe we should ask them why 🙄

Go, or Golang as they usually call it, is intended to be a straightforward language, easy to learn and understand by other developers, although this may not be entirely true. The problem is that due to the "few" people who use it, the documentation is rather poor, so if you come across an error and don't know how to fix it, it may take longer than normal to find an answer.

Well, this post is here to try to solve part of the problem. One day while browsing the [Go subreddit] (https://www.reddit.com/r/golang/), I came across a post that talked about a website with various resources for people who are getting started with Go, and to my surprise it is wonderful.

[This is the web:](https://golangresources.com)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608509721496/sPoU0NzmV.png)

In it we can see exercises to practice, explanations for all levels and much more. The best thing is that from time to time they tend to add new things, so if you are interested in Go, you should bookmark this page and have it there just in case.
What's holding you back from trying Eleventy?
Tags: discuss, webdev, javascript
Published: 2021-01-03 18:22:48

[Eleventy](https://11ty.dev) is a static site generator that's getting a lot more attention around the web lately. If you've tried it or considered trying it:

- Anything you're unsure about or wondering if it can do? 
- Did you start an Eleventy project and get stuck on something?

_Fine print_: I'm the author of [11ty.Rocks](https://11ty.rocks) so your responses may be used to help inform the creation of future resources 😉 I'd love to try to answer some of your questions in the comments, too!
Why we shouldn't use "else"
Tags: javascript
Published: 2021-01-03 18:20:35

I have recently watched several videos and read many posts about the misuse of 'else' and why we should avoid it. At first I thought 'well, it will be the 
novelty and they will forget about this in a few months'. To my surprise it is not like that, and they have been dealing with this subject for a long time.

One can say 'and why would I stop using' else 'if they are indispensable in any program', and you are absolutely right, I thought the same thing until I think I have come to understand it. I am going to put an example; Let's say we have to do three checks when registering a user and each of these checks has an exception attached if it is not true:



1. Check that the username follows a correct format.
2. Check if the user is already registered.
3. Check that the user has a correct image 

It is not a real case but it can help us. Ok, to do these checks we would have to do the following



![carbon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609338483245/UxzJb0yje.png)


Seems like everything is ok right? Or not? Leaving aside the three levels of indentation, it could be a valid solution. The problem is that if we have a lot of code within each check, when we get to the 'else' we won't even remember what we're checking. What not using 'else' proposes is to put it in a different way, something like this:



![carbon (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609338642900/8OJkoy4bg.png)

Doing it this way, we would check from the first moment if we can go ahead with the registration, and then do the logic if everything goes well. Without a doubt, in the second way everything seems to be more organized and clear when reading code.
Bookplorer
Tags: dohackathon, svelte, javascript, showdev
Published: 2021-01-03 18:19:06

## What I built
I have built **Bookplorer** app, a dedicated book finder. I have used Svelte ecosystem and neumorphic style. It is deployed using DigitialOcean's App platform.

### Category Submission: 
I would say this falls into the "Program for the people" category. The reason is pretty much clear, It will help users to find books.

### App Link
Since the app itself has been deployed to DigitalOcean, live demo can be found over [here](https://bookplorer-mn5g9.ondigitalocean.app/)

### Screenshots
![Landing page](https://dev-to-uploads.s3.amazonaws.com/i/mgmmuh2xext1qvs8wjra.png)

![Search results](https://dev-to-uploads.s3.amazonaws.com/i/7s805jbi4h5xt5028hzb.png)

![Sidebar](https://dev-to-uploads.s3.amazonaws.com/i/w5fa34urvlnc2gzjku1w.png)

### Description
Bookplorer is all about finding your favorite books, share them with your friends on social media or you can buy them. It is backed by Google Books API. You can explore books with the help of volume or Author name. Decorated with **neumorphic** style, this app comes with a lean and clean UI.

### Link to Source Code
Github repo link: https://github.com/sprakash57/Bookplorer

### Permissive License
Bookplorer is licensed under the MIT license.

## Background
Of course, you can google anything and everything. But sometimes results become cluttered with other non-wanted articles and materials. Bookplorer has one goal, that your search results should reflect books by removing other distracting stuff. 

In this pandemic, I felt that people should have utilized most of their time by reading books. Books, they thought that they will read someday. This utility will help you search those books, share them with your friends, or buy them.

### How I built it 
Bookplorer is built using Svelte ecosystem. Yes!! I ditched Vue and React. Why? Because I really wanted to learn this awesome framework by building something. Well, what's better than a hackathon. The icing on the cake was DigitalOcean's app platform that made the deployment process "A Child's play". Most importantly the **Autodeploy code changes** feature.

### Additional Resources/Info
It was not possible to build the app without [Google Books API](https://developers.google.com/books/docs/v1/using#st_params) and [Svelte tutorial](https://svelte.dev/tutorial/basics)

# That's about it
Do checkout my other blogs [here](https://suprdev.netlify.app/blog/). Follow me on Twitter @sunny_pr_ to get updates on the latest blog. Thanks for reading!!
How do I convince my React fellows to work on my Vue projects?
Tags: react, vue
Published: 2021-01-03 18:18:55

# Why Vue?

I think that this would be the first question to answer, and that's fair. Also, in addition to knowing the answer to this question, it would be great if you could explain '**why Vue**' yourself.

### Use it everywhere

First of all, and in my opinion, one of the best things about Vue is that you can use Vue on a new or existing application. If you are going to use Vue on a new project, that's great, Vue is going to work excellent. But, no worries if you are going to work on an existing project, you can just select and target a part of the application that you want. 
In brief, Vue is more useful for than just starting a brand new project, you can use it to improve or fix applications that you already have started.

### Similar to other frameworks

Vue is gaining popularity really quickly. One of the reasons for this might be it's similarity to other frameworks. Nowadays it’s easier to find developers who are already familiar with frameworks like React or Angular, and ** Vue’s learning curve makes it really easy** to help your partners to use the technology, just give them a bit of time to get familiar with the framework.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609688998641/3Q5PsaXth.png)

### Faster, easier to understand and to maintain

**It's simple**, Vue just feels simpler and easier to work with than with a React or Angular application. This means that if you were given a task to fix a certain part of an application, the code can be easily understood and, of course, fixes can be done quickly.

### Learns from others failures

Another thing that makes Vue a solid and great choice is the fact that since **it’s newer**, it's creators had the opportunity to learn from their predecessors mistakes. This means that the illogical and cluncky problems of other frameworks are not present in Vue.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609688837612/rTBrbLqVv.png)

### Popularity

Vue is popular. By the time I'm writing this,** Vue has over 178k stars on Github**. This means that in terms of Github stars, right now Vue might be more popular that React or Angular, and that's impressive.


Vue stats on Github:
![Vue stats](https://cdn.hashnode.com/res/hashnode/image/upload/v1609688463028/BZ_Em4Td_.png)

React stats on Github:
![React stats](https://cdn.hashnode.com/res/hashnode/image/upload/v1609688493105/vg0PgB26T.png)

Angular stats on Github:
![Angular stats](https://cdn.hashnode.com/res/hashnode/image/upload/v1609688531054/L0Wl1exTr.png)

Being popular means that many developers use it, and that means that problems or bugs tend to be found and solved quickly. Unlike some other popular frameworks, Vue is not backed by any big tech company, like React, that was built and is supported by Facebook, and Angular, that has Google’s on their side, **Vue.js is completly created and maintained by the community**.

Well and that's all. Hope I helped you a little bit understanding how to make your coworkers use Vue!
Laravel Eloquent Mutators and Accessors
Tags: laravel, php
Published: 2021-01-03 18:15:16

[@Coderuck](https://coderuck.com/)
[Laravel Eloquent Mutators and Accessors](https://coderuck.com/laravel-eloquent-mutators-and-accessors/78) allows you to transform Eloquent attribute values when you retrieve or set them on model instances.

[Laravel Eloquent Mutators and Accessors](https://coderuck.com/laravel-eloquent-mutators-and-accessors/78) is of the Eloquent ORM in the Laravel web framework.

In Laravel, mutators and accessors allow you to alter data before it's saved to and fetched from a database.

Basically through mutators you can alter data before it saved to database and through accessor allows you to alter data after it's fetched from a database. To define an accessor, create a get{Attribute}Attribute method on your model where {Attribute} will be your table column name will be like for example you have first_name as column name then it accessors will be getFirstNameAttribute() and mutators will be setFirstNameAttribute().

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/5FaTn7eqsXY/0.jpg)](http://www.youtube.com/watch?v=5FaTn7eqsXY)

[@Coderuck](https://coderuck.com/)