teleren/devto huggingface dataset:
Manipulate Colors With Sass
Tags: sass, scss, color
Published: 2020-06-30 00:42:17

<h2>Sass</h2>

Before jumping into the code, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass">this</a> extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

<h4>Syntax Example:</h4>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/ryzba8onw9sv5no8m103.png" />
<i>As you can see, it's almost identical to CSS!</i>

<h2>Manipulating Colors</h2>

<h3>1. Lighten()</h3>
``` scss
$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: lighten($btn-primary, 10%)
  }
}

// Lightens button by 10% in hover state
```
Creates a lighter color of color with an amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.

<h3>2. Darken()</h3>
``` scss
$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: darken($btn-primary, 10%)
  }
}

// Darkens button by 10% in hover state
```
Creates a darker color of color with an amount between 0% and 100%. 
The amount parameter decreases the HSL lightness by that percent.

<h3>3. Mix()</h3>

``` scss
body {
  background: mix(blue, green, 50%);
}

// Body background is a mix between blue and green
```
Creates a color that is a mix of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. Default is 50%.

<h3>4. Transparentize()</h3>
``` scss
.btn {
  padding:10px;
  background: green;
  color: white;
  &:hover {
    background: transparentize(green, 0.5);
  }
}

// Button background becomes 50% transparent in hover state
```
Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.

<h3>5. Saturate()</h3>
``` scss
.btn {
  padding:10px;
  color: white;
  background-color: saturate(#333,40%);
}

// Button background is a reddish-black color
``` 
Creates a more saturated color of color with an amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent. <hr> To see the full list of color manipulation functions, please visit the <a href="https://w3schools.unlockfuture.com/sass/sass_functions_color.html">Color Function Documentation</a> at <a href="https://w3schools">W3Schools</a>.
What are ECMAScript, ECMA-262, and JavaScript?
Tags: javascript, ecmascript, ecma, ecma262
Published: 2020-06-29 23:35:50

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

Throughout my career, I have heard many people talk about ECMA, ECMAScript, ES5, ES6, ESNext, ES and beyond. What are all these things and how do they point to JavaScript? Let's trace back to 1960 when a "Committee was nominated to prepare the formation of the Association and to draw up By-laws and Rules."([ECMA history](https://www.ecma-international.org/memento/history.htm)) which would be called, **European Computer Manufacturers Association** or ECMA for short.

Before you get into JavaScript you should understand the history of it all. So let's take a trip down history lane to learn more about ECMA, ECMAScript, ECMA-262, and TC39 and how they all play a role in the JavaScript we love today.

ECMA - On 17th May 1961 the Association officially came into being and all those Companies which attended the original meeting became members. The constituent assembly was held on 17th June 1961 ([ECMA history](https://www.ecma-international.org/memento/history.htm)).

ECMA-262 - Each specification comes with a standard and a committee. You can find all the ECMA standards [here](https://www.ecma-international.org/publications/standards/Standard.htm). In JavaScript's case, its standard is associated with [ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) and its committee is [TC39](https://tc39.es/ecma262/) 

ECMAScript or ES - is a general-purpose programming language, standardized by ECMA International according to the document ECMA-262. ECMAScript is a programming language itself, specified in the document ECMA-262. Although ECMAScript is inspired by JavaScript, they are different programming languages, and ECMAScript is not the specification of JavaScript ([wiki](https://en.wikipedia.org/wiki/ECMAScript#:~:text=ECMAScript%20(or%20ES)%20is%20a,help%20foster%20multiple%20independent%20implementations.)).

Now let's talk about JavaScript. The standard for JavaScript is [ECMAScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources). You might see some other popular references like ECMAScript 5 or ES5 and ECMAScript 6 or ES6. These are all editions of ECMAScript and they relate to how we implement JavaScript in the browser. As of mid-2017 most common browsers fully support ES6. 

Fascinating! Now you know a bit of web development history. So go out there and tell all your friends the differences of all these ECMA*'s and put that knowledge to good use.

But wait, how do all these standards get passed for JavaScript? Good question! You can find out more about [proposals](https://github.com/tc39/proposals) of ECMAScript and how it goes through (stages)[https://tc39.es/process-document/]
Gmail configuration with mail server
Tags: help
Published: 2020-06-30 09:12:28

I have an admin console for a website in Google. I wanted to configure new users to have access to Gmail under my domain. I added the user in admin console and found that I could send emails from the new account but could not receive mails, where I was getting a 550 virtual mailbox not found error on the sender's side.

Thinking it had to do something with my mail server, I logged into OpenHost, which rests the email service provision and added the same email. Now if I send an email, I don't get any error nor do I receive any email.

On further lookup, I found that we would need to configure the server to forward mails to the Gmail client. I was advised to add MX records of Gmail onto the mail server. I added them from the Open Host console. Now, I come to find that there exists MX records with a site called webhost, which doesn't ring a bell to me. I don't have any association with the guy who set me the server two years ago. I am advised that it may take 48 hours for the MX records to be properly configured and for the mail to be setup properly. I am not sure if I have done the steps correctly. Also, I am still worried about the fact that I would need to add the user in GSuite and Open Host each time I would like to add another user. Is there any way to directly just use GSuite to add users and receive mails with relatively lesser effort?
Difference in Asynchronous & Synchronous JavaScript Code
Tags: javascript
Published: 2020-06-30 14:00:52

### Hello beautiful people on the internet 🙋‍♂️

## This blog points out difference between Asynchronous & Synchronous JavaScript code

### All developer eventually have to know about these two in order to write good code

### Lets get to it then 🚀
- **`Synchronous Programming`** ▶ `Synchronous basically means that you can only execute one thing at a time`
    - Like in JavaScript, the code runs from top to button executing single line of code at a time
- **`Asynchronous Programming`** ▶ `Asynchronous means that you can execute multiple things at a time and you don't have to finish executing the current thing in order to move on to next one`

### Why does it even matter 🤔
#### Now that you know about this why does this even matter?
It is important because the code that might take more time **(like API calls)** must be written Asynchronously otherwise rest of the code will have to wait till the data is fetched.

#### In simple words 💁‍♂️
- If we make API calls or fetch data **Synchronously**, our code written after the call will have to wait till out call is made
- Assuming that fetching data takes `200ms`, JavaScript will wait for `200ms` and then execute rest of your code.
- While if the data fetching is written **Asynchronously** the `200ms` wait is no longer there, the rest of the code runs without waiting for the data fetching making code run faster. 

### Now how to write code Asynchronously 🤔
There are various ways, most preferred are
- `promises` 
  - under this you fetch data inside a promise. Read more [🔗](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- `async await` 
  - this is used to make normal function act Asynchronously. Read more [🔗](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

### Thank you for reading 💙👨‍💻
What is AWS Lambda | Serverless Application using Python(part-1)| Hands-on
Tags: serverless, aws, tutorial, codenewbie
Published: 2020-07-01 17:56:37

{% youtube q8WUijxrnpM %}
In this tutorial, we will learn what is serverless and AWS Lambda with the "Hello World" function. 
This is a series of tutorial for serverless where will learn how to develop a serverless application using AWS Lambda, API Gateway, and DynamoDB.

Prerequisite
1. You should have an AWS account.
2. Basics of Python

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/


Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Find_or_create_by: ActiveRecord Ruby on Rails
Tags: ruby, rails, codenewbie
Published: 2020-06-30 20:31:58

I am working on a project that I am very excited about! 


I am creating a social media platform for animals. I like to keep my project ideas silly and fun

 because it is hard to learn a new skill if you are working on a project that doesn't thrill you.


I am using a Rails backend with a Javascript frontend. 


My relationships in my model are set up such that A Post cannot be created without a User.


I created ease with my project by allowing a person to create both a post and a user at the same time. 


When I was attempting to create a new post in my application. I ran into an error on my backend. 


My post was able to create, however, I was not able to create a user, or find a user properly.


My database would attempt to create a new user record, but would then fail.

My code looked like this originally:

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

I am using the Find_or_create_by method. This is a method to help search for data from what you pass in, and if its record is not found in your database, will create a new record.


The first argument is the attribute name, and its value. 


Find_or_create_by accepts a block of code. 


In the block that starts on line 20 I am specifiying the values that I want each attribute to be set to if this user is not found in the database.


Now the database is able to create a new user in the database with all of its attributes passed in through the form where the data was entered. 


I kept getting an error where the database would INSERT a row to the table, but then it would rollback transaction.


The database was very confused because I was only passing it a name attribute, and so if it could not find the user record, it was unable to create a new user in the table with only the name attribute given.


In my posts controller, I have strong params set for users. What strong params do is make sure a user can only be created with the parameters I specified.


I only want to create a new user record in my database if the name attribute that was typed into my form does not match any of the names that are currently in my database.


 When I create a User on my form I am passing 6 attributes. However, the only attribute I do not want repeated is the User's name. 


I rewrote my code like so: 

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


Here, In line 19 I am still looking for the name attribute, however, I am specifying what the database should compare that name to. It should be compared to the name attribute that gets entered into my form.


Now the database is able to create an entire User, with all of its params passed in as well as look for the name attribute in the entire object. 


I am excited about the find_or_create_by method. I have built 2 javascript frontend with rails backend projects.


I am constantly searching through my database, and now there is an easier way to accomplish this task.


Hope you enjoyed this!
[Beginner HTML&CSS] Duomly coding challenge #3: Shopping cart
Tags: challenge, html, codenewbie, beginners
Published: 2020-07-01 08:47:06

Hey guys,
we created a coding challenge that you can complete to test your skills and build a coding portfolio.

### Today's info:
- Code the design into the HTML&CSS layout
- You can use bootstrap or another framework that you know
- Create git repository with name Duomly challenge #1
- Push the code to the GitHub and share a link to the repository in the comments

### Layout to code:
![Duomly challenge](https://dev-to-uploads.s3.amazonaws.com/i/tbcjzkijn9dnikgcjdey.png)

### HELP:
-Bootstrap tutorial:
https://www.blog.duomly.com/bootstrap-tutorial/
-Build e-commerce with bootstrap:
https://www.duomly.com/course/build-ecommerce-with-bootstrap
-HTML&CSS course:
https://www.duomly.com/course/html-and-css-basics-course/

Let's start!

Radek from Duomly
Does dev.to has dark mode? How can I activate it?
Published: 2020-07-02 23:38:54

---
title: Does dev.to has dark mode? How can I activate it?
published: true
description: 
tags:
//cover_image: https://direct_url_to_image.jpg
---
Dark mode has become the latest feature in almost every website, app, and even operating systems. 
With dev.to been my favorite website, I am really concern about the feature. Do we have it? How can I activate it?
Thanks
Mesure your create react app build.
Tags: react, cra, webpack
Published: 2020-07-01 13:33:29

---
title: Mesure your create react app build.
published: true
description: Measuring the build speed of your Create react app 
tags: #React, #CRA, #webpack
//cover_image: https://direct_url_to_image.jpg
---
##How to tweak webpack config?
 
Create react app comes with pre-configured webpack. To add your config in Create-React-App, you have to either eject it or [fork react-scripts](https://create-react-app.dev/docs/alternatives-to-ejecting/). 

###Other ways to modify your webpack config

You can use libraries like [react-app-rewired](https://github.com/timarney/react-app-rewired) or [customize-cra](https://github.com/arackaf/customize-cra) 

> :warning: **"Stuff can break"**: - Dan Abramov

---
##Mesuring speed
That been said. What I wanted to be was to just see which webpack loader or plugin took how much time. So I used [react-app-rewired](https://github.com/timarney/react-app-rewired)
It is easy to configure and use. You can go through the [docs](https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project) to see how it is done


Now once you are done with the setup. You need a webpack plugin [speed-measure-webpack-plugin](https://www.npmjs.com/package/speed-measure-webpack-plugin). Install it by just running this command `npm install --save-dev speed-measure-webpack-plugin` or if you are using yarn `yarn add -D speed-measure-webpack-plugin`

Now we need to add this code in `config-overrides.js`



```js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin({ outputFormat: "human", outputTarget: './measur.txt' });

module.exports = function (config, env) {
  config = smp.wrap({ 
    ...config,
   })
 return config
}
```
Once you run your build command a measur.txt file will be generated.
State in React for Designers
Tags: react, beginners
Published: 2020-07-01 14:37:55

React "state" should be the least difficult concept to understand but it isn't. Or is it?

Open Figma or Sketch.

Create a button and label it 'Buy Now'.

Duplicate the button and make it look as if it were disabled.

Your UI kit now consists of two states. 

You're done. Now pass the UI kit over to the developer.

Here's where it gets difficult.

**"State" is not so simple for developers.** For instance, the developer may have to connect to the inventory API to determine the state of the 'Buy Now' button. And, this has to be done before the button appears on the webpage. If available, show the 'Buy Now' and if out of stock show the disabled state. Only a couple hours of programming if all goes well. 

Hold on. The product was sold out before the shopper had an opportunity to click the "Buy Now" button. The developer needs to take that into consideration, connect to the inventory API once again, and then provide a pop up which informs the shopper it is not available.

Here's where it gets extremely difficult. 

**"State" is not so simple for designers.** For instance, the pop up is hideous. The UI kit did not include the state(s) for the pop up. Oops.

Open up Figma or Sketch again.

Design the states for the pop up.

Watch as the developer goes into a "state" of rage after finding out it needs to be redeveloped. 

In summary, state is what an element visually looks like at any given moment. Designers plan for each state while developers figure out how to make it happen using APIs, JavaScript, HTML, JSX, CSS, Sass, React, etc.
ng-package vs. package.json
Tags: angular, typescript
Published: 2020-07-01 22:01:08

If we hang around building libraries in Angular we're bound to run into how these two files work together.

If our library package.json looks like this:

**package.json**

```json
{
  "name": "msd",
  "version": "0.0.5",
  ✔️"peerDependencies": {  
    "@angular/common": "^8.2.0",
    "@angular/core": "^8.2.0",
    "hammerjs": "^2.0.8",
    "install": "^0.13.0",
    "npm": "^6.14.5",
    "rxjs": "^6.5.5",
    "zone.js": "^0.9.1",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-regular-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0"
  },
  ✔️"devDependencies": { 
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@microsoft/signalr": "^3.1.5"
  }
}
```
We have two sections of dependencies, peer and dev. If we compile our library and see this:

[No name was provided for external module](https://dev-to-uploads.s3.amazonaws.com/i/vcx588ps6a1e7smp2uy8.png)

We have to dig a bit deeper in understanding how the Angular (npm) Packager configuration can stop these messages.

**ng-package.json**
```json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/msd",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "@fortawesome/angular-fontawesome": "angularFontAwesome",
      "@fortawesome/free-solid-svg-icons": "freeSolidSvgIcons",
      "@fortawesome/free-regular-svg-icons": "freeRegularSvgIcons",
      "@microsoft/signalr": "signalr"
    }
  },
  "whitelistedNonPeerDependencies": ["@angular/*"]
}
```
If we think of the package.json being the front end pre-compile configuration, and the ng-package.json as the post compilation and interface to webpack we begin to see the relationship.

The *whitelistedNonPeerDependcies* are called out by the compiler errors, those errors tell us exactly what to put into the configuration file.  Why? I don't know and right now don't care. I just want to focus on publishing the pacakge!

One last tip, we must always bump the pacakage.json version number each time we publish.

JWP 2020 NPM Publish, Package.Json Version, ng-package.json umdModuleIds
Learning apache kafka
Tags: kafkacourse
Published: 2020-07-02 06:30:13

SVR Technologies works with an operation to be one of the finest  <a href="https://svrtechnologies.com/kafka-training/"> apache kafka online training </a> centers that offers all the newest updated kafka course online training in various environments . 

What is Kafka?
Kafka is open-source software that can provides a framework for storing, reading and analysing streaming data. It is fundamentally free to use, and it has a large network of users and developers who contribute towards updates, new features and offering support for new users and it has high reliability and replication characteristics. Kafka is designed to be run in a distributed environment, rather than sitting on one user’s computer, it runs across many servers. This brings additional processing power and storage capacity.

Why learn Apache Kafka?
Kafka training helps you gain expertise in Kafka Architecture, Installation, Configuration, Performance Tuning, Kafka Client APIs like Producer, Consumer and Stream APIs, Kafka Administration, Kafka Connect API and Kafka Integration with Hadoop, Storm and Spark using Twitter Streaming use case.
Curious case of Git delete with jenkins pipeline
Tags: devops, git, showdev, cheatsheet
Published: 2020-07-02 10:30:30

Hi Guys,

Today i want to share a unique use case of delete remote git branch command with jenkins pipeline. All a job is doing some work checkin to a branch, merge it with master and want to delete once everything is done.

It is simply captured with below set of command from commandline

git checkout branch
git commit
git push

git checkout master
git merge branch
git push
git branch -d branch//local branch delete
git push origin --delete branch

This is simple if you are doing it from the your dev machine, but not so with jenkins pipepline running in cloud with some cloud provider.

One of the key things to note hear is, git is not secured protocol and you can't directly communicate on top of it, because cloud providers rule will whitelist the delete command, because it can see the content.

So we have to use https to communicate with remote git repo.

I modified the command like this

withCredentials([[
            $class: 'UsernamePasswordMultiBinding',
            credentialsId: 'my-git-credential-id',
            usernameVariable: 'GIT_USERNAME',
            passwordVariable: 'GIT_PASSWORD'
        ]]) {
            sh 'git push origin --delete branch'
        }

considering this will go through, but this command keeps on hanging without any clues.

Now the second attempt was to change it like this circumventing whitelisting of the cloud provider.

withCredentials([[
            $class: 'UsernamePasswordMultiBinding',
            credentialsId: 'my-git-credential-id',
            usernameVariable: 'GIT_USERNAME',
            passwordVariable: 'GIT_PASSWORD'
        ]]) {
            sh 'git push origin --delete branch https://${GIT_USERNAME}:${GIT_PASSWORD}@${GIT_URL_WITHOUT_HTTPS}'
        }

But still it is not working, with all the thoughts being put through of why it is not working.

Than finally comes Eureka moment where i just interchanged order of commands, as with https url in git command flags are the last one to end the command with argument preceding them. 

withCredentials([[
            $class: 'UsernamePasswordMultiBinding',
            credentialsId: 'my-git-credential-id',
            usernameVariable: 'GIT_USERNAME',
            passwordVariable: 'GIT_PASSWORD'
        ]]) {
            sh 'git push https://${GIT_USERNAME}:${GIT_PASSWORD}@${GIT_URL_WITHOUT_HTTPS}'branch --delete 
        }