teleren/devto huggingface dataset:
31 days of commits complete!
Tags: challenge, javascript, node
Published: 2020-02-01 18:15:13

# I did it. 

Coming into 2020, I wanted to challenge myself to commit every day for the month of January. This was a harder challenge than I thought. I had a lot of ideas coming into the challenge. They kept flowing while I was making things, but I often found that the hard part was the gaining motivation to get into a project after a long day at work. As the process became more routine, it became easier to motivate myself and do more than a few commits a day.

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

## Highlights

Looking through the data, I made 126 commits in 7 different repositories, which calculates down to about 4 commits a day. That's a lot more than what I initially set out to do. My top day was January 19th with 21 commits, I was really jamming out updates that day.

You can check out everything that I did throughout the month on [Github](https://github.com/jsegal205?tab=overview&from=2020-01-01&to=2020-01-31). Here are a few examples of the larger projects I did:

- Added darkmode toggle throughout [jimsegal.com](https://jimsegal.com) and saved it to a cookie. 
- Created a [Nodejs api](https://github.com/jsegal205/jimsegal-api) served on Heroku. Check it out at [api.jimsegal.com](https://api.jimsegal.com)!
  - This allowed me to move a lot of the json data files to a Postgres database. 
  - I was also able to have single network requests instead of multiple for my [/IsChicagoColderThanAnchorage](https://jimsegal.com/IsChicagoColderThanAnchorage/) project. 
- Consolidated a handful of [scripts](https://github.com/jsegal205/scripts) and [dotfiles](https://github.com/jsegal205/dotfiles) for my multiple computer setup.
- Added Sentry error logging and Google tagging for more insights into how people use my site.
- I also started documenting my progress via this blog.

## What's next? 

I don't think I'll stop coding but I might not be as stringent on how often I code. There are still two bigger projects that are on the docket for February: 

- Move all of the reading list json files to postgres and served from api.jimsegal.com.
- Create a web version of tic tac toe.

## Feedback

Seeing as this is my first [Nodejs app](https://github.com/jsegal205/jimsegal-api), I'm looking for any reviews / comments / critiques on the app as a whole. Comment or shoot me an email about your thoughts. I would love to hear them.
What's a promising area that you are investing in for the future?
Tags: discuss, career, culture, tips
Published: 2020-02-01 18:12:58

---
title: What's a promising area that you are investing in for the future?
published: true
description: What's an area that you think you should invest in for the future?
tags: #discuss #career #culture #tips
---

What's an area that you think you should invest in for the future? 

## Twitter

For example, I remember I created an account on Twitter when a majority of developers weren't there yet. I even remember other folks from the team laugh that I created an account on Twitter and look where it is today.

## Mobile Apps

Another example could be mobile applications back in 2010. I was lucky enough to see the trend and get rooted in native mobile development and then started learning web apps and cross-platform apps for mobile. 

## Live Streaming

Recently, I feel that live streaming coding is a way of the future and just like Twitter was "back in the day" there is only a tiny fraction of developers on there. 

## Instagram

I'm also under the belief that Instagram could be a Twitter replacement as my current Instagram feed is a majority of developers sharing short notes, tips as they do on Twitter. 

## What do you think?

So what do you think? Note that this also doesn't have to relate to a programming career, as it could be a financial strategy (such as stocks, bonds, etc).

Stay connected with me on various social platforms for daily software development news.

- [Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)
Using Renderer2 in Angular 9/8 | Angular Renderer2 Tutorial
Tags: renderer2inangular98, angular98, renderer2, angular
Published: 2020-02-01 18:09:29

---
title: Using Renderer2 in Angular 9/8 | Angular Renderer2 Tutorial
published: true
description: Renderer2 in Angular 9/8 will be dealt with in this article. Without directly touching DOM, you will be able to manipulate the elements of your app in Angular 9/8 with the help of the Renderer2 class.
tags: Renderer2 in Angular 9/8, Angular 9/8, Renderer2, Angular
---


The post [Using Renderer2 in Angular 9/8 | Angular Renderer2 Tutorial](https://www.positronx.io//using-renderer2-angular/) appeared first on [positronX.io](https://www.positronx.io).

Renderer2 in Angular 9/8 will be dealt with in this article. Without directly touching DOM, you will be able to manipulate the elements of your app in Angular 9/8 with the help of the Renderer2 class. This class is an abstraction. This approach is highly recommended for various reasons.

Thanks to the Renderer2 service in Angular, you will be able to develop apps which can be rendered in various environments, even the ones that don’t have DOM access. For instance, you don’t have DOM access in environments like native mobile, web worker or a server.


[Click here to read more](https://www.positronx.io//using-renderer2-angular/)
Connect Firebase Realtime NoSQL Cloud Database with Angular App from Scratch
Tags: firebaserealtimenosql, firebaserealtimecloud, angularappfromscratch, angular
Published: 2020-02-01 18:09:00

---
title: Connect Firebase Realtime NoSQL Cloud Database with Angular App from Scratch
published: true
description: In this tutorial, We are going to learn How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We’ll be using AngularFire library for setting up Firebase database in the Angular web application.
tags: Firebase Realtime NoSQL, Firebase Realtime Cloud, Angular App from Scratch, Angular
---


The post [Connect Firebase Realtime NoSQL Cloud Database with Angular App from Scratch](https://www.positronx.io//how-to-connect-firebase-realtime-nosql-cloud-database-with-angular-app-from-scratch/) appeared first on [positronX.io](https://www.positronx.io).

In this tutorial, We are going to learn How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We’ll be using AngularFire library for setting up Firebase database in the Angular web application.
Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to create faster and quicker web and mobile applications. It supports iOS, OS X, Android and web platforms. It doesn’t require server-side backend programming language.

####Advantages of using AngularFire Library

[Click here to read more](https://www.positronx.io//how-to-connect-firebase-realtime-nosql-cloud-database-with-angular-app-from-scratch/)
Creating custom VSCode Snippets
Tags: vscode, snippets, efficiency
Published: 2020-02-01 17:57:22


When I find myself copying and pasting boilerplate code, I create a snippet to help me code faster.

![Create a global snippets file](https://dev-to-uploads.s3.amazonaws.com/i/2rrnugb62xc6kvme2epy.gif)

Create a global snippets file. 

- `Code -> Preferences -> User Snippets`
- Select "New Global Snippets File..."
- Name your file and press enter

![Define and use your snippet](https://dev-to-uploads.s3.amazonaws.com/i/ddz3wtpz4ph304s9z45v.gif)

- In this example, we're creating a simple React component snippet.
  ```json
    // snippets.code-snippets

    {
      "ReactComponent": {
        "prefix": "component",
        "scope": "javascript",
        "body": [
          "import React from 'react'",
          "",
          "export default props => {",
          "  return <div>New Function Component</div>",
          "}"
        ],
        "description": "Create a React component"
      }
    }
  ```
- Save (`CMD+S`) the `snippets.code-snippets` file.
- Open a JavaScript file.
- Type your defined prefix and press tab.
- See your snippet appear.

What snippets will you create? If you make a snippet, I'd be interested to see it. Post a reply or DM me on [Twitter](https://twitter.com/RyanWarnerCodes)!

View my [personal VSCode snippets on GitHub](https://github.com/RyanWarner/vscode-snippets/blob/master/Global.code-snippets).

Sources: [The official VSCode docs, "Snippets in Visual Studio Code"](https://code.visualstudio.com/docs/editor/userdefinedsnippets)

You can find more of my work on my website, [ryan.warner.codes](https://ryan.warner.codes).
Configure Alibaba Cloud OSS On Laravel Filesystem
Tags: alibabacloud, objectstorage, laravel, s3
Published: 2020-02-01 17:52:37

---
title: Configure Alibaba Cloud OSS On Laravel Filesystem
published: true
description: 
tags: alibaba-cloud, object-storage, laravel, s3
---

[Object Storage Service (OSS)](https://www.alibabacloud.com/product/oss) is an object storage service by Alibaba Cloud (Aliyun/Ali Cloud), much similar to [Amazon Simple Storage Service (Amazon S3)](https://aws.amazon.com/s3/). [Flysystem](https://github.com/thephpleague/flysystem) integration in Laravel allows easy use of local filesystems, Amazon S3, and Rackspace Cloud Storage.

Although [Laravel Docs](https://laravel.com/docs/6.x/filesystem) doesn't mention of Alibaba Cloud OSS, OSS compatibility with S3 API allows you to access it using the same API, without using any additional package or SDK. For information regarding S3 to OSS data migration, and compatible S3 APIs, refer to their [documentation](https://www.alibabacloud.com/help/doc-detail/64919.htm).

##Laravel Configuration
To use OSS on Laravel, add the following into the `disks` array in your `config/filesystems.php`:
```
        'oss' => [
            'driver' => 's3',
            'key' => env('OSS_ACCESS_KEY_ID'),
            'secret' => env('OSS_SECRET_ACCESS_KEY'),
            'region' => env('OSS_REGION'),
			'bucket' => env('OSS_BUCKET'),
			'endpoint' => env('OSS_ENDPOINT'),
			'url' => env('OSS_URL'),
			'visibility' => 'public', // Default visibility
		],
```

Add your [Access Key](https://www.alibabacloud.com/help/doc-detail/53045.htm?spm=a2c63.p38356.879954.9.7cc76aec5GdeXP#concept-53045-zh) and bucket details for OSS in your `.env`:
```
OSS_ACCESS_KEY_ID=EXAMPLE
OSS_SECRET_ACCESS_KEY=Example123
OSS_REGION=oss-ap-southeast-3
OSS_BUCKET=examplebucket
OSS_ENDPOINT=https://oss-ap-southeast-3.aliyuncs.com
OSS_URL=https://oss.example.com
```

Simple as that! To make OSS your default filesystem disk, set `FILESYSTEM_DRIVER` and `FILESYSTEM_CLOUD` to `oss` in `.env`. You may also [bind your own domain](https://www.alibabacloud.com/help/doc-detail/31902.htm) to the bucket to access objects through the domain URL.
Loops – JavaScript Series – Part 12
Tags: javascript, tutorial, codenewbie, webdev
Published: 2020-02-01 17:46:38

We are going to learn a really important topic today. I know this one is overwhelming at first, but if you practice then you’ll get this properly! Don’t just see the post of today, work on it too!

There are some different kind of loop in js but all they do the same work
for – loops through a block of code a number of times
for/in – loops through the properties of an object
for/of – loops through the values of an iterable object
while – loops through a block of code while a specified condition is true
do/while – also loops through a block of code while a specified condition is true
(w3schools)

Most popular is for and while. We’ll learn both in your practice.

Sometimes we need to do the same task again and again. Like for adding sum of 10, 12 and 30 we need to add all these. First we need to work 10 + 12 then 22 + 30 again right ? Or we can add all three at a time, but suppose there is huge numbers like 500 numbers. What to do ?

We need to go through each and every number and add that to our total value. Which is going start from zero right?

We can do this work by loop. We can remove the doing same task again and again by using loop.

Lets see this

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

Understand something ?

We’ll work on loop code next tutorial.

You can see the graphical version here
{% instagram B8B8qwyAwlG %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-12/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
Looking for contributors for iHateRegex.io <3
Tags: javascript, productivity, github, git
Published: 2020-02-01 17:08:13

This community made me to launch iHateRegex.io in product hunt and hacker news. 🙏

it turned out really well:

- topped a lot of subreddits.
- #3 on hacker news 😮
- #2 on product hunt 😍
- a lot of retweets on Twitter
- 100s of bookmarks

<center><img src="https://i.imgur.com/DqeCEWT.jpg" width=400></center>

I did a lot of updates in the last few hours.

It seems to be gaining small traction on GitHub as well,

I'm inviting anybody who would like to contribute to this amazing project:
😻👉
https://github.com/geongeorge/i-hate-regex/

The project is build using Nuxt.js (based on Vue.js)
It runs entirely on Javascript (Server-side Rendering)


<center><img src="https://i.imgur.com/iE146mv.png" width=500></center>
Private Office or Shared Space?
Tags: discuss, office
Published: 2020-02-01 17:03:03

---
title: Private Office or Shared Space?
published: true
description: Do you prefer working in a private office or in a shared space with other developers?
tags: discuss, office
---

I've worked in a private office for years as a software developer, but recently we tried working in a shared team room. The goal was to measure if it would increase communication, collaboration, and productivity. 

I found the shared space to be extremely distracting and decreased overall productivity. 

While at times it was easier to collaborate, it was very difficult to find time to focus on a hard problem and experience flow.

One of the developers on the team has a habit of snapping at people and that raised the anxiety of the entire room. However, this really brought to attention that this developer's attitude needs to be addressed as it is always affecting the team, it is just much more clear now.

What are your thoughts? 
I personally prefer a private office and having the ability to close my door when I need to really focus on something. I always prefer to pair program using a tool like Live Share from my own PC, so that we can both navigate the codebase at the same time.
Commitment Phobia
Published: 2020-02-01 16:50:46

While completing group projects at The Flatiron school I had some serious commitment phobia when it came to GitHub. I was so afraid my changes were not being saved, or that something would go wrong and my work would be ruined.

Over the last week though I've worked through that fear by making quite a few commits. 

Last week I blogged about how to create a repository from the command line and today I will take you through the steps to add files to your repository and update already existing files in your repository. 

Step 1: Adding/Staging a new file to your repository 

Using the command `git add` you can stage local files to an existing repository. staging a file means preparing the file for a commit. 

`git add.`  will stage all local directory files. You can stage individual files from your directory by using `git add filename.ext` instead of `git add.`

Step 2: Commit and Comment on Changes

Using the command `git commit -m "comment" ` allows you to commit the file or files you staged in step 1. the `-m` allows you to leave a comment on the changes made. It is important to comment on your commits so that you leave a trail of changes to your files. 

Step 3: Push the changes to the repository

Using the command `git push` you will push your changes to the repository.

It really is easy as 1-2-3.
How to uninstall the GlobalProtect App from Macbook
Tags: macosx, technology, globalprotect, macos
Published: 2021-02-24 22:53:32

---
title: How to uninstall the GlobalProtect App from Macbook
published: true
date: 2020-02-01 16:30:23 UTC
tags: MacOSX,Technology,GlobalProtect,macos
canonical_url: 
---

Recently I have install GlobalProtect vpn on my Macbook and found it very difficult to unistall it since it was opening on startup. This post will show you how to uninstall the GlobalProtect App from Macbook.

On Mac endpoints, you can use the Mac installation program (in this case, the GlobalProtect Installer) to uninstall a program. To uninstall the GlobalProtect app from your endpoint, install the GlobalProtect software package, and then launch the GlobalProtect Installer. The GlobalProtect Installer prompts you to install the  **Uninstall GlobalProtect**  package. After you install the  **Uninstall GlobalProtect**  package successfully, the GlobalProtect app is removed from the endpoint.

In case you do not have the Mac installation program you can do the following steps on your Macbook:  
  
**1) Press F4 and type Terminal then Enter**

![](https://www.panayiotisgeorgiou.net/wp-content/uploads/2020/10/terminal.png)

**2) Copy and paste the following code on the terminal window**  
  
**sudo /Applications/GlobalProtect.app/Contents/Resources/uninstall\_gp.sh**

![](https://www.panayiotisgeorgiou.net/wp-content/uploads/2020/10/globalprotect-1024x174.png)

**3) Restart your Macbook and you will see that the GlobalProtect was unistalled from your Macbook**

[![](https://lh3.googleusercontent.com/aYbdIM1abwyVSUZLDKoE0CDZGRhlkpsaPOg9tNnBktUQYsXflwknnOn2Ge1Yr7rImGk=w300)](https://www.instagram.com/panayiotisgeorgiou)

[Follow me on Instagram](https://www.instagram.com/panayiotisgeorgiou)

![😉](https://s.w.org/images/core/emoji/13.0.0/svg/1f609.svg)   **That’s it for now. **

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

You can also find me on [Twitter](http://twitter.com/panay_georgiou) and [Facebook](https://www.facebook.com/panayiotisgeorgiou.net).

The post [How to uninstall the GlobalProtect App from Macbook](https://www.panayiotisgeorgiou.net/how-to-uninstall-the-globalprotect-app-from-macbook/) appeared first on [Panayiotis Georgiou](https://www.panayiotisgeorgiou.net).
Sketch 2 Code – Hands-drawn design into a HTML
Published: 2020-02-01 16:09:08

---
title: Sketch 2 Code – Hands-drawn design into a HTML
published: true
description: Sketch 2 Code – Transform any hands-drawn design into a HTML code with AI.
cover_image: https://www.koffeewithkode.com/wp-content/uploads/2019/12/img_20191231.png
tags: 
---

Now days sometimes, we are fast forwarding for getting the new ideas and business. For showing to our client/managers by just hand written sketch is not worthy, We have to create a at least a simple design may be sometime with colorful and animation(s). But here we have a quick solution to achieve this goal, where we have to upload only your sketch there, and here is your html ready.

I just found a repo from MicroSoft Website.

Sketch 2 Code : https://sketch2code.azurewebsites.net

* UPLOAD DESIGN
* SKETCH2CODE IS AT WORK!
* DOWNLOAD YOUR HTML
Can't connect to remote server running Socket.io
Tags: help, node, socketio
Published: 2020-02-01 15:57:10

---
title: Can't connect to remote server running Socket.io
published: true
description: 
tags: #help, #nodejs, #socket.io
---

UPDATE:

It turns out the port 3000 on the remote server wasn't open. Thanks everyone for reading. 

=========

Hello everyone.

I have a socket.io client that I connect to the socket.io server I'm running in my localhost using
```
const io = require('socket.io-client');
const chatSocket = io.connect('http://127.0.0.1:7000/');
```
Everything works well and I can send messages through the socket that are logged in the server.

This is the code I use on the server side: 
```
let app = require("express")();
let http = require("http").Server(app);
let io = require("socket.io")(http);

io.on("connection", function() {
console.log("connected");
});

http.listen(port, function () {
  console.log("listening in port 3000");
});
```

The problem is that `"connected"` never logs when I run the same code on a remote server. Just the `"listening in port 3000"` part. I'm substituting the server's IP address and port in `io.connect()`. I even tried with the DNS name but it's still not connecting. I've checked the dependencies and they're the same as my local environment. 

What could I be missing?
Changing the page Title in Blazor (Client-side)
Tags: dotnet, blazor, tutorial
Published: 2020-02-01 15:50:17

One of the first things I found with Blazor was no ability to set the page title.

This may come natively in time, but for now here is a simple solution.

Firstly, we need to define some JavaScript - you can put this directly in your `index.html` as a `script` or in a JS library file. (Ideally the build pipeline would compile all component JS into a single minified file and attach it to the `index.html` automatically. One day.)

```javascript
window.setTitle = (title) => {
    console.log('Setting title', title);
    document.title = title;
}
```

This simply creates a function in the `window` scope that sets the title to whatever is in the input.

Then we create a **PageTitle.razor** component to use in other components to manage the page title:

```razor
@inject IJSRuntime JSRuntime;
@code {
    private String _title = "";
    [Parameter]
    public String Title {
        get {
            return this._title;
        }
        set {
            this._title = value;
            setTitle();
        }
    }


    protected override void OnInitialized() {
        setTitle();
    }

    private void setTitle() {
        System.Console.WriteLine("Blazor setting Title to {0}", this._title);
        JSRuntime.InvokeAsync<string>("setTitle", new object[] { this._title });
    }
}
```

We inject the `JSRuntime` to allow interop with JavaScript. The `Title` property has a simple getter, but the setter is designed to trigger a refresh in the code below.

To use the component in another (I'm using the **Counter** example), it is used as normal:

```html
<PageTitle Title="Counter" @ref="PageTitle" />
```

This will change the page title to *Counter* when the component is initialised. I've added a reference so that I can use the code below:

```csharp
private PageTitle PageTitle;
private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
    this.PageTitle.Title = String.Format("Counter: {0}", currentCount);
    Console.WriteLine("Incrementing");
    AlertService.addMessage(new Alert(currentCount.ToString(), Alerts.Info));
}
```

The reference to `PageTitle` is created to allow it to be used and wired up to the component specified above by Blazor's default magic.

Then after incrementing the counter, we set the `Title` to the formatted string. You will remember above that the setter has logic to trigger the refresh when the title is changed.

(My [AlertService](https://dev.to/supachris28/building-an-alert-service-in-blazor-4poo))

This works fine (albeit with a tiny delay, but nothing a user will notice). You will get a build warning:

> Pages\Counter.razor(18,9): warning BL0005: Component parameter 'Title' should not be set outside of its component. [C:\code\blazor\first-run\WebApplication1\WebApplication1.csproj]

This could be eradicated by using a method instead of setter, but I wanted to show this way of doing it.