teleren/devto huggingface dataset:
Add docker to your NodeJS workflow in just 4 simple steps
Tags: docker, node, javascript, webdev
Published: 2020-11-18 09:13:17

# What is docker and why should you use it?

Docker is a platform as a service which allows you to isolate an entire operating system via Linux containers. The files we create below are instructions for how Docker should build the Linux container. Dockerizing (is that a word?) your application should be the first step in your workflow as it provides a good base for your development and production environments. Onboarding new members to the project is easy too, just provide them the respective `Dockerfile` and they’re good to go. Docker can become extremely complicated and you can add a lot of configuration to your application with Docker alone.

**You will definitely benefit from spending time researching complex features of Docker!**

# Add docker to your NodeJS app in 4 steps

I don’t explain what the following code does, but docker has great documentation on it, https://docs.docker.com/engine/reference/builder/ .
All of the following config files will be at the root of your project. These files will work for probably 90% of your NodeJS applications, barring specific configuration.
If this is an application that will be shipped to production, create a separate `Dockerfile.prod` that contains configuration for your production application. These config settings can be googled because there are many people who have used Docker in production. This helps separate dev vs prod configuration with ease.

1. Create a `Dockerfile.dev` with the following code:

{% gist https://gist.github.com/Kristian-Roopnarine/8e970b117f7bda62f7141771a45192fc %}

2. Create a `docker-compose.yml` with the following code:

{% gist https://gist.github.com/Kristian-Roopnarine/2a25b15fbafd0d2749088c74d1675a9e %}

3. Create a `.dockerignore` and add `node_modules` to it. Any files/folders in the `.dockerignore` will not be copied over to the Docker container. Since `node_modules` is usually a large directory, adding this to a `.dockerignore` this will speed up your build times. **Add other files/directories you do not want to be copied into your docker container here!** 

{% gist https://gist.github.com/Kristian-Roopnarine/4f1987fea4e89ca309e02e78f7190afe %}

4. Execute the following commands in the root directory of your project depending on what you need:

* `docker-compose up -d --build` : Builds the container using Dockerfile.dev and starts your docker container in detached mode

* `docker-compose up -d` Starts your docker container in detached mode

* `docker-compose down` **ALWAYS** run this command when stopping your container

* `docker ps` Lists your current active containers

After the initial build is successful execute `docker ps` and ensure that your container is running. If so, head on over to `localhost:5000` where your application is hosted locally. You can change this port through the `port` setting in the `docker-compose.yml` .
Scroll to Top Button using HTML CSS & JQuery
Tags: html, css, javascript, webdev
Published: 2020-11-18 08:42:36

Most websites nowadays add a scroll to top button on their websites. Sometimes landing page websites could be long in height, and when a visitor scroll down the webpage and for some reason, if they want to go back to the top for some information, they have to scroll back to the top. This experience sometimes annoys the visitor, and if they have to do this for every page, they will leave the website. If we think from the user perspective, every landing page website should have a back-to-top button website. <a href="https://www.divinectorweb.com/2020/11/scroll-to-top-or-back-to-top-button.html">Download the code</a>
2020-11-17 | Big Debugging Session, JS Workshop
Tags: learninpublic, beginners, webdev, career
Published: 2020-11-18 08:36:53

---
title: "2020-11-17 | Big Debugging Session, JS Workshop"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/day-2020-11-17"
---

I worked for some solid 4hrs on the course platform. Most of the stuff was debugging, because literally everything crashed. The debugging tasks are getting easier, because I learn the tools and created some aliases, mostly for the long Docker commands.

In the evening I hosted a JavaScript workshop. Our app is evolving and the folks' skills are improving a lot.
How to identify your view instance by its packagename
Tags: craftkit, javascript, shadowdom, webdev
Published: 2020-11-18 08:23:13


Instance of Craft.UI.View is placed on the DOM-tree with unique ID, 
and it is registered in the window object. The ID is used for instance method call. 

Instance ID is always identical. But to be able to identify your instance by its ID expression, you can use `packagename` class variable. 

## without packagename

```javascript
class Example extends Craft.UI.View {
	template(componentId){
		return `
			<div id="root" class="root">
				Hello World!
			</div>
		`;
	}
}

var view = new Example();
view.loadView();
Craft.Core.Context.getRootViewController().appendSubView(view);
``` 

This class is placed as:

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

The instance of Example class is named as `Example_2`, class name with trailing serial number. This is unique across your application, even if you add more instances of Example class, or even if you add Example class included in another package. 

## with packagename

To identify class of your instance by its ID, you can use packagename class variable. 

```javascript
class Example extends Craft.UI.View {
	constructor(options){
		super(options);
		this.packagename = 'craftkit.devtoblog.Example';
	}
	template(componentId){
		return `
			<div id="root" class="root">
				Hello World!
			</div>
		`;
	}
}

var view = new Example();
view.loadView();
Craft.Core.Context.getRootViewController().appendSubView(view);
``` 

This is placed as: 

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

In this case, instance of Example class is placed as `craftkit_devtoblog_Example_4`. 

You can use this to survey instance pool. 


## NOTE

The `packagename` is not restricted by module name itself.
❎❓Quiz: Web Performance #18
Tags: challenge, webperf, webdev, quiz
Published: 2020-11-18 08:22:19

Quiz question of the day. Today it's about frames and milliseconds.

To render 60 frames every 1000ms, how much time is available to render a single frame?

- 100 ms
- 20 ms
- 16 ms
- 30 ms

---
<center>[Answer the question](https://marcradziwill.com/web-performance-quiz/to-render-60-frames-every-1000ms-how-much-time-is-available-to-render-a-single-frame/)</center>
---
IBM Clearcase vs. Git
Tags: clearcase, git, vcs, ibm
Published: 2020-11-18 08:18:45

---
title: IBM Clearcase vs. Git
published: true
description: ClearCase vs. Git: Which VCS Is Better?
tags: clearcase, git, vcs, ibm
//cover_image: https://direct_url_to_image.jpg
---

## What’s the difference between ClearCase and Git? 

There are a lot of major differences (and very few similarities). 

## What ClearCase and Git Have in Common

Both ClearCase and Git are used for version control. And both have the ability to branch and merge. But that’s where the similarities end.

## ClearCase vs. Git: Differences

### Architecture 
Architecture is the biggest difference between ClearCase and Git. ClearCase is centralized while Git is distributed.

### Repository Design
ClearCase repositories are Versioned Object Bases (VOBs). While a team might have multiple large VOBs, they’re all considered part of a monolithic codebase. The same volume of files (typically used in ClearCase) would require exponentially many repositories in Git.

### Branching and Merging
Git offers lightweight branching, which can be faster. ClearCase, on the other hand, offers more granular merging.

### Cost and Availability
Git is free open source software, but it probably will require proprietary add-ons that come at an additional cost. ClearCase is only proprietary — and it’s expensive.

Thanks for reading!

Read more at [perforce](https://www.perforce.com/blog/vcs/clearcase-vs-git).
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-11-18 07:56:40

### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Make a Chrome Extention in 4 steps
Published: 2020-11-18 07:48:19

In this article, I'll show you how to create the setup for a simple new tab Chrome Extention.

- Make a new folder.

- In this folder, we'll need to create a `manifest.json` file and an `index.html` file.

```JSON
{
  "manifest_version": 2,
  "name": "Name of your extention",
  "version": "0.1.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}
```

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Name of your extention</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>
```

- Turn on 'Developer mode' by going to chrome://extensions/ in your Chrome browser and switch the developer mode on in the top right.
- Click the 'Load unpacked' button on the left and select the newly created folder containing the files we just made.

Now when you open a new tab, you should see your Hello world page! 🎉


![helloworld.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605684524472/-h3PGIYQc.png)

Get creative and customize it until you're happy with how it works.

The next step would be uploading your Extention to the Chrome web store. I'll be making an article on how to do that soon, so be sure to give me a follow!

This is my first blog post ever. So if you have any tips or feedback let me know below. 

Thanks for reading. :) 

> 
<span>Header photo by <a href="https://unsplash.com/@aaronalvaradophotography?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alvarado</a> on <a href="https://unsplash.com/s/photos/forest-path?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Best React Icons Library 2020
Tags: react, webdev, codenewbie, webpack
Published: 2020-11-18 07:42:01

Many elements such as text, images, illustrations, colors, etc., make up the UI of a website more impressive and connecting to the user. One of these elements is icons, which are used in almost all websites with different styles.

So, to make the task easy, there are many libraries available that let us use the icons directly on the website.
Let’s have a look at some best React Icon libraries which can be used on your websites in 2020.
To continue reading, [click here](https://iconscout.com/blog/best-react-icons-library)


Connect with me on:
[Twitter](https://twitter.com/SwastikaYadav15)
[Instagram](https://instagram.com/swastika.bb?igshid=p42bc3p6aj1p)
[LinkedIn](https://www.linkedin.com/in/swastikayadav15/)
Where would you use the new C# 9 Record Type
Tags: csharp, programming, tutorial, discuss
Published: 2020-11-18 07:09:54

I found a great post by wrijugh.

{% user wrijugh %}

Wriju explains the new C# Record Type.

{% post wrijugh/c-9-0-record-type-1lid %}

I am excited about this feature, but I'm not 100% sure when I should use it and when I should stick to a class. Mads Torgersen provided some insights there in his presentation on C# 9 during the .net conference but I'm actually more interested in the practical side.

How do you plan on using this new feature? Do you think there are issues one has to think about when one uses the new Record Type? Do you think Record Types should be used for deserialization of a json string? Are you going to migrate from classes to Record Types?

Let me know in the comments :)!
Career: Cloud vs Security
Tags: career, cloud, security, mentor
Published: 2020-11-18 07:03:14

Hi there,
I have been working in web development for the last 12+ years and now I am planning to shift my career to another level. I am thinking of two pathway

1. Cloud - DevOps, Cloud Architect, Cloud Administration, cloud-based roles and jobs

2. Security - Web Security, Auditing, Ethical Hacking, Security consultant, security base roles and jobs.

I am a little bit confused, btw, I have experience in managing and administrating cloud servers (AWS, Oracle cloud, digital ocean)

So, what are your suggestion/s regarding this? Which path should I follow and why? Please let me know if you know someone who can help/mentor me. 

Thanks in advance!

Sanjoy,
www.skpaul.me
www.DevsStation.com
C# 9.0 Optional Property in Record
Tags: csharp, csharp9, programming, record
Published: 2020-11-18 06:55:26

In C# 9.0 `record` can be declared in two different ways. One with the property and other without. The second one is more concise and would automatically add the property. 

This is how you can declare with property, 

```csharp
//Call
var emp = new Employee()
{
    FirstName = "Wriju",
    LastName = "Ghosh"
};
Console.WriteLine("With Property : {0} {1}", emp.FirstName, emp.LastName);

//Record with property
record Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}
```
This can be simplified,
```csharp
var emp1 = new Employee()
{
    FirstName = "Wrishika",
    LastName = "Ghosh"
};
Console.WriteLine("Without Property : {0} {1}", emp1.FirstName, emp1.LastName); 

//record without explicit property
record Employee1 (string FirstName, string LastName);
```
λ-calculus in Dart
Tags: dart, functional
Published: 2020-11-18 06:48:40

Lambda calculus is Turing complete, that is, it is a universal model of computation that can be used to simulate any Turing machine.[1] Its namesake, the Greek letter lambda (λ), is used in lambda expressions and lambda terms to denote binding a variable in a function.

Lambda calculus may be untyped or typed. In typed lambda calculus, functions can be applied only if they are capable of accepting the given input's "type" of data.

## But how to assign types to functions?

In Dart, functions are objects, just like strings and numbers are objects. A typedef, or function-type alias, gives a function type a name that you can use when declaring fields and return types. A typedef retains type information when a function type is assigned to a variable.
[Here is the Type definition example from language tour](https://dart.dev/guides/language/language-tour#typedefs)

[ Functional Programming with Flutter ](
https://buildflutter.com/functional-programming-with-flutter/)
# Right way to do a Python clean install on Mac
Tags: python
Published: 2020-11-18 06:28:28

We all have been there trying to figure out the root cause of failure of your scripts, we finally decide to get ride of python once and for all (not really ;))

This is my opinionated post on how to clean python completely from your system and then do a fresh install

---

# Use Homebrew to do the heavy lifting
check to see if `homebrew` is installed on your system. more info on its website -> https://brew.sh/

```
$ brew --version
Homebrew 2.5.11
Homebrew/homebrew-core (git revision d4069; last commit 2020-11-18)
Homebrew/homebrew-cask (git revision 0374c82; last commit 2020-11-18)
```

If you don't see the above, lets install `homebrew`. 

```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

Now you should be able to run 
```
$ brew --version
```

---

# Clean up existing Python installations

**Note** please dont remove the existing python 2.7 which comes along with your mac, there might be apps using this !

so the default installation of python exists at `/usr/bin/python`, lets keep it as is
However, the python installations located in `/usr/local/bin` are often symbolic links and can be deleted.

List all those by running
```
$ ls -l /usr/local/bin/ | grep python*
```

You should now see a list of links which are most likely installed in this path -> `../../../Library/Frameworks/Python.framework`. If Python were to be installed by `Homebrew`, it would be installed in the path -> `/Cellar/python@...`

Clean up all python links
```
$ sudo rm /usr/local/bin/python*
$ sudo rm /usr/local/bin/pip*
$ sudo rm /usr/local/bin/easy*
```

Remove versions of python install in the Framework path
```
$ sudo rm -Rf /Library/Frameworks/Python.framework/Versions/*
```

---

# Environment setup
open `~/.bashrc` and `~/.bash_profile` and clean up all the references to python Framework path and only have

```
export PATH='/usr/local/bin:/usr/local/sbin:/usr/bin:$PATH'
```

---

# Install Python using brew
Using brew install python

```
$ brew install python3
```

**Note**: as of Nov 17, 2020: the above command will install python@3.9

To always keep the python updated using brew
```
$ brew upgrade
```

Hope this helps keep a clean and updated python version

🍻
General Purpose Tensorflow Model Trainer For CSV Files
Tags: python, machinelearning
Published: 2020-11-18 06:28:23

I made a general-purpose Python notebook to train TensorFlow models on any given CSV file.

you just need to specify the dataset path, label name, batch size, and task (regression or classification).

things like the number of layers, number of nodes in each layer, number of output nodes, loss functions, model checkpointing, early stopping are taken care of.

All the preprocessing that you will ever need is built right into the layers of the model so that the model just accepts raw data and preprocesses it by itself without the need to have separate functions. (makes deployment a hell of a lot easier)

The code can handle very large CSV files too. (greater than 10GB)

Keras-tuner is used to determine the optimal kernel regularization values and activation functions.

https://colab.research.google.com/drive/1FzSQQR5ta7UGUNJZVYO8GjvNNSWjes3N?usp=sharing

I agree that it's not a "one size fits all" but you never know when it might be useful.
Technology Write For Us to The Weekend Leader

Published: 2020-11-18 06:15:08

Technology write for us contribute (sponsored post) to The Weekend Leader. All guest bloggers have an opportunity to “Write For Us” Technology related guest post like, business, E-mail Online Marketing, Information Technology (IT), Top Gadgets, and top 10 Apps list, SEO, AI, Internet of Things (IoT) related content.
https://theweekendleader.in/write-for-us/
Trend and importance of digital marketing in professional growth prospects

Tags: digitalmarketing, importanceofdigitalmarketing
Published: 2020-11-18 06:12:04

[Digital marketing](https://www.propelguru.com/) is a methodology that covers all advertising procedures and techniques through an online stage. This promoting approach likewise characterized as an umbrella for all items or administration showcasing exercises follows different online stages. With the continuous expansion in innovation and advancement, different specialty units are actualizing a computerized way to deal with their promoting exercises.

Simply put, it is also referred to as a promotional approach for various products or services over the Internet or electronic media. Therefore, it differs from the traditional marketing approach primarily in its efficiency and market penetration rate.

Therefore, this marketing approach covers or verifies, based on various tastes or points of view, the conversion rate of sales, niche, and relevant content. In addition to the Internet platform, which is closely associated with this marketing approach, it also includes mobile instant messaging, mobile applications, electronic billboards, and other channels.

**Digital marketing and its importance**
With the gradual rise in popularity on social media and other internet platforms, customers are interconnecting socially for almost 24*7 years. From a business perspective, this is a great opportunity for target customers. probably that will surely affect the result and the image of the company. Due to the gradual increase in technological advancements and competition in the market, organizations large and small have started digitizing to improve their success rate.

The reason for implementing this marketing segment in almost all business units is purely for its efficiency and performance. Some of the reasons that companies are implementing internet marketing are as follows:

• Efficient management of the customer relationship in different channels
• Efficiency of the customer engagement process
• Provide accurate targeting of potential customers based on their interests and preferences.
• Communicative and highly effective platform to discuss customer problems in a short period of time

So with the gradual increase in demand for [digital marketing](https://www.propelguru.com/) skills, it helps set the standards for an opportunity in the job market. With its market penetration, the job market is booming day by day, creating a breakthrough in career opportunities among students and professionals.
Create a Registration Form with TailwindCSS
Tags: codepen, laravel, tailwindcss, css
Published: 2020-11-18 05:50:10

## What is TailwindCSS?

TailwindCSS is a low-level CSS framework, which comes bundled with a lot of CSS utility classes, hence emphasis on "code less, do more".

Link: https://tailwindcss.com/docs/installation

## Getting started

To get started with using TailwindCSS, there are so far three responsive design rules followed. These guideline rules saves time and effort, when creating a fully-responsive design for your app.

### Guidelines & rules
1. Responsiveness - The design thought-flow, should start from mobile screens towards desktop or larger screens. This way, you'll have a better understanding of how Tailwind is meant to be used during the early design stages.
1. Component-based templates - It doesn't matter if you're designing a series of button types, to an administrator dashboard, create your "component-based template" for each component. A very good exercise is for example building a photo gallery or portfolio site. There will be design ideas on how you may have cards, grids, and form sections.
1. Keep things organized, if possible - With TailwindCSS, you're able to create 'base styles'. This feature is especially fun to use, a SMACSS advocate's wonderland for experimentation a plenty (https://tailwindcss.com/docs/adding-base-styles).

Most of these guidelines and rules, are also well-written and explained in these TailwindCSS documentation sections below:

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

### Let's take a look at an example
I have a registration form example, and it is made specially for a Laravel project. A bonus to this example, is we have some nice label effect happening for each of the text input fields.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m0bqa88xh101fc7k6ba6.png)
<center>Example registration form with TailwindCSS</center>

### Codepen
{% codepen https://codepen.io/brifiction/pen/pobOWpR %}

### Summary
TailwindCSS is wonderful and amazing. A definite game-changer for creating swift & responsive designs. However, do note that TailwindCSS is still not meant to be a "one for all" solution. 

Design frameworks like Bootstrap, Bulma and Foundation are still fantastic to work with for most occassions.

Have fun, and continue to experiment with TailwindCSS!