teleren/devto huggingface dataset:
Motion animations with an SVG
Tags: animations, css, tutorial, beginners
Published: 2021-01-14 19:48:30

I personally think of CSS animations as something complex. While this is still true, I am making steps towards learning more about it, because that's the only way to fill knowledge gaps. I am going to teach you how to animate an SVG, using Figma and CSS. We are going to use Figma because it's so useful to ~see~ and ~group~ the elements that you will later want to animate. For the next steps, I will just assume you have a Figma account and a small project you can tinker with.

Our demo SVG is one from https://undraw.co/ (search for `reading`) and after some minor modifications, I used it on the front page of my digital garden https://gabriela.codes.

<h2>Open an SVG</h2>
Choose your image in SVG format and open it in Figma

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

On the left side, you will see all the individual ids for all the constructed elements. You can hide them, group them, delete them.

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

<h2>Group what you want to animate</h2>

We are going to select the character's left leg and group it into one element. Click on one part of the leg, hold `SHIFT` down and continue clicking on the rest of the items. You will get to a situation similar to this. After that `CTRL+G` and it will group it. Rename the default name to something that is representative of what you selected, for example: `leftleg`. Do the same to anything else you think it will be nice to animate, like the clouds, flowers, hands.

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

After you are done grouping, it's time to export the .svg file `with the id attributes` like in the image below.

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

<h2>Back to code</h2>
The first important part is completed and now we just need to write some CSS to animate our image.

We place our SVG inside a container:
```<div class="svg-animation-container">..</div>```
And we start adding animations for each group that we are interested into.

<h3>Right Leg</h3>
```
#rightleg {
  animation: rotateHand 5s alternate;
  transform-origin: top left;
  transform-box: fill-box;
  animation-duration: 16s;
}

@keyframes rotateHand {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}
```

Use CSS rotate() function to rotate in the opposite direction using a negative degree value `-5deg`.

<h3>Both hands</h3>
```
#bothhands {
  animation: rotateLHand 2s alternate;
  transform-origin: top left;
  transform-box: fill-box;
  animation-delay: 1.25s;
}

@keyframes rotateLHand {
  0% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0deg);
  }
}
```

<h3>Clouds going up</h3>

```
#clouds {
  animation: rotateLHand 2s alternate;
  animation-duration: 16s;
}
```

You can continue to add motion to other ids that you have in your SVG and just play around to see what goes good together. Don’t forget, some people can get motion sickness from too many animations on the screen. Trust me. :)
Day12 : 100DaysOfCode
Tags: 100daysofcode, programming, codenewbie
Published: 2021-01-14 19:43:32

not a good day,
no classes still day didnt well that productive

few leetcode ques 
then continued with learning trees
then some more leetcode ques 

.
.
finished daily scrum...and EOD  :(


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Understanding Rendering in Web Apps: Intro
Tags: rendering, webdev, javascript, html
Published: 2021-01-14 19:39:44

# Introduction

In web apps today, it turns out there are many approaches to delivering (dynamic) HTML to the web browser. Maybe you have come across terms such as 'Server-side Rendering', 'Client-side Rendering' or 'Isomorphic Javascript' what does it all mean? What is the benefit of choosing one over the other? In this series, I shall attempt to explain and categorize them.

# First, What do we mean by 'Rendering'🤔
The web pages of a dynamic website are automatically constructed based on data in a database rather than being manually written by a developer. This allows the content of the webpage to vary by updating the database instead of rewriting HTML and deploying a new version. 

![Dynamic vs Static comparison](https://dev-to-uploads.s3.amazonaws.com/i/xjb0nrdjpny3i92kn3lr.jpg)
[Image Credit: learnwebskill](https://learnwebskill.com/guide/static-website-dynamic-website)

**Rendering in the context of this series refers to how/when/where template (a preliminary version of markup) and data are combined to create the final markup content of a site.**

![templating visualization](https://image.slidesharecdn.com/htmltemplatingdotjs-141111051016-conversion-gate01/95/html-templating-dot-js-8-638.jpg?cb=1420356450)

[Image Credit: slideshare](https://www.slideshare.net/nsangam/html-templating-dot-js)

# Quick Rant 💬
In my opinion, it should be called 'Templating' instead of 'Rendering' because that's what it is. Especially when you consider the browser is actually rendering HTML (calculating and painting pixels) not matter the approach but hey I don't get to decide these things...

# Types of Rendering
In this series, I shall organize the various rendering approaches under two broad categories:

* Server-Side Rendering
* Client-Side Rendering

As the name might imply; the main difference of client/server indicates where the templating/rendering/interpolation takes place. Either on the client or on the server.

In the next post, we shall look at Server-Sider rending approaches.
Four Ways to deploy your Lambda Function from local to AWS - Serverless, SAM, Docker & Terraform
Tags: aws, terraform, python, serverless
Published: 2021-01-14 19:34:23

In this post I try to explain what I learnt about the various ways to deploy Lambda functions. Hopefully this will help someone else who is starting to learn the wonderful Lambda functions. On a high level these are the ways which I will go through here and I found easier to deploy a Lambda function:

- Using Serverless Framework  
- Deploy Lambda functions from Docker images
- Using SAM (Serverless Application Model) templates and Lambda Layers
- Using Terraform  

More Details here: https://amlanscloud.com/lambdadeploy/
Share your favorite job negotiation story
Tags: discuss, watercooler, career, beginners
Published: 2021-01-14 19:32:19

Negotiation is hard. I'm currently in the process for an offer I'm excited to accept. Everyone I've spoken with has encouraged me to counter and ask for the things that matter to me. But this whole process is uncomfortable, especially since it's my first dev role.

So, I would love to hear your negotiation stories. 

Have you ever regretted not negotiating more? Have you had to turn away a role you loved? Have you seen a major bump in compensation as a result?
Tableau Certification Training Course Online
Published: 2021-01-14 19:28:47

The [online tableau training](https://www.igmguru.com/data-science-bi/tableau-training/) by IgmGuru is planned to assist users in dynamic learning about Data visualization using Tableau and aligned with latest Tableau Certification Exam. The foremost goal of the learn Tableau Course Online is to help users gain a working knowledge of Tableau and visualize data into the dashboard using the tools provided by Tableau platform. The Tableau online training provides a basic understanding of Data types, extraction of Data, data blending, adding filters, highlighting data, geocoding, map and image visualization, and many more technical details about Tableau. Online tableau training helps users to culminate an outstanding knowledge of Data visualization using Tableau and develop a technical aptitude to design interactive dashboards based on organizational requirements.
How I got 6804 views on DEV for $8. It's so simple I can't believe almost nobody is doing this...
Tags: growthhacking, socialmedia, marketing
Published: 2021-01-14 19:16:03

Let's dive right into good stuff...

I wrote a post about [my 5-figure side-hustle](https://dev.to/oleksandrbezhan/how-i-launched-a-5-figure-business-while-working-as-a-full-time-software-dev-and-how-you-can-do-the-same-290b) and posted it on Jan 10th.

I launched Facebook campaign to drive traffic to the post and spent $58.14 on ads
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fvon0ol4j1g3ffp8fjo6.png)

Ads drove 775 clicks to the post averaging $0.08 per click. Ads traffic boosted my post rating and increased organic reach on DEV to 6804 views.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k6c44dnp31s5auvu5ad9.png)



**[My Twitter account](https://twitter.com/AlexBezhan)** got +51 followers. Even though the account is almost empty.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4dpc1bd4by7sav6ukamm.png)



My post made it to TOP 7 of the week and DEV.to sent me $50 gift.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6esazizygxb5pcq0xe64.png)

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


## Math results: 
- TOP post of the week
- 6804 views on DEV.to with 293 likes and 21 comments
- +51 Twitter followers
- $58 ads spent
- $50 gift from DEV
- $58(spent)-$50(gift)=**$8 total cost**

## Takeaways:
- Write a decent post. Publish it on DEV
- Drive enough ads traffic to the post so that it becomes TOP post of the week. If the post doesn't take off with $10 in ads, stop everything and write another post, which hopefully will do better. Profit.
- Put a CTA at the end of the post, so it converts to followers on Twitter

## My CTA(giveaway):
Go **[follow me on Twitter](https://twitter.com/AlexBezhan)** and send me a DM. I will **give away $50** gift for DEV.to shop to a random follower.
Happy new year friends,
Tags: microservices, python, django, flask
Published: 2021-01-14 18:41:52

So, it has been a while since I last wrote something here and as we start the new year would like us to start by creating a fully functional microservice using Django, flask and react for the frontend.
This will be a series that will begin today and we are going to cover all the nooks of the above tech.


Happy hacking.
Understanding API
Published: 2021-01-14 18:40:47

Before moving to API testing, lets understand what is API first? So the full form of API is "Application programing Interface". We can understand API simply as an agent which helps to communicate two different application. Suppose you have to establish connection between two applications which are developed using different programing languages. Say one application is written in java and another application is written in python, in this scenario API will be used.

Real time example of API's are: 

1. Travel Booking: Various applications like make my trip, yatra etc.. use API's for availability of flights, buses and trains.

2. Online payment: Online payment applications like phonepay, paytm, google pay etc.. also use API's for connecting to your bank and for completing the payment process securely.

Three tier Architecture of API consist of:
1. Presentation Layer
2. Business Layer
3. Data Layer
How to bulk-shorten urls in Google Sheets using Google Apps Scripts - a step by step tutorial
Tags: webdev, googleappsscripts, googlesheets, javascript
Published: 2021-01-14 18:32:12

Hi Devio people 💜, I hope that you are doing good. I want to share with you How to bulk-shorten urls in Google Sheets using Google Apps Scripts - a step by step tutorial. The full arrticle is published >> <a href='http://www.azaytek.com/2021/01/google-apps-script-tiny-url-shortening.html'>here</a> . Feel free to check it out :D
Capped Social Network - Building SaaS #76
Tags: python, django, design
Published: 2021-01-14 18:25:30

{% youtube n1tukooqPfs %}

In this episode, I started a new project to build a different kind of social network. This social network will contain a max number of connections to encourage thoughtful choice when growing your personal network. We talked MVP features and put in the basics of a Django app.

I had a wild thought to build a social network with a capped number of connection in the hope that users would choose their connections based on people that they really care about. To get that idea out of my head, I started a [social network repo](https://github.com/mblayman/social).

The first part of the stream outlines the vision behind this new network. Then I laid out the primary rules that would make this kind of network work.

Along the way, we brainstormed about privacy, access control, viable business models, invitations and virality, and other topics related to a social network. I came up with the Minimum Viable Product of features that could make a compelling app.

Once we did all the design thinking, I started a Django project. We borrowed heavily from my experience building the homeschool app that I'm normally building and got the site up on Heroku.

In the future, I'll be doing streams on either the homeschool app or this new social network.
Creating a temperature Messanger
Tags: showdev, mlh, majorleaguehacking, localhackday
Published: 2021-01-14 18:20:03

Temperature messanger is a CLI project where you can type in a city name and a reciever's contact number and the tool will send a text message to the reciever's number showing the temperature and weather of that particular city.

It uses a variety of modules including yarns to let the user enter details using command prompt, request to used the API's and Twilio and open weather API to send message and recieve the data.

I used [this article](https://codeburst.io/build-a-simple-weather-app-with-node-js-in-just-16-lines-of-code-32261690901d) to use the open weather API and then simply followed the twilio documentation to send an SMS. 

Here is the demo video->

{% youtube nA5G_0upops %}

Hope this helps!
pass statement in python
Tags: python, programming, beginners, tutorial
Published: 2021-01-14 17:55:00

The `pass` statement does nothing.

Wow, that's a bummer!

Hmmm...
Then, why do we need it?

Well, it can be used when *a statement is required syntactically but the program requires no action.*
Let's see an example:

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

This is also commonly used for creating empty classes so that we can come back later and code something:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3za67wodfpe86dloip5m.png)

Another place `pass` statement can be used is inside a function:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xsctya36fczkrhmrqkzx.png)

### Note:
* The body of any statement containing `pass` statements are ignored by the python interpreter, just like it ignores comments.

### Best Resources

- [Python Blog Series](https://dev.to/aswin2001barath/series/10416) : A Blog series where I will be learning and sharing my knowledge on each of the above topics.

- [Learn Python for Free, Get Hired, and (maybe) Change the World!](https://academy.zerotomastery.io/a/aff_tz1t0tpx/external?affcode=441520_dcwk-s8s) : A detailed roadmap blog by Jayson Lennon (a Senior Software Engineer) with links to free resources.

- **Zero To Mastery Course** - [Complete Python Developer](https://academy.zerotomastery.io/a/aff_9khypm7v/external?affcode=441520_dcwk-s8s) : A comprehensive course by Andrei Neagoie (a Senior Developer) that covers all of the above topics.

**Who Am I?**

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through [Blogging](https://medium.com/techsoftware) during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

**Thank you** so much for reading my blog🙂.
How to Customize the Nano Text Editor in Linux
Tags: linux, systems, vim, nano
Published: 2021-01-14 17:40:16

Think about making your Nano more enjoyable? This is a step by step guide on how to do so.

By default, `Nano` looks ugly and most people fear or can’t use it at all and prefer to go for `Vi`/`Vim` or `Emacs`. Truth be told, these editors have some really great features. But, do you know that with a little effort you can have most of their features in Nano?

Let’s see how.

# In-line customization
First thing first. You need to try/preview the customization before setting it permanently. Don’t you?

So, how does it work? Very simple.  You just need to add option(s) when calling Nano on your terminal as this:

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

As you can see in the image above, we will be opening the `fizzbuzz.py` file with the mouse support enabled on the command line. It means that mouse clicks can be used to place the cursor, set the mark (with a double click), and execute shortcuts. By default, the mouse is not supported on the console. 

> **Note**: mouse support is not available on a full command line system.

Some other options are: `-i` (autoindent), `-l` (display line numbers to the left of the text area)...

Need to see other available options? Type man nano on the terminal.

Are you satisfied with these preview customizations? Now is the time to 

# Permanently set customization rules with .nanorc
What’s .nanorc? It’s a file that contains configurations for… Nano. Nano reads it on startup.  There’s one global file located at `/etc/nanorc`. But you can also create one for your own in your home (run `cd ~` if not in `home`) that will overwrite global configurations. 

Let’s now create our own `nanorc`.

From the CLI,  run `nano .nanorc` and add as many rules as you can following the example below:

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

Save the file by doing `Ctrl + X` and hint `Y` (for yes).

> **Notes**: 
> * You can see that I’ve added a `.` (dot) before the name of the file, I do so to make the file hidden.
> * For more info about nanorc, type `man nanorc`

From now on, if you open Nano all your setups will be taken into account.

Enjoy your editing with Nano!
best-of-ml-python: A ranked list of awesome machine learning Python libraries
Tags: python, machinelearning, datascience, github
Published: 2021-01-14 17:35:22

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ml8eq8d0vp4sci956bx.gif)](https://github.com/ml-tooling/best-of-ml-python)

We've curated a list of the **best machine learning Python libraries**!

The list is fully automated via GitHub Actions, so it will never get outdated. Every week it collects metadata from GitHub and package managers, calculates quality scores to rank projects inside categories, and identifies trending projects.

{% github ml-tooling/best-of-ml-python no-readme %}

📫  For updates on trending projects, new additions and detailed comparisons, follow us on [Twitter](https://twitter.com/mltooling) or subscribe to our weekly [newsletter](https://mltooling.substack.com/subscribe).
Flask Tutorial - The Interactive way, Ask Me Anything for three hours
Tags: flask, webdev, python
Published: 2021-01-14 17:31:24

---
title: Flask Tutorial - The Interactive way, Ask Me Anything for three hours
published: true
description: A new way to write a tutorial, by answering all questions 
tags: flask, webdev, python
cover_image: https://raw.githubusercontent.com/app-generator/tutorial-flask/main/media/flask-banner.png
---
Hello Coders,

My (nick)name is Sm0ke and I'm using **[Flask](https://palletsprojects.com/p/flask/)** for more than 5 years to code almost anything: simple one-page projects, API's and eCommerce-based platforms. The deployments were made starting with Apache, Nginx, Gunicorn, and uWSGI .. etc. Regarding this **Flask Tutorial**, the content will be provided based on your questions, starting with just a few links. 

---

> Thank you! **Content provided by [AppSeed - App Generator](https://appseed.us)**.

---

I'll be around here for 3hours - feel free to ask me anything. During this timeframe I'll do my best to provide quality answers based on my practical knowledge - **Some Flask-related** links:

- [Flask](https://palletsprojects.com/p/flask/) - the official website
- [Flask Docs](https://flask.palletsprojects.com/en/1.1.x/)
- [Flask Tutorial](https://github.com/app-generator/tutorial-flask) - (Github) Content provided by experienced developers.
- [Flask - A list of useful “HOW TO’s”](https://blog.appseed.us/flask-how-to-code-simple-tasks/)
- [Flask Cheat Sheet](https://blog.appseed.us/flask-cheat-sheet-and-free-templates-63zo/) - And FREE samples

--- 

**Suggested Topics:** 

- Deployment on CentOS, Ubuntu using Apache/Nginx
- Start app using Gunicorn, uWSGI
- What is WSGI
- How to structure a project
- ORM - how to use it and manage DB information with ease
- Migrations - using [Flask Migration](https://flask-migrate.readthedocs.io/en/latest/#flask-migrate)
- Flask Admin - using roles in a Flask application
- Protecting routes in Flask
- Session-based authentication via [Flask-Login](https://flask-login.readthedocs.io/en/latest/#flask-login)
- Using the Flask CLI
- Create custom (CLI) commands using **[Click](https://click.palletsprojects.com/)**
- Create tables dynamically - **at first request**
#Day 29 & 30: Solving CodeChef DSA learning series Day-3&4
Tags: 100daysofcode
Published: 2021-01-14 17:18:05

I had completed solving all the questions of the Week-1 of DSA Learning Series yesterday and today I've solved 3 questions of Week-2. 
Today's lesson: Check your input order while solving. I solved a question but I took the order of inputs wrong and wasted like 20 minutes trying to figure out the issue.
Setup Mobile OTP using AWS
Tags: opensource, github, javascript, aws
Published: 2021-01-14 17:12:00

Recently I was working on a project where I had to integrate an OTP System with Transactional SMS. 

I used the Amazon (AWS) SNS (Simple Notification Service) for sending SMS and implemented the API using Express.js (Node.js)

Checkout the project [here](https://github.com/realabbas/AWS-SNS-OTP-API)

# AWS-SNS-SMS-OTP API in NodeJS (Express.js)

### Setup
- Create an account on AWS
- Navigate to SNS
- Create Security Credentials
- Apply for Extension in Message Limit by contacting customer support in case the OTP fails

### API Endpoint

`GET Request to / route` with following paramaters in the GET Request

- message `String`
- number `String`
- subject `String`

### Instructions

Send a GET Request from browser,

`http://localhost:3000/?message=[Message]&number=[Number]&subject=[Subject]`

After triggering the API, you will receive the OTP.

![OTP from AWS SNS API Nodejs](https://dev-to-uploads.s3.amazonaws.com/i/kb75txaszcmtn8g3nqzq.jpg)

The mobile number should be E.164 format but without the + character.

*Example:*

You want to send a message to a number,

The country code is 44

The mobile number is (0)7700 900123

The E.164 format would be +447700900123

Remove the + character

Then Visit 

`http://localhost:3000/?message=my message&number=447700900123&subject=My Subject`

[Star the project](https://github.com/realabbas/AWS-SNS-OTP-API)