teleren/devto huggingface dataset:
Learning Blockchain Development #day8 as a frontend developer
Tags: javascript, blockchain, nextjs, web3
Published: 2021-12-13 18:35:06

Hello Everyone, I am Kritik Sah and I am a frontend end developer.
I use HTML, CSS, Bootstrap, and JavaScript to build a frontend website.
Now I am learning react.js & tailwind CSS for frontend development. NEXT.js for full-stack development and Mongodb as our database.

Started My blockchain Developer journey, I am very confused about Where to start and how to progress. I did my research on this but I got myself more confused. That's why I am jumping right Into the dev space for help, support, and collaboration I will be greatful.

As I commited In my previous blog.

## We will try to build our first Dapp with next.js and tailwind CSS + Molarir or Infura in our next session

Today I will be writing about that.
I did it, I Did It.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lih8d6yarrmrnaindgt7.gif)

## lets see what I build.

![cryptolancer.in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75x2tz98biaydgcxa351.JPG)
Link: https://test.cryptolancer.in you can check it out. Its live🔴.

I used

- tailwind css
- next.js
- moralis web3
- Daisy Ui a tailwind Ui library.

About our project:
Cryptolancer.in a decentralized freelancer marketplace like fiverr. without a banking system and payment gateway, It will help newcomers to start their crypto journey.

Why I am building this project?
I know bitcoin and crypto from 2017, Just imagine if I had invested $10 ever single month till now how much money I was able to make. but now I got my first job so that's how I started investing in crypto, by the way, for those who don't know, I am Kritik sah, and I am 21 year old "learner".
I am still looking for platforms where I can earn in crypto without investing real money. and I cant find a good one. 
I found Ethlance, anytasks, ... and we all know the gas fee on eth network.and anytask is useless. 

"That's why I want to build a decentralized Freelance platform on L2 chains on Ethereum blockchain"
Already started an opensource project it is available on GitHub
https://github.com/ServicesStrategy/website

if you want to connect with me, and build this projects together, join our [discord server](https://discord.gg/2BBhj8VCpb). Thank you!.
Clevertech is Hiring | Multiple Roles available | 100% Remote
Tags: career, react, javascript
Published: 2021-12-13 18:21:11

The best people in tech just happen to be all over the world. Are you one of them? We do remote right. We are RemoteNative™

Clevertech has some exciting projects coming up! We are currently actively recruiting for the following positions:

1)   Sr Android Developer with OS Level experience x2
2)   Sr React Developer with pixel perfect type front end work experience as well as some exposure to GraphQL. 
3)   Sr Fullstack Developers (React with Node) who have worked on enterprise projects before. 
4)   Troubleshooting experts with some experience on react, .Net Core and SQL 

If you are interested in any of the opportunities feel free to visit the [careers page](https://www.clevertech.biz/careers?ct_src=dev&utm_source=dev&utm_medium=formum) for more info or reach out to me via email
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bom72eaufw8qrr2ctts3.png)
Styling Excercise
Tags: codepen
Published: 2021-12-13 18:13:07

<p>Forked from <a href="http://codepen.io/btholt/">Brian Holt</a>'s Pen <a href="http://codepen.io/btholt/pen/uHzfL/">Styling Excercise</a>.</p>

{% codepen https://codepen.io/mbowen/pen/meExdp %}
How to get into "the zone" while programming?
Tags: working, programming
Published: 2021-12-13 17:51:23

---
title: How to get into "the zone" while programming?
published: true
description: How do I get into “the zone” while programming and something you can try too...
tags: working, programming 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdvdax19uu3n9f37z0l2.jpg
---

The [Urban Dictionary](https://www.urbandictionary.com/define.php?term=In%20The%20Zone) definition of "the zone" is really on the spot IMHO.

> Being Completely unaware of what's going on around you as you are so extremely into what's going on right in front of your face; like anything more than 3 feet away just doesn't register in the brain.

### So, how do I get into "the zone" in order to work as much as possible?

It's really personal and here is what's working for me recently:

* A Spotify playlist of electronic music with few lyrics. [I like this one from John Resig, the creator of jQuery](https://open.spotify.com/playlist/5eOQqbVQKUzP0YPuuuwxKM?si=9477b9130f1c43d0), but there are many, just try some of them and find what you like
* Shut down notifications from your phone
* Use [SelfControl](https://selfcontrolapp.com/) or similar apps to block websites and social networks you use to procrastinate

#### Can you share some suggestion? What do you use to get into "the zone" while programming?
⭐️ CodeCast's Coding Advent: Day Thirteen ⭐️
Tags: webdev, beginners, html, css
Published: 2021-12-13 17:50:42


![Day 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ogyhoh5ynwf6dpkxg50.png)

## DAY 13

In continuing with GSAP animations, today we're featuring a Cast from our own designer, Adam Lin! He goes over creating a simple scroll animation using Greensock's GSAP's ScrollTrigger Plugin!

Check it out here: https://www.codecast.io/casts/odgQxxW3QxnM-how-to-start-your-1st-gsap-scroll-animation

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
🎄 CodeCast's Coding Advent: Day Twelve 🎄
Tags: webdev, beginners, tutorial, css
Published: 2021-12-13 17:50:37


![Day 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bs4dg7rgqdxmeutcold.png)

## DAY 12

As devs, we love seeing our creations come to life. And how much more "to life" can you get than animation? Today we're featuring Codpen's monthly challenge focusing on GSAP animation, in combination with Greensock.

Check it out here: https://codepen.io/challenges/2021/december/

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
️ CodeCast's Coding Advent: Day Eleven ️
Tags: webdev, beginners, programming, career
Published: 2021-12-13 17:50:29


![Day 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1scoimdr319ta1fck0d.png)

## DAY 11
⁠
For the 11th day, we're continuing the job theme and sharing some tips on avoiding mistakes as a junior developer. ⁠
⁠
Check out the blog by @amyeoulton: https://info.codecast.io/blog/how-to-avoid-common-mistakes-made-by-junior-developers

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
🤶🏻 CodeCast's Coding Advent: Day Ten 🤶🏻
Tags: webdev, beginners, productivity, career
Published: 2021-12-13 17:50:21


![Day 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz60mpjmbn7ua5knd0t4.png)

## DAY 10

We talk about portfolio building and interview-prep a lot here at CodeCast and are excited to share that [Hackerrank](hankerrank.com) has an entire interview prep kit [for free on their website](https://www.hackerrank.com/interview/preparation-kits/one-week-preparation-kit/one-week-day-one/challenges)!

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
Installing Dependencies 
Published: 2021-12-13 17:46:48

This blog post is to teach how to install the open-wc dependency on your machine. 

**Before installing open-wc:**
On a Mac, you will first need to make sure that you have the updated version of NodeJS installed (version 14.15.5)

**Install npm on the terminal**
`npm install -global npm`

**Install yarn after npm using the same npm install command on the terminal**
`npm install -global yarn`

**After installing npm and yarn, you are ready to install open-wc**

**Open the terminal again and enter**
`npm init @open-wc`

**After install you will be prompted with questions. Follow this guide:**
1. Scaffold a new project
2. Web Components
3. Yes for listing, testing, and demoing
4. No for TypeScript
5. type in "hello-world" for tag name in lowercase letters
6. Yes for disk and install with yarn

**After following all of these steps, the open-wc dependency will successfully be installed on your machine**
How to pick and point HTML data in ReactJS.
Tags: javascript, beginners, react, webdev
Published: 2021-12-13 17:46:38

Hi there, I believe you landed on this article because most probably you are stuck midway your React project, trying to refer and pick some HTML data to edit it somewhere later in project. That's what I was stuck on for a day. So let's get started.

So, to pick and point HTML data/tags in ReactJs, we use the `useRef` hook. Take a look at how to use it: 

```
import { useState } from "react";
import { useRef } from "react";
import React from "react";

// const refContainer = useRef(initialValue);
export default function App(){
const refConatiner= useRef();
return <h1 ref= {refContainer}>----Heading---</h1>
}


```

**Now here**, `refContainer.current` is equal to `<h1>` (the tag at which property ref is set)

I was stuck on using the same to pick and point `<input>` tag, to put value on it upon function call.

You can check the mini sandbox here:
{% codesandbox ik6k3 %}

Quick Recap: 

- `useRef` hook is used to refer and pick HTML data in react.
- The returned value persist for full lifetime of the component and can be used anywhere in the component.

**Edit**: I was in the wrong conception that this is one of those hooks which would be used frequently working on React. After a dev pointed it out in the comments, and upon further reading, the point is that `useRef` hook is used only in selected cases when we need to alter the DOM directly. 
Good to know stuff, for those selected times :)

Alright, that's about it folks!
I hope you got what you were looking for.
Kindly leave a comment below and let me know what's on your mind about the content. :)
Thank you!
What is ISO/IEC 27001:2013 and why is it relevant?
Tags: codingstandard, codequality, security, database
Published: 2021-12-13 17:34:53


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb84dqnd1v07tvatug9x.png)

Code analysis is essential in every organization focused on software development. However, when sensitive information is at play, organizations might want to take an extra step to ensure that those data are well protected. That’s where **ISO/IEC 27001:2013 certification** has a significant role. More than guaranteeing that developers write better code, it’s a way to show customers that the organization takes its data security seriously.

## **What is ISO certification?**
Maintaining consistent quality standards across different industries and nations might be challenging in today’s global marketplace. In this context, international standards help to keep a level playing field and ensure consistency.

The International Organization for Standardization (ISO) is an independent, non-governmental international organization developing and producing worldwide standards. ISO standards cover various activities, from making products and managing processes to service delivery and supplying materials.

Although ISO develops the standards themselves, a third party is responsible for annual audits and corresponding certification. These certifications — existing in many industries, from information technology to food safety — are a way for organizations to show they comply with all the standardization and quality assurance requirements.

Does your organization also have to deal with sensitive data?
One of the most prevalent ISO standards in information technology is the **ISO/IEC 27001:2013**. **[Read the full article here to find out exactly what it entails.](https://blog.codacy.com/iso-iec-27001-2013/?utm_source=devto&utm_medium=social&utm_campaign=iso)**
Turning Ideas Into Startups
Published: 2021-12-13 17:19:11

Its no joke that a lot of tech startups are emerging so fast and they’re generating billions in revenue. Tech startups are loved by investors because of how easy it is to scale them up. A whole multi-million dollar company can begin with just a single app. I’ve always been curious on how to start one. I’ll be sharing my findings briefly.

**1. Start with a problem**

A lot of mistakes that people make is to start with the mindset of making money. There are countless ways to make millions without starting a company. The whole purpose of a startup is to solve a problem. When you look at it from this angle, it defines the whole vision of the company. A lifetime vision. The vision Elon Musk has for humanity is what’s driving him to create groundbreaking tech. Its all to help mankind.

**2. Discuss the problem**

Its very easy for us to go about telling friends and family about your idea. That’s not necessarily the right way to go about it. Its very vital to meet people and see if they’ve experienced the same problem, how it has affected them and if they’ll be willing to pay for a solution. That’s how you can validate your idea and see if its worth your time and effort.

**3. Build an MVP**

You must have heard this a lot of times. This is very important. An MVP is the base version of your app. It just carries out the necessary functionalities. This should not take long to built and should be put in front of potential users. That is done to see if the app solves their problem and also to get feedback from them. Remember its all about solving their problem.

**4. Iterate**

This also very crucial. Big companies push out features daily to get feedback. Deploying features constantly is essential for the success of a company. It might not be possible for a small startup to deploy everyday but make sure its consistent. Its better to test out new features by presenting it to users for feedback than working on something for months that no one ends up using.

**5. Failure**

The fear of failing might stop you from trying out that thing you want to do. Its better you do it and fail than not do it at all. That Idea might be the next big thing.

If you’re really interested in creating a startup, checkout Y combinator’s startup school. They’ve have a ton of valuable information. And its all free.
📊 AnyChart JS 8.11.0 Is Out with Awesome New Data Visualization Features
Tags: javascript, webdev, datascience, product
Published: 2021-12-13 17:04:37

AnyChart 8.11.0 has been [released](https://www.anychart.com/blog/2021/12/07/js-charts-8-11-0-released/) with awesome new features and improvements making this [JavaScript charting library](https://www.anychart.com) even more flexible and mature.

The three most important additions are:
* Custom axis placement
* Baseline milestones in Gantt charts
* Outside labels in waterfall charts

Along with these new charting features, other significant improvements and bug fixes are also included in this major update. Learn more about AnyChart 8.11.0 on the company's [blog](https://www.anychart.com/blog/2021/12/07/js-charts-8-11-0-released/). You can also leave your suggestions there on new features that you would like to see added in future versions.

In case you missed it, the previous major update AnyChart 8.10.0 brought two brand new chart types - Circle Packing Chart and Calendar Chart - [and more](https://www.anychart.com/blog/2021/05/24/anychart-js-8-10-0/).
Get Swole: The React/Rails Workout App
Tags: react, rails, javascript, tutorial
Published: 2021-12-13 17:04:00

In this blog I aim to give a detailed overview of what is happening behind the scenes in this application by first giving a walkthrough of the apps functionality and then looking at the code of both the Rails backend and React front end.

Demo the app here --> [GET SWOLE](https://getting-swole-app.herokuapp.com/)

The full code on Git Hub can be found [here](https://github.com/wgotterer/get-swole)

The front end is in the "client" folder


### General Overview
{% youtube GZfXz4jRI9s %}

### Backend Rails Overview
{% youtube 0sCEhqJDV6k %}


### Login Overview
{% youtube iLHbXIpuQxM %}

### Dashboard Overview
{% youtube nTcqWqbtgUw %}


### Online Classes Overview
{% youtube oM9EAkGPphA %}



### Private Classes Overview
{% youtube 73q5fp9DezY %}


### Trainer Overview
{% youtube ap_fhAKRY54 %}
Creative Tips For Web Designers

Tags: web3, html, testing, android
Published: 2021-12-13 16:49:33

## Tips For Web Designers

While many people are intimidated by the thought of creating their own website, it's not that difficult with the proper knowledge. Web design is no different than anything else out there as the job has been simplified through software that makes it as simple as it can be. Read this article for advice on [web design](https://www.webplusera.com/).

Make sure your text and background has the proper contrast. There's evidence showing that white text on a black background is easiest for most people to read, but other colors are fine so long as they're readable. Also keep in mind that people with visual impairments may not be able to read your site if the contrast is poor. Check to see if your site complies with various contrast standards using the tool at http://snook.ca/technical/colour_contrast/colour.html .




When you're thinking about how to design a website, you need to be sure to think about the navigation. You want your navigation to be easily accessible and easy to use. Put the navigation bar on every page in a noticeable place. Also, make sure that it flows well with the rest of your page and doesn't distract visitors.

Avoid using so-called "mystery meat navigation". This involves using unlabeled images or other elements for the site's navigation. In many cases, the visitor has to mouse over the buttons to even see what they do. Navigation is best kept simple. Use text links across the top or along the left side of the page.

As you already know, web design is easy to master with the right knowledge combined with all the programs and tools out there. By following their directions, you can succeed in building your own website. Take the ideas learned from above to help you find a good web design program that works well for you. Hire Best [Website Designing Company in South Delhi](https://www.webplusera.com/services/website-designing-company-in-south-delhi/)
Build and Deploy a Responsive Portfolio Using React and Styled Components 💅
Tags: react, webdev, javascript, css
Published: 2021-12-13 16:43:46

In this course I will be showing you how I revamped my portfolio site using React and styled Components 💅.

Live Portfolio: https://chaoocharles.dev/

## Video Tutorial 👇
{% youtube dK4f2Piqilo %}
Vim 2022: Format your code in real-time !!
Tags: vim, productivity, linux, editor
Published: 2021-12-13 16:17:16

---
title: Vim 2022: Format your code in real-time !!
published: true
description: 
tags: vim, productivity, linux, editor
//cover_image: https://direct_url_to_image.jpg
---

There are plenty of code-formatting plugins, like [auto-format](https://github.com/vim-autoformat/vim-autoformat) and [neoformat](https://github.com/sbdchd/neoformat), for vim. But all of them require running a certain command or using `:w` to trigger formating.

Is it possible to see the immediate formatted code in the real-time ? If so, life could be much easier.

Therefore, I created a little plugin [vim-rt-format](https://github.com/skywind3000/vim-rt-format), which can format the current line immediately in INSERT mode as soon as you press ENTER:

![picture](https://github.com/skywind3000/images/raw/master/p/pep/rtformat_4.gif)

When you are focusing on editing, everything is done without paying extra attention. No need to stop your work to run an extra command like `gq` or `:Neoformat`.

Ready to try this out ? Firstly, `+python3` feature must be enabled in your vim, check it by:

```VimL
:echo has('python3')
```

It will return `1` if python is supported in your current vim version. If not, install a new vim with `+python3` feature, for example in ubuntu/debian:

```bash
sudo apt-get install vim-nox
```

Secondly, a python module named `autopep8` is required:

```bash
sudo pip install autopep8
```

Then add a few code in your `.vimrc`:

```VimL
" Install the plugin with vim-plug:
Plug 'skywind3000/vim-rt-format'

" By default, it will be triggered by `ENTER` in insert mode.
" set this to 1 to use `CTRL+ENTER` instead, and keep the  
" default `ENTER` behavior unchanged.
let g:rtf_ctrl_enter = 0

" Enable formatting when leaving insert mode
let g:rtf_on_insert_leave = 1
```

And everything is ready, restart your vim, edit some files then you will have a nice day.

BTW: Currently, it supports `python`, `lua` and `javascript`.
1 line of code: How to PascalCase a string
Tags: javascript, webdev, productivity, codequality
Published: 2021-12-13 16:08:33

```javascript
const toPascalCase = str => str.replace(/[\s\._-]+\w/g, (m) => m[m.length - 1].toUpperCase()).replace(str.charAt(0), str.charAt(0).toUpperCase());
```
Returns a new string in pascal case. 
Uses `space`, `dot`, `underscore` and `dash` as delimiter.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---