teleren/devto huggingface dataset:
What is Rails?
Tags: ruby, rails, webdev
Published: 2020-10-21 14:14:03

Ruby on Rails is a web framework that provides developers the tools they need in order to build applications. Rails is written in the Ruby programming language and it is incredibly smart because it makes assumptions about what every developer needs. Rails is a very fun framework to work with because it is just so powerful, and you can accomplish more with less code.

If you ever run into any issues when building your application, Rails has comprehensive documentation for (almost) every aspect of Rails. Refer to their documentation if you ever feel really stumped. 

The Rails philosophy includes two major guiding principles:

I've heard these concepts come up a lot during bootcamp, the first concept is D.R.Y., which is an abbreviation for "Don't Repeat Yourself". This is a huge principle of software development which states that "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system." Ruby makes your life as a developer very easy because you can achieve a lot with less code and by not writing the same information over and over again, your code is more maintainable, more extensible, and there are far fewer bugs. It astonished me what you can "DRY" up in Ruby, one line of coders are a frequent occurrence in my [Travelgram](https://github.com/ameerrah9/Travelgram) application.

Another really important principle is "Convention Over Configuration". Rails has opinions about the best way to do many things in a web application and defaults to a simple set of conventions.

Rails is an open-source software, so it free to use! Check out this video to learn more on Rails: https://youtu.be/OaDhY_y8WTo

If you've heard of any of these known apps, you probably wouldn't know they were all built with Rails:
Shopify, Airbnb, Twitch, SoundCloud, and Hulu.
My Top 5 Resources to Learn Internet of Things
Tags: programmers, resources, lists, arduino
Published: 2020-10-21 14:08:37

Hello Developers,

It's been a while since I shared something useful with the #DevCommunity. I have been learning so many new technologies like IoT, AR, VR and making projects with them.

One of the very interesting technology we have is **Internet of Things**.

As per definition, It means,
> Internet of Things describes the network of physical objects — “things” — that are embedded with sensors, software, and other technologies for the purpose of connecting and exchanging data with other devices and systems over the internet.

In short, You can remember - *Giving Internet to the things around you*.

It can be lights, fans in your house or anything which has the potential to be remotely utilised.

I have prepared a list of resources which you can also use to get started in Internet of Things. Here are the top 5:-

### **1. An Introduction to Programming the Internet of Things (IOT) Specialization by Coursera.**

This is a Programming based Coursera course which is free to enroll into! Coursera has good quality of videos and fine syllabus coverage.

Here is the link to the course - https://www.coursera.org/specializations/iot

### **2. Introduction to Internet of Things by NPTEL India.**

On NPTEL, which stands for National Programme on Technology Enhanced Learning, You can learn IOT for free from experts of **Indian Institute of Technology Kharagpur** which is recognised as an Institute of National Importance.

Here is the link to the IoT course by NPTEL which is available to view on youtube too - https://nptel.ac.in/courses/106/105/106105166/

### **3. Arduino Projects | Full Tutorial by Youtuber, IndianLifehacker.**

This is an amazing playlist with easy to understand and implementable tutorials. You will actually learn a lot from it.

You can access it here - https://www.youtube.com/playlist?list=PLKASro0L7R2XA4I8bJpARx9vq9hSyos7l

### **4. Wifi based home automation system over cloud using Arduino by Microcontrollerslab.**

These are short yet detailed tutorials. The website in itself offers great guides on [Arduino](https://www.arduino.cc/).

Link to resource - https://microcontrollerslab.com/iot-based-home-automation-system-wifi/

### **5. Home Automation Using Google Assistant by @myengstuffs on @Hacksterio.**

For my college project, I made this one and it was super fun to build. The videos are insightful and really good.

Here is the link to it - https://www.hackster.io/pawan-kumar3/home-automation-using-google-assistant-88c5c8

---

I hope that these resources will help you learn Internet of Things as they did for me. For all the IoT resources, I would recommend you to take a look at [the full resource page which has a lot more tutorials of IoT](https://learningin.tech/InternetofThings).

If you know of any resource, let me know as well :)

Have a good day!
Gutenberg: My First Extension ever for printing markdown books in VSCode
Tags: vscode, gutenberg, markdown
Published: 2020-10-21 14:00:14

---
title: Gutenberg: My First Extension ever for printing markdown books in VSCode
published: true
description: 
tags: vscode, gutenberg, markdown
cover_image: https://upload.wikimedia.org/wikipedia/commons/b/b6/Gutenberg_Bible%2C_Lenox_Copy%2C_New_York_Public_Library%2C_2009._Pic_01.jpg
---

Is fair to say that many people like markdown for documentation, and technical writing, github, and even right now I am writing markdown for this post, [insert recursion joke here]. For me it clears the mind, and lets you focus on writing, and not focus on formatting like some other programs such as Word do.

I had written a [markdown-book script](https://github.com/TheFern2/markdown-book) for a book I am writing, and is awesome, but I wanted to take it one step further.

I must say I started working on this, just to see what it takes to make an extension, there might be something like it already but most of the extensions I came across were for single files. Nevertheless it was an awesome experience to extend vscode functionality, and learn the whole process of making an extension in JS which is out of my comfort zone.

[Marketplace Gutenberg](https://marketplace.visualstudio.com/items?itemName=TheFern.vscode-gutenberg) can print a book and single files, much like the Gutenberg printing press could back in the good 'ole days. It can be configured to take more arguments if you are an experienced pandoc/latex user, and it can output just about anything that pandoc supports. I mainly tested with markdown(md) input, and pdf/docx/html output.

[Full Repo Gutenberg](https://github.com/TheFern2/vscode-gutenberg)

Let me know what you think, and try it out if you can, feedback is welcomed. If you use a Mac and have pandoc and latex or miktex installed please let me know how it went as I don't have a mac to test it on.

PS: Btw I had never written an extension for anything before, but I must say that vscode api documentation is great.

Resources:
- https://code.visualstudio.com/api/get-started/your-first-extension
- https://code.visualstudio.com/api/references/vscode-api
- https://code.visualstudio.com/api/working-with-extensions/publishing-extension
Vue 3 - Breaking changes, New features & steps to Upgrade from Vue 2 to Vue 3
Tags: javascript, vue, tutorial
Published: 2020-10-21 13:51:14

Vue 3 is here and everybody is searching for an approach to migrate and start using it as soon as possible.  There are several new features yet additionally a lot of work done to improve performance and bundle size that makes this version a real candidate for the best client-side framework out there.

New syntax, deprecations, and some breaking changes may make your migration plan somewhat harder than anticipated.  Let’s dive in and see what you should expect.

{% youtube FXsWed7Nc2o %}

## Mounting
The first thing that you will encounter is the difference in initializing your app.

**In Vue 2:**
```
import Vue from 'vue'
import App from './app.vue'

const app = new Vue({
  render: (h) => h(App),
}).$mount('#app')
```
**In Vue 3:**
In Vue 3 this is simplified with a more elegant syntax
```
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
```

## Fragments

In Vue 2, multi-root components were not supported.
```
<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
```

Now in Vue 3, components now can have multiple root nodes.
```
<!-- Layout.vue -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>
``` 

## Event Bus
$on, $once, and $off methods are removed from the Vue instance, so in Vue 3 it can’t be used to create an event bus. Vue docs recommend using [mitt](https://github.com/developit/mitt) library.

## Filters
In Vue 3 filters are removed! You can actually implement the same functionality in a small plugin but the fact that the pipe of the filter conflicts with the Javascript bitwise operator means that expressions with filters are not valid. That's why the recommendation is using a method instead.
I want to find new ways of marketing my startup
Tags: startup, marketing
Published: 2020-10-21 13:50:23

---
title: I want to find new ways of marketing my startup
published: true
description: Side projects are an underestimated and hence, underused method of marketing your startup. What is it? Build small projects around what your potential customers might find useful and market your startup subtly through it.
tags: startups, marketing
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cjq80vae7ztezat6t9xj.png
canonical_url: https://2.flexiple.com/no-vc-reports/i-want-to-find-new-ways-of-marketing-my-startup
---
Sure, SEO, social media, etc. are extremely important. However, since they are highly contested channels, you need some trump cards to help you find regular spikes of growth in your early days. Using side projects to give consistent boosts to your startup is a great way to do it.

**What is a side-project?**
In a nutshell, it involves building small projects around what your potential customers will find useful and then marketing your startup subtly through them.

Side projects aren't meant to replace the conventional marketing methods, but to supplement them. But how do you go about this? 

 I broadly breakdown the process into three steps:

1. **Finding the idea:** Pick something relevant to your audience (not necessarily your industry), which can be built with the resources you already have.

2. **Packaging it into something marketable:** Eye-catching stuff do better. So, you need to package your information. Amazing tools exist to convert even simple google sheets to beautiful products.

3. **Marketing your startup subtly:** Of course, this is the main goal. But this is an art and doesn't involve dumping loads of links.

I discuss all this in quite a bit of detail and also the tools to make this process easy for you, in [this report](https://2.flexiple.com/no-vc-reports/i-want-to-find-new-ways-of-marketing-my-startup). Do give it a read. Just 5 mins from your schedule - please :).

If you like the report, do support me on Twitter - I usually wait for you to give me a like :).


{% twitter 1318893369905487875 %}
Building a Rails Application
Tags: ruby, rails, webdev, webapp
Published: 2020-10-21 13:48:13

The Travelgram App was built using the Ruby on Rails framework and no scaffolding was used to build my project. This app was created with the intention to help travelers blog about their experiences.

Rails comes with scripts called generators that are designed to make your development life easier by creating everything that’s necessary for you. The generator I used was the new application generator. The new generator will provide you with the foundation of a fresh Rails application so that you don’t have to write it yourself.

To use this generator, I opened up my terminal, navigated to my project directory, and typed the following command:
```
$ rails new Travelgram
```
Building a blog with comments using Ruby on Rails is a foundational exercise I went through to learn more about the framework. Ruby and Rails allowed me to generate a fairly simple MVC pattern built on top of a CRUD approach when working with dynamic data.

When building a Rails app I struggled a lot with routing. Most developers struggle with understanding routes like I did. A lot of the time it was simple syntax errors and not knowing what was being passed through to my views.

Understanding the routing process made it a lot easier for me to build successfully. Another key struggle was with styling and CSS. This was a personal issue for me not so much as a technical issue. I wanted my application to look a certain way so that my user could get a certain feel when interacting with my application.

Luckily the developer network is very useful in that if you need help you can find a useful resource. Rails has really great documentation (https://guides.rubyonrails.org/) for developers, so it makes the process really fun when you run into an issue.

Feel free to check out my application, I have linked my repository (https://github.com/ameerrah9/Travelgram)! Happy coding!
Making SetTimeout Async Friendly
Tags: javascript, webdev, node, todayilearned
Published: 2020-10-21 13:46:38

I *love* using the Async/Await syntax in ES6+ javascript. It keeps things simple and clean. I try my damndest avoid callbacks where possible in my code (unless a library I'm using expects or uses them--like with Express.js.) 

I just want to say, I am by no means the author of this snippet, nor the first person to think it. Still, this is one of my favorite helper functions and I thought, why not share it--might make someone else's life easier too.

```javascript
export const asyncTimeout = (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};
```

A simple function, that simply takes in the amount of milliseconds you wish to wait as a parameter. We then immediately return a new Promise, which is resolved when setTimeout completes. 

In action, it may look like this.

```javascript
async function doStuff() {
// doing stuff up here...

await asyncTimeout(1000);

// After waiting a second, continues doing stuff.
}
```
If anyone else has any awesome async helper functions they use, please share them!
My thoughts on Hacktoberfest 2020
Tags: hacktoberfest, opensource
Published: 2020-10-21 13:45:23

## Background

I normally don't write code for open source. But a coworker mentioned they had participated in this event last year. In return you get free swag and discount coupon(s) for Digital Ocean resources after completing the challenge.

This caught my interest because it was a great opportunity to learn what all the fuss was about, and get some free stuff at the same time. It was an incentive that got me to step up to the challenge.

But besides that; I already have a badge on my public GitHub profile as an "Arctic Code Vault Contributer" but the amount of contributions I made were barely satisfactory (to the best of my expected level, personally I had felt). So I had no excuse not to join.

## What I liked about this event

What I didn't expect was after collaborating with other developers, sharing code online to discuss & review infact felt **really good** (as well as reviewing code in projects I maintain myself).

I could pick whichever repository I want that caught my interest and do my changes, and if I achieved the goal from what those maintainers requested then awesome! I've made a contribution.


## What next?

Hacktoberfest is just the beginning for me. I've been a developer for 7+ years and majority of the time I had contributed to mostly closed source development.

My goal now is to find projects I'd be interested in, learn more about them and their purpose and find an area to challenge myself and contribute back. At the same time I will grow my skills set & keep learning.

## What I Learned From Hacktoberfest

Being a first time open source contributer felt amazing, and while at first it's intimidating, if you take the time to look for projects or issues that match your skill set (or slightly higher), challenge yourself to make the contribution you can learn, grow and realize that actually open source development isn't all that scary or unrewarding at all and infact the opposite. And most importantly it's fun when you do it at your own pace!
Proof Keyoxide Dev.to
Published: 2020-10-21 13:43:52

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/694B7227D97974AD8345EBA53C9ABB5CFEBFED5D) to [this dev.to account](https://dev.to/carbans). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:694B7227D97974AD8345EBA53C9ABB5CFEBFED5D]
Write Negative API Tests
Tags: javascript, api, testing, tutorial
Published: 2020-10-21 13:22:18

So far we have written all the positive/happy path test scenarios, in this post, we'll take a look at how we can write a few negative API tests to ensure our APIs are secure and functioning as they should.

Let's take a look at some examples -

**Unauthenticated Test**
Create a test to ensure the user cannot hit the APIs without being properly authenticated.

```javascript
it('401 Authentication Failed', async () => {
  // sending request without the Authentication Token
  const postRes = await request.post('posts').send(data);

  expect(postRes.body.code).to.eq(401);
  expect(postRes.body.data.message).to.eq('Authentication failed');
});
```

**Validation Failed**
Create a test to ensure the user should not be able to create data without passing in the required fields.

```javascript
it('422 Validation Failed', async () => {
  // 'body' is a required field which is not being passed with the data
  const data = {
    user_id: userId,
    title: 'My title',
  };

  const postRes = await request
    .post('posts')
    .set('Authorization', `Bearer ${TOKEN}`)
    .send(data);

  expect(postRes.body.code).to.eq(422);
  expect(postRes.body.data[0].field).to.eq('body');
  expect(postRes.body.data[0].message).to.eq("can't be blank");
});
```
***

#### Check out this video to see how to implement the above test scenarios:

{% youtube SUz1_vhqLkY%}

You can also clone the [GitHub repo](https://github.com/automationbro/JavaScript-API-Automation-Tests) to access this code

***

#### To learn more about API testing, check out my free tutorial series here - 
https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV&ab_channel=AutomationBro
***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
Support my work - https://www.buymeacoffee.com/automationbro
Follow [@automationbro](https://twitter.com/automationbro) on Twitter
5 Ways To Optimize Your Website’s User Experience And Boost SEO
Tags: ux, discuss, webdev
Published: 2020-10-21 13:16:52

Search engine optimization is closely connected with consumer experience. It is no secret that Google needs to provide its customers with web pages offering them a positive experience, internet pages which supply them with all the answers and solutions that they were looking for at the first place.But while some site owners know UX plays a job, [website design business in Canada](https://www.propelguru.com/website-development/) may underestimate exactly how significant it is.

**Let us have a peek into how to enhance UX for SEO:**

**Make it obvious exactly what the page is all about**

The moment a visitor arrives on your own website from the search engine, then be it clear to them wherever they're. This means telling the reader what the webpage is about.Use that the H1 tag to rapidly describe just what the webpage supplies.

Visitors will visit the header before anything else, and they would like to be aware that the page includes the information that they are searching for. The H1 tag must create this clear.Also, utilize different headings to divide the material. Visitors will frequently scan these key words, so use these to offer a very clear breakdown of the articles and make it obvious you've got the option they are seeking.

**Deliver along with your articles**

When the visitor begins studying, they'd better find what they're searching for.That means content that's focused, persuasive, and so forth.

Additionally, you will need to be certain that the name tag is pertinent to the search query in addition to the articles on the webpage. Make the experience easy so you not only draw traffic from search but supply them with precisely what they need.

**Optimize for rate**

Lean code, compressed pictures, and a quicker web host are simply a couple of the probable solutions.

**Boost navigation**

Visitors will often scan the navigation if they land to a webpage, and thus don't conceal what you provide. Display your answers obviously --you could provide more than 1 thing they are searching for, and decent navigation is necessary if you would like to direct them to the ideal place on your website.

**Ensure it looks great**

Your website should also look great. Do not underestimate the value of web development and design in regards to enhancing the consumer experience. A skilled and persuasive design which makes the site enjoyable and easy to use is vital. The customer should feel as they are on a website they could trust to supply them with the answers they want.

**Conclusion**

If you don't offer a fantastic experience on mobile, your website will suffer in both desktop and mobile search after Google's mobile-first indicator comes in to effect.
👩‍💻 My favourite VSCode Extensions [2020]
Published: 2020-10-21 13:13:03

# Prettier - Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Download it [here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

# Indent Rainbow
This is a great extension that allows you to colorize the indentation in front of your text alternating four different colors on each step.

Download it [here](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow).

# Live Sass Compiler

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

Download it [here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass).


# Live-Server

One of the best extensions ever made. It launches a development local Server with live reload feature for static & dynamic pages.



Download it [here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).


# IntelliSense for CSS class names in HTML

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

Download it [here](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion).

# colorize

Instantly visualize css colors in your css/sass/less/postcss/stylus/XML... files. This extension your styles files looking for colors and generate a colored background (using the color) for each of them.

Download it [here](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize).

# Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

Download it [here](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

# Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Download it [here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)