teleren/devto huggingface dataset:
Angular and Sass
Tags: angular, css, sass
Published: 2020-09-11 16:59:35

One of the problems with Angular's View Encapsulation (where each component has it's own CSS style sheet) is that it's only good for minor adjustments and does not address deep styles!  In fact; Angular has deprecated NGDeep, which got around this problem for a while. Read more here on avoiding ::ng-deep. 

{% link https://dev.to/jwp/angular-10-ng-deep-and-host-pseudo-classes-1kbg %}

**SASS**
The beauty of SASS is that it is designed around Specivity in mind. This means that if we specify the style structure correctly, we can reach into any element on the page and adjust at will.  No more days and hours of trying to do it in the component style sheet. 

**Project should have a Core.scss style**

If our projects use SASS (Core.scss) in the root directory, we have the ability to reach into any of our components as deeply as we want.  

This casts light on styling reusable components. To start off, our Core.scss file should have a default style for each component.

**Each Component Base Style** 

```css
app-custom-component {
  display: grid;
  justify-content: start;
  .buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));
    width: 3.5em;
    justify-self: end;
    font-size: 1em;
    margin-left: 1em;
  }
}
```

**Each reused Component Adjustment**

Followed by successive adjustments for reuse of that component.
```css
//the main component contains the custom component

app-main-component{
  app-custom-component { 
    // minor adjustment here
    justify-content: end;
     .buttons {
       // minor adjustment here  
       width: 7em;
    }
 }
}

```

**Unavoidable Debt**
Unfortunately, this problem in using SCSS in the root as described above is that we are creating huge monolithic structures. Even though they are segmented, it's super easy to have 2,000 lines of styling.  Not perfect for maintenance but workable due to how SASS works.  

Do yourself a favor, lean on SASS heavily it will save you a ton of styling heartache.

JWP2020 CSS SASS
A quick guide on LSTM and how to implement it using python
Tags: machinelearning, python, datascience, prediction
Published: 2020-09-11 18:14:00

[A quick guide on LSTM and how to implement it using python.](https://datascienceplus.com/long-short-term-memory-lstm-and-how-to-implement-lstm-using-python/)

#machinelearning #python #datascience #scikitlearn #timeseriesanalysis #timeseriesforecasting #ai #timeseriesclassification
Regex to match strings ending with en.srt or es.srt
Tags: regex, beginners, webdev, codenewbie
Published: 2020-09-11 18:09:42

```
/(en|es)\.srt$/gi
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**
Ask Octopus - Can I highlight task log entries?
Tags: octopus, tutorial, devops, logging
Published: 2020-09-11 17:45:48

---
title: Ask Octopus - Can I highlight task log entries?
published: true
description: You have specific log entries that you want to be able to find easily. How do you make them stand out from the rest of the task log? Find out in this edition of Ask Octopus!
tags: octopus,tutorial,devops,logging
series: Ask Octopus
---

You have specific log entries that you want to be able to find easily. How do you make them stand out from the rest of the task log? Find out in this edition of Ask Octopus!

{% youtube JnZtzJlCkpE %}

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
How to Create a Pricing Table of Equal Height
Tags: css, beginners, tutorial, webdev
Published: 2020-09-11 17:38:22

Hi👋
In this post we will see how we can create a Pricing Table of equal height using Flexbox.

Create a div with the class of `container`
```html
 <div class="container">
```
We will now create 3 div with the same class `pricing-grid` inside the `container`
```html
<div class="pricing-grid">
      <ul>
        <li class="header">Basic</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Pro</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
        <li>Free Hosting</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Premium</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
```
###CSS
```css
.container{
  max-width:1024px;
  margin:0 auto;
  display:flex;
}
li{
  list-style-type:none;
  padding:30px;
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
li:last-child{
  border-bottom:0;
}
li.header{
  border-bottom:0;
  background-color:black;
  color:#fff;
  padding:20px;
}
ul{
  margin:0;
  padding:0;
}
button{
  padding:12px 20px;
  border:none;
  background-color:#000;
  color:#fff;
  align-items:flex-end;
}
```
So far we have created the basic structure of Pricing Table 😲

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

This will provide the Proper Spacing and Background color
```css
.pricing-grid{
  flex-grow:1;
  background-color:rgba(0, 0, 0, 0.1);
  margin:20px;
  text-align:center;
  border-radius:4px;
}
```
####Expectation 😀

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

####Reality 🤷‍♀️

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

This can be achieve by using `Nested Flexbox`
```css
.pricing-grid{
  display:flex;
  flex-wrap:wrap;
}
.pricing-grid > *{
  flex:1 1 100%;
}
```
At last align items to the `Center`
```css
.container{
  align-items:center;
}
```

I hope this tutorial helped you. 🎉
Let's make sending lots of emails fun again! : Open Source
Tags: devops, ruby, beginners, postgres
Published: 2020-09-11 17:24:22

Cuttlefish is a lovely, easy to set up transactional email server

Sending a few emails from your app is easy. Sending lots becomes painful. There are so many hidden gotchas. Do your emails get delivered? Are you being considered a spammer? What about all those bounced emails?

Let's make sending lots of emails fun again!

And without the hidden dangers of vendor lock in of commercial transactional email services.

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

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

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

There is also docker image .

{% link https://dev.to/manishfoodtechs/docker-for-extreme-beginners-in-desi-layman-language-1e0n %}

Read more on this repo:

{% github mlandauer/cuttlefish %}

**Please visit my profile for more interesting articles**


######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).

###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)

Imagecredit: cuttlefish
How are you going to chill this weekend? 🏖
Tags: watercooler
Published: 2020-09-11 17:00:46

Ahh, Friday at last.

A fair amount of rest and relaxation can improve your mood and make you even more productive, so be sure to have some leisure time this weekend if you're able to.

With that in mind, tell me how you'll take your mind off work this weekend 😄
Sitting posture
Tags: posture, fitness, ergonomics
Published: 2020-09-11 16:46:12

My friend Stephanie is a Brazilian Personal Trainer and she has many tips for us who spend the day sitting on chairs. Check out [this video](https://www.instagram.com/p/CE7D_j9lUbS/?igshid=1bsimfbsy1pow) where she shows a good posture.

Follow [Stephanie](https://www.instagram.com/stephanie.iara/?hl=en) on Instagram if you speak *Portuguese*!
Six free websites to generate Gradients
Tags: webdev, css, html, design
Published: 2020-09-11 16:33:53

These free websites let you generate myriad options of gradients available and even you can create your own custom gradients. 
These websites have the option to copy the CSS Code of that particular gradient swatch with just a click.
Let's take a look.

###**1.Grabient**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8dcv9s30mz3to5om58nk.png)
  [Visit](https://www.grabient.com/)

###**2. CSS Matic**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3slge9nwn2sikm6zqxq7.png)
[Visit](https://www.cssmatic.com/)

###**3.UI Gradients**

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

###**4.Color Space**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ncdd9t2dfiq5pgm2irk.png)
[Visit](https://mycolor.space/)

###**5.Color and Fonts**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4iai388p9sixjr6wlxd9.png)
[Visit](https://www.colorsandfonts.com/css-gradients)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-09-11 16:32:00

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week — what was something you're proud of?

All wins count — big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄


**Have a great weekend!**

![Weekend](https://media.giphy.com/media/lAK7ACXBaEy4/giphy.gif)
Daily Challenge #290 - Read the Time
Tags: challenge
Published: 2020-09-11 16:29:50

---
title: Daily Challenge #290 - Read the Time
published: true
series: Daily Challenge
description: Write out the numeric time in words.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
Given time in 24-hour format, convert it to words.
```
For example:
13:00 = one o'clock 
13:09 = nine minutes past one 
13:15 = quarter past one 
13:29 = twenty nine minutes past one
13:30 = half past one 
13:31 = twenty nine minutes to two
13:45 = quarter to two 
00:48 = twelve minutes to one
00:08 = eight minutes past midnight
12:00 = twelve o'clock
00:00 = midnight

Note: If minutes == 0, use 'o'clock'. If minutes <= 30, use 'past', and for minutes > 30, use 'to'. 

Good luck!
```
###Tests:
07:01
01:59
12:01
00:01
11:31
23:31
***
_This [challenge](https://www.codewars.com/kata/5c2b4182ac111c05cf388858) comes from KenKamau on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
How i created facemash app in Angular
Tags: angular, webdev
Published: 2020-09-11 16:24:35

[Visit facemash for wallpaper ](https://facemash-d8ce0.web.app/)
After watching The Social Network movie i was very excited to create similar like facemash so i decided to create webapp for ranking wallpapers.

So first of all i needed a ranking algorithm so i did some research about elo rating algorithms and how it work for ranking chess players

So here's the ranking algorithm that you can use if you plan to create something like this.

```c++
float Probability(int rating1, int rating2) 
{ 
    return 1.0 * 1.0 / (1 + 1.0 *  
           pow(10, 1.0 * (rating1 - rating2) / 400)); 
} 
  
// Function to calculate Elo rating 
// K is a constant. 
// d determines whether Player A wins or Player B.  
void EloRating(float Ra, float Rb, int K, bool d) 
{   
  
    // To calculate the Winning 
    // Probability of Player B 
    float Pb = Probability(Ra, Rb); 
  
    // To calculate the Winning 
    // Probability of Player A 
    float Pa = Probability(Rb, Ra); 
  
    // Case -1 When Player A wins 
    // Updating the Elo Ratings 
    if (d == 1) { 
        Ra = Ra + K * (1 - Pa); 
        Rb = Rb + K * (0 - Pb); 
    } 
  
    // Case -2 When Player B wins 
    // Updating the Elo Ratings 
    else { 
        Ra = Ra + K * (0 - Pa); 
        Rb = Rb + K * (1 - Pb); 
    } 
  
    cout << "Updated Ratings:-\n"; 
    cout << "Ra = " << Ra << " Rb = " << Rb; 
} 
```
This code is from [Geeks for Geeks](https://www.geeksforgeeks.org/elo-rating-algorithm/#:~:text=Elo%20Rating%20Algorithm%20is%20widely,rating%20of%20players%20is%20updated.)

So phase 1 is completed
Now another task was to finding enough images for ranking them.
For that stuff i recommend to use open source images from site like Unsplash, pexles, pixabay, etc..

After then using my angular skills i developed a webapp with simple UI which shows two random images and when you click them it's rank will be updated and you will get new images for further ranking

There's also a dashboard where you can check ranking of all images.


#### Source Code [Github](https://github.com/raviagheda/facemash)
Programming is a lot like making electronic music (Ivy and Derek show you)
Tags: webdev, javascript
Published: 2020-09-11 16:21:24

Ivy and Derek were fooling around with some synthesisers - and talked about how "composing" functionality - and tools / is a lot like sequencing electronic music. 

{% youtube EEnbIxrfOSg %}

The way that each little concept adds up - and the way that you can "compose" methods and manipulate data - is a lot like a synthesizer. Once you understand the concepts - then you can relate them to different languages - and things become a lot more like legos.

<hr>
<hr>
<hr>

On another note - we've decided to skip paying all the rotten companies to market our school / and instead - we want to pay YOU to find us the best students: more about that here: 

[https://perpetualeducation.substack.com/p/we-need-some-women-over-here-asap](https://perpetualeducation.substack.com/p/we-need-some-women-over-here-asap)

and here: [Get paid to match students with PE](https://perpetual.education/get-paid-to-match-students)
100 div curtain effect
Tags: codepen, css, effect, nojs
Published: 2020-09-11 16:19:30

---
title: 100 div curtain effect
published: true
tags: codepen, css, effect, nojs
---

My small contribution for the [September 2020 CodePen Challenge](https://codepen.io/challenges/2020/september/). Hope you like it!

* pure CSS
* grid layout
* view port always covered (portrait or landscape doesn't matter)
* every curtain div own correct `--col` and `--row` custom properties
* transition duration is calculated from values of `--col` and `--row`
* interactivity handled through a checkbox, label and the CSS sibling combinator
* div labels generated by a CSS counter

{% codepen https://codepen.io/0x04/pen/wvGmqjZ %}
Insights from 20 years in Developer Relations with Jeff Sandquist
Tags: devrel, podcast
Published: 2020-09-11 16:14:38

**Trick question of the week:**
*Should we spend less time trying to define developer relations and more connecting one on one?*
 

Yes. It’s time. Season 3 is back! 

We’re ecstatic to be bringing you insightful episodes again and for the start of a new season, we couldn’t ask for a better one! This week we welcome to the podcast Jeff Sandquist, Microsoft’s Corporate Vice President. 

In this episode we discuss:

- Why content is key and why your documentation should be “5 minutes to wow!”

- The traits and characteristics of a great developer relations professional

- Tips for those who are new to developer relations

- Best ways to connect with developers

- Online events during a pandemic

- Microsoft [Learn] (https://docs.microsoft.com/en-us/learn/?utm_source=SlashData_devto&utm_medium=JeffSandquist&utm_campaign=Podcast) and [LearnTV] (https://docs.microsoft.com/en-us/learn/tv/?utm_source=SlashData_devto&utm_medium=JeffSandquist&utm_campaign=Podcast)


**Listen to this episode for 20 years of experience on how to better understand developer relations and be better at it and connect with developers.**

{% spotify spotify:episode:6G1EG1Key0P8JoThl1DuLD %}

Graphs Jeff discusses in our “Let’s talk Data” section: [Documentation, tutorials, tools and community engagement are the core of developer programs] (https://www.devrelx.com/trends?lightbox=dataItem-k9mq59d21?utm_source=SlashData_devto&utm_medium=JeffSandquist&utm_campaign=Podcast) and [29% of developers contribute to open-source software to improve coding skills] (https://www.devrelx.com/trends?lightbox=dataItem-k9mq59gq?utm_source=SlashData_devto&utm_medium=JeffSandquist&utm_campaign=Podcast). 

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

**Jeff Sandquist** *is a Corporate Vice President at Microsoft. He leads Developer Relations, focused on reinventing Microsoft’s relationship with software developers around the globe. His team includes a full corpus of technical online content (Azure.com, docs.microsoft.com and Microsoft.com/Learn), a full stack engineering team that builds and operates the infrastructure for online content serving nearly tens of millions of monthly active users, an international team that localizes our products and content in 64 languages, a world-class developer advocacy team and the responsibility for partnering with the sales and marketing field leadership to land the rich resources offered with Microsoft customers and partners.*
Bash Script to Install FireFoxDeveloper Edition
Tags: bash, linux
Published: 2020-09-11 15:49:33

I am a big fan of [firefox](https://www.mozilla.org/en-US/firefox/new/) and since it came out with the finest distribution for developers [firefox developer edition](https://www.mozilla.org/en-US/firefox/developer/) it really made my web dev life easie.

Installing it in Linux is not that easy as it is in windows or in mac, but that's the fun about linux hehe, at least it is for me.

I've seen many articles and tutorials where people explain how to install it, but most of them it just get rid of firefox and replace it with the firefox developer edition. I just like to have both browsers the released and stable version and the unstable developer version.

So far I've been doing the installation manually and every time they have a new release I had to run the same command line again and again, got boring to me and I just created my automated script for it to do it on its own.

I uploaded the script to my github [update-firefox-developer-linux](https://github.com/gorka-lab/update-firefox-developer-linux) for everyone to use it.

let me show it to you here:
```
#!/bin/bash

# Source reference: https://www.rogerpence.com/posts/a-bash-script-to-install-firefox-dev-edition

function installFFDE {
	cd ~/Downloads
	ffdFile= firefox-*.tar.bz2
	tar -xvf $ffdFile
	mv firefox firefox-developer
	sudo cp -r firefox-developer/ /opt/
	echo "files were copied into /opt/"
	rm -r firefox-developer && rm -r $ffdFile
	echo "All files were removed, your're good to go"
}

function downloadAndInstallFFDE {
	curl -o releases.txt https://download-installer.cdn.mozilla.net/pub/devedition/releases/
	echo "Downloaded..."
	latest=$(grep -o '[0-9][0-9]\.[0-9][a-z][0-9]' releases.txt | tail -1)  
	echo "getting latest release...\nthe latest release is:\nfirefox-$latest.tar.bz2" 
	echo "got latest version"
	ffdFile=firefox-$latest.tar.bz2
	rm releases.txt
	curl -o $ffdFile https://download-installer.cdn.mozilla.net/pub/devedition/releases/$latest/linux-x86_64/en-US/$ffdFile
	echo "got latest version. Proceeding to install it"
	tar -xvf $ffdFile
	mv firefox firefox-developer
	sudo cp -r firefox-developer/ /opt/
	echo "files were copied into /opt/"
	rm -r firefox-developer && rm -r $ffdFile
	echo "All files were removed, your're good to go"
}

FILE=firefox-*.tar.bz2

if [ -e $FILE ]; then
	installFFDE
else 
	echo "installation file does not exists, will start downloading it now..."
	downloadAndInstallFFDE
fi
```
hope you all like it, let me know any improvement suggestions and happy to help.

Don't forget to Follow, ❤️ or 🦄
Happy Coding!!!
Automating your workflow with PLOP
Tags: javascript, react
Published: 2020-09-11 15:49:31

_Originally posted on Stackyack.tv_

This week my focus was on discovering ways I could automate routine tasks and workflows I go through when coding.

In my research I came across a JS library called PLOP. Plop is used by countless of companies like PayPal, Microsoft, Mozilla, Vimeo and more - so I figured I'd give it a quick spin.

I was blown away by how powerful it was. Especially when it comes to automating a lot of the boilerplate code I write daily.

Before I go any further, you may be wondering, is it even worth it to automate?

Should you spend the 30 minutes to an hour setting up an automation for a task that takes you just a minute?

Yes.

Well, really it just boils down to the frequency of that one minute task. If you find yourself doing said task on some sort of cadence, once a day, once a week, once a month even, then you absolutely should automate it.

That time adds up that you could use for something else.

Aside from saving time, automating your workflow minimises the amount of context switching you need to do, which consumes your mental energy – taking away from the primary tasks at hand.

Bottom line is that context switching should be dodged and avoided like jQuery.

So, if you're sold on automation and want to learn how, in this video, I dive into the Plop and show you an example of how you can use it to automate writing a React component.

If you care about saving time, you don't want to miss this one.

Check out the video here: https://youtu.be/OF1PJX1f-Jc