teleren/devto huggingface dataset:
Typescript `import * as ...`
Tags: typescript
Published: 2020-08-14 20:22:21

There is a very easy to use and simple pattern that can be used whilst importing files in Typescript. The main advantage of using this pattern is to increase the readability and scan-ability of code. And that pattern is `import * as ...`

It is especially useful when it is used with models, so let's have a look at a very simple model:

`user.ts`

```typescript
interface UserType {
    firstName: string;
    surname: string;
}

export function fromJson(input: any): UserType {
    return {
        firstName: input.firstName || "",
        surname: input.surname || ""
    }
}

export function getName(user: UserType): string {
    return `${user.firstName} ${user.surname}`;
}
```

If we don't use the `import *` syntax, we would have to import the 2 functions separately as follows:

```typescript
import {fromJson, getName} from 'user.ts';

const input = { /* some JSON */ }}
const object = fromJson(input);
console.log(getName(object));
```

The above is not particularly easily to scan. We get to the usage of `fromJson`, but as the reader we have to break our scan by either looking at the top of file to see where the function came from or use our IDE's intellisense to see what the type of `object` is. Furthermore, on the next line, the function name `getName` might not remain unique to `User`.

So, in order to make the code easier to scan and parse for others, we can user the `import * as` pattern:

```typescript
import * as User from 'user.ts';

const input = { /* some JSON */ }}
const object = User.fromJson(input);
console.log(User.getName(object));
```

From scanning this file, the reader can very quickly understand that the variable `object` is a `User` because the function `fromJson` is namespaced to that file. The `getName` call can now be disambiguated from a `getName` function that might exist on another type of object.

This pattern also works nicely for utils or helpers, as such:

```typescript
const user = db.getUser();
const user = cache.getUser();
const user = queue.getUser();
```
Faster TypeScript compilation in VSCode
Tags: typescript, vscode, productivity
Published: 2020-09-08 17:55:28

## TypeScript is slow in VSCode?

We all know how **TypeScript can get slow in VSCode** 🐌 . Ever found yourself waiting for the compiler to catch up with you as you type new code or fix errors?

This quickly gets frustrating, slowing down your feedback loops (and fast feedback loops are great to keep you happy and motivated!).

Here I'm **sharing a simple tip that saved me hours** of my life over the last 3 years working with TypeScript codebases (especially large ones!).

I wish I knew it earlier when I was just getting started with TypeScript…


## How to fix slow TypeScript compilation

**Here’s the trick:**

> 1. Run a separate TypeScript process in watch mode in a terminal tab.
2. Keep it running as you write code — it’ll respond to changes and highlight errors a lot faster compared to VSCode.

![How to make TypeScript compile faster in VSCode](https://dev-to-uploads.s3.amazonaws.com/i/yf3b6ozxl1mw426w50w5.png)

In my experience, the difference can be striking (see the screenshot). It seems to depend on the project and npm libs it’s using, but the general pattern is pretty consistent across different projects and TS versions I worked with.

Now I don't know exactly how and why this hack works. What's important is that it makes my work life better! 😃 

And hopefully yours too.

## Integrate with your TypeScript project

Here’s how to make it more convenient to use this trick in your TypeScript projects:

1. Add these 2 NPM scripts to your package.json:

```
"scripts": {
  ...
  "typecheck": "tsc",
  "typecheck:watch": "tsc -w"
  ...
}
```

2. Now run npm run `typecheck:watch` in a terminal tab (I like to do it in VSCode’s Terminal panel to keep things in the same window).

This starts a separate TypeScript process in the watch mode. It’ll take some time to start, but it’ll be much faster to re-compile your code incrementally as you change your code.

3. Use npm run typechek if only need to do the check once. It’ll run faster than the watch mode.
   I find it handy e.g. before deploying to make sure the build will be succesful.

## 🙌 That’s it!

I hope this tip helps you to have a faster TypeScript workflow and to be more efficient and happier when coding (it certainly helped me).

Please share your own experiences — did it help you to speed up your workflow?
Redux Principles
Tags: react, redux, reactredux, javascript
Published: 2020-09-08 17:55:08

Redux is a predictable state container. It stores the state of your application. It stores and manages the application state.

In redux, all state transitions are explicit and is possible to keep track of them.

Basically, there are three principles of redux:
#### 1. First Principle:
"The state of your whole application is stored in an object tree within a single store"

Maintain our application state in a single object which would be managed by the Redux store.

example:
Let's assume we are tracking the number of ice-cream at the ice-cream parlor
```javascript
{
   numberOfIceCreams: 10
}
```

#### 2. Second Principle:
"The only way to change the state is to emit an action, an object describing what happened"

To update the state of your app, you need to let redux know about that with action.

example:
Let the shopkeeper know about action - 'BUY_ICECREAM'
```javascript
{
   type: BUY_ICECREAM
}
```

#### 3. Third Principle:
"To specify how the state tree is transformed by actions, you write pure reducers"

Reducers - (prevState, action) => newState

example:
Reducer is the shopkeeper.
```javascript
const reducer = (state, action) => {
   switch(action.type) {
     case BUY_ICECREAM:
        return {
           numberOfIceCreams: state.numberOfIceCreams - 1
         }
     }
}
```

Thank You, Happy Coding!!
Using AdminLTE Blade Components in Laravel
Tags: adminlte, laravel, blade
Published: 2020-09-08 17:52:14

[AdminLTE3](https://adminlte.io/themes/dev/AdminLTE/index3.html) is one of the most popular [Bootstrap](https://getbootstrap.com/) admin template which is completely free. We can use AdminLTE in our [Laravel](https://laravel.com/) projects in several ways. But since Laravel 7.x, we can use [Blade Components](https://laravel.com/docs/8.x/blade) like ``<x-component />`` and make our development faster than before.

We, backed developers, are mainly focused on Backed. Thus we need rapidness in frontend of view of Admin Panel. Using such a template of bootstrap is one of the first steps towards rapid-development. Another step can be using Blade Components in laravel.

## Installation
To get started with Laravel Blade components, you need to install a composer package:

```bash
composer require dgvai/laravel-adminlte-components
```

## Extracting Plugins

```bash
php artisan vendor:publish --tag=adminlte-dg-plugins
```

## Configurations
- Option 1: You can use this package, stand-alone with [AdminLTE](https://github.com/ColorlibHQ/AdminLTE/releases) installed in your app. You just need to add an **``@yield('js')``** at the bottom of your **master** blade layout.

- **Option 2: [Recommended]** Or, if you use [jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE) package, then you do not need to add anything at *master*. I will **recommend** to use this package.

If you choose **Option 2**, paste this config into the ``config/adminlte.php`` file in `plugins` key: [PASTE this configuation](https://gist.github.com/dgvai/627eb96f84d1afc93ab878627d89a5fd) 

## Usage
You can find full documentation of usage from the [repository](https://github.com/dgvai/laravel-adminlte-components) link.
A guide to removing automatic emails by tweaking your public LinkedIn profile.
Tags: productivity, linkedin, email
Published: 2020-09-08 17:24:12

---
title: A guide to removing automatic emails by tweaking your public  LinkedIn profile.
published: true
description: productivity hack
tags: productivity, linkedin, email
//cover_image: https://direct_url_to_image.jpg
---

There are many salespeople approaching my account by sending automated emails. To gain back my productivity and remove this hassle, I did the following hack:

### Add a unique character to your personal name, for example, Emoji.

![Add emoji to your name](https://dev-to-uploads.s3.amazonaws.com/i/jqiwhi3l3aw7h1cs910d.png)

### Create a filter in your email client that automatically deletes those emails.

![Create email filter to remove those emails](https://dev-to-uploads.s3.amazonaws.com/i/k0j242ery1s0fduuerfg.png)

### Enjoy your productivity, by skipping useless sales SPAM

Note: this solution will work until salespeople will use some Machine Learning to recognize correct names.
Unity: How to Build & Run on iPhone/iOS
Tags: gamedev, unity3d
Published: 2020-09-08 17:52:09

Recently I started playing with Unity & wanted to create an iOS game. But when I try to run it on my iPhone, the process was not smooth.  

I had to face some challenges (not with Unity) & here's how I fixed them:

{% youtube DzH4UODL7Dc %}
Best way to learn any programming language
Tags: webdev, beginners, productivity, javascript
Published: 2020-09-08 17:51:46

I remember when I was fresher and how difficult it was to acquire new technology without any guidance. I use to take random steps and try to do everything based on my understanding.
There were:
* No plan
* No mentor
* No consistency
* lack of maturity 

Due to this I faced multiple problems and it took me may be triple time in grasping a particular technology.

So considering this, I would suggest the below strategy before you dive into learning any new tech:

# Create a road-map and action plan first (get it verified by experts in that tech)

1. Understand the core concepts of the language
2. Practice those core concepts with multiple real time small tasks
3. Create at least 5-6 small applications to grasp more understanding (predecided in your road-map)
4. Find the best practices for that particular language
5. Play with all your learning & try to make one good project (making sure you are using most of your learning)
6. Find out the concepts which are complex and difficult to get in 1 go and make proper plan to practice it until you are comfortable with them.
7. Dive deeper into understanding the language behaviour , its insights and do in-depth analysis
8. Once you reach there, Check stack-overflow and see the kind of questions other devs are asking in same tech and see if you are able to provide solution
9. Practice Practice & Practice (this is the whole essence at the end)

Before that must connect with guys who are master in that language over 
* Linkedin 
* Join discord servers 
* Join their slack channels

> Be consistent (2-3 hrs/day) and try to live with this whole journey, at the end you must be between beginner to intermediate to this new tech or programming language


Do share your experiences and thoughts on the same in comments.
python crash course
Tags: python, amazon
Published: 2020-09-08 17:44:17

Hello friends, in this post we introduce my one of the new python ebook for students

so enjoy my new ebook
THIS E-BOOK IS VERY HELP FULL FOR BEGINNER
DIAMOND POINT OF THIS BOOK:

FULL PYTHON DATA SCIENCE TUTORIALS AVAILABLE
MACHINE LEARNING TUTORIALS ALSO AVAILABLE
THIS BOOK IS SIMPLE AND USER FRIENDLY IN NATURE
MOST OF THE PYTHON TRENDING EXTERNAL LINK IS AVAILABLE
TOTAL 12 SECTION IS AVAILABLE IN THIS BOOK
INDEX
SECTIONName of TopicPage No
1.Chapter 1Numpy in python08-
2.Chapter 2Pandas in python11-
3.Chapter 3Data Visualizationusing Matplotlib15-

4.Chapter 4Part 01) Seaborn Library in python for Data Visualization
Part 02) Seaborn Library in python 33-
5.Chapter 5Pandas Built in Data Visualization40-

6.Chapter 6Overview about Data Science43-

7.Chapter 7Machine Learning section 44-
8.Chapter 8Introduction about SVM46-

9.Chapter 9 Linear Regression part A)48-

10.Chapter 10 Linear Regression part B)49-

Chapter 11 Logistic Regression part A)
chapter 12 Logistic Regression part B)52-
Bonus Tips 66
so check this python ebook
python basics crash course
What you do when you are not feeling to code or learn anything new?
Tags: discuss
Published: 2020-09-08 17:07:54

Being at my first job, most of the time go making minor adjustments such as removing the shadows, making the inputs of the same type. I am a kind of Back-End Developer but doing this work. I want to learn some new framework, but not getting a spark or any motivation like before. Writing this post in order to know what you guys do when you do not feel to code or learn anything new?
🔴 Live Coding Tutorials on Twitch 🔴 Geofencing, Object Tracking, and More
Tags: webdev, tutorial, javascript, beginners
Published: 2020-09-08 17:06:47

Tune into https://www.twitch.tv/tomtomdevs to see our Developer Advocates [Olivia Vahsen](https://twitter.com/ovahsen) and [Jose Rojas](https://twitter.com/JJ_R_Ealo) do a live coding tutorial on using geofencing to track assets and objects on a map.

Check out their use case of making food deliveries from a restaurant in Vancouver. Learn how to create a route and mark delivery stops along the way! Tune in  now and grab a code for 10,000 free API credits! [Check it out here](https://www.twitch.tv/tomtomdevs).

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

The full episode and recap will be added here if you miss it - but if you can - check it out now!

For an intro to geofencing (Geofencing 101), check out one of our previous devisodes:

{% youtube 1IVCzFPi0q0 %}

Happy mapping!
CGI at Clang and Dart (1)
Tags: dart, c, docker, cgi
Published: 2020-09-08 16:44:08

Nowadays, when creating a dynamic homepage, "Launch a Linux instance on VPS", "Distribute contents using Serverless framework", "K8S etc. I think it's a recent trend.

Until very recently, however, it was common to rent a server space and use CGI to deliver dynamic content.
I will explain about this CGI with Dart.


## CGI at Clang and Dart 

Also, Perl and PHP are often used for CGI, But In This Document, C language and Dart language are targeted. 


## CGI is So Simple

Compared with recent Serverless such as React Vue Flutter and Lambda with Firebase
I think it was because it was easy to learn.


## What is CGI

CGI stands for Common Gateway Interface.
- https://en.wikipedia.org/wiki/Common_Gateway_Interface
- https://tools.ietf.org/html/rfc3875

Especially, it decides the communication method between the server and the external program.
It is super simple unlike the current Interface.

### Sample 

### Hello,World!! at Clang 

```:hello.c
// hello.c
// gcc hello.c -o hello.cgi
#include<stdio.h>

int main(int argc, char* argv[]) {
    printf("Content-type: text/html\n\n");
    printf("Hello,World!!\n");
    return 0;
}

```

This is Hello World Application for CGI
This app, when you enter the command `./hello.cgi`,


"""
Content-type: text/html

Hello,World!!
"""

And, it is an application that only displays the character string on the console.


### Become Hello World Webpage

And This Application Become Hello World Webpage

If you call "http://example.com/hello.cgi" from your browser,
"Hello, World!!" is displayed in the browser.

Call the app from the server like this
With CGI, you can return the output from the application to the user.


## Let's try

I created docker environment for this dart's cgi document 


### Start Container

```
$ git clone https://github.com/kyorohiro/dartlang_cgi.git
$ cd ./dartlang_cgi/001
$ docker-compose build
$ docker-compose up -d
```


### Open VSCODE on Docker

#### Start VSCode

open vscode on browser.
http://127.0.0.1:8443 
※ 127.0.0.1 is your docker host


#### and start apache server in vscode

```
$ apache2
```

#### build cgi

```
$ cd /app/www/cgi
$ gcc hello.c -o hello.cgi
$ dart2native hello_dart.dart -o hello_daet.cgi
```



#### test cgi

open http://127.0.0.1:8080/  then  ./app/www/index.html
open http://127.0.0.1:8080/cgi-bin/hello.cgi then execute ./app/cgi/hello.cgi application


## PS

Dart's code is following

```
main(List<String> args) {
  print("Content-type: text/html\n\n");
  print("Hello,World From Dart!!\n");
  return 0;
}
```

## All Codes
https://github.com/kyorohiro/dartlang_cgi


# Next Time

GET or  POST or Cookie or DB
Get object keys
Tags: javascript, webdev, beginners
Published: 2020-09-08 16:37:18

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

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**
Clean Code Rulebook
Tags: javascript, clean, code
Published: 2020-09-08 16:36:07

## Variable Names

###Variable name with meaning:
> **Wrong** 
> ```javascript
let x = priceValidation(0);
```
> **Right** 
> ```javascript
let isPriceValid = priceValidation(0);
```

### Singular and Plural
> **Wrong** 
> ```javascript
let person = ['John', 'Mary', 'Luke'];
let persons = 'Adam';
```
> **Right** 
> ```javascript
let persons = ['John', 'Mary', 'Luke'];
let person = 'Adam';
```

### Functions are Verbs
> **Wrong** 
> ```javascript
const total = (a, b) => a + b;
```
> **Right** 
> ```javascript
const calcTotal = (a, b) => a + b;
```

### To Be or Not Be...
> **Wrong** 
> ```javascript
const greenColor = ( color === 'green');
```
> **Right** 
> ```javascript
const isGreenColor = ( color === 'green');
```

### WTH is 273.15
> **Wrong** 
> ```javascript
const kelvinDegrees = 24 + 273.15;
```
> **Right** 
> ```javascript
const celsiusDegrees = 24;
const kelvinScale = 273.5;
const kelvinDegrees = celsiusDegrees + kelvinScale;
```

### Please, call me by full name.
> **Wrong** 
> ```javascript
const names = [ 'John Smith', 'Mary Smith', 'Luke Smith' ];
const namesWithLastNameSmith = names.filter ( (x) => { 
//code ...
});
```
> **Right** 
> ```javascript
const names = [ 'John Smith', 'Mary Smith', 'Luke Smith' ];
const namesWithLastNameSmith = names.filter ( (name) => { 
//code ...
});
```

---

## Errors, Warnings, and Info.

### Something Wrong?
> **Wrong** 
> ```javascript
const isOver18YearsOld = age > 17;
if( isOver18YearsOld ) {
  showMessage('Is Something wrong :(';
}
```
> **Right** 
> ```javascript
const isOver18YearsOld = age > 17;
if( isOver18YearsOld ) {
  showMessage('Sorry, You must be over 18 years old.';
}
```

### Debuggin in Production :O
> **Wrong** 
> ```javascript
throw new Error(‘Unexpected Error’);
```
> **Right** 
> ```javascript
throw new Error(‘someFile.js:someFunction: undefined value in variable’);
```


I keep updating this RuleBook.
Event Driven Bash
Tags: bash, devops
Published: 2020-09-08 16:21:27

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/plomcbcgtbr348ue5gai.png)
**Bash** is very useful when it comes to automating system administration tasks.  Sometimes you need to take action based on external events, and there aren't a lot of examples of how this can be done. It's pretty straightforward:
```
#!/bin/bash -eu

# Launch inotifywait monitoring the syslog in a subprocess.
# Redirect stdout of subshell to pipe #3
exec 3< <(exec inotifywait -m /var/log/syslog)

# Read each line of output from inotifywait
while read -u 3 FILE OPS; do

   # stdin, stdout, stderr all available in loop

   echo "FILE= '$FILE', OPS= '$OPS'"

   # OPS are comma separated. Swap comma for space, deal with each individually.
   for op in ${OPS//,/ }; do

      # Branch on $op
      case $op in

         MODIFY)
            echo "$FILE was modified.";;

         ACCESS)
            echo "$FILE was accessed.";;

         CLOSE_NOWRITE)
            echo "$FILE was closed without changes."
            break 2;; 

# Other actions go here
      esac
   done
done

# Close pipe
exec 3<&-

# Only get here on loop exit, or if inotifywait quits.
exit 0
```
To exercise the script, try running it and then pulling up your syslog in a pager. When you exit the pager, your script should exit as well.
This and other examples are available on [Github](https://github.com/jrbrtsn/bash_plus_plus).
I'll be happy to try and answer any questions.
CRUD Operations in React, Axios, and Firebase | React Tutorial for Beginners
Tags: react, webdev, javascript, codenewbie
Published: 2020-09-08 16:08:23

In this tutorial, we will perform CRUD operations using React, Axios, and Firebase realtime database. We won't use any state management library and thus you will have a chance of understanding how React State and Props work.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4i1gdidj3xyeyn337gbv.PNG)

If you find this tutorial helpful, leave a like, and subscribe to my channel for more awesome tutorials just like this one.

##The video tutorial

{% youtube qOsrF_ap0JU%}
Overthinking Web Development as a Beginner
Tags: beginners, javascript, webdev
Published: 2020-09-08 16:01:37

I recently started a full-stack web development boot camp at a local university. After months of poking around YouTube and Google with little-to-no direction and a total lack of foundational understanding, I decided it was time for some structure. I needed someone to tell me what I needed to know in order to learn what I wanted to know.

It turns out this decision is one of the best I've ever made. Not only am I learning at a break-neck speed, I've also found a group of fellow students who are equally as passionate and excited about the journey as I am. Together we've taken concepts that seemed foreign and confusing at first and work-shopped them into tools that we can use to build professional and creative projects.

It hasn't been an easy road, however, and the learning curve is definitely steep. Over the course of several homework assignments I've discovered that often the biggest obstacle standing between me and a fully functional script is my own brain.

Learning so much so fast makes me want to cram the fruits of every lesson into a JavaScript file and make sure I'm demonstrating my understanding of how everything works. The problem is that this approach often results in overly complicated functions that break easily because I'm overlooking a core principle in functional coding: keep it simple, stupid.

Before classes started I had the rare (for me) foresight to pick up a book called *The Pragmatic Programmer* by Andy Hunt and Dave Thompson. The book has been updated since its initial publication in 1999 but it is still a static piece of tech in a world that evolves by the hour.

Fortunately, this is not a book about syntax or any specific languages. The book speaks to the mindset required to be a great programmer. I didn't have the opportunity to finish reading it before classes started so I'm in a holding pattern until graduation. After all, there is such a thing as mental bandwidth limits.

The best lesson I've learned from reading through the first handful of chapters is this: stay grounded. Staying grounded to me means being mindful of the logic, following it through each step. It means staying open-minded; allowing your ego to stand aside while you learn from your fellow students and instructors. It means creating code from the perspective of your end user and not necessarily your own; letting overly elaborate functions and methods take the backseat to accessibility, readability, and usability.

We're only a little over a month in to the boot camp and there's a long road ahead between now and graduation. Over the course of the next five months, I plan to ground myself when necessary by thinking back to the lessons learned from Andy and Dave's book.