teleren/devto huggingface dataset:
Login Form Using SCSS
Tags: scss, css, html, beginners
Published: 2020-05-29 05:59:08

Here we used SCSS(CSS Preprocessor) to make this beautiful login form with the help of HTML tags. As we previously made so many login forms in CSS, Bulma, and bootstrap but we try and make simple login forms in SCSS.

What is SCSS?
SCSS is an advance CSS Preprocessor to make websites in less use of CSS and classes. Using this SCSS you can reduce your time and you can make an attractive website in SCSS. SCSS has awsome good features to make or you can reuse the same class anywhere in your SCSS files.

Also, SCSS has a function to make any kind of odd/even class for padding and margin and SCSS has nesting and loop features. SCSS has various features that you can use anywhere in your SCSS file just you have to write variable with value in a top SCSS file. SCSS is a powerful and professional SCSS extension language.

In this login form we used SCSS features like nesting, variables, and To make responsive we also used media quires.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Download Source code](https://w3hubs.com/login-form-using-scss/)
Online Editors (codesandbox is my best)
Tags: codesandbox, html, css, onlinecoding
Published: 2020-05-29 05:58:25

In this lockdown, I've committed to a lot of projects and I feel I have worked on none of them - sad right :cry:!!!

Well, I redeemed myself in some voluntary online lessons I'm carrying on with a team and it has @chrosbie(her dev.to account, twitter handle) and other facilitators.
Last Saturday I led a class on Introduction to HTML and I believe it was a success(hopefully). Later in the week, I set some exercises for my students.

As any good teacher would be, I had to go through the assignments I gave my students and one of them was using online editors like [codesandbox](https://codesandbox.io/), [codepen](https://codepen.io/),[Glitch](https://glitch.com/),[jsfiddle](https://jsfiddle.net/) etc

So I went through the different online editors and so far, codesandbox is my best, WHY???
It is because of the following reasons:-
* You can create any project be it a static page(HTML) / Vanilla js or in any framework, cool right :+1:!!!
* Can `create` a Github repo (Export to GitHub), yes, without leaving the site but doing it codesandbox itself.
* Can `import` an existing GitHub repo.
* Can still `create Github pages`, oh this is so cool :blush:.
* Then you can `commit` changes to your repo, create a pull request(PR).
* Can go live - `create a live session` and share the link with your colleagues.
* Can `publish your project to Netlify` - Oh yes, this is the super coolest  :smiley: feature for me.

> Feel free to checkout my codesandbox projects on [Lailah Grant](https://codesandbox.io/u/lailahgrant) , my GitHub repo on [my W3 schools recap](https://github.com/lailahgrant/lailahgrant.io.w3schoolsNext/tree/master/), my GitHub Page on [my W3 schools recap](https://lailahgrant.github.io/lailahgrant.io.w3schoolsNext/)


**Go check [codesandbox](https://codesandbox.io/) out, discover/explore cool features by yourself and it will be the best experience ever.** :grinning:

*Thanks for your `time`, `stay safe`, `social distance` and `wash` your hands*
Friday Quick Tips — Use package.json As a Shortcut Holder
Tags: productivity, webdev, node, javascript
Published: 2020-05-29 05:51:52

Really quick tip for today.

I've been programming using Node.js for quite a while now. Six, seven years? Damn. And only in recent projects I've started to «save» common scripts as a yarn «shortcuts». Damn++!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lva87jxykww6eaa41py0.jpg)

It's extremely simple. Simple as that:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h256tze99xnz8xc9u1dz.png)

Every morning it makes me a couple of presses away from a Carpal tunnel syndrome! Nice!

That's it. That simple tip.

Yours, truly, RG, on his way from [consumer to creator](https://blog.swingpulse.com).

Save the clicks for something more meaningful!
Template Strings
Tags: javascript, react, node, webdev
Published: 2020-05-29 05:06:16


ES6 template strings, denoted by backticks rather than single or double quotes, enable multiline strings, expression substitution, and tagged templates.

### Multiline

All whitespace characters in backtick template strings are preserved, so no extra formatting is required for multiline strings.

```js
var address = `29 Acacia Road,
Nuttytown,
England`;
```

### Expression Substitution

Template strings are able to evaluate any expression against values in their current scope using `${}` syntax.

:warning: Be careful when building strings in this way from user input since you may introduce injection vulnerabilities, see tagged templates below for an alternative approach.

```js
var name = 'Billy';
var born = 1992;
var now = () => new Date().getFullYear();

var message = `${name} is ${now()-born} years old`;
// 'Billy is 23 years old'
```

### Tagged Templates

Tagged templates provide an abstracted and safer approach to string concatenation with dynamic values. They work by providing a layer of syntactic sugar over the process of implementing template generating functions. These functions are referred to as "template tags".

By using the ``func`some string`;`` syntax we invoke a template tag, that is a function to be run in order to process a template string. The template tag function receives the plain string parts and evaluated expressions in separate ordered arrays to be combined in a controlled manner, rather than blindly concatenated.

Template tags could be used by libraries to variously escape user input, strip tags, perform internationalization or provide any other string-based functionality via an arbitrary DSL.

```js
function foo (literals,...values) {
    console.log(literals); // ['',' is ',' years old']
    console.log(values); // ['Billy',23]
    return 'foo';
}

var name = 'Billy';
var born = 1992;
var now = () => new Date().getFullYear();

var message = foo`${name} is ${now()-born} years old`;
// 'foo'
```
Happy Coding 😀
Generous SQL (or NoSQL) hosting similar to MongoDB Atlas? 
Tags: database, discuss, help
Published: 2020-05-29 04:44:59

MySQL hosting should be quite popular, but I don't know whom I can trust. (I cannot trust Google results.) 

Heroku PostGRES is limited to 10k rows, but MongoDB Atlas is already 500 MB free.

MariaDB or non-SQL like Neo4j might also be considered.

Actually in the end, I don't mind paying, because one needs data integrity as well as scaling, anyway.
🛑🛑 How To Use DevTools As an API Tester?
Tags: testing, tutorial, beginners, webdev
Published: 2020-05-29 04:41:22

In this video of 30 Days of API Testing Challenge, I am going to discuss How To Use Dev Tools As an API Tester?

### What is Chrome DevTools?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

[![30 Days of API Testing](https://i.imgur.com/1N8tvcg.png)](https://youtu.be/LUYFsouCGgo "30 Days of API Testing")


🚀 Day 29 Task:  API Testing: How to Use Dev Tools?

🚀 Thread:  https://scrolltest.com/api/day29

🚀 All Task List: https://scrolltest.com/api/task

🚀 Watch Full Playlist: https://apitesting.co/30day

## 🚀 Mastering API Testing -  https://www.learnapitesting.com
How to group multiple different tables for a Many to Many Relation
Tags: help
Published: 2020-05-29 04:11:04

---
title: How to group multiple different tables for a Many to Many Relation
published: true
description: 
tags: help
---

Hey all, I'm working on a project an I needed some help in the database design.
The project is a platform in which the user can upload a video, write a blog, or create a course.
Each of them has its own table without any connections, but now I need the user to be able to bookmark the content.

The question is, should I make a separate bookmark table for each content type? I was also thinking to make a table called **content**, that contains only an id field, then each of the content types will add a **contentId** field as a foreign key (or maybe also a pk), now I can make a bookmarks table containing a **userId** and a **contentId**, but I think I'll have a hard time querying the bookmarks and trying to find the data of the content.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bd6cwfldzdalmq20ay93.png)

I'll really appreciate your opinion on this, thank you all.
What do you look for in a course/tutorial?
Tags: discuss, webdev, tutorial, javascript
Published: 2020-05-29 03:59:28

---
title: What do you look for in a course/tutorial?
published: true
description: 
tags: discuss, webdev, tutorial, javascript
---

Anybody here written a course before? Some suggestions & tips would definitely help. 

Me and @mddanishyusuf collaborating on writing a course to help people get started on making APIs.
How do I go about learning new Tech?
Tags: technology, productivity, codenewbie, learning
Published: 2020-05-29 03:47:42

Recently I have been coming across a few questions/posts on twitter and college slack group as to how does one go about learning new things. I thought upon it as to why is this question so important and I realized that many times we start learning things the wrong way and end up wasting a lot of time. So, I thought of penning down my way of learning new tech/things and my opinions on it.

*Whenever I wish to learn new things, I go as per the following steps:*

**1. Watching videos to get an overview of the tech.**
**2. Reading articles/documentation to get a deeper idea of the concepts.**
**3. Trying to code what I learned.**

It usually does involves going through multiple resources until you find an interesting one. But in that process too, you learn something or the other. 

In tech, there are new versions coming up rapidly and anyone who wishes to dive into learning something gets confused as to how and from where to start. My approach has been - when I am more concerned about the implementation then I try to go over relatively new articles on the topic but when I wish to understand it deeply then I prefer understanding as to where it came from and how it changed over time and understanding those reasons I guess helps to understand it better. *For example, people starting with react also tend to learn redux and they start working on it - this would come under the first approach. The second way is - redux is basically for state management, so to understand it better It would be amazing if you understood why the requirement was felt and how we saw changes in state management libs - flux, reflux, redux, and we now have more of such coming up.* So if one gets the core idea of it then it becomes very easy to follow it up and learn things more efficiently.

When things are relatively new, then documentation is the best source. Because all the articles on it won't be much well versed as there hasn't been enough time for anyone to explore it much. *For example: when I started learning hyperledger it was very new and there weren't any videos or anything on it and documentation helped me pretty much. If at times I struggled,  then I used to try to contact people who have contributed to it via LinkedIn or Twitter.*

The same goes for Deno for now, it is very new - v1 was released on the 13th of this month. My approach to look into it was:

1. Understanding why was Deno needed when we already had node working so well. ( As the same person who made Node.js, developed Deno too).
2. Saw a couple of videos on it to get an idea if it.
3. Looked into the documentation a bit. ( and that probably is the best resource for now if anyone wishes to learn it)

*So yeah, This is pretty much how my learning methodology has been for exploring new tech.* The most important thing is to keep on learning and our process keeps on getting better with time and experience. 

**Would love to hear all of your methods and opinions** :)
What's It Like Working at a Startup?
Tags: discuss, watercooler
Published: 2020-05-29 03:33:33

---
title: What's It Like Working at a Startup?
published: true
description: 
tags: #discuss #watercooler
---

I've always been curious as to what it's like working at a startup. Is there a freedom associated with sometimes not having to focus on immediate profits and instead building a userbase? How much of the perceived craziness of Silicone Valley is accurate?

 I'm really interested to hear all of your experiences.
Unconventional experiment - prelude
Tags: showdev, javascript, speech
Published: 2020-05-29 03:20:58

The code will not win any awards for efficiency but i'm happy to have done a simple exercise in Javascript & HTML. Also, created one sample for text to speech (tested on Chrome). This is the first post in the unconventional-uses-of-speech-processing/synthesis series.

[Gist link](https://gist.github.com/vinayakpahalwan7/27176f26671e04e1b3e1823367343c8b)

{% vimeo 423878744 %}
Express not reached
Tags: webdev
Published: 2020-05-29 01:15:49

---
title: Express not reached
published: true
description: 
tags: web development 
---

Hey guys,
I'm trying to send a post request to the node server but it's not able to reach. Can anyone please help me out as to why this is happening?
This is the code for server
```
const express = require("express");
const app = express();
const mongoose = require('mongoose');
const port = process.env.PORT || 4000;

require('dotenv').config();
app.use(express.json);

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {useNewUrlParser: true, useCreateIndex: true});

const connection = mongoose.connection;
connection.once('open', ()=>{
    console.log("Mongo db connected successfully")
});

const postsRouter = require("./routes/posts");

app.use("/posts", postsRouter);

app.listen(port, ()=>{
    console.log(`Connected and listening at port ${port}`)
})
```
And this is for post
```
const router = require("express").Router();
let posts = require("../blog.model");

router.route("/").get((req, res) => {
    posts.find()
    .then (users => res.json(users))
    .catch (err => res.status(400).json("Error" + err));
}) 

router.route("/write").post((req, res) => {
    const title = req.body.title;
    const content = req.body.content;
    const date = new Date();

    const newPost = new posts({title, content, date});

    newPost.save()
    .then(() => console.log('Post added!'))
    .catch(err => res.status(400).json("Error" + err));
})
module.exports = router;
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t9h9559kukzro5nqktaf.png)
Setting Alternate Colors for Excel Rows in Java Application
Published: 2020-05-29 02:55:08

When manipulating Excel documents, we can make the data display clearer by setting alternate colors for adjacent rows in Excel. Beyond that, setting alternate colors can also prevent us from misreading the rows and increase the aesthetics of the Excel table. This article will demonstrate how to to set alternate colors for Excel rows through conditional formatting using Free Spire.XLS for Java.

**Installation** 

**Step 1:** Download the [Free Spire.XLS for Java](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it. 

**Step 2:** Add the Spire.Xls.jar file to your project as dependency. In addition, you can also add the jar dependency to maven project by adding the following configurations to the pom.xml.

```java
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.xls.free</artifactId>
      <version>2.2.0</version>
   </dependency>
</dependencies>
```


**Setting alternate colors:**

```java
import com.spire.xls.*;

import java.awt.*;

public class ConditionalFormatting {

    public static void main(String[] args) {

        //Create a Workbook object
        Workbook workbook = new Workbook();

        //Load a sample document
        workbook.loadFromFile("Input.xlsx");

        //Get the first worksheet
        Worksheet sheet = workbook.getWorksheets().get(0);

        //Get the data range
        CellRange dataRange = sheet.getAllocatedRange();

        //Set the back color of even rows to light gray using conditional formatting
        ConditionalFormatWrapper format1 = dataRange.getConditionalFormats().addCondition();
        format1.setFirstFormula("=MOD(ROW(),2)=0");
        format1.setFormatType(ConditionalFormatType.Formula);
        format1.setBackColor(Color.LIGHT_GRAY);

        //Set the back color of odd rows to yellow using conditional formatting
        ConditionalFormatWrapper format2 = dataRange.getConditionalFormats().addCondition();
        format2.setFirstFormula("=MOD(ROW(),2)=1");
        format2.setFormatType(ConditionalFormatType.Formula);
        format2.setBackColor(Color.orange);

        //Save the document
        workbook.saveToFile("AlternateColor.xlsx", ExcelVersion.Version2016);
    }
}
```

**Outputs:**

![](https://user-images.githubusercontent.com/63445660/83215873-81075b80-a19a-11ea-9c12-3a98c4048813.png)
Looking for C# Open Source Projects for a 1st Time Contributor
Tags: discuss, csharp, beginners
Published: 2020-05-29 02:51:57

Hey awesome devs at DEV. I have an acquaintance that is looking at getting into open source via a C# project. Any recommendations for projects that have good first issues, documentation updates etc.?

I've been out of the .NET landscape since 2016, so I'm a bit out of the loop in regards to all the open source stuff happening in the .NET ecosystem.

Maybe @turnerj or @integerman have some ideas?

Photo by [AbsolutVision](https://unsplash.com/@freegraphictoday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/ideas?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Cheatsheet for Entity Framework Core
Tags: cheatsheet, efcore, dotnet, cli
Published: 2020-05-29 02:14:43

# EF Core Command from Package Manager Console (PMC) / .NET CLI
*Reference*
- *https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=vs*
- *https://docs.microsoft.com/en-us/ef/core/modeling/entity-properties?tabs=data-annotations%2Cwithout-nrt*


| PMC | .NET CLI | Usage |
| ----------- | ------------------- | ----- |
| Add-Migration <migration name> | Add <migration name> | Creates a migration by adding a migration snapshot. |
| Remove-migration | Remove | Removes the last migration snapshot. |
| Update-database | Update | Updates the database schema based on the last migration snapshot. |
| Script-migration | Script | Generates a SQL script using all the migration snapshots. |

## Code First
``` bash
# PMC
PM > Add-Migration InitialCreate
PM > Update-Database
PM > Remove-Migration
PM > Script-Migration

# .NET CLI
> dotnet ef migrations add InitialCreate
> dotnet ef database update
> dotnet ef migrations remove
> dotnet ef migrations script
```

---

## Database First
``` bash
# PMC
PM > Scaffold-DbContext 'Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Chinook' Microsoft.EntityFrameworkCore.SqlServer

# .NET CLI
> dotnet ef dbcontext scaffold "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Chinook" Microsoft.EntityFrameworkCore.SqlServer
```
Coffee Tales ☕
Tags: watercooler, humor, coffee
Published: 2020-05-29 01:52:44

---
title: Coffee Tales ☕
published: true
description: Tired devs just want coffee to make it all better... 😪
tags: watercooler, humor, coffee
---

_You ever have one of those days that your need for coffee is what's making it difficult to get coffee?_

My first cup of coffee I usually pour at home where I have my favorite creamer.

Yesterday however, I completely forgot to start the coffee until it was time to leave... But no matter, there's coffee at work. 🤷‍♂️

So I go to work, make a cup, and there's no more sugar... So I go looking for some upstairs instead and find some—a freaking baking sugar bag. So... I dunno, maybe I was too tired to think, so I walked 2 minutes up the street and got some caffeine. At least I knew how to do that lol. 🏃‍♂️

Today I did get my first cup of coffee from home like normal in my tall travel mug—just the way I like it. 😋

Later on, I decided to reuse that travel mug just to not create more dirty dishes. I prep the coffee machine, stick my coffee cup underneath and start it—and immediately race to get the lid off my cup that I realized I left on before the coffee starts pouring. 😬

Of course those aren't the only times I've gotten in my own way trying to get my magic wakeup beverage, but it's what happened recently.

---

Anyone else have some funny coffee-related stories to share?
Github Pages
Published: 2020-05-29 01:04:15

I have been working on my Portfolio site ✨ which is a static site built using React, deployed on GH pages. I have noticed a bit of lag on the act of deployment  consistently. I never kept track of time required for updates to be seen- though I plan to attempt this now. This time it seems that despite the repo responding to updates (new code in the repo) and deployments being recorded in the repository's deployment activity log, the actual site is unchanged, 20 hours later.
  
I was researching this issue trying to figure it out and found out that there is a [site](https://www.githubstatus.com/ "Github Status") where you can check on GitHub's status and read through incident reports. I thought that was very cool. 
I also found this [Quora article](https://www.quora.com/Why-doesnt-GitHub-pages-update-immediately-after-you-have-pushed-a-commit) which led me to realize that maybe GH wasn't the problem despite the delay from the Jekyl deployment. The issue, I discovered was that I forgot how deployment on GH fundamentally works (lol) and had incorrectly assumed that it was happening automatically. 
  
There were deployments being logged every time I merged my work into my deployed branch and no errors were noted (except minor dependency warnings). I had totally forgotten about optimizing the build for prod. 

Here are the commands that I had forgotton:  
**deploy via command line**
```
yarn run build
yarn run deploy
```

To be honest, certain things are still unclear about the most proper deployment procedures and if anyone has found good articles that would help, please share!! 🙂