teleren/devto huggingface dataset:
Learning SCSS in 5 Minutes?
Tags: webdev, scss, css, codenewbie
Published: 2021-01-30 05:33:00


Let's learn the basics of SCSS in 5 Minutes. So basically SCSS means Sassy CSS. It's a CSS preprocessor that gives you access to useful features that are not available in Vanilla(normal) CSS. 

---

### VARIABLES

To create variable just add a `$` sign to the variable name and set them like a normal CSS property. 

```scss
//color palette for a project to maintain consistency

$product-dark-blue: #324e85;
$product-light-blue: #4c7396;

.element {
    coloe: $product-dark-blue;
}
```

---

### NESTING

SCSS helps you write cleaner and concise CSS. 

```scss
.container {
    width: 100%; 
    color: grey; 
    background-color: green; 
    
    div {
        border: 1px solid black; 
        a {
            text-decoration: none; 
            color: white;
            &::hover {
                color: #b59a9a;
            }
        }
    }
}
```

---

### INHERITANCE

`@extends` help you inherit the properties of another class. 

```scss
.header {
    color: grey; 
}
.sub-header{
    @extend .header; 
    font-size: 40px;
}
```

---

###  @Mixin

Mix in is another way SCSS implement inheritance using `@mixin`. 

```scss
// create mixin
@mixin red-color {
    color: grey; 
}

.header {
    @include red-color; /*add mixin*/
}
```

---

### Operators

SCSS offers you different kind of operators that you can use in your CSS. Arithmetic operators like +,-,*,/ etc. 

```scss
@mixin top-margin ($margin){
    margin-top: 30px + $margin; 
}
.container {
    width: 800px -80px;
    @include top-margin(10px); 
}
```

---

### LOOPS

We can use for loops in our CSS thanks again to SCSS. You can create utility classes for your color, font-size and a lot of other properties.

```scss
/* generate utility classes for font-size */

@for $x from 1 through 70 {
    .font-size-#{$x} {
        font-size: 0px + $x;
    }
}

```

---

### CONDITIONS

Another awesome feature of scss is the ability to use if/else statements in CSS. 

```scss
$bg: pink;
$bg-mobile: red;

p{
    @if $bg == pink {
        
        color: blue;
    } @else if $bg-mobile == red {
        color: green;
    } @else {
        color: grey;
    }
}
```

---

DONE PEOPLE. <br> Now you know something about SCSS. 

⚡Thanks For Reading | Happy Coding🤩

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
KU HackFest 2021
Tags: mlh, announcement, hackathon, majorleaguehacking
Published: 2021-01-30 05:13:14

KU HackFest 2021 is a 48-hour long international digital hackathon being organized by Kathmandu University Computer Club on 19th -21st February 2021. Our vision is to promote hackathon culture, strengthen industry-student relations, and drive innovation.

Registrations for KU HackFest 2021 are open. Apply now at [www.kuhackfest.com](www.kuhackfest.com) and be a part of Nepal's First Digital MLH Hackathon.

![Registration image](https://dev-to-uploads.s3.amazonaws.com/i/m5duqtf5qsykygyv8nf9.png)

Get ready for a lifetime experience with prizes worth over $50,000, expert sessions, workshops, fun mini-events, and many more.
How To Create WordPress Website Offline?
Tags: wordpress
Published: 2021-01-30 05:03:44

Are you just starting with WordPress? No money to buy a hosting for you website. Why not create WordPress website offline.

You can also create WordPress website offline for testing purposes. It helps developers to build your own plugins.

## How to Create WordPress website offline?

There are actually two methods to create your WordPress website offline. 

## Method 1: Install with Local by Flywheel

In first method we need to use Local by Flywheel to create WordPress website offline.

<iframe width="560" height="315" src="https://www.youtube.com/embed/uQCoTQAo3qo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Building WordPress site with Local by Flywheel is very simple. You just need to enter simple details and your WordPress website will be ready within seconds. You will also get a ngrok link.

## Method 2: Using XAMPP Local Server

**Step 1: Download XAMPP from apachefriends website**

**Step 2: Install XAMPP on your computer**

**Step 3: Download WordPress latest package**

**Step 4: Extract in htdocs folder**

**Step 5: Start MYSQL from XAMPP**

**Step 6: Create a database**

**Step 7: Install WordPress by entering database details**

Done! Thanks for reading. If you need any help related to WordPress, message me on [Twitter](https://twitter.com/w3Abhishek)
Type Conversion in JavaScript wrt boolean, undefined, and null
Tags: javascript, beginners
Published: 2021-01-30 04:12:19

We can convert to a string type using the String class

```
let a = 5;
typeof(a);
> "number"
typeof(String(a));
> "string"

let b = true;
String(b);
> "true"

let c = undefined;
String(c);
> "undefined"

let d = null;
String(d);
> "null"

```

Similarly, to convert to a number we can use the Number class

```

let a = "5" ;
typeof(a);
> "string"
typeof(Number(a));
> "number"

let b = true;
Number(b);
> 1

let c = undefined;
Number(c);
> NaN

let d = null;
Number(d);
> 0

//when an operator is there it auto converts
// to number unless its a + operator


let e = "6" / "2";  
e
>3

let e = "6" + "2";
e
>62

```

Converting to Boolean uses Boolean class like String and Number.

```

let a = "5" ;
typeof(a);
> "string"
typeof(Boolean(a));
> "boolean"

let b = true;
Boolean(b);
> true

let c = undefined;
Boolean(c);
> false

let d = null;
Boolean(d);
> false

```
Junior Developers need Mentors
Tags: mentorship, juniordevelopers, mentoring, coaching
Published: 2021-01-30 04:08:41

When it comes to navigating what to learn and how to get a job, a mentor is very near an absolute necessity. As a junior developer myself there's a lot to navigate. And as someone who's worked as an educator for over 10 years--new devs could really use some structure. 

### Dedicated mentor spaces
|Website|Description|
| :-------- | :----: |
|[codingcoach.io](https://codingcoach.io)|Free to search for and connect with other developers looking to mentor. Easy to use. Open source and created by @emmabostian|
|[facebook.com/fbmentorship](https://www.facebook.com/fbmentorship)|Free to search for and connect with up to 3 individuals. Easy to contact via Messenger. Also makes it easy to mentor others.|


While there are plenty of paid mentorship programs (there are large equity related issues here), what free mentorship programs have you used or would you recommend to junior developers?
Give Me More NextJS
Tags: nextjs, opensource, typescript, react
Published: 2021-01-30 03:45:35

It's been 3 weeks since I join this [telescope](https://github.com/Seneca-CDOT/telescope) team. In this blog post, I want to talk about the 2 PRs that I sent (and both got merged!! Ya!!).

As mentioned in the previous posts, I want to focus on front-end frameworks in this term. In this telescope project, we're using React for front-end implementation, moreover, we're moving our front-end component from **Gatsby** to **NextJs**, which provides many chances for us to practice.

The [first PR](https://github.com/Seneca-CDOT/telescope/pull/1602) I want to discuss is related to css styling. This was an extended PR from another developer's merged PR. One element in his component was missing a style setting, which made the element had *block* instead of *inline* value.

At first, I simply just put back what was missing in this ported nextjs component. However, I received an typescript error saying that `No overload matches this call`, on my newly added `variant="p"` style setting. This is an error that I understand what it means literally, but doesn't understand why is this error applies to my case.

I dig into this error and found out that the `<Typography>` element in React actually has its own setting about the styling. In this case, you can only assign the variant to a limited of type such as h1, h2, title, subtitle. I didn't know how to make this overload legit, therefore, I chose one variant type, caption, to make the typography element inline with appropriate font size.

However, after I sent this PR, other experienced developer (Thank you, Pedro!) in the team told me that this error exists in the Gatsby version of component as well, which is okay to let it be there since typescript can still compile perfectly. But, I'm happy that I spent some time on this error instead of just copy and paste the old missing part back to this new component. By the way, this can also be fixed by changing the inline/block setting in its class in `makeStyles` that we use for setting the css for elements in the component.

The next PR is to [port the `AdminButtons` component from Gatsby to Nextjs](https://github.com/Seneca-CDOT/telescope/pull/1619). This is a simple porting PR, but it requires admin credential to test the component. Thanks for a group of developer's help, I quickly learned how to do that. However, this component also use a new component called `UserProvider` which just got merged recently. This `UserProvider` supposes to return a user interface if the user is logged in, which I was, but, I didn't get the user interface and the user object is empty.

After talking with professor Dave, we found this bug that the `UserProvider` is not returning the user object that it is supposed to be. This is the interesting thing about working as a team, you'll always need to communicate and make sure you're up to date with your team members in order to solve the issues.

Looking forward to embracing the upcoming challenges in next week!
Hacktoberfest 2020 challenge completed!
Tags: hacktoberfest, github, opensource, javascript
Published: 2021-01-30 03:29:00

> Hacktoberfest is a month-long celebration of open-source software. It happens every year in October. During this event, everyone can support open-source by contributing changes and then earn limited-edition swag.

The main idea of this event is to promote open source contributions around the world.

Last October I successfully completed the #Hacktoberfest2020 challenge by submitting 4 successful PRs(Pull Requests):

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

As a Web developer, this was my first open-source contribution.
It was both an amazing and thrilling experience for me.

I worked on [Canvas-Creations](https://github.com/zero-to-mastery/Canvas-Creations), a project created by the [ZTM organization](https://github.com/zero-to-mastery).

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

And here's my contribution:
[Cool-cursor](https://github.com/AswinBarath/Cool-cursor)
The cool cursor is a dynamic javascript project made using the HTML `<canvas>` element.

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

This is a project which uses a canvas and works dynamically by using the event listener of the mouse-event.
Check out the working demo of the project here: [Cool-cursor](https://aswinbarath.github.io/Cool-cursor/).

So, anyone who is interested in open-source contribution, make sure you bookmark this event in your calendar: A month-long event which takes place in October and you can earn limited-edition swag.

And yesterday, I received my package of the limited-edition swag for 4 successful pull requests:

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

Learn more: [HacktoberFest](https://hacktoberfest.digitalocean.com )
Thoughts on Serverless Architectures
Published: 2021-01-30 02:46:33

---
title: Thoughts on Serverless Architectures
published: true
description: 
tags: 
//cover_image: https://i.blogs.es/c24ea6/aws-lambda-serverless-computing-881x441/1366_2000.png
---
Several months ago, I started working in a small startup. Given their growing volume of clients and needs and due to the small team, they decided to build most of their core infrastructure through AWS lambda functions, using the serverless framework for it. So, we're running our whole business through lambda and it works! It's amazing to see that a whole working business is built over a such simple architecture.Before working here, I just saw lambdas as a way of build crons or small tasks, but it could be bigger than that.

After working with it for some time, I'm starting to see a lot of of advantages but some cons too. Summarized, is a really good way to make things scalable and provide a unified framework to build things without worry too much about infrastructure issues.
But, it have some trade-offs to be known too.

Pros:
- Serverless, its name says it, don't worry about servers. Just code, deploy and it will work. On this days of overwhelming complexity through containers and kubernetes, is fine to avoid this kind of worries.
- Prod and Dev environments can be easily replicable at 100%! No need to worry about environments too!
- Easy deploys, easy rollbacks. And, through Serverless framework, be platform agnostic is quite easy (not 100% transparent, though)
- All of this allows to build and ship things really fast!

But, there are things to take care off. Some of them are tradeOffs, some of them just points to take into consideration:
- Serverless framework does not provide any information about how to build your stuff. It just provides an easy way to build and deploy a Serverless infrastructure on a lot of cloud platforms. The way that it avoids the server problems and configs does not mean that it helps you to properly develop things. You can develop HORRORS (coupled lambdas, twisted Code,..) and deploy it easily. Its advantage is on avoid to have dedicated staff into infrastructure, not into development.
- You're slave of a cloud provider. Someone will manage your servers, responses time will depend on them, scalability too... if you Work with Serverless, Make sure that you're able to migrate to other alternatives easily.
- Infernal YAMLs. You will be defining too much stuff through them. Be sure that you're writing them properly too. 
- Local development can be problematic if you start to couple lambdas. One lambda development works fine, two at the same time, don't. They don't react on local quite fine to external events or invocations, so you will need to take care of how you structure your Serverless architecture 

Having some cons, I think that it can boost the productivity of a team and fits perfectly for MVP constructions. But, think about it more as a sinergy than as a Swiss knife. A poor codebase built through a Serverless architecture won't be better than a poor codebase on premise. But, if things are built properly, the boost of productivity is gigantic.
วิธี ลิสต์ และ ลบ Git remote tag
Tags: git, programming
Published: 2021-01-30 01:26:19

เมื่อวานต้องจัดการเรื่อง tag ของ git remote repository ได้รู้คำสั่งที่ต้องใช้ในการลิสต์และลบ tag ที่อยู่บน remote repository เพิ่มขึ้นมา ซึ่งเราสามารถทำได้ดังนี้

## List remote tag
ใช้คำสั่งแบบนี้

```
$ git ls-remote --tags

d6602ec5194c87b0fc87103ca4d67251c76f233a        refs/tags/v0.99
f25a265a342aed6041ab0cc484224d9ca54b6f41        refs/tags/v0.99.1
7ceca275d047c90c0c7d5afb13ab97efdf51bd6e        refs/tags/v0.99.3
c5db5456ae3b0873fc659c19fafdde22313cc441        refs/tags/v0.99.2
0918385dbd9656cab0d1d81ba7453d49bbc16250        refs/tags/junio-gpg-pub
```

แต่ถ้าเรามี remote repository หลายอันแล้วอยากลิสต์แค่ของอันใดอันหนึ่งก็ใส่ชื่อ remote ลงไปเช่น

```
$ git ls-remote --tags origin
```

## Delete remote tag
ส่วนการลบ remote tag นั้นสามารถทำได้สองแบบคือ แบบแรกคือ `$ git push --delete origin tagname` แล้วตรง tagname ก็ใส่ชื่อ tagname ที่ต้องการลบลงไปเช่น

```
$ git push --delete origin v1.0

To https://github.com/username/repo.git
 - [deleted]         v1.0
```

แบบที่สองคือ `$ git push origin :refs/tags/<tag>` ใช้แบบชื่อ refs path ตรงๆโดยส่วนสุดท้าย `<tag>` คือ tag name นั่นเอง เช่น

```
$ git push origin :refs/tags/v1.0

To https://github.com/username/repo.git
 - [deleted]         v1.0
```

เหตุผลที่ต้องใส่ refs path เต็มๆเพราะว่า บางครั้งชื่อ tag กับชื่อ branch อาจซ้ำกันทำให้มันงงว่าจะลบอะไรกันแน่เลยต้องใช้ท่าที่สองกับ refs path เต็มๆนั่นเอง

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
Safety Matters: a crack on the laptop could burn down the house
Tags: safety, laptop, battery
Published: 2021-01-30 00:58:43

Three months ago, I noticed a small 1-millimeter crack under my laptop, between the keyboard and the base. I thought: it's just cosmetic - maybe I broke some plastic parts when I tried to vacuum off the dust?

This week, I noticed that the crack has enlarged to about 5 millimeters. I asked around and realized that I have a **swollen battery** in the laptop.

According to [DELL forum](https://www.dell.com/community/Latitude/Latitude-E5570-battery-replacement/td-p/7315667), a swollen battery, if not removed promptly, could catch fire and burn down my house. This means, there has been a ticking time bomb under my palm for the past few months.

Following the procedure, I carefully disassembled the laptop and gently took out the battery. It's a 4-cell battery, and two of the battery cells have expanded to twice of the normal thickness. I'm glad that I caught this safety hazard in time.

Please regularly inspect your battery operated devices, including laptops, phones, drones, and IoT gadgets. If you notice a swollen battery, unplug the power supply and run the device until the battery is drained, then disconnect and remove the battery.
Because **safety matters**.

---

![](https://i.imgflip.com/4vx5ox.jpg)
Day 298 : Giant Steps
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-30 00:58:28

_liner notes_:

- Professional : Had our team meeting. Good to hear what everyone was up to. For the rest of the day, I tried to get an application running on my local machine. There soooo many giant steps, hoops and dependencies to go through. haha. Apparently I need to upgrade something and that took a while. Asked a co-worker for some help. Still had some difficulties. Basically going to work on what I need outside of the application and just copy and paste it back into the application. haha

- Personal : So last night, I was able to get something I'll be using in a future project working. In short, a user is able to create a highlight from clips they choose during a video. Then once the highlight is generated, it then gets uploaded to a site so that it can be promoted and show up in social posts. Going to use that in a giveaway to help promote a project I'm working on.

![View of a lake surrounded by pine trees with mountains in the background in Hector Lake, AB, Canada](https://dev-to-uploads.s3.amazonaws.com/i/on0n6wloe03959tits4h.jpg)

Started working on the radio show after work and lost track of time to write a blog post. Going to finish working on the radio show and watch the newest episode of WandaVision. It's getting pretty good. Also, the 'r' key on my keyboard seems to be getting stuck. Awesome.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube inCKbaSzKxE %}
Fastest way to learn anything in 4 steps
Tags: psychology, research, billionire, fastestwaytolearn
Published: 2021-02-03 18:52:24

---
title: Fastest way to learn anything in 4 steps
published: true
date: 2021-01-30 00:30:00 UTC
tags: Psychology,Research,billionire,fastestwaytolearn
canonical_url: https://centocode.com/fastest-way-to-learn-anything-in-4-steps/
---

Bill Gates, Jeff Bezos, Mark Cuban, Mark Jukarbark, you know them, accourding to them lets talk about the fastest way to learn anything by using some simple trick in life.

The post [Fastest way to learn anything in 4 steps](https://centocode.com/fastest-way-to-learn-anything-in-4-steps/) appeared first on [CentoCode.com](https://centocode.com).
saml2aws-multi: a simple tool providing an easy-to-use command line interface for saml2aws
Published: 2021-01-30 00:04:38

[`saml2aws-multi`](https://github.com/kyhau/saml2aws-multi) is a simple tool I created for using [`saml2aws`](https://github.com/Versent/saml2aws) more effectively on day-to-day tasks. `saml2aws-multi` provides an easy-to-use command line interface to support login and retrieve AWS temporary credentials for multiple roles of different accounts with `saml2aws`.

Example:

![Example-ListRoleNames](https://dev-to-uploads.s3.amazonaws.com/i/owk8a1ewx6kmb61jcqbx.png)

Usage 
```
$ awslogin --help
Usage: awslogin [OPTIONS] COMMAND [ARGS]...

  Get credentials for multiple accounts with saml2aws

Options:
  -k, --keyword TEXT              Pre-select roles with the given keyword(s)
  -f, --profile-name-format [RoleName|RoleName-AccountAlias]
                                  Profile name format  [default: RoleName]
  -r, --refresh-cached-roles      [default: False]
  -t, --session-duration TEXT     Session duration in seconds
  -d, --debug                     [default: False]
  --help                          Show this message and exit.

Commands:
  chained  List chained role profiles specified in ~/.aws/config
  switch   Switch default profile
  whoami   Who am I?
```

For detailed instruction and source see [kyhau/saml2aws-multi](https://github.com/kyhau/saml2aws-multi).
How to execute a valid code string in JavaScript?
Tags: javascript
Published: 2021-01-30 00:00:00

---
  title: How to execute a valid code string in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Jan 30 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/execute-code-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-a74c1c7960bad4a63412a0a7e8be01e1.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/execute-code-string-javascript)
  
To execute a code string, you can use the `eval()` global function in JavaScript.

Consider a string which itself is a valid piece of JavaScript code like this,

```js
// javascript code as string
const codeStr = `
if(12 > 10){
    console.log('12 is greater')
}`;
```

As you can see the above string is an actual valid piece of `if statement` in JavaScript.

To run this string, let's use the global `eval()` function in JavaScript.

```js
// javascript code as string
const codeStr = `
if(12 > 10){
    console.log('12 is greater')
}`;

// run string using eval() function
eval(codeStr); // 12 is greater
```

- The code string will be executed using the `eval()` function.
- This is useful when having an application of some kind where you can receive the JavaScript code as the string and then needs to be executed.
- This can also make serious problems to the application if you are not careful enough using the `eval()` function and it is not at all recommended t use it in a real-life application. ✨

See this example live in [JSBin](https://jsbin.com/girepeberi/3/edit?js,console).

### Feel free to share if you found this useful 😃.

---