teleren/devto huggingface dataset:
OSD-600 Lab 07
Published: 2021-11-03 21:00:13

## Introduction
Hello everyone, today, I'd like to talk a bit about my experience using Eslint and Prettier in Visual studio code

## Source code formatter
As I'm using Javascript for [my project](https://github.com/tuanthanh2067/cv-ssg), I have [Prettier](https://prettier.io/) as the default code formatter.

Prettier is a plug-in or extension in Visual studio code. What Prettier will do is that it will **FORMAT** your code in a prefect manner which means people who haven't never looked at your code can easily understand the flow and what your code is doing. The reason why I chose Prettier mainly because it gives my the ability of auto-formatting the code after pressing save, which indeed saves me a lot of time and energy.

To be honest, after installing and running the prettier script, my code didn't change much because I already have it installed in my visual studio. It checks every time I type something. 

## Linter

For linter, the most common one among javascript developers is [Eslint](https://eslint.org/). Eslint will help developers catch silly mistakes that they wouldn't thought of, they just forgot or bad coding patterns leading to bugs in the future.

However, for eslint, after running the script, I got a bunch of errors. A few errors were about `process` as it's a global variable and one was about variable that I declared but never used. The `process` error could be fixed by adding a line of `global process`. For the variable that never used, I had to look at the code again to see if that's actually redundant or something that I'm planning to do down the road.


Scripts that I added to my `package.json`

```
    "eslint": "eslint --config .eslintrc.js",
    "eslint-fix": "eslint --config .eslintrc.js --fix",
    "lint": "npm run eslint",
    "prettier": "prettier --write \"./**/*.{md,jsx,json,html,css,js,yml}\"",
    "prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml}\""
```

## Workspace configurations
Apart from that, I also have a `./vscode` which contains workspace settings. In there, I have 2 files `extensions.json` which has all necessary plug-ins that I need other contributors have in their visual studio code and `settings.json` which will override other contributors' settings so that we will be on the page in terms of coding style.

## Github hook
I used husky as my github hook as it basically runs a command line before commit to github. Specifically, when I type `git commit ...` and hit enter, the command `npm run pre-commit` will be run before that to check the format and everything is in the right coding style and codes that break eslint rules.

Recent commit
[6a068c](https://github.com/tuanthanh2067/cv-ssg/commit/6a068cf0cce994bd61668d82d0c415ae2807559e)
Leveling Up Weekly: Ruby on Rails newsletter for junior to mid-level developers 
Tags: ruby, rails, webdev, beginners
Published: 2021-11-03 20:58:06

https://www.getrevue.co/profile/levelingupweekly

I am happy to announce the inception of my first newsletter - ”Leveling Up Weekly: Ruby on Rails”! I started this newsletter to fill a void I noticed as I was beginning my career as a software developer  -  a lack of adequate and understandable resources for early-stage developers. In my earlier years, I was constantly looking to level up my skills and sought out newsletters, people to follow on Twitter, blogs, etc. but often had to stop midway through an article when I could not keep up with the technical jargon or overly difficult code examples.

I am hoping to foster a niche community in which the subscribers can count on receiving weekly newsletter full of hand-selected articles, tutorials, Tweets, tips, tricks, job openings (coming soon), books and more.

I welcome all feedback (levelingupweekly@gmail.com) and plan on constantly iterating on the format and selection of content to make it the most helpful newsletter for emerging Ruby on Rails developers. Please don’t hesitate to reach out!

Curious? Sign up here before tomorrow's article 👉 https://www.getrevue.co/profile/levelingupweekly
Rust: Must-see from this October
Tags: webdev, rust, programming, tutorial
Published: 2021-11-03 20:29:51

Take your knowledge in Rust to a whole new level with these educational [**meetup videos**](https://blog.meetupfeed.io/rust-october-2021/) from October 2021. Offering tips and tricks on an advanced level!

[**Type-Driven API Design| Will Crichton**](https://meetupfeed.io/talk/type-driven-api-design-in-rust-by-will-crichton)
Get an overview of how you can design APIs easily. Are you ready to design APIs that require a fundamentally different mindset — for example, designing without classes or inheritance? Check this out!

[**Whoops! I Rewrote it in Rust | Brian Martin**](https://meetupfeed.io/talk/whoops-i-rewrote-it-in-rust-by-brian-martin)
Discover the path of Brian Martin from Twitter who just initially wanted to replace the server’s networking and event loop with a correspondingly fast Rust implementation.

[**Streaming video analysis using Pravega | Tom Kaitchuck**](https://meetupfeed.io/talk/streaming-video-analysis-in-rust-using-pravega-by-tom-kaitchuck)
Curious about how Rust holds up when it needs to develop real world apps? Find out from this case study that explains how you can build a scalable real time video analysis pipeline using Pravega.

[**Why the Future of the Cloud will be Built on Rust | Oliver Gould**](https://meetupfeed.io/talk/why-the-future-of-the-cloud-will-be-built-on-rust)
Let Oliver Gould (creator of Linkerd) convinces you with an argument about the future of cloud software and the cloud native ecosystem in this talk.
React & React Native: Mainstream In October, 2021
Tags: react, webdev, programming, reactnative
Published: 2021-11-03 20:26:02

React-based dev and meetup videos were in the mainstream this October. Here’s our personal [**selection of favourites**](https://blog.meetupfeed.io/react-and-react-native-october-2021/), check it out!

[**Building Considerate React Component APIs with TypeScript | Daria Caraway**](https://meetupfeed.io/talk/daria-caraway-building-considerate-react-component-ap-is-with-type-script-j-sworld-2021)
How can we use TypeScript in order to improve the readability of our component interfaces for our fellow team members? Find out from this video by Daria Caraway.many more!

[**Code Splitting in React Native | Paweł Trysła**](https://meetupfeed.io/talk/react-native-eu-2021-pawel-trysla-code-splitting-in-react-native)
We could say that it’s difficult to split functionality in native mobile applications. Paweł Trysła uncovers the secrets of code splitting using the power of Webpack.

[**Creating a VoIP app in React Native – the beginner’s guide | Wojciech Kwiatek**](https://meetupfeed.io/talk/react-native-eu-2021-wojciech-kwiatek-creating-a-vo-ip-app-in-react-native-the-beginners-guide)
Dig into the foundations of how to make a mobile be able to actually make a call. A walkthrough of what VoIP actually is, theories of WebRTC connections, ending with the CallKit of iOS vs Android way of handling calls.

[**Sub-second integration tests for your RN app & Bluetooth device | Lars Thorup**](https://meetupfeed.io/talk/react-native-eu-2021-lars-thorup-sub-second-integration-tests-for-your-rn-app-bluetooth-device)
Wondering how you can create any applications for Bluetooth devices? Learn how to code loudspeakers, toothbrushes, dishwashers and many more by Lars Thorup who is introducing you to the technique of mock recording.

[**Building Accessibility Hooks for React Native & Web | Sanket Sahu**](https://meetupfeed.io/talk/react-native-eu-2021-sanket-sahu-building-accessibility-hooks-for-react-native-web)
You can obtain how Sanket Sahu and his team built a set of hooks that make it easy to build accessible React Native and Web components that complies with the WAI-ARIA standards.

[**“Show Me The Money” – Securely Accepting Payments| Thor Schaeffct Native & Web | Thor Schaeff**](https://meetupfeed.io/talk/rneu-2021-thor-schaeff-show-me-the-money-securely-accepting-payments-in-react-native-apps)
Want to integrate payments with React Native? Learn how to provide a great developer experience that’s secure and optimized for mobile purchases from Thor Schaeff through Stripe’s React Native Library.

[**How to Build a Netflix Clone | Jeremy Hanna**](https://meetupfeed.io/talk/how-to-build-a-netflix-clone-with-graph-ql-react-and-data-stax-astra)
Eager to learn how you can create a Netflix homepage yourself? Jeremy digs deep into successfully building it in a simple React.js running on Astra DB. This way, you can leverage a GraphQL API with paging and infinite scrolling.
Special library for Python and API to receive SMS 
Tags: beginners, programming, python, github
Published: 2021-11-03 20:17:55


API for wholesale SMS activation allows developers write special software to receive SMS messages on virtual numbers. In this article you will learn about lightweight library that works as a connector with bypass OTP (One-Time Password) website and how to receive SMS using API of [SMS-MAN](https://sms-man.com/) and use API for wholesale SMS activation

**Usage examples:**	
```
from smsman.smsman import smsman

api_key = ""

client = smsman(api_key)

#  Get current balance
print(client.get_balance())

#  Get information about all services
print(client.get_all_services())

#  Get information about all countries
print(client.get_all_countries())

#  Get the number of numbers for the selected country and service
print(client.get_limits(country_id=1, application_id=1))

#  Buy nеw number
request_id, phone_number = client.request_phone_number(country_id=1,
                                                       application_id=1)

#  Recеivе a SMS tо the numbеr
sms_code = client.get_sms(request_id)

```
**What is VoIP numbers (virtual phone number)**

Virtual phone numbers (VoIP numbers) is a service that allows you to receive SMS with free forwarding to your email adress or specified cell phone number, no matter where in the world it is located. Such number works without SIM-card, with it you can receive SMS online

VoIP number allows you to receive text messagers to register in social networks and on any sites, connect and analyze ads statistics and history of sms-posting, not to use a real cell number unnecessarily. 

**Virtual phone numbers for Business**

Virtual numbers are now seen everywhere, and many advertising and marketing organizations are selected [virtual numbers for business](https://sms-man.com/blog/virtual-numbers-for-business/) to promote business. What is a virtual operator? How do I use a virtual number software to receive SMS?

With [API for bulk receiving SMS messages](https://sms-man.com/blog/how-to-use-our-api-introduction/) you can receive text online on phone numbers and create a lot of account in social networks, messengers, popular applications and more. You can use it to promote you Telegram group or Facebook business page. With fake accounts you can advertise and not be afraid to get banned of real profile or you can to juke subscribers for own business page
Best JavaScript Meetups From October, 2021
Tags: javascript, webdev, programming, tutorial
Published: 2021-11-03 20:17:13

This October was overloaded with the highest quality [**JavaScript meetup videos**](https://blog.meetupfeed.io/javascript-october-2021/). To make things easier for you folks, we’ve once again decided to share our favorites, handpicked just for you.

[**The Modern DXP – How JAMstack will change the world | Tim Benniks**](https://meetupfeed.io/talk/tim-benniks-the-modern-dxp-jsworld-conference-2021)
Jump into what DXP (Digital Experience Platform) is and how JAMstack is changing the game for developers. From Tim Benniks, who worked with big names like Nike, Chanel, Google, EA and many many more!

[**Anonymous Video Calling App Using Machine Learning | Ben Butterworth**](https://meetupfeed.io/talk/js-monthly-17-ben-butterworth-anonymous-video-calling-app-using-machine-learning)
Find out how anonymous video calls allow you to communicate with someone using your facial expression and animation, without revealing your real identity, physical background or other sensitive information by Ben Butterworth.

[**Heavily Connected Data Applications | Daniel Olavio Ferreira**](https://meetupfeed.io/talk/js-monthly-17-daniel-olavio-ferreira-heavily-connected-data-applications)
Dive into how complex it can get when having to deal with SQL table relations meanwhile finding out more about some mainstream ORMs (e.g. TypeORN & Sequelize). In addition, by using a simple yet powerful schema syntax, Daniel compares them to Prisma.

[**Double Up Your Component & Integration Tests With Supertest & Nock | Lewis Prescott**](https://meetupfeed.io/talk/js-monthly-17-lewis-prescott-double-up-your-component-integration-tests-with-supertest-nock)
Craving to understand how you can build component and integration tests with only one set of scripts? With the help of mocking and the tool Nock! Lewis Prescott shows you the way.

[**Simplifying Web Accessibility | Meg Shulmister**](https://meetupfeed.io/talk/simplifying-web-accessibility-monthly-js)
Meg Shulmister tells you all the details about how you can easily incorporate accessibility-focused design into your work as a JavaScript developer.
How to scale an image inside of a div
Tags: css, scaling
Published: 2021-11-03 20:04:07

Here is a basic react app, using styled components. 
I have set up an example of a div with an image inside of it.

If you open the codesandbox and try using the slider to resize the browser, you can see two things.

1. The image remains the same size.
2. The image “leaks” out of the div that it is a child of.

```
import styled from "styled-components";
import Laptop from "./laptop.png";

const Container = styled.div`
  border: 1px solid red;
`;

const Img = styled.img.attrs({
  src: `${Laptop}`
})``;

export default function App() {
  return (
    <Container>
      <Img />
    </Container>
  );
}
```
codesandbox: https://codesandbox.io/s/scaling-images-1-kc05z

There are two things we need to add to the image if we want it to scale with its parent.

```
height: auto
max-width: 100%;
```

`height: auto`
This allows the image to automatically adjust its height to allow the content to be displayed correctly.

`max-width: 100%`
This sets the width of the image so that the image will scale down if it has to, but never scale up to be larger than its original size.

**NOTE**: Using width: 100% instead will allow the image to be scaled up larger than its original size, in order to fit the full width of the div it is inside of. Most cases, it is better to use max-width.

Below is the same code with the solution. You can see from the demo that the image has resized correctly.

```
import styled from "styled-components";
import Laptop from "./laptop.png";

const Container = styled.div`
  border: 1px solid red;
`;

const Img = styled.img.attrs({
  src: `${Laptop}`
})`
  height: auto;
  max-width: 100%;
`;

export default function App() {
  return (
    <Container>
      <Img />
    </Container>
  );
}
```
codesandbox: https://codesandbox.io/s/scaling-images-2-rxyx2
The Feynman Technique
Tags: beginners, tutorial, productivity, opensource
Published: 2021-11-03 19:57:39


Hello here and this is me, Yermakhan. You can simply call me Moha, I'm student who felt in love with digital world and can't resist to explore it. You can consider this post as an intro to all other posts.

> If you can't explain something to a first year student, then you haven't really understood.
~ Richard P. Feynman.

I guess you're already familiar with the famous lectures and quotes by [Richard Feynman](https://en.wikipedia.org/wiki/Richard_Feynman), so as you might have guessed, I'm going to use his [technique](https://en.wikipedia.org/wiki/Feynman_Technique). And it's pretty simple! Firstly, you choose the subject, you're studying and then try to explain it in pretty simple words to another person. If this person reacts with the questions, try to answer and then you can find the gaps you should relearn.

The next topics are all for drafts and abstracts by myself for you, my reader. I'm gonna study computer science and software engineering topics at all. So I hope you will get something helpful and do not forget to react! goodbye!
bootstrap 4 navbar
Tags: codepen
Published: 2021-11-03 19:37:16

<p>With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl. ... sm (stacks the navbar vertically on extra large, large, medium or small screens).</p>

{% codepen https://codepen.io/piyushpd/pen/gOYvZPG %}
#100DaysOfCode Challenge
Tags: 100daysofcode, webdev, programming
Published: 2021-11-03 16:15:29

Hi, my name is Daniel Lira and I'm commiting myself to do the 100DaysOfCode challenge.

I'm currently studying Software Engineering and I already work as a developer.

The thing is that it doesn't matter how much I have learned by now, I don't feel very confident about my skills. So, I think that this challenge might make convince myself about how good (or bad) developer I am.

### What will I learn?

I tried to split up all the main topics that we apply in my job, and they look like this:

* Dependency injection (Ninject)
* Linq
* Entity Framework
* Interfaces
* Automapper
* MVC
* Repository pattern
* Oracle
* Angular
* Tailwind

Maybe it sounds like a lot for just 100 days, but I already know a little about those topics, and besides that, I'll advance to the next topic once I feel more confident about it.

### Conclusion

Well, this is my first post, and as you may tell, English is not my native language, so I apologize in advance for any mistake I could make.

I would be glad if you could give me any suggestions on how to approach this.

Wish me luck. :)
Deno script for adding Tailwind CSS to Next.js project in 4 seconds
Tags: nextjs, deno, webdev, javascript
Published: 2021-11-03 19:01:51

In your project folder run:
```
deno run --allow-write --allow-read --allow-run https://denos.cc/add-tailwind-to-next.ts
```

By default it uses pnpm. If you don't have pnpm, it will use npm. You can force it by adding --npm/--yarn after the module name.
Deploy a Smart Contract with Ethers.js
Tags: ethereum, ethersjs, smartcontract, web3
Published: 2021-11-03 18:56:24

---
title: Deploy a Smart Contract with Ethers.js
published: true
description: 
tags: ethereum, ethersjs, smartcontract, web3
---

In order to create a new contract we need to send a transaction to the Ethereum blockchain with a payload that contains the compiled contract code. The transaction recipient must be set to null.

The following JS code implements such a transaction using Ethers.js

```javascript
const ethers = require('ethers');
const fs = require('fs');
(async () => {
  // Deploy the contract to Ethereum test network - Ropsten
  const provider = ethers.providers.getDefaultProvider('ropsten')

  // Use your wallet's private key to deploy the contract
  const privateKey = 'YOUT_PRIVATE_KEY'
  const wallet = new ethers.Wallet(privateKey, provider)

  // Read the contract artifact, which was generated by Remix
  const metadata = JSON.parse(fs.readFileSync('contract.json').toString())

  // Set gas limit and gas price, using the default Ropsten provider
  const price = ethers.utils.formatUnits(await provider.getGasPrice(), 'gwei')
  const options = {gasLimit: 100000, gasPrice: ethers.utils.parseUnits(price, 'gwei')}

  // Deploy the contract
  const factory = new ethers.ContractFactory(metadata.abi, metadata.data.bytecode.object, wallet)
  const contract = await factory.deploy(options)
  await contract.deployed()
  console.log(`Deployment successful! Contract Address: ${contract.address}`)
})()
```

If the transaction is successful, you’ll get the following message –

```
Deployment successful! Contract Address: YOUR_CONTRACT_ADDRESS
```

Congrats for deploying your first contract! 🚀🚀🚀
What is prototype chain in Javascript?
Tags: javascript, programming, computerscience, react
Published: 2021-11-03 18:39:08

In the previous post I have explained about prototype and how it is linked to another.

The prototype object has prototype of its own and so on until an object is reached with null as its prototype. So, this linking with one another is called as **prototype** **chain**.Null has no prototype and it acts as a final link in this prototype chain.

Lets take the previous post example:

___let___ __fruits__=["Apple","Orange"];

In the earlier post we have seen that how fruits array is linked to Array Prototype by using the _____proto_____ getter function in the console. So, in the similar way Array Prototype also has a prototype called Object prototype and if we try to view the prototype object by using _____proto_____ to Object prototype then it will reached the final link as null prototype.
![Console view of Prototype chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4mkx08kwibsa19fyzos.jpg)
Git and Github in 2 weeks 
Tags: github, git, beginners, tutorial
Published: 2021-11-03 18:32:43

     At least 2 weeks ago, I've started to study the git and github's concepts and I could realize how important it is. First 
I've studied the initial steps in bash and how register the user, after that, I've learnt some basic commands to get familiar with this new world. Almost every day, I've practiced the commands in the bash and and studied the theoretical like the file's stages on bash and learning new commands. This little text, it's helping to fix what I've learnt and show you how could be simple study new subjects.