teleren/devto huggingface dataset:
Problems with Types in React
Tags: react, javascript, webdev, codenewbie
Published: 2019-11-19 10:07:41

Type checkers help to identify certain types of problems before you even run your code.

As the application you're working on grows, you'll definitely want to add some kind of prop type checking - you don't want bugs you'll work on for hours or days before you realize you just sent an empty array instead of an object! It helps to annotate variables, functions, and it helps to detect mistakes early.

At most of the places, you'll find people talking about using type checking extensions such as Flow and, Typescript for React projects.

You can use something like Typescript to cover your whole app with checks. While TypeScript can be quite useful and nice, you may not want to enforce the type checking of every single function and variable.

Static type checkers like Flow and TypeScript identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, I recommend using Flow or TypeScript instead of PropTypes for larger codebases.

# Flow

Flow is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. You can read an introduction to Flow to learn its basics.
To use Flow, you need to:

- Add Flow to your project as a dependency.
- Ensure that Flow syntax is stripped from the compiled code.
- Add type annotations and run Flow to check them.

# PropTypes

If you don't want to go all the way to add Flow, Typescript to your small-medium sized project, you can use PropTypes which comes as a standard react package, although not in the core library.

To get started with PropTypes I wrote a [beginner level tutorial which you can read here for free](https://devhoot.ooo/react-short-notes-one-typechecking-react-with-proptypes/).

## About Me

I’m a Senior Product Engineer from India, working in web and mobile development. I enjoy turning complex problems into simple, beautiful, and intuitive software. I blog to share my software knowledge with others.

My job is to build your idea so that it is functional and user-friendly but at the same time attractive. Moreover, I add a personal touch to your product and make sure that is eye-catching and easy to use. I aim to help you validate and scale your startup most creatively.

## Quick Links
- [Hire Me](imran.wiki)
- [Coding YouTube Channel](https://www.youtube.com/channel/UCV-F9TgeC_bSEdHH9qDfqXw)
- [LinkedIn](https://www.linkedin.com/in/imrankhan001/)
- [Twitter](https://twitter.com/EhThing)
- [🎁 Screen Recording Software](https://screen.studio/@Xenr1)
A List of Idiomatic Code Resources
Tags: bestpractices, polyglotdev
Published: 2019-11-19 09:47:38

---
title: A List of Idiomatic Code Resources
published: true
description: 
tags: best-practices, polyglot-dev
---

I dabble into multiple programming languages at the same time and felt the need for having one central repository for resources related to the best practices and idioms followed by a particular programming language community. If you know of any such awesome resources that are not already listed in the repo please create PRs or if you don't see your favorite language in the list then feel free to add a new section I would be happy to accept PRs for new language sections too.

If you like the project consider giving it a star for reach and visibility. Thanks

[Github link](https://github.com/palash25/best-practices-checklist)
How do you prevent a log file from getting too big with logrotate?
Tags: linux, ubuntu, bash
Published: 2019-11-19 09:16:42

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/478fha1nf4oht98quo74.jpg)

Recently a log file on one of my droplets got too big and filled up the disk space of the server, so I decided to share my solution here!

There were two things that I had to do:

* As the log was really big and was exhausting the available webspace I had to truncate the log. I did this with the following command:

```
> /var/log/my.log
```

That way the log is truncated without disrupting the processes.

* For a more structural solution, it is best to use `logrotate`. So what I did was to add a new conf file in the `/etc/logrotate.d/` directory. The content of the file looked something like this:

```
/var/log/my.log {
       weekly      
       rotate 4    
       compress    
}                  
```

A quick rundown of the options:

* `rotate 4` : keep four old log files.
* `weekly` : rotate once a week.
* `compress` : compress the rotated files, by default gzip is used and results in files ending in .gz.

For more information I would recommend checking the [logrotate man page](https://linux.die.net/man/8/logrotate) and this tutorial on [DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-manage-logfiles-with-logrotate-on-ubuntu-16-04).

Hope that this helps!
Seed MongoDB (mongoose-seed)
Tags: mongodb, mongoose, seeding, node
Published: 2019-11-19 09:06:37

**Firstly What is database seeding?**

Seeding a database is a process in which an initial set of data is provided to a database when it is being installed. It is especially useful when we want to populate the database with data we want to develop in future.

Now that we know what database seeding is let write some code,I believe you are familiar with Nodejs and MongoDB, so set up your Nodejs server. then create a product.model.js file and write the following:


![Screen Shot 2019-10-25 at 11.39.48 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572043220826/yCM77w9Rb.png)

Create product.controller.js file and write the following to create a product:

![Screen Shot 2019-10-25 at 11.48.39 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572043737228/n7ipOIRNZ.png)

Now create a product.route.js file and write the following:

![Screen Shot 2019-10-25 at 11.52.22 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572043966161/4xjKE54kg.png)

Now let create our seed.js file and write the following :


![Screen Shot 2019-10-26 at 12.08.09 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572044923883/TYhGOqiEM.png)

![Screen Shot 2019-10-26 at 12.09.19 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572044985061/rpm7xmA55.png)

In your package.json add a seed script:

![Screen Shot 2019-10-26 at 12.11.52 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1572045125647/r8QKWuoh7.png)
now run 
> npm run seed

to seed data to MongoDB

[to read more on mongoose-seed](https://www.npmjs.com/package/mongoose-seed) 

Enjoy!!!
9 Helpful Tips For Every Computer Science Student
Tags: tutorial, productivity, requestforpost
Published: 2019-11-19 08:43:22

Hello there! In this post, I’m going to share some of the very useful tips that every computer science student should follow. This is not some programming guide but rather these are some general useful tips that you should try to follow if you are a computer science student or if you are planning to learn to program and getting a job in the same. Let’s get started!

1. Don’t rely on College lectures only, but also don’t bunk all the lectures

 You are not going to learn every piece of tech from college lectures, so stop relying on lectures and colleges and start learning on your own but by that, I don’t mean that you should bunk lectures. 
Some of the basics of programming and fundamentals you can learn very well from college lectures. But most of the college syllabus has not been updated for the last 10 years or so and therefore it is not so industry-oriented and doesn’t cover the latest technologies. Therefore, you should learn about the latest technologies and frameworks on your own.

2. Learn how to work with a team

Check out the full post at my medium blog.


{%medium https://link.medium.com/GcV78ZcRI1 %}
Upload Multiple images to cloudinary Node, MongoDB, Express
Tags: cloudinary, node, mongodb, javascript
Published: 2019-11-19 08:38:42

Hello there
**I**n this post we are going to create a backend Node JS server that uses the cloudinary library to upload multiple images at once because cloudinary doesn't support multiple images by default so we are going to find a way around it.  Brace yourselves, I hope you are excited as I am.

**Requirements**

We will need the following installed on our machines to get started;

- Node JS

- MongoDB

- Cloudinary account [Click here ](https://cloudinary.com/signup) 

Let get started.

First, we create our project folder and also initialize our project using the following.
     
> mkdir cloud_mutilple_image
     cd cloud_mutilple_image
     npm inti


 which would create a package.json file for us.

**PROJECT STRUCTURE**

Next, we would structure our project, in the root folder we would need to create a server.js file, which would be the main entry point of our application, then we will need a helper folder to contain our application helper.js file. Our project structure would look like this.


![Screen Shot 2019-11-08 at 6.06.33 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573234794584/tLl15y4Rp.png)

package.json:

![Screen Shot 2019-11-08 at 7.09.29 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573236584061/T7uNOgWlV.png)

Server.js file Where we will be starting our development server

![Screen Shot 2019-11-08 at 6.14.15 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573234814256/umtcyZQnF.png)


helper.js file where will have  our upload (helper) function 

![Screen Shot 2019-11-08 at 6.41.40 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573234960590/Ig02H5Ve8.png)

Now let create a user folder where we will have Our user.controller.js, user.model.js and user.route.js

user.model.js

![Screen Shot 2019-11-08 at 6.50.07 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235456679/klefPnrti.png)

user.controller.js


![Screen Shot 2019-11-08 at 6.46.00 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235229533/xoZcMOnEk.png)


![Screen Shot 2019-11-08 at 6.46.25 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235264766/qgIRP7sE1.png)

find all created user:


![Screen Shot 2019-11-08 at 6.49.00 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235352509/z0s38gj0n.png)

user.route.js


![Screen Shot 2019-11-08 at 6.51.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235531500/Jft5lA7eO.png)

Now let test our endpoints:

create endpoint: 

![Screen Shot 2019-11-08 at 6.54.30 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235685552/U1TcHkfkn.png)
find endpoint:

![Screen Shot 2019-11-08 at 6.55.34 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1573235782231/h9rokQ6qq.png)

 [Click Here to Get source code](https://github.com/waletayo/upload-multiple-image-with-cloudinary-)
[WEBINAR] Dévelopement de dApps avec la Blockchain Waves et RIDE
Tags: blockchain, dapp, wavesplatform, smartcontract
Published: 2019-11-19 07:38:01

Introduction au Développement d'Applications Décentralisées et Smart Contracts sur la Blockchain Waves avec Christophe Verdot, Ambassadeur Waves et développeur de Signature Chain.

ENTIEREMENT EN FRANCAIS

Ce webinar est le premier d'une série complète qui couvrira l'ensemble des éléments et possibilités offertes par la Blockchain Waves.

Il durera environ 45 minutes, il n'est pas nécessaire d'avoir une caméra et un micro, vous pouvez suivre le Webinar sans interagir mais aurez la possibilité de poser vos questions à la fin si vous le souhaitez, de vive voix ou par écrit.

Nous verrons dans la première partie une présentation générale de ce qu'est une dApp et les concepts de base du langage RIDE puis dans la seconde partie du live coding pour présenter des exemples en utilisant certains des outils principaux (IDE, Explorer etc).

Pour ceux ayant participé au Webinar précédent en octobre dernier, ce sera sensiblement le même. A partir de janvier 2020 nous aurons un webinar par mois sur des sujets différents liés au développement RIDE. Ce Webinar est une introduction/présentation générale avant le démarrage plus en détail en janvier.

Niveau : Tous niveau accepté, une compréhension basique de la programmation et recommandé. La démo sera faite en Javascript.

Enregistrement sur meetup :
https://www.meetup.com/Paris-Waves-Blockchain-Meetup-Group/events/266557857/

N'hésitez pas à nous suivre sur les réseaux sociaux en attendant :

Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Youtube : https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A
The single most timesaving bash shortcut
Tags: linux, bash
Published: 2019-11-19 07:35:30

It is a bit of embarrassing but I spent 10 years in my field without knowing the 

`cd -`,`git checkout/merge -`

shortcut.

The `-`references the last folder/branch you accessed. So this is a thing:

```
$ pwd
/Users/kait/Downloads

$ cd test
$ pwd        
/Users/kait/Downloads/test

$ cd -
$ pwd
/Users/kait/Downloads
```

Probably the biggest revelation I ever had once a colleague of mine told me.
Compile Time Function Evaluation (CTFE) 
Tags: dlang, tutorial, metaprograming
Published: 2019-11-19 04:02:40

Meta programing has been a common feature in languages. Some languages provide reflection, AST manipulation, Javascript provides `eval` to execute a runtime string as code.

But executing normal runtime functions at compilation is generally reserved only for D and Jai. 

```dlang
enum Val = makeInt("65");

int makeInt(string num) {
    import std.conv;
    return to!int(num);
} 

static assert(Val == 65);
```

In order to better understand what is happening I should mention that `enum` is used as manifest const in this context. Well that probably wasn't helpful. Basically the value needs to be known at Compile Time to be copied wherever Val is used. The use of `static assert` is another compile time operation, the validation is done during compilation.

D has limitations on what can be done at compile time. This is namely device access. This I believe to be a benefit over Jai's complete system access, the build system cannot become a dependency on the binary (Unless of course your build tool does code generation before calling the compiler, so I'm probably just fooling myself).
HokuApps Automation Platform helps Improve Efficiency for the Field Service Industry

Tags: hokuapps, hokuappsusa
Published: 2019-11-19 07:16:21

HokuApps, a Rapid Application Development (RAD) platform, simplifies the business process to help improve efficiency for businesses in the field service industry. As more and more businesses turn to digital transformation to streamline their technology, it is now becoming imperative for the field service industry as well to walk down this path for ease of business.

According to a MarketsandMarkets report, the field service industry is going to see growth to USD 5.9 billion by 2024 from the current size of USD 2.4 billion in 2019.

To read more, visit REUTERS

Related Links: 

https://www.prnewswire.com/news-releases/hokuapps-redefines-enterprise-mobility-for-roofing-southwest-300658333.html

https://www.einnews.com/pr_news/492207304/hokuapps-automation-platform-helps-improve-efficiency-for-the-field-service-industry
OTP Verification using Hash
Tags: javascript, node, opensource, github
Published: 2019-11-19 06:36:54



Most of the time cache memory or database used to verify OTP. It's expensive operation. We can verify OTP without using database or cache memory. 

Today I will explain how to verify OTP without cache memory/ database operation. 

OTP requested user send request with mobile number. Then requested number, generated OTP(using otp-generator) is used to create hash value using sha256. Then hash value is used for OTP request response & preserve it on frontend. Generated OTP will send to requested users Mobile number. 

After getting OTP, user now verify OTP with 2nd request. On the 2nd request OTP, Mobile No & Hash will be sent to the server to verify. Using mobile no & OTP we will generate new hash. New hash value will be compared with requested hash value. If both hash value matched then OTP is verified.

Code: https://github.com/bilashcse/otp-verification
Is it good to use _.findWhere always?
Tags: javascript, underscore, findwhere
Published: 2019-11-19 06:36:11

We spent a lot of time optimizing our code to increase performance of UX of our app. But still, we thought it was not up to the mark as it was taking little more time to load UI whereas getting the response from API was in less than a second. We felt something was wrong.

We decided to check on a particular page what part of code is taking a lot of time using performance panel from chrome dev tool.

We were all astonished after looking at the result. It was `_.findWhere` which was taking a lot of time. We use underscore.js (a javascript library which provides helper functions) throughout our app. We used `_.findWhere` in some places where there is a better alternative which executes fast.

So is it bad to use `_.findWhere`?

The answer is `NO`.
There is nothing wrong in using `_.findWhere`, but you also need to know when to not use it.

Suppose you have an array of objects, let's say `example_array`, you want to find a particular object in that array only once. Then using `_.findWhere` is good.

But you have a scenario where you want to find different objects from `example_array` in different places of your controller, then using `_.findWhere` would be a bad idea. Why do you want to parse the same array by looping it again and again?

Instead, index the array and get the object immediately. You will get your required result in no time.

When we executed this change by replacing `_.findWhere` with indexed objects. Performance of our page was improved. The page was loading noticeably faster than before 🙂

So be sure when to use `_.findWhere` and when not to use.

I hope this post helps 🙂
Magic Spoon - Store and Share your recipes
Tags: blockchain, dapps, decentralised, blockstack
Published: 2019-11-19 06:17:29

Hi Guys,

I have tried my hands with something new. Just wanted share the first **dapp** that i have built on [Blockstack] (https://blockstack.org/) platform. 

The idea is to use the advantages offered by **decentralised** world to keep ur data safe and secure. *Magic Spoon* combines my passion to code and cooking. You can share your recipes with friends and collaborators.


Please have a look at [Magic Spoon](https://magicspoon.xyz/) ..


PS: I am working on some new features and any feedback on how to move it forward will be super helpful.

PPS: I am also the developer of [Copypaste](https://copypaste.today/) Have a look and please provide your feedback.. Copypaste is a simple utility tool to save whatever information you find useful on the Web.. Its also built on **Blockstack**
🗞️Firebase, Blocklike.js, KubeCon, Msft Ignite, Cloudformation, GCloud Contact Center AI
Tags: news, scratch, azure, aws
Published: 2019-12-20 15:02:51

---
title: 🗞️Firebase, Blocklike.js, KubeCon, Msft Ignite, Cloudformation, GCloud Contact Center AI
published: true
date: 2019-11-19 05:00:00 UTC
tags: news, scratch, azure, aws
canonical_url: https://ajonp.com/blog/aj-s-week-in-web-november-20-2019
series: ajweekinweb
---

{% youtube SiwStYsXGLM %}

# AJ's Week In Web Links

[https://www.blocklike.org/](https://www.blocklike.org/)

[https://scratch.mit.edu/](https://scratch.mit.edu/)

[https://chromium-review.googlesource.com/c/chromium/src/+/1541185](https://chromium-review.googlesource.com/c/chromium/src/+/1541185)

[https://events19.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2019/](https://events19.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2019/)

[https://youtu.be/WS0OcCUt4io](https://youtu.be/WS0OcCUt4io)

[https://www.microsoft.com/en-us/ignite](https://www.microsoft.com/en-us/ignite)

[https://docs.microsoft.com/en-us/learn/azure/?WT.mc\_id=msignitethetour2019-orlando-niner](https://docs.microsoft.com/en-us/learn/azure/?WT.mc_id=msignitethetour2019-orlando-niner)

[https://youtu.be/jnUiJi4hts4](https://youtu.be/jnUiJi4hts4)

[https://aws.amazon.com/blogs/aws/new-import-existing-resources-into-a-cloudformation-stack/](https://aws.amazon.com/blogs/aws/new-import-existing-resources-into-a-cloudformation-stack/)

[https://cloud.google.com/blog/products/ai-machine-learning/contact-center-ai-now-ga](https://cloud.google.com/blog/products/ai-machine-learning/contact-center-ai-now-ga)
7 tips to improve productivity in your maker's schedule

Tags: productivity
Published: 2019-11-19 04:23:17


Our team looked up and discussed all the gyaan available on the internet. Here are the top 7 tips:


>>Block time on the calendar to "build" - every slot should be at-least 120 minutes long.  If you are going into meetings every 60 min, you will not be able to "produce" much. It takes some time to get into flow and reach peak productivity. 

>>Do not check email or leave your slack application open during the "build" phase(s) of your day. 

>>Don't check your phone. If something is super important, people will call you. 

>>Always write down what you want to achieve during the day - it helps you to visualize what you want to do during your "build" slots of the day. 

>>Focus on the tasks that you can finish in your "build" phase. Do not work on open-ended tasks. Divide big tasks into small consumable chunks that you can finish in a few hours. Time box it if you want to be productive.

>>Take breaks. Learn how to "recharge" your batteries. Every person is different - a walk, a shower, time with loved ones, exercise, books, movies, or even some twitter time can help you relax between your "build" slots. 

>>Grade your performance at the end of the day. Write down what you did well. Think about what can be improved. 

Also posted here:
https://www.devtendo.com/post/brainstorm-productivity


Do you have any special hacks?
SHOWnTELL: Asynchronous Communication using video clips #productivity

Tags: productivity, testing, design
Published: 2019-11-19 04:14:03

Imagine the last 60 min of your screen recording always available. As a developer, I've always been frustrated with recording screen to post clips on bug reports, or highlight the gaps in product specs, or dealing with customer escalations without a visual way of understanding the symptoms.

If there is a utility that captures and keeps the last 60 min of screen activity in a buffer, wouldn't it to super cool to just clip and publish something you saw on the screen. What if the buffer is available in the form of a software tool that sits in your menu bar?

"Send last 2 min of screen recording" to JIRA Issue xxxyy. One-click and done. That's the goal of Devtendo.

I'm happy to announce that we are in beta now. 

Check out:
www.devtendo.com
Clean way to create number ranges in JavaScript
Tags: javascript
Published: 2019-11-19 04:07:03

I needed to create multiple dynamic year ranges as arrays. I found this solution could be interesting to you:

```javascript
const years = 60
let current = new Date().getFullYear()
Array(...Array(years)).map(() => current--)
// [2019,2018,2017, ... , 1961, 1960]
```

Of course you can use this to create any kind of numeric ranges, years is just an example. I hope it helps! :)
Mobile app (cars)
Tags: codepen
Published: 2019-11-19 03:52:36

<p>I do not own the design, I'm just recreating them into CSS and HTML for fun and/or education purposes only, Selected designs were randomly picked from dribbble.com and all credits goes to the original designer ✌.</p>

<p>Original design - <a href="https://dribbble.com/shots/7995712-BMW-Responsive-page/attachments/526403?mode=media">Martin Mroč</a></p>

{% codepen https://codepen.io/co0kie/pen/OJJdVbp %}