teleren/devto huggingface dataset:
A day with only the keyboard - no mouse!
Tags: productivity
Published: 2019-08-21 12:18:46

Today I forgot my mouse at home and thought it is a perfect fit to challenge myself at the office today to only use my keyboard!

I have a notebook with a docking station and an external keyboard I use, so just in case I could have used the touchpad.

In fact, I am writing this article the same way - using only my keyboard!

Here is the summary of my challenge to
### Only use the keyboard for one day, no mouse

#### Accessibility of websites
I noticed googles great way to support keyboard navigation for the first time after pressing `Tab` on the search results:

![Accessibility feature google](https://thepracticaldev.s3.amazonaws.com/i/r6mq34u4yi9wmdcbud8a.png)

Same goes for dev.to!
![Accessibility feature dev.to](https://thepracticaldev.s3.amazonaws.com/i/94rkbluiesk3oatbydh7.png)

Some not so great experiences were with popup windows / modal dialogs on websites that do not care about accessibility.

##### Intrusive dialogs / modals on websites
For example this dialog:
![ZDnet popup](https://thepracticaldev.s3.amazonaws.com/i/5pagt1sah1zoa1fnifvu.png)

I couldn't manage to close this dialog! How the hell am I supposed to close it, when I can't focus on anything in it only using the keyboard?!
What I did was opening the Dev Tools in Chrome (`F12`), focused the *Elements* Tab, `Ctrl+F` searching for the popup HTML element, `Shift+F10` to right click on it and deleted it from the DOM. Felt like a way too big effort only to close this dialog 😩

#### Scrolling, selecting, navigating - getting around
Fortunately scrolling, selecting stuff and navigating was very easy. What enhanced my speed was the [Vimium extension for chrome](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb) I installed after reading this very good post about it:
{% link peterfication/so-you-switched-to-vim---dont-forget-to-install-vimium-for-chrome %}

With the help of Vimium I was able to get around even faster with even less keystrokes because I didn't need to tab through all the elements to the wanted one but could select it with a combination of maximum 2 keystrokes!

![Vimium Interface](https://thepracticaldev.s3.amazonaws.com/i/id2dhkofpalok6efyaaz.png)

-------
Heres a short GIF:

![GIF of navigating with Vimium](https://thepracticaldev.s3.amazonaws.com/i/s3gqpfm7hbqm5frpf27z.gif)


#### Shortcuts I used the most this day
- `Win+B` accesses the windows tray icons! (on Windows)
- `Win+1` or any number from 1-9 starts whatever program is pinned to the taskbar at this index.
- `Win+Tab` gives an advanced application switcher interface
- `Win+L`/`F6` Focus the address bar in a browser or windows explorer.
- `Shift+F10` to simulate a right click (if you don't have a dedicated key on your keyboard)
- `F` in chrome to use Vimium
- `Ctrl+W` to close tabs
- `Win+Shift+Right Arrow` or Left Arrow to move a window from one screen to the other fast
- `Win+Ctrl+Right Arrow` or Left Arrow to switch between worspaces


###🗨Tell me about your experience preventing the use of a mouse and how successful or unsuccessful you were!
★ Supercharging common controllers
Tags: laravel, php
Published: 2020-01-02 23:33:50

---
title: ★ Supercharging common controllers
published: true
date: 2019-08-21 12:00:00 UTC
tags: laravel, php
canonical_url: https://freek.dev/1433-supercharging-common-controllers
---

From time to time our team needs to create fairly complicated CRUD interfaces from scratch. While this isn't rocket science, there surprisingly aren't that many good resource out there on how to do this. That's why our team dove in and published a couple of packages that can help create modern CRUD interface.

In this highly practical talk I gave at Laracon US 2019 you'll learn how we nowadays go about creating a CRUD interface, and structure our projects, at [Spatie](https://spatie.be). We'll take a look at how we can convert url parameters to a Eloquent query. You'll learn what view models are. We'll create some server side components with BladeX and much more.

It's guaranteed that you'll take away one or few new tricks you can apply in your projects today.

{% youtube FxACh4X-Xc0 %}

Here are some related links to check out:

- [Simplifying controllers](https://freek.dev/1324-simplifying-controllers)
- [Refactoring to actions](https://freek.dev/1371-refactoring-to-actions)
- [Organise by domain](https://stitcher.io/blog/organise-by-domain)
- [spatie/laravel-view-models on GitHub](https://github.com/spatie/laravel-view-models)
- [Laravel view models vs view composers](https://stitcher.io/blog/laravel-view-models-vs-view-composers)
- [Blade X documentation](https://docs.spatie.be/laravel-blade-x/v2/introduction/)
- [Use custom html components in your blade views](https://freek.dev/use-custom-html-components-in-your-blade-views)
- [Introducing Blade X view models](https://freek.dev/introducing-bladex-view-models)
- [spatie/laravel-query-builder on GitHub](github.com/spatie/laravel-query-builder)
- [Building APIs with Laravel Query Builder](https://alexvanderbist.com/posts/2018/builder-apis-with-laravel-query-builder)
Client Libraries for Base API
Tags: crsytal, ruby, node
Published: 2019-08-21 11:30:27

_If you don't know what Base is check out my previous post introducing it:_

{% link gdotdesign/base-api-for-authentication-email-sending-image-upload-and-more-4f1 %}

-----------

Since the release of Base a month ago I've been working on client libraries in **Ruby**, **Node.js** and **Crystal**.

They support all of the endpoints and are published on package websites and on Github too:

- Ruby - [Package](https://rubygems.org/gems/base-api-io), [Github](https://github.com/base-api-io/base-ruby)
- Node.js - [Package](https://www.npmjs.com/package/base-api-io), [Github](https://github.com/base-api-io/base-node)
- Crystal - [Github](https://github.com/base-api-io/base-cr)

There are example applications for each language as well:

{% github base-api-io/base-examples %}

Also the reference is updated with snippets for each endpoint / language combination: https://www.base-api.io/reference

I hope these client libraries are making it easy to get started with Base!

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

P.S.: I'm now working on some new features so stay tuned! 📻
Getting Started with Ruby and RVM
Tags: ruby, rvm
Published: 2019-08-21 10:48:26

---
title: Getting Started with Ruby and RVM
published: true
description: Getting started with Ruby and RVM
tags: ruby, rvm
---

As of this writing we will be using ruby 2.5.1. I am going to be walking you through how to set up our basic ruby environment using RVM and how we can easily switch between different ruby installations.

Installing RVM
--

[RVM](https://rvm.io/) is a ruby environment manager. This is an optional step in starting ruby development, but highly recommended. This will allow us to have clean ruby environments for each of our projects, regardless of version/dependencies etc.

Running the following cURL command will update our system with the latest stable RVM build.

`$> \curl -sSL https://get.rvm.io | bash -s stable --ruby`

RVM can show us all the available ruby versions that we can install on our system, from beta to stable to obsolete. Its an amazing way to handle switching different environments with ease. As of this post, the ruby install version is 2.5.1, so that is what we will be working with.

Now we want to run the rvm helper script, that will adjust our RVM installation and our path. This allows us to run rvm at the command line.

`> source /Users/corey/.rvm/scripts/rvm`

` > ruby -v
ruby 2.5.1.p57 `


This will tell us our current ruby version, which for this example is sitting at `ruby 2.5.1p57`

Now lets create a gemset, which is a unique environment that will house all our dependencies and gems.

` > rvm gemset create rails-test-api
ruby-2.5.1 - #gemset created /Users/coreyschaf/.rvm/gems/ruby-2.5.1@rails-test-api
ruby-2.5.1 - #generating rails-test-api wrappers....... `


Now lets switch to our newly created gemset

`> rvm gemset use rails-test-api
Using ruby-2.5.1 with gemset rails-test-api`
`> rvm gemset name
rails-test-api`


We are now using our newly created ruby environment. We will install some basic dependencies that we need going forward.

`> gem install bundler
fetching: bundler-1.16.5.gem (100%)
Successfully installed bundler-1.16.5
Parsing documentation for bundler-1.16.5
Installing ri documentation for bundler-1.16.5 `


This installs bundler, which we will be using in our rails install in the next tutorial.

`> gem install rails
....
...`
`> rails --version
Rails 5.2.1`



We have successfully installed our development environment and installed the newest Ruby on Rails framework.
Let's create a quick dummy Rails application just to test our install.

`> rails new demo-test
Installing ....`
`> rails s
=> Booting Puma ..
....`

Now if we go to our browser, and navigate to localhost:3000 we should see:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9j47mfdvm3c4ug1c4063.png)
Dev.to Desktop App 🎉
Tags: pwa, discuss
Published: 2019-08-21 10:36:34

I might be a little late to notice this, but PWAs can now be installed as Chrome Apps 🎉

Here's Dev Community on my desktop:

![Dev Community](https://thepracticaldev.s3.amazonaws.com/i/xvaaqlclvcmm3iltpbgn.png)

I've always had the dev.to app on my mobile homes screen and it's very exciting to have it on my desktop as well. 

What do you think?

BTW, with the latest update on Chrome (I'm on Version 76.0.3809.100 (Official Build) (64-bit)), Chrome will show an icon (a + sign in a circle) in the omnibox if a PWA meets Chrome's install-able requirements. 

And if you don't see it, you can always click the three dots menu in Chrome and click "Install Progressive Web Apps..." and it will give you a prompt to install it on the desktop, much like Add to Home Screen 🎉

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/us23hctxzwhkbqlymkea.png)
Migrate from BigCommerce to Shopify with Next-Cart
Tags: bigcommerce, shopify, migrate, datamigration
Published: 2019-08-21 10:24:14

# What data can be migrated from BigCommerce to Shopify
You are able to migrate entire eCommerce data from BigCommerce to Shopify including products, images, categories, customers, orders and reviews.

### Products
1. Product Informations, e.g. Title, SKU, Description, Regular Price and Special Price, Images, Manufacturer/Vendor, Meta, SEO (301 Redirects or Rewrite), etc.
2. Product Variants/Options. Variants Image, Prices, SKU, etc.
3. Product Links, e.g. Categories/Collections.

### Product categories
1. Category Informations, e.g. Title, Description, Image, Meta, SEO (301 Redirects or Rewrite), etc.
2. Category Parents

### Customers
1. Customer Informations, e.g. First Name, Last Name, Email, Phone, Tags, etc.
2. Customer Addresses. All addresses with full informations.

### Manufacturers
1. Manufacturer/Vendor Name is imported within Products.

### Orders
1. Order General Informations, e.g. Status, Currency, Total, Notes, Date, etc.
2. Product Details, e.g. Title, Model/SKU, Quantity, Price, Properties, etc.
3. Customer Details, e.g. First Name, Last Name, Email, Billing and Shipping Addresses.

### Reviews
1. Reviews of migrated Products. Review Details, e.g. Title, Author, Comment, Rating, Status, Date.

# How to migrate BigCommerce to Shopify with Next-Cart
Next-Cart is a shopping cart migration service allows you to migrate data from your current store to another eCommerce platform. The whole procedure can be taken in 3 simple steps:

1. Set up source and target store
2. Choose the data you want to migrate
3. Perform the migration

{% youtube akxqTjdQHKg %}

Are you interested in my video? Let try Free Demo Migration at: [BigCommerce to Shopify Migration](https://next-cart.com/product/bigcommerce-to-shopify/)

# Thank you
If you have any questions, feel free to contact us at [https://next-cart.com/contact/](https://next-cart.com/contact/), our Shopify experts are always ready to help you 24/7. Don’t forget to like and share the guide with others if it’s useful for you.

Have a nice day!
🍗Show Dev: Posting Twitter search results to Slack for free and without writing code using AWS Amplify
Tags: showdev, aws, amplify, node
Published: 2019-08-21 10:15:33

---
title: 🍗Show Dev: Posting Twitter search results to Slack for free and without writing code using AWS Amplify
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m1omv6x3fgxo9aj65fsj.png
tags: showdev,AWS,Amplify,Node.JS
---

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

# Repository
{% github howyi/tweettoslack %}
# ScreenShot
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/howyi/20190820/20190820211259.png)
# Cost
It's free because it's all within the [AWS Free Tier](https://aws.amazon.com/free/).
# Requirements
- [Slack Incoming Webhook URL](https://api.slack.com/incoming-webhooks)
  - SLACK_WEBHOOK_URL
- [Twitter API Token](https://developer.twitter.com/en/docs/basics/authentication/guides/access-tokens.html)
  - TWITTER_CONSUMER_KEY
  - TWITTER_CONSUMER_SECRET
  - TWITTER_ACCESS_TOKEN_KEY
  - TWITTER_ACCESS_TOKEN_SECRET
# Deploy
- Click the `DEPLOY TO AMPLIFY CONSOLE` button.
- After deploy, access to Lambda `tweettoslack-amplify`. and set environment variables.
  - SEARCH_QUERY: [Twitter standard search operators](https://developer.twitter.com/en/docs/tweets/search/guides/standard-operators.html)
Boolean in D
Tags: dlang, tutorial
Published: 2019-08-21 04:00:38

I recently got to work outside my comfort zone, rather than scripting in D I was to utilize Python. It has been a long time since programming in Python, I've developed a style and Python does not follow C syntactic choices. Thus I had to search on how to solve problems I already know in D. I thought it would make for an opportunity to answer those types of questions for D.

My need to specify a boolean value seemed like a good place to start. 

```dlang
bool variable = true;// false
```

D utilize lower case true/false.

It will also treat 0 or null as false.

```dlang
string str;
if(str) // false, str is null
```

Strings are special in that null or empty likely need similar logic paths. In D the following works with all arrays (string is an array) 

```dlang
import std.range;
string str;
if(str.empty) // null or "" 
```

D has custom types with operator overloading, so such a post is not complete without mentioning it. 

Classes can't override boolean and is only checking if the reference is null. However struct being a value type allow for changing behavior with `opCast`

```dlang
if (e)   =>  if (e.opCast!(bool))
if (!e)  =>  if (!e.opCast!(bool))
```
https://dlang.org/spec/operatoroverloading.html#boolean_operators

D's operator overloading relies on its powerful template system. That is out of scope for this article.
Copying objects with Object.assign()
Tags: javascript, tutorial, codepen, beginners
Published: 2019-08-21 09:51:51

The weird part of Object.assign finally cracked :-) This is a short code snippet which explains how Object.assign() works. There is some console output but everything important is already written in JS code comments. 

{% codepen https://codepen.io/Amarok24/pen/GRKNWMx %}
Webinar announcement! Bruce Tate teaches you how to get more out of OTP with GenStateMachine
Tags: webinar, livecoding, demonstration
Published: 2019-08-21 09:50:13

---
title: Webinar announcement! Bruce Tate teaches you how to get more out of OTP with GenStateMachine
published: True
description: Live coding webinar registration 
tags: webinar, live coding, demonstration,
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7c5esomkclvrtcsc6gkx.jpg
canonical_url: https://www2.erlang-solutions.com/btwebdev
series: Webinar
---

On September 4th, Bruce Tate will be hosting a live coding webinar on how to Get more out of OTP with GenStateMachine.

In this live coding session, Bruce will implement a safety protocol with a GenStateMachine. We'll live code a safety protocol for climbing and then we'll spice it up with a more flexible API, timeouts and a more secure protocol.

When we're done, you'll have a better understanding of how to:

* Work with state machines
* Build state machines that implement policy
* Tailor them to your purposes

You don't want to miss this one.

Register at https://www2.erlang-solutions.com/btwebdev
Why choose Scalable VPS Server India?

Published: 2019-08-21 09:46:14

Scalable VPS server hosting India has quickly gained huge popularity and has become one of the best and fastest growing solutions for businesses. Using a VPS service provider that enables you the ability to alter your server resources instantly can actually help you improve customer holding and service quality. HostingRaja’s VPS server enables all users to meet their individual requirements by assisting configure computing resources needed for their websites. Their quick disposal of computing resources, associated with modern grade hardware and a team of highly qualified and skilled professionals.
 
Whether you are searching for scalable VPS server India or affordable VPS plans, HostingRaja has everything for your specific needs. Their Scalable VPS server is suitable for small and mid-sized organizations that wish the possibility of expanding when required. We are fully dedicated to providing you the resources you actually need.
 
By choosing a scalable VPS server you can save money on your computing resources because you have to pay only for the resources you need and you don’t have to pay for the resources you don’t need. We have a team of expert and they will look after all features of third-party applications, software and monitor your server 24/7.
 
Their scalable VPS Hosting (https://www.hostingraja.in/)  solution enables you the ability you wish with the advantage of being capable to become larger whenever you wish.
 
When you buy scalable VPS server from HostingRaja, RAM, Disc space, CPU power, and other hardware upgrades are very easy and quick. We also provide a custom VPS server plan that is particularly tailored to your requirements. Their team of VPS experts will conduct a consultation with you and provide you with the right suitable hardware and plan.
NodeJS: How to Get External Packages / npm
Tags: javascript, node, eli5
Published: 2019-08-21 08:58:42

---
title: NodeJS: How to Get External Packages / npm
published: true
description: how to use npm
tags: javascript, node, eli5
series: Intro to NodeJS
---

## Intro

So we [installed NodeJS](https://dev.to/miku86/what-is-nodejs-how-to-install-it-1900) on our machine.

Because there is already a lot of code out there in the internet, we can use other peoples' code so we do not have to reinvent the wheel to solve problems, that are already solved.

In order to easily get solutions from other people, we can use a tool called npm.

This will be a short intro to npm with the most used commands.
If you want to learn some advanced concepts, read the [npm documentation](https://docs.npmjs.com/).

---

## What is npm?

- npm is a package manager for JavaScript packages
- npm is the world’s largest software registry
- npm comes with the NodeJS installer, so if you already [installed NodeJS](https://dev.to/miku86/what-is-nodejs-how-to-install-it-1900), you already have npm on your machine
- you download packages with the command line interface
- you get information about packages through the [npm website](https://www.npmjs.com/)

---

## How To Install npm?

If you already [installed NodeJS](https://dev.to/miku86/what-is-nodejs-how-to-install-it-1900), you already have npm on your machine.

To check, if npm is installed:
`npm --version`

---

## How to Get External Packages?

Most of the time, you want to use packages project-wise.

1. Initialize a npm project in an existing folder: `npm init`. This will create a `package.json` file, where all your settings will be saved.
2. Answer all questions like `package name`, `version` etc. You can read about the correct answers [here](https://docs.npmjs.com/files/package.json)
3. Go to [npm](https://www.npmjs.com) and search for a package, e.g. ["text color"](https://www.npmjs.com/search?q=text%20color).
4. You will get a list of matching packages, click on the link to the package and read the documentation, e.g. the package ["chalk"](https://www.npmjs.com/package/chalk).
5. Most of the time, the documentation will give you an appropriate [command to install the package](https://www.npmjs.com/package/chalk#install), e.g. `npm install chalk`. If you want to see all the possibilities how to `npm install` a package, read [the npm install docs](https://docs.npmjs.com/cli/install).
6. The package gets downloaded, you have to wait for some time.
7. Read the package documentation to learn [how to use the package](https://www.npmjs.com/package/chalk#usage).

---

## Additional Commands

If you want to learn additional commands, e.g. uninstall a package, [read the documentation](https://docs.npmjs.com/cli-documentation/)

---

## Further Reading
[npm Homepage](https://docs.npmjs.com/about-npm/)
[npm install Docs](https://docs.npmjs.com/cli/install.html)
[npm on Wikipedia](https://en.wikipedia.org/wiki/Npm_(software))

---

## Questions

- What beginner's problem would you have liked to have solved here as well?
- Are the instructions clear, understandable and comprehensible?
~The baby is typing~ #1 Five websites every developer should know
Tags: webdev
Published: 2019-08-21 08:55:36

Hello, this is the first article from ~the baby is typing~, in this article we'll talk about five websites every developer should know because it will help you a lot in your work.

LET'S START:-

1- Dev: 
of course you know dev.to but I wanna see you that this is the best website for developers.

2- SmashingMagazine:
This is an old website has a wonderful articles and you will get a secrets from it.

3- Codrops:
This is the best website of me because it have a lot of examples with the demo and you can download the code, and it has a page for CSS reference.

4- WebDeisgnerNews:
from its name you can know what it does, you can subsecribe in this site and will send you news in your email.

5- UxMovement:
this is the best website I knew in user experience it will help you and give you a lot of articles.

At the end I hope this article helped you.

did you know why these articles called `The baby is typing`? tell me in the comments.
Join Our Programming Community 
Tags: programming, coding, technology, development
Published: 2019-08-21 08:49:49

Become one of our earliest members to help bootstrap a unique programming community within a larger game changing social network like community. Join an open-minded, inquisitive community of individuals debating, discussing, analyzing, questioning, sharing ideas on programming, coding, technology, software development, software engineering and related topics, get rewarded, get recognized for your thoughts and input. Find out more follow me on Twitter @Zed_Developer DM me your email address on Twitter to join community!