teleren/devto huggingface dataset:
Our top learning resources for AI programmers
Published: 2021-08-14 09:04:35

---
title: Our top learning resources for AI programmers
published: true
date: 2021-08-13 19:14:54 UTC
tags: 
canonical_url: https://www.neuraxio.com/blogs/news/our-top-learning-resources-for-ai-programmers
---

You are an Artificial Intelligence (AI) programmer and you'd like to learn how to program well as we do at Neuraxio? 

Lucky you, we've launched a series of curated resources to help you get better and to work like a pro in Machine Learning (ML) projects. 

You'll learn: 

- How to apply the SOLID principles of Clean Code to your ML code; 
- Package design techniques to structure your code; 
- How to properly balance the usage of Jupyter Notebooks v.s. using an IDE in an ML project; 
- How to structure your backend software architecture code for a viable production-ready project that will live through time; 
- The structure of Clean Machine Learning code that yields results with AutoML
- Links to the top online classes that we recommend to our programmers internally to get up to date with Machine Learning; 
- Top 5 documentation pages that you should read to grasp how Neuraxle works; 
- How to program robust software using unit tests; 
- Framework design patterns you can use to design your own frameworks; 
- How to do business with Neuraxio by working for us or referring us AI clients; 
- And more! 
<meta http-equiv="content-type" content="text/html; charset=utf-8">

If you successfully pass the quizz that will be sent to you at the end of this training, you'll be able to purchase the certificate to showcase your skills for $17 CAD, if you wish to. This certificate can be showcased on LinkedIn as "Neuraxio AI Programmer". 

Remember, you're only one ML project away from achieving success.   
And it starts here and now. 

<iframe src="https://www.members.neuraxio.com/ai-programmer-training-1628798871412" width="100%" height="1200" frameborder="0"></iframe>
Register <a href="https://www.neuraxio.com/blogs/news/our-top-learning-resources-for-ai-programmers">here</a>
How to add progress bar when click upload button?
Tags: angular, typescript, javascript
Published: 2021-08-13 18:36:03

I work on angular 8 application I need to add progress bar

when click upload button so progress bar will work when click

button upload until finish upload

upload service

PostUpload(file)
{
  const formData: FormData = new FormData();
  formData.append('file', file,file.name);
 return this.http.post('http://localhost:61265/api/DeliverySys/', formData,{responseType: 'blob'});
}
component upload.ts

public uploadFile = () => {
this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)

 .subscribe((response: Blob) => saveAs(response, this.fileToUpload.name + '.xlsx'));
}
component upload.html

<button (click)="uploadFile()"></button>
SSD1306 OLED Using Arduino in Proteus 
Tags: programming, arduino, beginners, electronics
Published: 2021-08-13 18:09:01

##  SSD1306 OLED Using Arduino 
Hi Friends! This text shows the way to use the SSD1306 0.96 inch I2C OLED show with the Arduino. We’ll show you some options of the OLED show, the way to connect it to the Arduino, and conjointly it’s operating. Let’s get started our project.
##  Introduction: 
The organic diode (OLED) show that we’ll use during this tutorial is the SSD1306 model a monocular, 0.96-inch show with 128×64 pixels. The OLED show doesn’t need backlight, which ends up terribly very nice distinction in dark environments. To boot, its pixels absorbs energy only if they're on, that the OLED show absorbs less power contrast with different displays. The model we’re victimization here has solely four pins and communicates with the Arduino victimization I2C communication protocol. There square measure models that escort an additional RESET pin. There also are alternative [OLED](https://projectiot123.com/2021/02/20/oled-circuit-arduino-specification-pinout-proteus-library-simulation/) displays that communicate victimization SPI communication. 
 
Pins: 
Name	Description
Ground	GND
VCC	Powered by 5V
SCK	The display supports both IIC and SPI
SDA	Data pin
RES	Pin resets
DC	Command pin
CS	Used only when more than one SPI device is attached to MCU

##  Components Needed:
Arduino
OLED
##  Circuit Connection in Proteus:
The connection of this project is very simple. First we see the connection of OLED. The pin D0 to D7 is connected with the input side, and the BS0 to BS7 is attached with ground. Pin 30 is connected with ground while the VSS and CS are also joining with it. From pin VDD we will give him power input and D/C are also joining with it. Now Arduino pin A4 and A5 both are connected with power. While pin 4 is attach with reset pin.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dey563l6a90n834xjb7w.PNG)

##  SSD1306 OLED Using Arduino Working: 
To create one thing seems on the OLED screen we to tend to communicate with the SSD1306 IC gift within the OLED module. This SSD1306IC can then update every component gift on our OLED show. This communication will happen via IIC or SPI from Arduino. To speak with Associate in nursing IC through any of the communication protocol we must always 1st perceive the IC by reading its datasheet that could be a exhausting however helpful methodology. Here we've got interfaced OLED with Arduino. There square measure heap of Libraries accessible for interfacing it with completely different Arduino, victimization that we will build the interfacing loads less complicated. These libraries square measure simple to use and have heap of pronto accessible graphical choices. Conjointly there square measure several online tools accessible for changing a picture into a small amount map values to be fed into Arduino. 
##  Applications: 
• Used in shopper physical science. 
• Used for Smart watch, portable, and MP3 displays. 
• Small level recreation displays. 
• Wide vary of viewing angle permits to be utilized in low lightweight.
We hope you’ve found this guide useful.
Postgresql in brew to nodejs
Published: 2021-08-13 18:08:53

1. install postgresql in brew: brew install postgresql

2. start postgresql: "brew services start postgresql"
  - after postgresql starts, I can use psql

"brew services stop postgresql"

3. sudo -u postgres psql: to start postgres

4. \timing <-- if you want to see timing

5. Link to all command lines for Postgresql: https://www.geeksforgeeks.org/postgresql-psql-commands/

extra: elementSQL can be online db: https://medium.com/@noogetz/how-to-setup-a-database-with-elephantsql-7d87ea9953d0


ex. great video explaining how I can query data inside of PostgreSQL

link: https://www.youtube.com/watch?v=ufdHsFClAk0&t=723s

npm install pg --> pg has great tool of Client where it will query data from the database I have.




If we have huge data that is taking long time, consider using indexing

ex. CREATE INDEX ON styles (product_id);
Setting up Morgan, express.json & ESLint(airbnb)
Published: 2021-08-13 18:08:05

1. npm install morgan

2. npm i eslint eslint-config-airbnb-base eslint-plugin-import -g
  a. Although I don't prefer Airbnb style of eslint, since it's industry standard, I'll need to get comfortable with it.

3. const morgan = require('morgan')
4. app.use(morgan('dev'));
5. app.use(express.json());

6. Morgan can show us how long it's taking us to retrieve the data from db

resource link to eslint-airbnb: https://medium.com/medvine/install-eslint-global-with-airbnb-style-guide-and-use-it-in-vscode-d752dfa40b21
#100daysofcode [Day -03]
Tags: programming, javascript, webdev, codepen
Published: 2021-08-13 17:55:38

#100daysofcode [Day -03]
Today I've solved some problems.
Getting Fibonacci numbers.
Getting Fibonacci numbers using recursive.
& and some more problems.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6q45tnhjb20uq477e5r.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3j8tptr4d1v7ozeveuf.png)
#DEVCommunity #javascript #ProgrammingLife
Angry developer?
Tags: haskell, elm, programming, javascript
Published: 2021-08-13 18:04:25

Recently I was trying to understand why I'm so angry.

Angry at someone else that is not using the "wonderful" programming language I'm using.

Angry because the rest of the planet is not using the "most powerful" programming language I've just discovered.

And now I get it ...

A programing language does not exist in a vacuum ... it's part of a platform, part of a set of packages and libraries but specially is part of a community of human beings.

All the popular languages like JavaScript or Java are, by definition, popular because they are used by a lot of people, not because they are necessary the best languages.

So, it does not matter if I think other languages are a thing of the past ... my new "wonderful" programming language needs people, needs a community, needs humans to grow and succeed.

So please use Elm and Haskell, I need you humans !!
🚀 React Boilerplate with TypeScript and Tailwind CSS for 2021
Tags: react, webdev, showdev, javascript
Published: 2021-08-13 17:56:04

---
title: 🚀 React Boilerplate with TypeScript and Tailwind CSS for 2021
published: true
description: A React Boilerplate built with TypeScript and Tailwind CSS using Next JS. It provides ESLint, Prettier and VSCode configuration to quickly start any application.
tags: react, webdev, showdev, javascript
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

Recently, I've built several projects in React with Next JS. For each projects, I was setting up the same dependencies again and again. So, I thought it could be great a boilerplate for 2021 and share it to the community.

Built with developer-first in mind with tools to improve productivity like ESLint linter, Prettier code formatter and VSCode configuration. Built for 2021 with Next JS and Tailwind CSS. Finally, build for production with one-click deployment and with SEO-ready.

You can check a live demo at this url : [React Boilerplate with TypeScript and Tailwind CSS](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/)

You can also check the source code on GitHub: [React Boilerplate GitHub](https://github.com/ixartz/Next-js-Boilerplate)

Already more than 400+ ⭐ stars on Github...

{% github ixartz/Next-js-Boilerplate %}

Here is the features:

- 🔥 Instant feedback with Next JS

- 🚀 Routing with Next JS

- 💅 Styled with Tailwind CSS

- ✏️ Linter with ESLint and Code formatter with Prettier

- 🎉 Type checking with Typescript

- ✅ One-click deploy on Vercel or Netlify

- 🤖 SEO friendly

- 🚀 Production-ready

{% github ixartz/Next-js-Boilerplate %}
Quick Notes Based On "Builtins" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, builtins, frontendmasters
Published: 2021-08-13 17:39:35

What I did (in code):

&nbsp;&nbsp;&nbsp; `console.log('BEn BoOrstEiN'.toUpperCase())` // BEN BOORSTEIN
&nbsp;&nbsp;&nbsp; `console.log('BEn BoOrstEiN'.toLowerCase())` // ben boorstein

&nbsp;&nbsp;&nbsp; `console.log(Math.round(5.6))` // 6
&nbsp;&nbsp;&nbsp; `console.log(Math.floor(5.999))` // 5
&nbsp;&nbsp;&nbsp; `console.log(Math.ceil(5.1))` // 6

&nbsp;&nbsp;&nbsp; `console.log('Ben Boorstein'.substr(4, 5))` // Boors
&nbsp;&nbsp;&nbsp; `console.log('Ben Boorstein'.substr(2, 4))` // n Bo
&nbsp;&nbsp;&nbsp; `console.log('Ben Boorstein'.substr(6))` // orstein

What I did (in English):
- Above are a few of the very many methods that are built in to JavaScript.
- `toUpperCase()` is pretty self-explanatory: It converts the string before it to all uppercase letters.
- `toLowerCase()` is pretty self-explanatory: It converts the string before it to all lowercase letters.
- `Math.round()` rounds the number passed to it to the nearest integer.
- `Math.floor()` rounds the number passed to it to the nearest integer less than or equal to the number.
- `Math.ceil()` rounds the number passed to it to the nearest integer greater than or equal to the number.
- `substr()` returns a section of the string before it. The first number passed to it represents the starting index. The second number passed to it represents how many of the next characters (including the character at the starting index) will be included. If there is no second number passed to it, then every character from the starting index through the end of the string is included.

What I learned:
- From the above code, I didn't learn anything new. But it is very helpful to be reminded of how these types of methods work. And review, no matter the topic, is always welcome.
- From other parts of this section of instruction, I didn't learn anything new.

What I still might not understand:
- Nothing for this section.
Best Book for C++
Tags: beginners, cpp, discuss, programming
Published: 2021-08-13 17:39:08

I'm a computer science student and I'm going to study oop in c++ on the second level, and I was looking for a C++ book, and I found people who advised me to buy the book "C++ how to program" and found it 2017 version, i.e. it doesn't have C++ 17 or C++ 20, is that normal? Why didn't the writer release more recent copies of the book to include C++ 17 and C++ 20 update?
Notes on Angular Forms, Terms, Bindings
Tags: webdev, angular
Published: 2021-08-13 17:24:01

I was working on a project and didn't know what the next steps should be to make a button work and do stuff. 

So I read the documentation. Why the documentation? Because it's the best and most efficient way to learn and grow. 

So I learned a couple things about 

##Forms
All forms should capture user input from view, validate input, help create form model and data model to update, and provide ways to track changes. 

There are 2 types of forms: 

Reactive - robust, scalable, reusable, testable, model driven. Use only if forms are a key part of your application

Template-driven - less than reactive, but simple, easy to add to just a template (not component)

[More on Angular Forms here](https://angular.io/guide/forms-overview)

##Terms
I learned while looking for answer to make my app work.

DOM - basically a model that presents to the user's view. Contains organization of elements, attributes, objects...

pipe - transforms input values data before displaying it in template. Uses the pipe character (as operator)

data binding - coordinates the application and DOM data

directives - apply application logic to what gets displayed (think: ngFor and ngIF) <-- those are template syntax elements

there are 2 directives:
-structural - alter the layout of DOM to +add -remove or /replace elements such as ngFor or ngIf

-attribute - alter the appearance or behavior of elements such as ngModel or ngSwitch

##Bindings
There are 4 basic bindings between the DOM and component of an application. 

2 bindings travel from component to DOM as it requests them
-interpolation - displays value from component 
-property binding - assign a value to a DOM property

1 binding travels from the DOM to the component
-event binding - event in DOM triggers a function in component to execute

1 two way binding that connects DOM to component
-two-way binding - combines event binding + property binding for a two way data transfer
GitHub URLs in package.json
Tags: npm
Published: 2021-08-13 17:23:35

`package.json` file in your [node](https://en.wikipedia.org/wiki/Node.js) project contain (among others) links to the packages that your projects needs to run.

To add new package dependency, you can run `npm add` command:

```sh
 npm add chalk
```

And after that respective package will be added to the `dependencies` section of your `package.json`:

```json
{
  "name": "sandbox",
  "main": "index.js",
  "dependencies": {
    "chalk": "^4.1.2"
  }
}
```

But what if instead of a [published npm package](https://www.npmjs.com/package/chalk) I want to use a branch that is living on GitHub? Luckily [package.json definition allows GitHub URLs](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#github-urls). The syntax is one of:

```
github:[user]/[project]
github:[user]/[project]#[commit-sha]
github:[user]/[project]#[branch]
github:[user]/[project]#[tag]
```
The `github:` part is optional, but gives some context to your future self.

Where `user` and `project` you can extract from the GitHub URLs of respective repositories: `https://github.com/[user]/[project]/`

So for example to install commit `95d74cbe8d3df3674dec1445a4608d3288d8b73c` of the package/**project** `chalk` (which happens to have GitHub **user** of the same name) I would have to specify:

```json
{
  "name": "sandbox",
  "main": "index.js",
  "dependencies": {
    "chalk": "github:chalk/chalk#95d74cbe8d3df3674dec1445a4608d3288d8b73c"
  }
}
```

### Semver

There is one more curious format that can be used in GitHub URLs and that is [semver](https://semver.org/). The syntax is:

```
github:[user]/[project]#semver:[semver]"
```

So for example to install `chalk` with _semver_ `^2.4.1` we should put following into our `package.json`:

```json
{
  "name": "sandbox",
  "main": "index.js",
  "dependencies": {
    "chalk": "github:chalk/chalk#semver:^2.4.1"
  }
}
```
-----

Photo by <a href="https://unsplash.com/@jjying?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">JJ Ying</a> on <a href="https://unsplash.com/s/photos/link?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Am I a good dev?
Tags: career, motivation, beginners, webdev
Published: 2021-08-13 17:23:09

---
title: Am I a good dev?
published: true
description: Probably not. Let me explain.
tags: career, motivation, beginners, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdm01hw9vz2fdkp3sset.jpeg
---

Probably not.

If you are a Senior dev, perhaps you are failing on the basics because you don’t care about them anymore. That sounds "too basic," and that's why you fail. You probably do not know the new basics.

If you are a Junior dev, perhaps you are failing because you don’t know enough about your tech, get stuck with easy errors, and probably fail to ask for help.

Let me be clear: no one is awesome on the job, and **that’s completely ok**.

Technology changes fast, and it means that it is impossible to be awesome. 
Tomorrow you will receive another e-mail with a big update on your favorite framework. 
In a few days, someone fucking awesome will create a better approach to writing code. And you know what? **You do not need to know all of this.**

I'm a very anxious person. I mean. I'M VERY ANXIOUS. At my first job in a big tech company, I felt bad every time that I needed to open a Pull Request for someone review my code.

*Fear, shame, every bad feeling came to me. I didn't want to be judged. Or be discovered as a fraud.*

That was real. I felt bad. I needed to see a doctor and took medication to treat myself with more compassion. 
It took a while to realize that **IT IS OK NOT TO BE AWESOME**.

> I discovered that even my heroes have fear.

Do you know that fucking awesome guy that has created a new approach that I mentioned before? He very likely felt the same as you. He had fears and anxiety. He had felt like a fraud before, so why wouldn't you?

I don't know about you, but even now, I have doubts about my technical skills if I'm really good at what I do. But one thing that's different now is that I have learned how to deal with this fear.

It is **normal** to feel that way in a world with so many changes.

It is **normal** to fear criticism, fear a code review. Everybody feels or has felt that way.

> You are not alone, please, know that.

Do not let anxiety and fear control you. If it gets worse, look for help. Talk to someone. Take care of yourself. Do not give up on this beautiful career because you think this is hard for you. It was hard for most of us.

**Tip for the seniors devs**: be the senior that your junior self wanted to meet. *Be kind to others.*

**Tip for the juniors devs**: fear is normal. Ask for help if you need it. 
*Be kind to yourself.*
How to improve the Arch Linux package manager
Tags: linux, archlinux, tutorial
Published: 2021-08-13 17:01:53

Pacman is the package manager for Arch Linux. And out of the box, it's just black and white, and single threaded all over. But, even if you're one to tout "I use Arch btw." and what it's like living on the bleeding edge with it's rolling release updates. You'll likely still want to make those updates take as little time as possible, with important information being colour highlighted.

Luckily pacman comes with a way to make both of these the case, with no more than an edit to it's configuration file.

___

## Colour Output

To make sure pacman produces a colourful output in the terminal. Open up `/etc/pacman.conf` in your editor of choice, with `sudo`/`doas` privileges. Then simply delete the **_#_** before `Color`, under the `# Misc options` sub-heading.


```sh
  # Misc options
  #UseSyslog
- #Color
+ Color
  #TotalDownload
  CheckSpace
  #VerbosePkgLists
```

Now save and exit, and the next time you update your system packages, pacman will use the same colour scheme as your terminal/tty.

___

## Multi-threaded Performance

With the release of Pacman v6.0.0, comes the ability to have parallel package downloads. Meaning all of your small system packages can be downloaded, all whilst getting the latest Linux kernel.

Because of reasons beyond the scope of this article (_read: I don't feel like writing about it_), this **shouldn't** throttle the speed of each download stream. As the Arch repository mirrors you're getting your package updates from, probably aren't sending packets of data to you as fast as your network connection can handle. Making parallel downloads only seem like a good thing. With resulting average install times that are **less** than just downloading package updates sequentially.

To add this latest feature, you will have to make the following edit, just like with the `Color` option mentioned above.

```sh
  # Misc options
  #UseSyslog
  Color
  #TotalDownload
  CheckSpace
  #VerbosePkgLists
+ ParallelDownloads = 5
```

If your install of Arch Linux comes after the release of Pacman v6.0.0, you should find that `ParallelDownloads` option is already there. And just needs to be _'un-commented'_.

The number you assign to `ParallelDownloads` denotes how many download streams you want to enable. By default, this value is set equal to 5, but can be changed depending on your system's hardware. A rule of thumb being adopted seems to be to match the number of threads on your CPU. But, you may find that testing above this may be beneficial, without resulting in performance drops.

---

*Originally published on [xhalford.com](https://www.xhalford.com/how-to-improve-the-arch-linux-package-manager/)*
How to set up server-side using express & node
Published: 2021-08-13 16:50:09

1. Create your empty repo

2. Create index.js file (where express is going to be set up)

3. 'npm init' (if you want to answer some questions). 'npm init -y' (if you want to bypass questions)

4. Now you will see package.json in your repo. let's download express by 'npm i express'

5. Now set up nodemon so I can watch server running using 'npm i -D nodemon'. create "start": "nodemon index.js"

6. set up express server in your index.js

```javascript
  const express = require('express');
  const app = express();
  const port = 3000;

  app.listen(port, () => console.log (`Successfully started server at port ${port}`);
```