teleren/devto huggingface dataset:
How do I deal with learning multiple languages and still make it stick?
Tags: python, javascript, codenewbie, webdev
Published: 2020-12-18 15:28:04

2020's crisis gave me the time to really get on with learning on how to code. I started out with learning full-stack web development which was a great experience on the whole but on the last few modules the course was not so deep diving as it was in the first modules which covered the frontend(HTML/CSS/Bootstrap/JS/Jquery) in great depth.

Halfway into the course python got introduced and loved it on first sight, especially when used with Sql/DB's , flask and django.
I was amazed by all off the power of python and wanted to get to the bottom of it on how it all worked and how I could use it to really get a good sense of the back-end.

Sadly , the back-end part of the course was not as comprehensive as it was in the front-end part. The focus was mainly to learn just enough to get some interactive shopping web application working, commercially focused really.
Don't get me wrong i'd love to make a business with coding but my first and foremost motivation is to gain knowledge. 

So I learned to make a small app with a database , a flask chat app that runs on heroku and a taskmanager. It was fun but after the end of the course I did not feel like I really remembered on how to do that stuff again.

I took a short break from learning and being in front of the screen all day, because as you can imagine I was slightly disappointed in myself and I needed to recharge my motivations.

Some time later on I picked up things again and found some great python courses and soon found the love back again.
The previous course had missed a lot of fundamental syntax that now make it all work so much better.

However , I still would like to learn JS a bit better then only just the interactive front-end part . 
So this causing some mix ups in my brain when it comes to use of certain syntax. Of course a lot code-grammar is very much alike but it can be a lot to process all these subtle but crucial differences.

To give you an example classes in python work very much the same as in JS , so that really helps you to switch fast in your thinking process. I already thought of making a visual aid with an example code in python and in javascript to hang up in the room.

So share with me your thoughts and ideas on this subject!
This is my first post by the way , so let me have it ;)

Jos
What are your go-to tech podcasts?
Tags: discuss, watercooler
Published: 2020-12-18 15:27:42

---
title: What are your go-to tech podcasts?
published: true
description: Discuss your favorite podcasts in the tech world and why someone may want to take a listen!
tags: discuss, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7xjgx8pb25zdmxqo72vz.jpg
---

To get the ball rolling, here are some of my favorites:

- [The Bike Shed](https://bikeshed.fm)
- [Syntax](https://syntax.fm)
- [The Changelog](https://changelog.com)

# The Bike Shed

> On The Bike Shed, hosts Chris Toomey & Steph Viccari discuss their development experience and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.

The Bike Shed is a podcast sponsored by thoughtbot, run by thoughtbotters, talking about tech challenges encountered during the work week. I've gained insight into so many technologies from just listening to Chris and Steph chat about topics that showed up during their development week. Conversation often involves Rails and JS, but nothing is off-limits. Elm and Scala have come up a number of times.

# Syntax

> A Tasty Treats Podcast for Web Developers.

Hostedy by Wes Bos and Scott Tolinski, Syntax is a podcast for learning about new things in web development. Since Wes and Scott are both educational content creators, episodes vary from topic introductions to somewhat deep dives on more specific concepts. Definitely less "in-the-weeds" than The Bike Shed, which isn't really a good or bad thing.

# The Changelog

> Conversations with the hackers, leaders, and innovators of the software world

Episodes of The Changelog are generally setup as conversations with interesting people from the tech industry. From developer relations experts to software architects, you may not enjoy the guest of every episode, but there are almost definitely some that will pique your interest.

# What do you listen to?

These are a few tech shows in my podcast player, what's in yours?

---

<span>Photo by <a href="https://unsplash.com/@intelligenciya?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alexey Ruban</a> on <a href="https://unsplash.com/s/photos/audio?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
What Is Cloud Storage?
Tags: cloud
Published: 2020-12-18 15:06:35

**Cloud Storage**
Cloud storage is a model of computer data storage in which the digital data is stored in logical pools, said to be on “the cloud”. The physical storage spans multiple servers (sometimes in multiple locations), and the physical environment is typically owned and managed by a hosting company. These cloud storage providers are responsible for keeping the data available and accessible, and the physical environment protected and running.

**Cloud Storage Benefits**
Usability and accessibility

Security

cost-efficient

Convenient

Multiple users



**Cloud Storage Requirements**
Durability
Data should be redundantly stored, ideally across multiple facilities and multiple devices in each facility. Natural disasters, human error, or mechanical faults should not result in data loss.

Availability
All data should be available when needed but there is a difference between production data and archives. The ideal cloud storage will deliver the right balance of retrieval times and cost.

3.Security

All data is ideally encrypted, both at rest and in transit. Permissions and access controls should work just as well in the cloud as they do for on-premises storage.
Dynamic Pages - Webiny version 5
Tags: serverless, webdev, javascript, discuss
Published: 2020-12-18 14:52:43

In this highlight YouTube video, I'll explain how we plan to implement dynamic data into pages, the ones you build using our Page Builder Editor. The demo will show how we managed to load the data from our Headless CMS via a GraphQL Data Source, using the page URL as a source of the variable input.

{% youtube MZnvODyT7K8 %}
<figcaption>Dynamic Pages - Webiny version 5 (stay tuned)</figcaption>

This unlocks new and endless possibilities! Watch the video if you're interested in connecting your Page Builder to Headless CMS data, or even external APIs. 

Let us know if you have any questions or maybe some features that you'd like to see once this is released! 🚀

Note: this video is a highlight of the original video which you can access in our [slack community](https://www.webiny.com/slack?utm_source=Dev-to&utm_medium=webiny-site&utm_campaign=webiny-daily-posts-dec-15&utm_content=webiny-version-5-highlight-dynamic-pages&utm_term=W00435) the original video is ~11 minutes longs, so grab a ☕️.

---

Join us in this journey in our [slack community](https://www.webiny.com/slack?utm_source=Dev-to&utm_medium=webiny-site&utm_campaign=webiny-daily-posts-dec-15&utm_content=webiny-version-5-highlight-dynamic-pages&utm_term=W00435), you'll get more insights into the development process ⚡️🥁
Glassmorphism with Tailwind CSS Under 60 seconds
Tags: tutorial, css, tailwindcss, glassmorph
Published: 2020-12-18 14:43:34


Glassmorphism is an ongoing trend right now in User interfaces. The new macOS, Big Sur brings a lot of it into the OS, and Microsoft has it for years with Aero UI, then later FluentUI.

To recreate this effect on the web, we only need a few css properties, but what if we want to use Tailwind?

## Tailwind 2.1 Update

Tailwind 2.1 introduced first-party support of background-blur utility, so I'm back with a revision of this post.

The only classes you need to apply to your element right now:
`bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200`

[Here's the Play link for the updated code](https://play.tailwindcss.com/LTnkNgDSLj)


## Original article:
_(Only read this if you are curious about how it worked before Tailwind 2.1)_
If you prefer a quick 1 min video:
{% youtube sIRbiNKJ0Cc %}

---

_This article originally posted on [Davidlevai.com blog](https://davidlevai.com/tailwind-glassmorphism)._

---

We need these utility classes: `bg-opacity-{xy}`, `bg-clip-padding`, `bg-{color}`. We can add a little border and shadow to look better with these: `border border-{color}`, `shadow-{size}`.

And to completely recreate the effect, we should blur the background. We've got 2 options here:

### 1. Inline styles
Add a style property to the card div: `style="backdrop-filter: blur(20px);"`.

[You can access the full code here](https://play.tailwindcss.com/LTnkNgDSLj)

### 2. Extend Tailwind
We can use [Tailwindcss-filters](https://github.com/benface/tailwindcss-filters) to extend it and use `backdrop-filter` as a utility class.

Just `yarn add tailwindcss-filters`, then extend your `tailwind.config` file:

```
// tailwind.config.js
module.exports = {
  theme: {
    backdropFilter: {
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  plugins: [
    require('tailwindcss-filters'),
  ],
};
```

And now you can use the `backdrop-filter-blur` utility class on your HTML.

---

Do you have any other quick & easy solutions to common things with Tailwind?
Deploy Kubernetes Cluster in less than 2 minutes
Tags: cloud, googlecloud, civo, kubernetes
Published: 2020-12-18 14:36:21

Hello, Developer

If you use Kubernetes or if you want to try it for free as a beta test so click the link below for join CIVO CLOUD 
https://www.civo.com/?ref=7219e3

You will get 70$ Per Month For
testing 

Best of luck 👍
The Journey So Far 
Tags: career, html, webdev, css
Published: 2020-12-18 14:34:22

Hey welcome to my Dev to page, This is my first post on here and I'll be talking About my journey so far as a junior frontend developer

I first came in contact with Programming on a WhatsApp group chat in 2016, a guy named Danny was our tutor. He introduced frontend development to us and gave us some PDFs (HTML CSS and JavaScript).
I decided to go ahead and learn on my own before it's time for lectures, I started with Css and guess what? I was totally lost, the selectors then looks like alien language to me.
I then went back to HTML and I was understanding it gradually I start with the syntax before I moved to header tags, paragraph tags tables, list etc.
I remember coding on my Nokia E70 then. I was using wapka.mobi to test my HTML code.

Up until early 2017 I was still coding well until I got admitted into university to study computer science. I got busy and couldn't practice much.
The year 2020 is my turning point in my coding years. Due to the lockdown I was able to practice allot and I became consistent, I code almost every day and with that I made the progress that I couldn't in more than 2 years. I was able to perfect my HTML skill learn allot of CSS (like FlexBox and grid for layout, and also responsive design), vanilla js, Es6 and currently learning Bootstrap for my next project ( I have done allot of projects during this lockdown period)
My greatest mistake was not coding continuously through out the years and I'll encourage people who are new to coding never to give up, code more, have patience and watch your self Excel.
I wouldn't want to extend this conversation cause it may become boring but I'll be posting more on the problems I've been facing and how I've been able to overcome all of them. So see you soon and thank you
#9 DevOps Diary: Tips and Tricks
Tags: devops, tutorial, newsletter, kubernetes
Published: 2020-12-18 14:16:54

Welcome beautiful people! 

Can you believe that this is already week 9! I have something special prepared for next week, so make sure to stay tuned for that. 

In the meantime, we will look at more Kubernetes resources and some great video tutorials and talks that I came across within the past days.

## Videos🎥

- [Red Hat Says Farewell to CentOS](https://youtu.be/qqc3k5Ym1tA)
- [How to install Nginx Ingress Controller in Helm 3](https://youtu.be/ezX4D1ZK5mA)
- [Kelsey, Kubernetes, and GitOps - GitHub Universe 2020](https://youtu.be/yIAa5wHsfw4) — Kelsey Hightower's presentation at GitHub Universe
- [5 Simple Tips for Troubleshooting Your Kubernetes Pods](https://youtu.be/PM1LUZi8yLE)

## Blog Posts (and other written content)🗞️

- Get started with Chaos engineering; [specifically with Litmus](https://github.com/litmuschaos/litmus)
- A lot of times we learn about concepts and tools so fast, that we miss out on the basics — [here is a nice article on Kubernetes namespaces](https://medium.com/binbash-inc/when-and-why-use-multiple-k8s-namespaces-237b632bac5)

## [View the entire newsletter here](https://blog.anaisurl.com/9-devops-diary-podcasts-kubernetes/)
Understanding Important Concepts in OOP (Object Oriented Programming) - Without any Code
Tags: oop, java
Published: 2020-12-18 13:55:58

**OOP** or **Object Oriented Programming** is an important topic we need to study whenever we get into or are into coding. Be it interviews, exams, or contests and competitions. OOP's will always be there.

Today in my blog, I'll be explaining some essential terms and concepts that we come across in OOP. All this is presented without any code or technical terms. So, even if you don't know any language or are just a beginner, you can still read and enjoy the blog.

To start with, we have a concept called:
1.  ***Inheritance*** - A child always has a few characteristics of his/her parents. And we often see people saying the guy looks like his father or has a nose like his mother. 
Inheritance lets us use some properties already defined, thus facilitating reusability.

2. ***Polymorphism***  - It means one can have many forms at the same time. Look around you and see a man. Now, that man can be a father, a husband, a son all at the same time.
Another way to understand it is to look at yourself. Suppose you are in a classroom, you are a student to your teacher, a customer to the manager at the market, a son/daughter to your parents.

3. ***Abstraction*** - It is more like you don't need to know the underlying cause or the implementation method. 
To take an example, assume you move the gear handle in your car or press on the brakes. Immediately you'll see some changes in your driving experience. While doing so, you don't need to know what is happening inside the cars, causing the breaks to stop the vehicle.

4. ***Encapsulation*** - Meaning data hiding and security. A straightforward example to understand it take out a capsule from your medicine shelf. Now observe it. You see a top layer inside which there is a mixture of 2-3 medicine powders. Now the top layer is hiding the inside medicines. This is what is called encapsulation.
Another example is your smartphone. There are a lot of mini parts all embodied into one single outer body.

     In simple words, we can also define it as bringing different things inside one.

5. ***Object and Class*** - This is very simple to explain and understand. Think about human beings, Human Being is a class and "Man" is an object of Human Being similarly "Women" is an object of Human Being class.

This is all for this blog.
If it helped you understand the concepts better you can buy me a coffee for the encouragement at : https://www.buymeacoffee.com/ayushagarwal24.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link. 

[**Buy me a COFFEE!**](https://www.buymeacoffee.com/ayushdev)

Thank you! 🙏
When you get rejected as a web developer, it’s not personal
Tags: beginners, career, motivation
Published: 2021-05-09 01:12:36

---
title: When you get rejected as a web developer, it’s not personal
description: As a web developer, you're going to get rejected a lot. I want to help you understand that, when something doesn't work out, it's not about you.
published: true
date: 2020-12-18 13:55:00 UTC
tags: beginners,career,motivation
canonical_url: https://raddevon.com/articles/when-you-get-rejected-as-a-web-developer-its-not-personal/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hssok25ff7gqsm57wum.jpg
---
As a web developer, you’re going to get rejected a lot. You’ll end up not being able to close a freelance deal. You’ll make it to a third-round interview and end up getting passed over for someone else. Maybe it’s just a recommendation you make that the rest of your team doesn’t go for.

When you’re new, it’s hard not to take that personally. I did, and it led to a bunch of unnecessary pain and self-doubt. Here’s a pep talk that should help keep you from making the same mistake.

{% youtube Ca-1_gxZPMk %}

If you're just getting started in your career transition, please grab a copy of my free book [*5 Projects to Become Qualified as a Web Developer*](https://raddevon.com/5-projects-to-become-qualified-as-a-web-developer/).

[![5 Projects to Become Qualified as a Web Developer cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rfusucx22eozo9b8bmj.png)](https://raddevon.com/5-projects-to-become-qualified-as-a-web-developer/)

The post [When you get rejected as a web developer, it's not personal](https://raddevon.com/articles/when-you-get-rejected-as-a-web-developer-its-not-personal/) first appeared on my site [Rad Devon](https://raddevon.com/). Head over there for more help transitioning into your career as a web developer!
CSS 3D Rotation Animation Effects

Tags: html, css, beginners, 3d
Published: 2020-12-18 13:54:32

Hello guys in this tutorial, we are going to learn how to add 3D rotation animation effects using html and css.
**CSS 3D Transforms Methods**
With the CSS transform property you can use the following 3D transformation methods:

* rotateX()
* rotateY()
* rotateZ()

#####The rotateX() Method#####

```
#myDiv {
  transform: rotateX(150deg);
}
```
#####The rotateY() Method#####
```
#myDiv {
  transform: rotateY(150deg);
}
```
#####The rotateZ() Method#####
```
#myDiv {
  transform: rotateZ(150deg);
}
```
First we need to create two files index.html and style.css then we need to do code for it.

####3D Rotation Animation Effects Step:1####
*Add below code inside index.html*
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to make 3D Rotating Image in CSS ?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <span style="--i:1"> <img src="01.jpg"> </span>
      <span style="--i:2"> <img src="02.jpg"> </span>
      <span style="--i:3"> <img src="03.jpg"> </span>
      <span style="--i:4"> <img src="04.jpg"> </span>
      <span style="--i:5"> <img src="05.jpg"> </span>
      <span style="--i:6"> <img src="06.jpg"> </span>
      <span style="--i:7"> <img src="07.jpg"> </span>
      <span style="--i:8"> <img src="08.jpg"> </span>
      <span style="--i:9"> <img src="09.jpg"> </span>
    </div>
  </body>
</html>
```
####3D Rotation Animation Effects Step:2####
Then we need to add code for style.css which code i provide in below screen.


```
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #000;
}
.box {
    position: relative;
    width: 300px;
    height: 150px;
    transform-style: preserve-3d;
    animation: animate 30s linear;
}
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
.box > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0000001a);
}
.box > span > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
```
####3D Rotation Animation Effects Video output:####
{% youtube Lslj8igOAwI %}

####3D Rotation Animation Effects Codepen output:####
{% codepen https://codepen.io/stack-findover/pen/PoWVbKB %}


> For more interesting content

<a href="http://blog.stackfindover.com/" rel="dofollow">Visit for more!</a>
December 18th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-12-18 13:50:31

It's that time of the week again.

So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Deadpool and his cohorts chatting](https://media.giphy.com/media/w7fJO4TOqiaSQ/giphy-downsized-large.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-2a9p %}

<center>

![Big win. Danny Devito walking away from a huge explosion](https://media.giphy.com/media/U6pavBhRsbNbPzrwWg/giphy-downsized-large.gif)

</center>
Advent of Code 2020: Python Solution Day 18
Tags: adventofcode, algorithms, python, challenge
Published: 2020-12-18 13:40:13

This was not a hard task today. It was something like we studied on our Data Structure and Algorithms course, operating a equation on prefix/postfix order. But I had to take help from [here](https://www.reddit.com/r/adventofcode/comments/kfeldk/2020_day_18_solutions/gg81308?utm_source=share&utm_medium=web2x&context=3). So credit goes to the author.

```python
import re

class Solver(int):
    def __mul__(self, inp):
        return Solver(int(self) + inp)
    def __add__(self, inp):
        return Solver(int(self) + inp)
    def __sub__(self, inp):
        return Solver(int(self) * inp)

def evaluate1(expression):
    expression = re.sub(r"(\d+)", r"Solver(\1)", expression)
    expression = expression.replace("*", "-")
    return eval(expression, {}, {"Solver": Solver})

def evaluate2(expr):
    expr = re.sub(r"(\d+)", r"Solver(\1)", expr)
    expr = expr.replace("*", "-")
    expr = expr.replace("+", "*")
    return eval(expr, {}, {"Solver": Solver})

with open("day18.txt") as fp:
    lines = [line.split("\n")[0] for line in fp.readlines()]
print("Part 1:", sum(evaluate1(l) for l in lines))
print("Part 2:", sum(evaluate2(l) for l in lines))
```