teleren/devto huggingface dataset:
Teaching web applications to read QR codes and barcodes
Tags: javascript, webdev, programming, tutorial
Published: 2022-05-23 10:10:25

Barcodes and QR codes are almost everywhere. We buy goods, pay bills, and even make purchases with them. Therefore, our customers require barcode scanner software solutions. On one of our projects in 2020, we were faced with the need to add barcode scanning to the Loreal Academy web application for product accounting. As a result, we checked all the available solutions that offer the ability to read barcodes online from a web application, and we will talk about their pros and cons [in the article.](https://evrone.com/barcode-detection)
Top 15 Sites to Find the Best NodeJS Developers
Tags: node, hirenodejsdevelopers, hiringnodejsdevelopers
Published: 2022-05-23 10:00:23

NodeJS has boomed a lot in recent times as it exhibits great functionalities and features that help developers to ease on their development efforts. This article focuses on bringing Best 15 sites where you can easily find the adept Node.JS Developers. 

This article will help you come to the one stop solution for your search on Adept NodeJS Developers. So Read the full article for better understanding on the sites providing the best pool of NodeJS Developers to hire. Discover the Full Article on [Top 15 Sites to Hire Node.JS Developers in 2022](https://www.hirenodejsdevelopers.com/2022/01/nodejs.html).

NodeJS has established its mark in the development world and now therefore NodeJS Developers are in high demand, also this has lead to the scarcity of Proficient NodeJS Developers. But your search for NodeJS Developers ends here, as this article will not only list the Websites but will also describe about why the particular site is beneficial for hiring Nodejs Developers. 

Drive through the article, choose your site that best matches your expectations and hire the adept NodeJS Developer for your purpose. To Know more, read the full article.
Introducing remotify.place
Tags: sideprojects, javascript, programming, opensource
Published: 2022-05-23 09:58:25

Hi, I think it's time to properly introduce my side project which is open source and can be found on [github](https://github.com/flodev/remotify).
I mentioned it in my articles and by now it has reached MVP status and can be tried out.

![Image](https://www.remotify.place/assets/working_example.gif)

## Motivation and purpose
Going to the office can be fun. You meet others in person. You can talk. Drink coffee. You can also do lot's of fun stuff.
At least where I was working there was always at least one gaming option available in the office. Most often it was a kicker table (I love it but I suck). Sometimes people had nerv guns and were chasing each other. Another time they had table tennis.
And this is where remotify comes into play.
Remotify is targeted is to catch the fun part of going to an office and provides it virtually.

## Key features
* display a room and people
* let different users join a room using invitation links
* users can walk the room by tapping somewhere
* enable camera and microphone and display the picture as peoples heads
* edit the room and draw walls anywhere
* place desks or toilets somewhere
* use desks
* assign desks to users

It provides a virtual place where you can meet and have fun. It's a mix between a game and an online webRTC conference where you can see each other.
New SDK naming for Nuxt 2 and Nuxt 3
Tags: nuxt, sdk, headless
Published: 2022-05-23 09:57:58


![New SDK naming for Nuxt 2 and Nuxt 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t55fjkty3bufle9bs6t4.jpg)

We have updated the naming of our Nuxt SDK npm packages! Since Nuxt 3 is currently in RC stage and will become the new default very soon, the default package for Nuxt 3 is now `@storyblok/nuxt`. The package for Nuxt 2 is now `@storyblok/nuxt-2`.

Depending on which you want to use, you would `npm install`:

- `@storyblok/nuxt-2` for Nuxt 2

- `@storyblok/nuxt` for Nuxt 3

All of the SDK demos and getting-started repositories have been updated to reflect these changes. Expect more tutorial content for Nuxt 3 from our side over the next few weeks.

We would like to apologize for the recent naming changes and are aware of the confusion this has created among the Vue and Nuxt communities respectively. No more changes are to be expected anytime soon. Thank you very much for your understanding, your feedback, and your patience.
Which Frontend Framework Would You Use For an Ecommerce Storefront?
Tags: discuss, javascript, webdev, opensource
Published: 2022-05-23 09:49:05

[Medusa](https://medusajs.com) provides 2 starter storefronts for your headless commerce platform, one using [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter) and one using [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter). These 2 frameworks not only provide a good developer experience, but they also allow you to create fast ecommerce storefronts. This provides users with a good experience when using an online store.

In addition, as Medusa is a headless commerce platform, developers can create a custom storefront with any frontend framework of their choice. They just need to interact with the REST APIs.

If you were to create an ecommerce storefront and had full freedom to choose which frontend framework to use for the storefront, which would you pick and why?
Ng-News: Episode 22/20
Tags: angular, javascript, programming, webdev
Published: 2022-05-23 09:34:57

This is a weekly posting, covering the latest updates from the Angular community.

{% embed https://youtu.be/tRt89AHX7Uo %}

## `inject` function in Angular 14

For more than half a year, we have been waiting for Standalone Components and typed forms. Now, as it is just a matter of a few weeks, we suddenly get a third feature with the potential for significant changes.

Younes Jaaidi published an article about an inject function which was added in the rc-1 for Angular 14. With that function, you can synchronously request elements from the dependency injection. Use cases are that you can use it instead of the @Inject decorator to gain more type safety or use it instead of the constructor. That could reduce the boilerplate code.

{% embed https://twitter.com/yjaaidi/status/1527710645516484608 %}

There are some constraints as well. For example, it can only be used in the construction context, including the constructor itself and field and function declarations. And it is only available inside Components, Services, Pipes, and Directives. So Angular will not abandon classes and use functions.

Younes summarized potential use cases along anti-patterns in his article. But, as always, when something new arrives, it is a bitlittle unclear if and how it will affect the way we will write Angular applications in the future.

## Article series Angular 14 - Netanel Basal

Netanel Basal also wrote an article about the inject function. Actually, he wrote a complete series of all upcoming features in Angular 14. So definitely, worth reading it.

{% embed https://twitter.com/NetanelBasal/status/1527217252927414272 %}
GraphQL: A brief introduction to schemas, types, and resolvers
Tags: graphql, api
Published: 2022-05-23 09:32:16

## Schemas, types, and resolvers; what are they and how do they fit together?

Let's start with schemas - it's where we define the shape of our data - we do this by giving it a type.

When we create a schema, we do so in a different language. Don't panic, it's simple. It's called schema definition language and its very similar to defining an object. 

```
type Post {
    id: ID!
    title: String!
    author: String!
    body: String!
}
```
This Post type has four fields with key names (id, title, author, body) and scalar types that describe the information stored there.

##Scalar types

Scalar types are built-in types provided by GraphQL, and you’ll probably recognise most of them - they are `String`, `Int`, `Float`, `Boolean`, `ID` . 

We can define relationships between types too; for example, if we wanted to store more information about an author, but separately to the Post, we could do this:

```
type Post {
    id: ID!
    title: String!
    author: Author!
    body: String!
},
type Author {
    id: ID!
    name: String!
}
```
The type associated with the `author` field is now the `Author` type, which is made up of fields which have their own scalar types.

We also define any queries or mutations we make in the schema too. When we define the type a query or mutation will have, we have to make sure that whatever the associated resolver returns has the same type. 

```
type Query {
    allPosts : [Post!]!
}
```

## And resolvers?

Resolvers are functions that resolve a value for a type or field in a schema, and they do a similar job as controllers do in REST.

We have defined the return type of our queries in the schema, the resolver now takes the data that we get from the query and transforms it into a shape that matches the one that was described by the type in the schema.

That might be a lot to think about, so picture it this way:
There's a query type in the schema that says it returns a triangle. When we get the data, we see that it actually gives us a square, so we write a resolver function to transform that square into a triangle.

Resolver functions can return objects or scalars. If an object is returned, execution continues to the next child (like from `Post` to `Author` in the example above), until a scalar value is returned at which point the execution is completed. If null is returned, the execution stops. 

The resolvers for query and mutation types have to have the same name as the query or mutation type that they are resolving, that's how GraphQL knows which resolver to invoke. 

Resolvers are like normal functions, so you can pass arguments to them too. Its often convenient to destructure these parameters.

And there you have it, a brief introduction to schemas, types, and resolvers.
Eloquent Performance - N+1 Query Problems - Laravel
Tags: php, laravel, webdev, database
Published: 2022-05-23 09:16:22

I knew that this problem N+1 is one of the problems that affect the performance of my project and I found this article that contains the reasons https://laravel-news.com/laravel-n1-query-problems and solution to this problem and I wanted to share it with you because of the importance of this topic

Four cases to clarify the problem and solve it

- Case 1. "Regular" N+1 Query

```php
// app/Models/Book.php
class Book extends Model
{
    public function author()
    {
        return $this->belongsTo(Author::class);
    }
}
// Then, in some Controller:
$books = Book::all();
foreach ($books as $book) {
    echo $book->author->name;
}
```
fix 
```php
// Instead of
$books = Book::all();
// You should do
$books = Book::with('author')->get();
```

- Case 2. Two Important Symbols

```php
public function index()
{
    $authors = Author::with('books')->get();
    return view('authors.index', compact('authors'));
}

// Blade
@foreach($authors as $author)
    <tr>
        <td>{{ $author->name }}</td>
        <td>{{ $author->books()->count() }}</td>
    </tr>
@endforeach
```
So, the method of relation would query the database for each author. But if you load the data, without () symbols, it will successfully use the eager loaded data `` $author->books ``
fix
```php
// Controller
$authors = Author::withCount('books')->get();
// Blade
{{ $author->books_count }}
```

- Case 3. "Hidden" Relationship in Accessor

```php
// Controller
public function index()
{
    $authors = Author::all();
    return view('authors.index', compact('authors'));
}

// Blade
@foreach($authors as $author)
    <tr>
        <td>{{ $author->name }}</td>
        <td>{{ $author->is_active ? 'Yes' : 'No' }}</td>
    </tr>
@endforeach
```
That "is_active" is defined in the Eloquent model
```php
use Illuminate\Database\Eloquent\Casts\Attribute;
class Author extends Model
{
    public function isActive(): Attribute
    {
        return Attribute::make(
            get: fn () => $this->books->count() > 0,
        );
    }
}
```
- Case 4. Be Careful with Packages

Laravel has a great ecosystem of packages, but sometimes it's dangerous to use their features "blindly". You can run into unexpected N+1 queries if you're not careful.

- The Built-In Solution Against N+1 Query

since Laravel 8.43, the framework https://laravel-news.com/disable-eloquent-lazy-loading-during-development

In addition to the Laravel Debugbar for inspection, you can add a code to the prevention of this problem

You need to add two lines of code to app/Providers/AppServiceProvider.php
```php
use Illuminate\Database\Eloquent\Model;
class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Model::preventLazyLoading(! app()->isProduction());
    }
}
```
Now, if you launch any page that contains an N+1 Query problem, you will see an error page

I have explained only the important points, but to go deeper, the article must be increased and benefited from.
A UseDarkMode react hook for everyone!
Tags: javascript, webdev, nextjs, react
Published: 2022-05-23 09:13:26

So a while ago I came across an issue whilst developing.

I was creating a solution in nextjs with typescript and using tailwind to help with my css.

Tailwind out of the box provides dark mode support for different styling really easily by doing the following:
```html
<div class='bg-white dark:bg-black'>Hello World </div>
```

However, I needed to know when the user was in dark mode within my react application to change other parts to the system. So I began looking through npm for another solution, but with little luck I decided to take how tailwind looks for dark mode and put it into a react hook.

This is where [useDarkMode](https://www.npmjs.com/package/use-dark-mode-ts) comes into play. Initially I created this inside of the repository that I was working on at the time but after proving that it works, I realized it would soon be something that could help a lot of other developers.

The package also comes with types so for those using typescript you can ensure type safety and, those who aren't well... that's fine too!

So I created a new repository and published it to npm: https://www.npmjs.com/package/use-dark-mode-ts.

It's really easy and simple to use, below is a code snippet:
```react
import { useDarkMode } from 'use-dark-mode-ts';

const ExampleComponent = () => {
    const isDarkMode = useDarkMode();

    return (
        <>
            {
                isDarkMode
                ? (<div>I am in dark mode </div>)
                : (<div>I am not in dark mode </div>)
            }
        </>
    )
}
```

Now by no means is it perfect and those with more experience in this area might be able to help contribute to make it even slicker. But for now, this is where I have got to and at the time of writing it has exploded with 4.2k weekly downloads.

I hope it helps as many of you as possible!
Google Chatbot Setup With Golang
Tags: chatbot, go, mojoauth, google
Published: 2022-11-01 06:48:09

---
title: Google Chatbot Setup With Golang
published: true
date: 2022-05-23 09:11:23 UTC
tags: chatbot, golang, mojoauth, google
canonical_url: https://mojoauth.com/blog/google-chatbot-setup-with-golang/
---

This tutorial will cover building a bot that responds to pings (i.e., @) and sends messages to a chat room. The bot will run on a golang server and receive pings via an HTTP endpoint on a high level. We will be using payload in the HTTP request for responses to pings(synchronous), while Google Hangout Chat API will be used for bot-initiated messages(asynchronous) Google Chatbots When you think about a bot, you must decide how you want to interact with it.

[Read On](https://mojoauth.com/blog/google-chatbot-setup-with-golang/)
Handling Pagination in Strapi v4 with SvelteKit
Tags: svelte, strapi, ui, frontend
Published: 2022-05-23 08:54:57

If you use any kind of web or mobile application, you may have come across a data table that lets you view data by breaking it up into multiple pages. In the world of software development, this is known as pagination.

Pagination is an optimization technique that is used both on the frontend and backend to enhance the performance of your applications. With pagination, you can skip to the desired page and view the results for that particular page without loading any additional data. In this tutorial, you’ll learn how to work with Strapi for the backend and implement the pagination controls UI by building the frontend in Svelte.

Read the full blog on [Strapi](https://strapi.io/blog/handling-pagination-in-strapi-v4-with-svelte-kit).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
React Interview Question series
Tags: react, javascript, webdev, reactdeveloper
Published: 2022-05-23 08:53:34

💡 𝗥𝗲𝗮𝗰𝘁 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 |❓| 𝗛𝗼𝘄 𝘁𝗼 𝗽𝗮𝘀𝘀 𝗱𝗮𝘁𝗮 𝗳𝗿𝗼𝗺 𝗽𝗮𝗿𝗲𝗻𝘁 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘁𝗼 𝗰𝗵𝗶𝗹𝗱 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗖?

🤔 𝘏𝘮𝘮, 𝘵𝘩𝘪𝘯𝘬...𝘐 𝘨𝘰𝘵 𝘪𝘵 ...𝘺𝘰𝘶 𝘤𝘢𝘯 𝘱𝘢𝘴𝘴 𝘪𝘵 𝘶𝘴𝘪𝘯𝘨 𝘱𝘳𝘰𝘱𝘴, 𝘫𝘶𝘴𝘵 𝘧𝘳𝘰𝘮 𝘱𝘢𝘳𝘦𝘯𝘵 𝘵𝘰 𝘤𝘩𝘪𝘭𝘥 𝘈 𝘵𝘩𝘦𝘯 𝘵𝘰 𝘤𝘩𝘪𝘭𝘥 𝘉 𝘵𝘩𝘦𝘯 𝘵𝘰 𝘤𝘩𝘪𝘭𝘥 𝘉

❌ 𝘣𝘶𝘵 𝘸𝘢𝘪𝘵 𝘰𝘯𝘤𝘦 𝘵𝘩𝘪𝘴 𝘢𝘱𝘱𝘳𝘰𝘢𝘤𝘩 𝘩𝘢𝘴 𝘢 𝘱𝘳𝘰𝘣𝘭𝘦𝘮 𝘤𝘢𝘭𝘭𝘦𝘥 𝘱𝘳𝘰𝘱𝘴 𝘥𝘳𝘪𝘭𝘭𝘪𝘯𝘨, 𝘪𝘵 𝘪𝘴 𝘯𝘰𝘵 𝘵𝘩𝘦 𝘣𝘦𝘴𝘵 𝘸𝘢𝘺.

❓ 𝘄𝗵𝗮𝘁 𝗶𝘀 𝗽𝗿𝗼𝗽𝘀 𝗱𝗿𝗶𝗹𝗹𝗶𝗻𝗴
𝘗𝘳𝘰𝘱 𝘥𝘳𝘪𝘭𝘭𝘪𝘯𝘨 𝘳𝘦𝘧𝘦𝘳𝘴 𝘵𝘰 𝘴𝘦𝘯𝘥𝘪𝘯𝘨 𝘱𝘳𝘰𝘱𝘴 𝘧𝘳𝘰𝘮 𝘢 𝘩𝘪𝘨𝘩𝘦𝘳-𝘭𝘦𝘷𝘦𝘭 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘵𝘰 𝘢 𝘭𝘰𝘸𝘦𝘳-𝘭𝘦𝘷𝘦𝘭 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵. 𝘏𝘰𝘸𝘦𝘷𝘦𝘳, 𝘱𝘳𝘰𝘱 𝘥𝘳𝘪𝘭𝘭𝘪𝘯𝘨 𝘤𝘢𝘯 𝘣𝘦𝘤𝘰𝘮𝘦 𝘢𝘯 𝘪𝘴𝘴𝘶𝘦 𝘣𝘦𝘤𝘢𝘶𝘴𝘦 𝘰𝘧 𝘪𝘵𝘴 𝘳𝘦𝘱𝘦𝘵𝘪𝘵𝘪𝘷𝘦 𝘤𝘰𝘥𝘦.

✔️ 𝘛𝘩𝘦 𝘣𝘦𝘴𝘵 𝘸𝘢𝘺 𝘵𝘰 𝘱𝘢𝘴𝘴 𝘥𝘢𝘵𝘢 𝘸𝘩𝘦𝘯 𝘢𝘯 𝘈𝘱𝘱 𝘩𝘢𝘴 𝘴𝘶𝘤𝘩 𝘵𝘺𝘱𝘦 𝘰𝘧 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘩𝘪𝘦𝘳𝘢𝘳𝘤𝘩𝘺 𝘪𝘴 𝘣𝘺 𝘶𝘴𝘪𝘯𝘨 𝘶𝘴𝘦𝘊𝘰𝘯𝘵𝘦𝘹𝘵 𝘳𝘦𝘢𝘤𝘵 𝘩𝘰𝘰𝘬

𝘛𝘩𝘦 " 𝘶𝘴𝘦𝘊𝘰𝘯𝘵𝘦𝘹𝘵 " 𝘩𝘰𝘰𝘬 𝘤𝘳𝘦𝘢𝘵𝘦𝘴 𝘤𝘰𝘮𝘮𝘰𝘯 𝘥𝘢𝘵𝘢 𝘵𝘩𝘢𝘵 𝘤𝘢𝘯 𝘣𝘦 𝘢𝘤𝘤𝘦𝘴𝘴𝘦𝘥 𝘵𝘩𝘳𝘰𝘶𝘨𝘩𝘰𝘶𝘵 𝘵𝘩𝘦 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘩𝘪𝘦𝘳𝘢𝘳𝘤𝘩𝘺 𝘸𝘪𝘵𝘩𝘰𝘶𝘵 𝘱𝘢𝘴𝘴𝘪𝘯𝘨 𝘵𝘩𝘦 𝘱𝘳𝘰𝘱𝘴 𝘥𝘰𝘸𝘯 𝘮𝘢𝘯𝘶𝘢𝘭𝘭𝘺 𝘵𝘰 𝘦𝘢𝘤𝘩 𝘭𝘦𝘷𝘦𝘭.

______________________________________



___________________________________________


#javascript #reactjs #reactdeveloper #webdevelopment #webdesigning #frontend #interviewpreparation


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nopzqwcuaj92qnu93g19.jpeg)
Why thoughts does matter? Roadmap to be Crypto Lover 💘
Tags: crypto, blockchain, smartcontract, ethereum
Published: 2022-05-23 08:47:43

Hi, I'm Tom
I tweeted like below the other day:
{% twitter 1528637374997024768 %}

I will create a Roadmap to be Crypto Lover.

### ✨ **The Goal of the Roadmap**


> * Focus on the Thoughts. I don't chase the price of token. 
> * Introduce the thoughts of crypto so Easy-to-Read 
> * To be crypto lover with me!😍

If you Google it, you can find a lot of advertisements.
And it will tell you “You have to buy this coin!!!”
It's very silly.


### **🙅‍♂️ The Common Problem of the Most People**

Most people come into crypto because 

> Crypto is profitable🤑

But many of them don't trust the project wholeheartedly, so they quickly let it go👋 if the price drops slightly📉😱. 

And they lose money regardless of whether the tokens go up or down. 
Then they say 

> Crypto is Bad 😡 

and leave the fields...
(※ And,I guess many of them would have said, "If only I had HODL👊 then, I'd be rich too🥱.)

**This is just a waste of time and money**.

Crypto is an amazing technology that will change the future

- Why is it changing the future?
- And what is the philosophy behind this technology?

_I am sure understanding these things will make your life better._

Now, I’m so excited that I’m quitting college and devoting all my time to crypto development😌.

---


### **🙆‍♂️ The Future You can Achieve with the Roadmap**

**You will be Crypto Lover💘**

In Japan, there is a proverb.

> **好きこそ物の上手なれ**
> **What one likes, one will do well**


If you want to learn crypto, the quickest way is to like it.
If you don't like it, that's okay🙆‍♂️. 
You should learn something different. Because there is more than crypto in this world.

So, when you are in that time,I will tell you "**Nice Try!**"👍


![Hug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jobsvv4yk8wjqee3zl36.jpeg)


### **🚜 Note: The Roadmap is under Construction**
I will be updating this roadmap article in the future.
Please follow me on Twitter as I will provide those updates

### **🌇 Finally**

I’m not perfect. 
If I’m telling you something that is not true, please let me know.

And, I will be updating this roadmap article in the future.
Just a moment, please. I will update it on my [Twitter](https://twitter.com/tom_eth_dev). Thanks😌
Ethernaut系列-说明
Tags: ethernaut, solidity, web3, security
Published: 2022-05-20 05:59:15

## 简介
Ethernaut 是一个基于 Web3/Solidity 的过关游戏。
如果对如何安全编写Solidity感兴趣，建议你去玩下。
官网：https://ethernaut.openzeppelin.com/
## 适用范围
  要玩这个游戏，最好对下面这几个技术有一定的了解
1. Solidity,基本了解Solidity智能合约的开发，个人建议最好的学习方式可以从官网文档开始
https://docs.soliditylang.org
2. Javascript,能写基本的Javascript
3. Web3,了解基本的web3的概念

##工具
   IDE: VSCODE
   工具: Hardhat（Solidity的开发环境） https://hardhat.org

##说明
   这个系列的代码会都放在Github上，可以通过这个地址查看 
   https://github.com/bin2chen66/ethernaut
   在官网玩需要连接以太坊的测试网rinkeby，不是很稳定，再加上需要去找稳定的水龙头，所以我把关卡的代码复制到本地，通过hardhat的本地编译环境来跑。
   目录结构如下：
```sh
.
├── contracts           # 过关用的Solidity代码
│   ├── 01FallbackRun.sol
│   ├── 02FalloutRun.sol
│   ├── 03CoinFlipRun copy.sol
│   ├── 04TelephoneRun.sol
│   ├── 05TokenRun.sol
     .....
│   └── ethernaut         #从官网复制的关卡源码
│       ├── 01Fallback.sol
│       ├── 02Fallout.sol
│       ├── 03CoinFlip.sol
│       ├── 04Telephone.sol
│       ├── 05Token.sol
        ....
└── test      #测试用例，每个关卡一个文件
    ├── 01Fallback.js  
    ├── 02Fallout.js
    ├── 03CoinFlip.js
    ├── 04Telphone.js
    ├── 05Token.js
    ...
```
每个测试文件包含三部分：
1.setup : 模拟线上关卡，初始化player/levelOwner/levelContract
2.attachs: 执行对应的Run.sol，进行过关
3.check: 检测过关条件，不满足就测试不通过

运行第一关：
```
$ npx hardhat test test/01Fallback.js
```
------------
如图：
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrxr0p9xl96sxbsp7k96.png)

------------

运行所有关卡：
```
$ npx hardhat test
```

有问题或者任何建议可以twitter上DM我，感谢。

https://twitter.com/bin2chen


--------------------------
## 言归正传 #show me the code
（提示：第0关是介绍，根据官网的提示走即可）

目前github更新10关,blog会陆续跟上
25 Vs Code shortcuts to improve your workflow (Mac)
Tags: beginners, programming, productivity, tutorial
Published: 2022-05-23 08:44:42

VS code is one of the most popular text editors across all coding languages. It's fast, has a great community around it with amazing extensions and most importantly it's free. However less experienced programmers don't make full use of its capabilities.

When calling friends or family, do you dial their number every time you call them? Of course you don't, because you have their number stored as contact. VS code provides these same shortcuts but less experienced programmers do not utilize them effectively. The most efficient coders only take their hands off the keyboard whilst coding until it's necessary.

There is often a "I'll do it later" attitude when it comes to learning shortcuts. An hours now will improve your workflow moving forward and save you hours or even days in the long run. 

Here is a list of 25 useful shortcuts for VS code:

| Shortcut | Task |
|-|-|
| ⌘O | Open file |
| ⌘S | Save file |
| ⌥⌘S | Save all files |
| ⌥Z | Toggle word wrap |
| ⌥⌘← *or* ⌥⌘→ | Toggle to next tab |
| ⌘F | Find |
| ⇧⌘F| Replace in files |
| ⌘C | Copy selection (copies line if nothing selected) |
| ⌘V | Paste selection |
| ⇧⌘↑ *or* ⇧⌘↓ | Insert duplicate line above or below |
| ⇧⌘K | Delete Line |
| ⌘⌫ | Clear line|
| ⌘Z | Undo Change |
| ⇧⌘Z | Revert Change |
| ⌘/ | Comment/uncomment line |
| ⌘ + hover | Check origin of usage |
| ⇧⌘\ | Jump to matching bracket |
| ⌥⌘↑ *or* ⌥⌘↓ | Add cursor to line above or below |
| ⌥↑ *or* ⌥↓ | Move line up or down a row |
| ⌥← *or* ⌥→ | Go to start/end of cursor word then continue to next start/end |
| ⌘ + **direction** | Go to end of direction |
| ⇧⌘← *or* ⇧⌘→  | Select remaining text from cursor | 
| ⇧⌥F | Format document (formatter extension required)|
| fn *+* E| Add emoji |
| ⌘. | Quick Fix |