teleren/devto huggingface dataset:
Things I learned from Code reviews
Tags: beginners, codequality, career, javascript
Published: 2019-08-13 12:24:22

We all know the importance of code reviews and how it helps to maintain code quality and establishes coding standards in the team.

But I want to point out a different side of the coin and tell you how it helped me when I was starting in the Development field.

# Code Quality

As a junior dev in my first job, I did not know a lot about design patterns or javascript concepts. My mentors provided me with great knowledge of how I should use design patterns while writing any piece of code, no matter the language. They provided constructive feedback as to what sources I should refer to when solving different problems. 

# Knowledge Transfer

Code reviews helped me get domain-specific knowledge, helped me learn how to structure code according to requirements. They helped me understand the product and how different parts of the system work together to give user experience.

# Knowledge Dissemination

Code reviews helped me and my team to share the knowledge about every piece of code. So nobody was the sole point of contact in case of emergencies. Everybody was a code owner of all of the code. This helped me a lot in gaining confidence in my code and my management skills during emergencies.

# Art of Discussion

Code reviews help to see the code from the view of business requirements. It helps beginners especially understand concepts of domain-driven design. It encourages them to research and to defend their design in front of code reviewers. 

# Forward Help

One of the biggest problems I see in new devs is they do not have confidence in their code and sometimes are not able to express why they are using an approach over another. So, I and my friend have come up with an idea to help young devs. 

You can forward us your code and we would love to provide you with constructive feedback. We want forward the help we received when starting. Reach us out via email  [Akanksha Sharma](mailto:akanksha.s9560@gmail.com) and [Alican Karalar](mailto:alicankaralar@gmail.com) or twitter [@Akanksha_9560](https://twitter.com/Akanksha_9560) and [@alican_js](https://twitter.com/alican_js)
Distinguished Devs #0: Introduction
Tags: career, productivity, motivation, beginners
Published: 2019-08-13 12:19:06

This post marks the first in a series where I will interview outstanding developers who perform at their peak to lead large open source projects and make an impact at top companies.

The series will primarily focus on learning, productivity and motivation, but will also talk about tools and technical tips/tricks.

The point of the series is to coax out actionable advice that you can apply to take your dev game to the next level. 

The first instalment of series should be out soon, but if you have any particular questions that you'd like me to ask in future interviews, feel free to drop them in the comments. And if you're an elite developer leading a large open source project or at a senior level in a large company, do get in touch.

Don't forget to hit follow if you're interested in the rest of the series!
JAMstack Roundup for August 12th 2019
Tags: jamstack, javascript, node, netlify
Published: 2019-08-13 12:15:48

# Here are 5 great articles we're bring to you this week! #

1. [eCommerce and Data APIs](https://dev.to/cwcrawley/ecommerce-and-data-apis-34i7)

    Traditional, monolithic eCommerce platforms are a thing of the past ⏳. We are seeing a new wave of headless eCommerce environments where data and presentation are decoupled using robust API’s ⌚️.

2. [Serverless JAM - A Serverless Framework Tutorial](https://www.netlify.com/blog/2016/09/15/serverless-jam---a-serverless-framework-tutorial/)

    Finding a modern toolset to create truly fast 🏃‍♀️, secure 🔒,  and dynamic 🧠sites has been an endless search. With JAMstack and the Serverless approach, we have just that.

3. [The JAMstack Startup Landscape](https://medium.com/crv-insights/the-jamstack-startup-landscape-c06cc3cdb917)

    How websites and applications are developed is undergoing a massive architectural shift 🙂— from the tooling developers utilize to build them to the UI/UX end users interact with. It is revolutionary and turning the world of application development upside down 🙃.

4. [Super Glue Your Site: A Friendly Focus on User-Centric Web Design](http://www.dezzain.com/website-development/super-glue-your-site-a-friendly-focus-on-user-centric-web-design/)

    Websites that focus on user-centric 🙋‍♀️🙋‍♂️design have a better chance at finding and converting customers than sites which do not. Building on the JAMstack frees up development time that can be used to focus 🔎on architecting the best user-experience.

5. [The Front End: Using Gatsby.js and Node.js for Static Site Updates](https://www.toptal.com/front-end/gatsby-js-node-js-static-site-generator-pt-2)

    For some project requirements 📋, static page generation is not only sufficient, it’s also the most efficient in terms of speed and scalability. Using Gatsby, Node, and the [TakeShape CMS](https://www.takeshape.io/) 🤝you can create a wonderfully powerful JAMstack app.
A curated list of Async javascript flow
Tags: javascript
Published: 2019-08-13 11:31:31

I created a list of interesting links for those who would like to study about async flow in javascript.

[A curated list of Async javascript flow](https://github.com/baltazarparra/awesome-async)

Have a link?
[CONTRIBUTING](https://github.com/baltazarparra/awesome-async/blob/master/CONTRIBUTING.md)
What I look for in PR reviews
Tags: github, pr, codequality
Published: 2019-08-13 10:58:41

This has been (and will be again) written and explained in length by talented writers, but I thought having a very short list can help.
For example you can modify this list as you prefer and share it with junior devs you are about to review, so they can "get there" faster.

# The short list

The 4 aspects below are on top of my list for any review:
- small functions doing a single task
- no "copy-paste" code (DRY)
- good naming of functions and variables
- separation of concerns

# Some Details

The explanations below are more my own "gut feeling"; people can discuss or disagree endlessly about some of these points. Feel free to adapt/modify according to your own opinion.

## Good naming of variables
No need for a comment to understand what a variable contains - or at least easy to remember when you read its comment once.

## Good naming of functions
No comment should be needed next to a function call to understand what calling this function does.
Comments in the function's code can explain HOW it is done, or WHY it is done this way, of course!

## Separation of concerns
Code is where it should be, data and functions are private as much as possible, etc.
Note the "etc.": there is a lot to say/explain about how this can be done, and usually too much for a code review.
Also, this is often about system design, hence the code review might happen too late to change things.
Finally, it is the hardest concept to explain to junior developers.
For these reasons, this point is last in my short list. This is a bit like a "Trojan horse" bullet point, with an army of concepts hidden within.
What is cloud-native?
Tags: cloudnative, cloud
Published: 2019-08-13 10:49:09

---
title:  What is cloud-native?
published: true
description: Cloud-native is a common term you have been heard before. It refers to applications that are designed to run on the cloud.
tags:  cloud native, cloud
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e90kfv96smdwnn9i1f5i.jpg
---

Cloud-native is a common term you have been heard before. It refers to applications that are designed to run on the cloud. Not only run on the cloud but take advantage of all resources that cloud platform affords. These applications are constructed to uses IaaS or PaaS services natively. This means that components are constructed to deal with failures, scalability, availability. All pieces of these applications are fully automated on a pipeline.

IaaS (infrastructure as a service) is focused on compute nodes, network, and storage. In this model, enterprises can take advantage of the elasticity of the cloud. Compute nodes can be added or removed easily based on the incoming demand or load.

The adoption of PaaS (platform as a service) involves the identification of potential platform features of the enterprise and replacing it with equivalent platform services from the cloud provider. These services allow the enterprise to go away with all the operational efforts. Such as data store backup, availability, scalability, and redundancy. They can replace them with a managed service that provides all these features and focus the product business.

Read more about cloud-native definition with this good article “[What is cloud-native? The modern way to develop software](https://www.infoworld.com/article/3281046/what-is-cloud-native-the-modern-way-to-develop-software.html)”.

This post was originally released on my [Blog](https://educosta.dev/blog/what-is-cloud-native/). If you have any doubts or questions feel free to drop a comment here or reach me out on Twitter [@educostadev](http://twitter.com/educostadev).
The Delight of Browser DevTools
Tags: javascript, productivity
Published: 2019-08-13 10:22:35

I was on the [Moz.com](https://moz.com/) site, in their notifications panel (which you can't get to without a login and I'm not giving you mine!)

There I had over 800 CSV reports waiting which had been automatically generated back in June. They all needed to be archived. And the only way you can do that is click the "Messages" checkbox until a slab of 25 are selected, and then hit the "Archive" button.

The thought of doing that 32 times didn't appeal. Neither did scripting with Selenium. So I hit upon the idea of using the browser's devtools window, in this case Chrome's.

I right clicked the "Messages" checkbox, inspected the element, and worked out a simple CSS path. 
```javascript
var cb = document.querySelectorAll("th input[type=checkbox]")[0];
```
I did the same with the "Archive" button. 
```javascript
var ar = document.querySelectorAll('button[test-action="archive"]')[0];
```
I noticed that I had to click the checkbox twice, finally ending up with the following:
```javascript
cb.click();cb.click();ar.click()
```
With that in the console, it was a lot simpler and faster to simply up-arrow and press enter until all the messages had been archived.

Ah, the joys of browser devtools!
Web development and quality in underdeveloped countries.
Tags: webdev, we
Published: 2019-08-13 10:20:09

Web development is always a high demand service in all parts of the world. The whole world is getting online and thus businesses too and thus demand a high amount of web development services. But the highest demand for these services is in developing countries because these countries are in the initial stage of developing their industries and businesses and people are not that familiar with the online world. This generates high opportunities for web development businesses but as I have noticed these companies fail to provide quality.

Reasons behind low-quality web development services:

1.Low cost: Usually people and businesses in developing countries have less knowledge and have a tendency of getting the job done by the lowest cost providing company without thinking about the quality. This behaviour of customers forces all other companies to decrease cost and thus they are not able to provide google quality along with their web development services.

2.Lack of skilled employees: Since skilled employment is in search of high salary, thus getting such employees is harder for companies in developing companies due to the low-cost deployment of projects and skilled employees usually migrates to developed countries in search of high salary packages.

3.Greediness for high profit: Development process of high-quality websites requires a high amount of time and money. Thus usually companies save money and time by providing low-quality website to clients.

Low-Quality website characteristics:

1.Slow loading: Low-quality websites usually have slow loading time. In today's world, people are very impatient and don't like to wait for a website to load. 

2.Improper web architecture: Since the development is done without any proper planning so usually the web architecture is very improper that leads to very low-quality user experience.

3. Not perfectly responsive: Due to improper web architectural planning and bad design, these websites are not 100% responsive and thus leading to bad user experience in different screen resolutions.

4. Bad Search Engine compatibility: Search engines are very smart and can detect bad UX/UI easily. Moreover, website architecture is also a concern for them while ranking a website. So bad quality websites are usually not search engine compatible and leads to low ranking.

Conclusion:

Before asking a web development company about website designing, don't forget to ask them about their quality standards and how they control them. Moreover, while developing a website, don't keep the money as your primary concern because you might end up spending a lot in a long time with bad quality websites.

Moreover, there are some <a href="https://www.softnue.com/website-development-company-in-guwahati">web development companies</a> that provide quality as their primary feature, so give your valuable web development projects to these <a href="https://www.softnue.com/website-designing-company-in-guwahati">website designing companies.
Node.js Interview Questions
Tags: javascript, node, career
Published: 2019-08-13 10:18:11

![Node.js Interviews Questions](https://thepracticaldev.s3.amazonaws.com/i/3jcuipz3i1ovr1fdg7na.png)

###Q:- What Is Node.js?
####Node.js is an open-source, cross-platform JavaScript runtime environment for executing JavaScript code on server side.
Ryan Dahl came up with a brilliant idea, he thought it would be great to execute JavaScript outside the browser means on the Server, so he took Google's JavaScript V8 Engine and embedded with C++ Program and called it Node.

####Most Popular JavaScript Engine:
Google Chrome - V8 // Fastest JavaScript Engine
Mozilla FireFox - SpiderMonkey
Microsoft Edge - Chakra

###Q:- What are the key features of Node.js?
#####Let's look at some of the key features of Node.js

###Asynchronous and Event-Driven –
All APIs of Node.js library are asynchronous, that is, non-blocking I/O.

It means that API call doesn't wait for results and doesn't block other calls. After it finishes executing it will run a callback to notify about its completion.

###It's very fast –
Node.js uses the Google Chrome's V8 JavaScript Runtime Engine written in C++, which compiles the JavaScript code into machine code making it faster.

It is used for both client-side (Google Chrome) and server-side (Node.js) JavaScript applications.

JavaScript Engine: It is a program that converts JavaScript's code into lower-level or machine code.


###Single-Threaded but Highly Scalable –
Node.js is a single-threaded, which in the background (Under the hood Node.js uses many threads through libuv) uses multiple threads to execute asynchronous code.

All Node.js applications use "Single Threaded Event Loop Model" Architecture to handle multiple concurrent clients.

The Event Loop mechanism helps the server to respond in a non-blocking way, resulting in making the server highly scalable as opposed to traditional servers which create limited threads to handle requests.

###Node.js library uses JavaScript –
This is another important aspect of Node.js from the developer’s point of view. The majority of developers are already well-versed in JavaScript. Hence, development in Node.js becomes easier for a developer who knows JavaScript.

###NPM (Node Package Manager) –
NPM stands for Node Package Manager, it allows us to install various Packages for Node.js Application.

###No Buffering –
Node.js applications never buffer any data. They simply output the data in chunks.

###Community –
There is an active and vibrant community for the Node.js framework - The active community always keeps the framework updated with the latest trends in web development.


###Q:- What is Modules in Node.js?
Modules are a set of functionality or javascript libraries encapsulated into a single unit, which can be reused throughout the Node.js application.

Each Node.js module has its own context

###Type of Modules in Node.js?
#####Core (In-built) Modules
#####Local (User-defined) Modules
#####3rd Party Modules

Read the Complete Article [Node.js Interview Questions](https://www.fullstacktutorials.com/interviews/node-js-interview-questions-29.html)
User-Agent (browser) detection
Tags: javascript, browsers, webdev
Published: 2019-08-13 10:14:35

Here is a short snippet which I use for browser environment sniffing throught JavaScript, code is inspired by Vue.js sourcecode from 7/2019.
```javascript
var inBrowser = typeof window !== "undefined";
var browser_UA = inBrowser && window.navigator.userAgent.toLowerCase();
var browser_isIE = browser_UA && /msie|trident/.test(browser_UA);
var browser_isIE11 = browser_isIE && browser_UA.indexOf('11.0') > 0;
var browser_isEdge = browser_UA && browser_UA.indexOf('edge/') > 0;
var browser_isAndroid = browser_UA && browser_UA.indexOf('android') > 0;
var browser_isIOS = browser_UA && /iphone|ipad|ipod|ios/.test(browser_UA);
var browser_isChrome = browser_UA && /chrome\/\d+/.test(browser_UA) && !browser_isEdge;
var browser_isGoogleChrome = browser_isChrome && !!window.googleapis;
var browser_isChromeDerivate = browser_isChrome && !browser_isGoogleChrome;
var browser_isFirefox = browser_UA && !!browser_UA.indexOf("firefox/");

//ANOTHER:
var browser_FFversion = browser_isFirefox && browser_UA.match(/firefox\/(\d+)/)[1];
// FF version then stored in array[1]
```
Create Code Snippets for Visual Studio Code with ease
Tags: tooling, vscode, javascript, webdev
Published: 2019-08-13 09:58:39

---
title: Create Code Snippets for Visual Studio Code with ease
canonical_url: 'https://juristr.com/blog/2019/05/create-vscode-snippets'
published: true
description: In this video I'm going to show you how easily you can create and share code snippets with your team using VSCode
cover_image: 'https://juristr.com/blog/assets/imgs/code-snippets-app.png'
tags:
  - tooling
  - vscode
  - javascript
  - webdev
---


  When writing software, even when writing a blog post using Markdown, there are some pieces you have to write again and again. Either you're lazy or you don't remember the exact syntax, code snippets can really help here. Let's see how.

I'd say I'm a fast keyboard typer: around 100 wpm if I type really fast (verified on [Type Racer](https://play.typeracer.com/) :wink:). Still, I often don't remember the exact syntax or its tedious and long to type out. To help with that, I create Code Snippets.

Surprisingly not many developers I speak to, create their own. As a result I quickly created a video and I bet if you see how easy it is to create them, you'll be wondering why you didn't create 'em before.

Enjoy :smiley:

{% youtube l66s-Ju_QRk %}
VS Code extension that shows the initial value of a CSS property
Tags: vscode, css, beginners, showdev
Published: 2019-08-13 09:44:04

This post was originally published on [my blog](https://dzhavat.github.io/2019/08/13/vs-code-extension-that-shows-the-initial-value-of-a-css-property.html).

---

I few days ago I got an idea for a VS Code extension that shows the initial (default) value of a given CSS property on hover. This solves a real problem for me because most of the time I use the default value to “reset” a property.

What this means is if I have `background-color: tomato` on an element and want to set it to its initial value, I’d probably use `transparent` instead of `initial`, `unset` or something else. So instead of remembering the initial values of all CSS properties, I created myself an extension.

With that in mind I present you [CSS Initial Value](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-initial-value).

Here’s a small demo:

![](https://thepracticaldev.s3.amazonaws.com/i/h1tqbrmqv23kyw5lx38h.gif)

The extension is quite simple and there are probably cases where it display something weird but I’d like to share it with the world in order to get feedback. It’s also my first extension so I’m pretty sure there are things that can be improved. The code is [open-sourced](https://github.com/dzhavat/css-initial-value) if anyone wants to take a look or contribute.

If you work with CSS, please give it a try. I hope you find it useful.

{% github https://github.com/dzhavat/css-initial-value %}
How to display all rows from data frame using pandas
Tags: pandas, machinelearning, python3, experience
Published: 2019-08-13 09:20:01

---
title: How to display all rows from data frame using pandas
published: True
description: 
tags: #pandas #machinelearning #python3 #experience
---
Recently I started working on machine learning using python. While doing some operation on our input data using __pandas__ package, I came across this issue. So thought of sharing here. 

Below are simple steps to load a csv file and printing data frame using python pandas framework.

<code>
import pandas
df = pandas.read_csv("data.csv")
print(df)
</code>

This will print input data from data.csv file as below.

 ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kmuwawriqpm3h6qudg8u.png)


In the above image you can see total no.of rows are 29, but it displayed only FIVE rows. This is due to by default setting in the pandas library is FIVE rows only in my envrionment(some systems it will be 60 depending on the settings). Pandas property name to change this value is __display.max_rows__. We can change this value to display as many rows as you needed. If you want TEN rows to display, you can set display.max_rows property value to TEN as shown below.
<code>
pandas.set_option('display.max_rows', 10)
df = pandas.read_csv("data.csv")
print(df)
</code>

And the results you can see as below which is showing 10 rows.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kqwc5nwvbv1bs8eio8pp.png)


If we want to display all rows from data frame. We need to set this value as NONE or more than total rows in the data frame as below.

Code to set the property display.max_rows to None
<code>
pandas.set_option('display.max_rows', None)
df = pandas.read_csv("data.csv")
print(df)
</code>


Code to set the property display.max_rows to just more than total rows
<code>
df = pandas.read_csv("data.csv")
pandas.set_option('display.max_rows', df.shape[0]+1)
print(df)
</code>
Below is the screenshot displaying all the rows from the dataframe.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v24vhdv1a9hbauxaiepj.png)
Few Wise Words on How To Write a Better React Code
Tags: react, javascript, reactnative
Published: 2019-08-13 08:25:03

Coding has a lot to do with brain work. 

It prefers the lazy approach to stay away from any trouble and effort, and do not abuse the energy levels in case of serious danger.

This is our mind’s default setting, and just by learning how to resist it, we can dramatically improve not only our code quality but the quality of our work and life.

This is why writing a clean code doesn’t require much technical knowledge, but more of a discipline.

More here: https://blog.pagepro.co/2019/08/13/how-to-write-a-better-react-code/