teleren/devto huggingface dataset:
superplate - Performance-oriented Frontend application creator with popular tools
Tags: typescript, opensource, nextjs, react
Published: 2021-03-23 11:32:09



It has been a long time since we started the [next-boilerplate](https://github.com/pankod/next-boilerplate) project. We are proud that it helped many frontend developers around the globe to speed up their frontend development cycles.

In time, we took valuable lessons from our experience and the community feedback:
- There are infinite number of frontend technologies and it's impossible to combine everything in a single boilerplate product.
- The project is hard to maintain with tons of external dependencies.

To tackle the complexity problem we started a new project from scratch. We call it "[superplate](https://github.com/pankod/superplate)" - the frontend boilerplate with superpowers.

![see it in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2d4oub5drmyh5gkq43z.gif)

superplate is designed to save you hours of development time when starting a new project. superplate is offering various plugins/tools you can choose from but It's [super-easy](https://pankod.github.io/superplate/docs/development/creating-a-plugin) for you to modify those plugins or create your own ones. Once you are done, you can share your plugins and set [superplate](https://github.com/pankod/superplate) up to use your custom plugins.

![superplate plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ianogl88e44aohoi5b8g.png)

superplate's default framework is Next.js. More framework targets are coming soon.

You may checkout the project from the [repo page](https://github.com/pankod/superplate) or [documentation](https://pankod.github.io/superplate/).
Don't name your Rails model Image
Tags: rails
Published: 2021-03-23 11:27:58

I named my model `Image` and I'm now realizing that's a bad idea.

I've never used my model with a form previously as it belongs to another model. But now I had to build a form to allow the user to update some of the attributes of my images.

```erb
<%= form_with model: image do |f| %>
```

But suddenly I got errors from the asset pipeline
> The asset "[Image" is not present in the asset pipeline.

I even tried providing my form the image path directly:
```erb
<%= form_with model: image, url: image_path(image) do |f| %>
```

But got the exact same error. Okay - so now I realized that the asset pipeline is actually responding to my `image_path`, even though I created my images routes in `config/routes.rb` with the usual `resources :images` syntax.

So long story short. Don't name your model `Image`. It's always easier to use Rails conversions instead of having to work around them.

Should you do it anyways, then help your self by naming your routes customary. In `config/routes.rb` you can do it with the `as` option to your `resources` statement:

```rb
resources :images, as: :img
```

which gives you the routes helpers:
```rb
new_img_path # new
img_path(image) # show
edit_img_path(image) # edit
img_index_path # index - notice it requires index to be specified in method name
```

and in the `form_for` you need to tell Rails to use your custom routes:
```erb 
<%= form_with model: image, url: img_path(image), method: :put do |f| %>
```

It's not perfect. But when the damage is done it's a lot easier to use custom route names than renaming your model.
If you work for yourself, charge more
Tags: freelance, business, webdev
Published: 2021-03-23 11:21:29

If I could only give you one piece of advice, it would be this.  

**Charge more**

Some clients will complain.
It will feel uncomfortable.
It might make your "hourly rate" seem astronomical.  

But charging hourly is harmful for both you and your client. 

Bad for your client as they does not know how much they are going to pay.  And once the project has started you have them at your mercy.  

Bad for you because you have no incentives to get better at your craft, learn new tools and techniques.  It's better for you to work slowly.

Ultimately, it comes down to this.  

Clients *don't care* about your hourly rate.  

They only care about the results you deliver.  And when you deliver them.  And how much grief they have to put up with in order to get them.  

Who do you think the client would prefer?

The person who charges $1000/hour and works for 10 hours to deliver a $1,000,000 result?
Or the person who charges $10/hour and works for 1000 hours to deliver that same result?  

Do you think the client would even believe that someone who charges so little could deliver a $1,000,000 result?  Or that someone who charges so little won't need a whole load of hand-holding, cajoling and management?

So charge more.  

- Do your research.  
- Know your clients, understand what they are looking for and what it's worth to them.  
- Learn what stops them from buying and what makes them feel safe.  
- Focus in a method of delivering what they are looking for as quickly as possible.  No frills, no extras, just the results.  

Look at your prices.  

And charge more.
Using Validate.js via a fluent  TypeScript interface
Tags: javascript, typescript, node, graphql
Published: 2021-03-23 11:17:42

When it comes to user input validation, particularly when designing (RESTful, GraphQL) APIs, it's important to have these objectives in mind:

- Validator needs to support various data types such as emails, mobile phone numbers in different locales, credit cards, etc. Well tested and already used in production by many companies.
- It needs to have an API (interface) that allows writing validation rules with the minimum amount of boilerplate code.
- This interface needs to be strongly typed, allowing a better development experience (DX) when used with TypeScript.

I think [validator.js](https://github.com/validatorjs/validator.js) (✭17k) fits perfectly into the first requirement. And, in order to make it less verbose, I would suggest using the following API (interface):

```ts
import { validate } from "validator-fluent";

const input = {
  givenName: "John",
  familyName: "Doe",
  email: "john@example.com",
  age: "18",
  website: "",
};

const [data, errors] = validate(input, (value) => ({
  given_name: value("givenName")
    .notEmpty()
    .isLength({ min: 3, max: 25 }),
  family_name: value("familyName")
    .notEmpty()
    .isLength({ min: 1, max: 25 }),
  email: value("email")
    .notEmpty()
    .isEmail(),
  age: value("aga").toNumber(),
  website: value("website").isURL(),
});

if (Object.keys(errors).length === 0) {
  await db.table("customer").insert(data);
}
```

## Validation Only (mode)

Often, it also needs to be possible to validate user input without saving it into the database. Example:

```ts
const input = {
  email: "john@example.com"
};

// Validate user input and exit
const dryRun = true;

const [data, errors] = validate(input, (value) => ({
  email_address: value("email")
    .notEmpty({ if: !dryRun })
    .isEmail(),
});

if (!dryRun && Object.keys(errors).length === 0) {
  await db.table("customer").insert(data);
}
```

## Adding Custom Rules

You can extend the built-in validator class with any additional validation rules (methods).

```ts
import { Validator } from "validator-fluent";

export class CoolValidator<K, V> extends Validator<K, V> {
  constructor(key: K, value: V) {
    super(key, value);
  }

  isLegit(): this {
    if (!this.isEmpty && this.value !== "legit") {
      this.errors.push("Not legit.");
    }

    return this;
  }
}
```

```ts
import { validate, ValidationError } from "validator-fluent";

const input = { name: "???" };

const [data, errors] = validate(input, CoolValidator, (value) => ({
  name: value("name").notEmpty().isLegit(),
}));

if (Object.key(errors).length > 0) {
  throw new ValidationError(errors);
}
```

## References

- https://github.com/validatorjs/validator.js
- https://github.com/kriasoft/validator-fluent
How to Build Q&A Models in Python (Transformers)
Tags: python, deeplearning, machinelearning, tutorial
Published: 2021-03-23 11:13:14

{% youtube scJsty_DR3o %}

Asking a question to a machine and receiving an answer was always the stuff of sci-fi in the not too distant past. Now, things have changed, and we find ourselves using Q&A systems everywhere — without even realizing it.

Google search is the best example — although in most cases Google is used to find information and will simply point you in the right direction, many other queries are direct questions — to which Google often provides direct answers.

Of course, Google is ahead of the game. But that doesn’t mean that we can’t produce great Q&A systems — we can — and we can even use the exact same models that Google uses in their search.

In this video, we will learn how to use state-of-the-art transformer models for Q&A. We will take a look at Google’s Bert and how to use it.
How we developed an Uber-like, luxury transportation platform
Tags: ruby, writing, programming, webdev
Published: 2021-03-23 11:04:03

Since 2003, 1st Business Services has offered luxury car services, with English-speaking chauffeurs, for businesses and private customers. The company specializes in business and private trips, providing transportation for crew members of aircrafts, guided tours, conferences, sporting and social events, and VIP service.

At the end of 2015, 1st Business Services approached Evrone with a proposal to develop a transportation service for a business class clientele. We were excited for the opportunity to develop an exclusive, luxury, Uber-like system. [Read how we developed a full-fledged service with a back office just in three months.](https://evrone.com/business-uber)
How to (almost) forget about wires in Android/Flutter/mobile-web development
Tags: flutter, android, mobile, adb
Published: 2021-03-23 10:56:46

---
title: How to (almost) forget about wires in Android/Flutter/mobile-web development
published: true
description: 
tags: flutter, android, mobile, adb
//cover_image: https://direct_url_to_image.jpg
---

Ok, this is pretty straightforward. If you a android developer (or flutter/react native developer, or web developer who wants to test your local code in real device browser), your phone is permanently connected to your working station. 

If you don't like this and want to use some modern technologies like, you know, some wireless solutions, adb can connect your phone via wi-fi, and even forward port from your computer to phone's localhost.

But it's not really fun to type all this commands by hands every time when you start working, so there is simple bash script to switch connected Android phone to wi-fi adb mode and optionally forward port from computer to phone:

```bash
#!/bin/bash

if ! command -v adb &> /dev/null
then
    echo "adb is not globally installed, using android sdk version"
    #you can just set your path to android platform tools
    export PATH="$PATH:~/Android/Sdk/platform-tools"
fi

adb disconnect
adb usb
sleep 1

echo "Wait for USB device..."
adb wait-for-usb-device
adb devices

IP=$(adb shell ip route | cut -d' ' -f9)
echo "IP: $IP"

echo "Switch to tcpip"
adb tcpip 5555

echo "Connecting..."
while true; do
  res=$(adb connect $IP | cut -d' ' -f1)
  [[ "$res" == "connected" ]] && break
  sleep 1
done
echo "Connected!"

PORT=$1
if [ -n "$PORT" ]
then
  echo "Forward port $PORT"
  sleep 2
  adb -e reverse tcp:$PORT tcp:$PORT
fi
```

There is gist, which you could just star or add to bookmarks: 
https://gist.github.com/Amareis/a39e0fa39260a7d23abb7908fc295226

Note what you still need to connect phone over wire at first time, but then while it connected to same wi-fi as your computer, you can safely remove wire.

Script can use android platform-tools adb version (if there is no globally installed adb), wait for phone connect (if there is no any connected device) and, of course, forward your local port to phone.

Usage is really simple:
```
#simple turning connected phone to adb wi-fi mode
./connect.sh

#turning phone to adb wi-fi mode and then forward local port to it
./connect.sh 8080
```

Tested on some ubuntu, and maybe it can works on mac or wsl, but not for sure. If you'll make it, you can propose changes to gist.

Care about your wires and use wi-fi!
Underrated Articles on Dev.to from Last Week
Tags: top7, webdev, bestofdev, meta
Published: 2021-03-23 10:43:54

Hello! I'm back with another installment of underrated articles from last week! 

Let's check them out 🔥 -

## 1. Guide to Cloud Computing
Cloud Computing is the method of computing in which data and programs are stored over the Internet and not on your hard disk.
Adit writes a beginner's guide to cloud computing and explains it thoroughly.
{% link https://dev.to/aditmodi/what-is-cloud-computing-a-beginner-s-guide-37ne %}

## 2. List of Resources to Learn Frontend
Ayu shares some awesome resources that she uses and recommends for learning frontend. 
{% link https://dev.to/adiatiayu/10-free-and-affordable-resources-to-learn-frontend-web-development-1ehb %}

## 3. Things to Know Before Entering Tech
In this article, Amelia shines light over a few things that she wished to know before making an entrance into the tech space.
{% link https://dev.to/technoglot/things-i-wish-i-knew-before-entering-the-tech-space-part-1-of-3-2979 %}

## 4. Opensource Javascript Chart Libraries
Sm0ke presents a curated list of open-source Javascript Chart Libraries which we can use without much effort to showcase relevant information in our projects.
{% link https://dev.to/sm0ke/javascript-chart-library-open-source-projects-14ap %}

## 5. A Better Understanding of Typescript
Typescript exploded in popularity in 2019 and continues its crazy run in 2020. Mehdi Zed explained typescript beautifully .
{% link https://dev.to/jesuisundev/understand-typescript-in-5-minutes-1625 %}

*That's all for this week. These were some of my personal favorites from last week. I hope you liked my article. Tell me about your favorite ones that went underrated in the comments below!*
Download blob from azure using Azure.Storage.Blobs
Tags: dotnet, azure, storage, csharp
Published: 2021-03-23 10:41:02

We can store blobs in Azure platform in C# using `Azure.Storage.Blobs`. Previously we had `Microsoft.WindowsAzure.Storage` for this but they rewrote it. Don't ask me why. As `Microsoft.WindowsAzure.Storage` is deprecated now and we needed to access Azure to read blobs, we have no other option rather than using new `Azure.Storage.Blobs`. If you search docs to use Azure in C#, the results will be flooded with `Microsoft.WindowsAzure.Storage`. If you ask specifically about new APIs, you will get mostly Microsoft docs links. I find Microsoft docs unusable🤭. And if you are like me, you are welcome to follow the article.

## First thing first: install NuGet package
Install NuGet package `Azure.Storage.Blobs`. At the time of writing this, the latest version is 12.8.0.

## Import library
`using Azure.Storage.Blobs;`

## Get connection string
I assume you have Azure account and thus connection string to connect to Azure Blob Storage. Store this in a variable or constant based on your need.
```
const string CONN_STRING = <connection_string_from_azure_portal>
const string BLOB_CONTAINER = <blob_container_name>
```

## Now the final thing
I will download the blob to a local file and read it.
```
string filePath = "<optional_path/file_name.extension>";
var blobClient = new BlobClient(CONN_STRING, BLOB_CONTAINER, <blob_uri>);
var result =  blobClient.DownloadTo(filePath); // file is downloaded
// check file download was success or not
if (result.Status == 206 || result.Status == 200)
{
  // You would be knowing this by now
  using (StreamReader r = new StreamReader(filePath))
  {
    string content = r.ReadToEnd(); // I don't know what you want to do with this
  }
}
```

That's it. I hope it would be helpful to you. 🙂
"The Ruby Unbundled Series" by Engine Yard
Tags: ruby, rails, paas, devops
Published: 2021-03-23 10:05:00

---
title: "The Ruby Unbundled Series" by Engine Yard
published: true
description: "The Ruby Unbundled Series" is a initiative taken by Darren Broemmer of Engine Yard to educate our audience. Tune in for more such series on our blog and YouTube channel. 
tags: ruby, rails, PaaS, DevOps
//cover_image: https://lh5.googleusercontent.com/_4glIRSgaPTlfrGIaLj61J6XKbRGX520JO7KrLJJ568LroW3-3IhqR5GKW5nqWfQOW2qJHKzoH-j_FhIU68nCQH5nBPz8-cn7TL-SVMwF75cf2UHmVOSQBWH1wLlOoKfTLTdVI3c
---
[Darren Broemmer](https://blog.engineyard.com/author/darren-broemmer) of [Engine Yard](https://www.engineyard.com/?utm_source=reddit&utm_medium=Rails-unbundled-series&utm_campaign=Internal-link) has been publishing a series of blogs on Ruby On Rails with the name “The Ruby Unbundled Series”. Check it out.

1. [The Ruby Unbundled Series: Add Microservices to your Rails App in Minutes](https://blog.engineyard.com/ruby-unbundled-add-microservices-to-rails-app?utm_source=dev.to&utm_medium=Rails-unbundled-series&utm_campaign=internal-link)

2. [The Ruby Unbundled Series: Writing an Instant Poll Rails App in a Single File](https://blog.engineyard.com/ruby-unbundled-instant-poll-app-in-single-file?utm_source=dev.to&utm_medium=Rails-unbundled-series&utm_campaign=internal-link)

3. [The Ruby Unbundled Series: Creating Games with Gosu](https://blog.engineyard.com/create-ruby-games-using-gosu?utm_source=dev.to&utm_medium=Rails-unbundled-series&utm_campaign=internal-link)

4. [The Ruby Unbundled Series: Designing and Launching New Features in Rails](https://blog.engineyard.com/ruby-unbundled-design-and-launch-features-in-rails?utm_source=dev.to&utm_medium=Rails-unbundled-series&utm_campaign=internal-link)

5. [The Ruby Unbundled Series: Track How Customers Use New Features](https://blog.engineyard.com/ruby-unbundled-track-how-customers-use-new-features?utm_source=dev.to&utm_medium=Rails-unbundled-series&utm_campaign=internal-link)

6. [The Ruby Unbundled Series: Release Features Faster by Slowing Down](https://blog.engineyard.com/the-ruby-unbundled-series-release-features-faster-by-slowing-down?utm_source=dev.to&utm_medium=canonical-url&utm_campaign=QiWorks)

7. Coming soon...

We'll adding more "The Ruby Unbundled Series" blog here. Keep an eye on this page.
Matt Brannelly | Business Trends in Pandemic
Tags: business, trends, pandemic
Published: 2021-03-23 10:04:28

According to Matt Brannelly - strategic advisor from Australia, there will always be some important trends influencing business across the globe every year. Some trends are significant and seem to make an impact for a longer time. However, the trends brought about by the pandemic were not anything anyone ever bargained 
for.

Matt Brannelly provides pandemic business trends that are transforming the business landscape now and post-pandemic in Australia.
https://medium.com/matt-brannelly-australia/australian-pandemic-business-trends-18470962639
Quick Visual Studio Code tip: Expand/Shrink selection!
Tags: development, productivity, code
Published: 2021-03-23 09:43:22

---
title: Quick Visual Studio Code tip: Expand/Shrink selection!
published: true
description: Visual Studio Code has a way to expand and shrink a selection that recognised code block boundaries
tags: development, productivity, code
canonical_url: https://christianheilmann.com/2021/03/23/quick-visual-studio-code-tip-expand-shrink-selection/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okq0faqny8536wg72agn.png
---
 
The "expand/shrink" selection keyboard shortcut in [Visual Studio Code](https://code.visualstudio.com) `⌃⇧⌘→ / ←` isn't the easiest to remember, but ridiculously powerful. It recognises code block boundaries and selects accordingly!

![Expand and shrink selection in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h6km1l60h5mhte5ezdi.gif)

<small>[Kirby cover by manbearpagan](https://www.deviantart.com/manbearpagan/art/Kirby-8-bit-jump-293388171)</small>
How to scrape Google Maps local businesses (+emails)
Tags: scraping, localbusinesses, google, googlemaps
Published: 2021-03-23 09:18:59

## Scrape local businesses from Google

Google Maps is a perfect source of local businesses for marketers as it has millions of companies with contact information about them. You can get phone numbers, emails, social profiles, etc.

## Automate the scraping process

Fetching data manually is unhumanistic job to do even for 25 companies! Therefore, there are many companies that provide such services to extract the data automatically. In the following post, I'll describe the best way to scrape all certified accountants from the US by using [Outscraper](https://outscraper.com/google-maps-scraper/).

## Let's get started

1. First of all, sign up to [Outscraper](https://app.outscraper.com/signup?redirect=/googleMaps).

2. Open Google Maps scraper, enter categories, and select locations.
![Screen Shot 2021-03-23 at 10.50.53 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsvlhiy6xfkbuaiyyo1j.png)

3. Check advanced parameters.
![Screen Shot 2021-03-23 at 10.51.06 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho3nffa5qd0ep1qi5ejx.png)
 
4. Press "Scrape data" and validate a few queries by opening them.
![Screen Shot 2021-03-23 at 10.53.15 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19nhxhhdduc47js6vgie.png)
 
5. Press "Confirm" and you will be offered to verify your payment method. Go to [billing information page] (https://app.outscraper.com/billing-info) by clicking "Verify" and connect a valid credit card. There is a [Free Tier](https://outscraper.com/google-maps-scraper/) that you can use each month. You will not be charged for the usage belove the Free Tier.
![Screen Shot 2021-03-23 at 11.23.12 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82kr4l9ask8y6lvv1r5y.png)
 
 

6. Once the pavement method is verified, move back to our tab and click "I've performed the action". The task should start and you should see the notification about it.
![Screen Shot 2021-03-23 at 11.03.06 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bppfxa54yo3wz8pj6gqh.png)

7. Open [tasks page](https://app.outscraper.com/tasks) to monitor the progress of your task. For our case, the scraping task will take about 19 hours to be finished.
![Screen Shot 2021-03-23 at 11.16.12 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7xca3bhqnvpapkyuvvq.png)
 

8. After any task is finished you will receive an email with the link to S3 storage where the results are saved for 30 days. Alternatively, you can download results from the [tasks page](https://app.outscraper.com/tasks).
![Screen Shot 2021-03-23 at 11.10.16 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65rl7xtv8yu44auzbcin.png)
 

## Bonus

Use the promotion code `GOOGLEMAPSSCRAPER` on the [profile page](https://app.outscraper.com/profile) to receive a 10% discount.
How to skip CI in GitHub Actions
Tags: devops, github, opensource, pipeline
Published: 2021-03-23 09:02:07

### GitHub Actions now supports skipping workflows

All **`push`** and **`pull_request`** workflows by looking for some common keywords in your commit message.

If any commit message in your push or the HEAD commit of your PR contains one of the following strings:

- `[skip ci]`
- `[ci skip]`
- `[no ci]`
- `[skip actions]`
- `[actions skip]`

![SKIP CI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d65rki99xaej91e3b7rw.png)

Workflows triggered on the **`push`** or **`pull_request`** events will be skipped.

---

This feature have been previously supported by all major CI like:
- [Travis CI](https://docs.travis-ci.com/user/customizing-the-build#skipping-a-build)
- [CircleCI](https://circleci.com/docs/2.0/skip-build/)
- [GitLab](https://docs.gitlab.com/ee/ci/yaml/#skip-pipeline)
- [Bitbucket Pipelines](https://support.atlassian.com/bitbucket-cloud/docs/bitbucket-pipelines-faqs/)
- [AppVeyor](https://www.appveyor.com/docs/how-to/filtering-commits/#skip-directive-in-commit-message)
- [Semaphore CI](https://semaphoreci.com/docs/how-to-skip-building-for-some-commits-with-ci-skip.html)