teleren/devto huggingface dataset:
Why I Created a Playlist on Spotify every month for the past 5 years
Tags: music, habits, spotify, automation
Published: 2020-02-16 12:50:02

---
title: Why I Created a Playlist on Spotify every month for the past 5 years
published: true
date: 2019-11-10 00:00:00 UTC
tags: music,habits,spotify,automation
canonical_url: https://jagascript.com/why-i-created-a-playlist-on-spotify-every-month-for-the-past-5-years/
---

![image](https://jagascript.com/static/4a657db7c9e5567edc4ef5190777cfeb/c739e/image.jpg "image")image credit: [Mohammad Metri](https://unsplash.com/photos/1oKxSKSOowE)

Some people love to carefully craft playlists, I’m by no means one of them.

I listen in mostly shuffle-mode from a collection of thousands of songs, so for me is not uncommon to listen Iron Maiden followed by Be Gees, Mozart up next and then again Katy perry.

In March 2015 I started creating a new playlist at the beginning of every month where I save songs I enjoyed to listen that month and continued since.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Ok cool, but why?

I find it fascinating to be able to check what I was listening to in some specific periods of my life and see how different styles of music I listen to

At the start of every month, I listen to the previous years’ playlists for the corresponding month, (this has the interesting side effect that I’m more likely to add songs from prev year to the current month)

What is amazing is that these songs triggers some kind of memories and being in the same time-frame make them revive memories associated with them

Another amazing thing is that listening to songs from Films and Tv Shows I’m able to tell what I watched (or rewatched) that month

## Automating the process

Using [IFTTT](https://ifttt.com/) I was able to create a new voice command for google assistant that would pick the phrase "save this song on my monthly playlist" and call an AWS lambda using [IFTTT webhooks](https://ifttt.com/maker_webhooks) to save the current song in the appropriate folder using Spotify API

--- 

If you are curious these are my lists from previous years in November

Please don’t judge me :D

- [November 2015](https://open.spotify.com/playlist/412yhxxfZ9dSq17E0x514c?si=4XW6Y9NvS0ibNVmaMyc7yw)
- [November 2016](https://open.spotify.com/playlist/3WBqCQAcrxrZdzj5s3N830?si=Gx0Atp4-SPWHpHQ6Ebbt_w)
- [November 2017](https://open.spotify.com/playlist/1Azo3uWXi3Arl65UiSMt75?si=miATZ3muQXCs5aE9bhMAdw)
- [November 2018](https://open.spotify.com/playlist/4PTlhsW7XgchvCuIr5AVQF?si=4KAddqeJQfSYv7Q4l7X_QQ)
- [November 2019](https://open.spotify.com/playlist/2hKiY5CPHTwze68Q7dZBBB?si=I7vRQe-XTCGLjcFh9yIJPw)

Func fact: I hide link of songs I listen to while coding in commit messages and code comments
Where did my October go?
Published: 2019-11-11 02:18:33

---
slug: where-did-my-october-go-2019
date: '2019-11-10'
title: 'Where did my October go?'
description: 'Wow... how in the hell did it already get to be November? I guess I should recap what has been going on.'
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q385u8gqd9zyaf25ai5p.png
---

Wow... how in the hell did it already get to be November? I guess I should recap what has been going on.

I spent a lot of my October getting things prepped and ready to go for Black Friday/Cyber Monday at my day job. This included things like building out new product launchs, preparing new site features to drive higher conversion rates, and scheduling the obvious price discounts across our websites.

To give some insights on what I've been working on, here's a glimpse into the specifics:
- Increased performance by over 20% (real-world load times reduced by ~3-4s on average)
- New checkout options to reduce stress of pricing
- New landing pages (always gotta build dem landing pages)
- Some secret projects I'm unfortunately not able to discuss publicly (*yet*)

Along with that, I've taken on some contracting work in the Shopify world. This is awesome because I'm working with up-and-coming tech to build futuristic Ecommerce stores. With the knowledge from Web Dev Twitter, Shopify's GraphQL API Documentation, and my own trial-and-error, I've started work on a few Headless Shopify websites that'll be really nifty! When these projects are done, I'll do a writeup of the tech stacks used, performance vs. the old client websites, and reasons for why I did headless for these use cases.

*ALONG* with the Shopify contract work, I've started work on my first SaaS/Startup as well! 🎉🎉🎉

This will be a service for Ecommerce businesses to better manage their customer service processes. I'm not gonna get into the nitty-gritty of this, because I don't want to give away my product just yet, but just know that the product already exists, and I've done extensive research and have definite validation for what I'm building out.

I'm giving myself a deadline of 10 weeks to get this launched in the Beta phase to start testing with a few select customers. At the end of each week, I'll be posting a review of my week to hold myself accountable to the public. I'm dedicated to releasing this product, as I want to help reduce friction in the Ecommerce space with specific products that I've been experiencing for years.

If you're interested in working with me on this project, I am looking for partners/contributors. Please feel free to [DM me on Twitter](https://twitter.com/tracy_codes) or email me at [tracy@tracycodes.com](mailto:tracy@tracycodes.com).
After her
Tags: personal, life, projects
Published: 2019-11-09 23:53:33

---
title: After her
published: true
description: How my life change after broked up with her
tags: #personal #life #projects
---

I prefer to write on another platform different common social networks, here is more private and anyone don't know about me.
I know that nobody doesn't understand the true reason why I broked up with her but was a good decision, she needed another person in her life, when you are like me, a person too sensible and with many ways to be, it's selfish thinking that all world have to do that you want. 
I know that she is ok, and I still love her, but my way is different, I really want to travel around the world, meet important people, do and participated in big projects, I'm a man with many things to improve and do better every day, but I will go for another way.
After her they come the hardest part of my life if I took that decision after 1 year I must to be the person that I wanted.

I'm really focused on meet people and hide my fears do whatever want to do, good things.
I want to know , how can I be more successful?
Video Accessibility: Adding Captions
Tags: video
Published: 2020-01-16 15:51:29

---
title: Video Accessibility: Adding Captions
published: true
date: 2019-11-09 22:59:39 UTC
tags: Video
canonical_url: https://dougsillars.com/2019/11/09/video-accessibility-adding-captions/
---

You have probably seen it while browsing your favourite social media feed - where a video plays silently, but there are captions running across the bottom, indicating that something interesting is happening. Personally, I am more likely to stop and watch a video in my social feeds if there are captions (while the video plays silently). … [Continue reading Video Accessibility: Adding Captions](https://dougsillars.com/2019/11/09/video-accessibility-adding-captions/)
📚 Awesome links from dev.to and around the web #5
Tags: ruby, rails, meta, css
Published: 2019-11-09 21:09:32


Hey fellow developers and designers 👋🏽

I appreciate the love you are showing for these awesome links. Here is this weeks's curation, I hope you like it too.

## ✍🏽 Links you might find interesting
⭐ [My Github Campus expert journey, and how you can become one](https://dev.to/harshil1712/my-github-campus-expert-journey-and-how-you-can-become-one-4den) - @harshil1712 

⭐ [What are your go to resources for learning ruby and rails](https://dev.to/nickytonline/what-arewere-your-go-to-resources-for-learning-ruby-and-rails-5611) - @nickytonline 

⭐⭐ [The future of DEV](https://dev.to/devteam/the-future-of-dev-160n) - @devteam 

⭐ [Nested resources in Rails 5](https://dev.to/brittanytinnin/nested-resources-in-rails-5-4oea) - @brittanytinnin

⭐ [Server side apps with client side rendering](https://reinink.ca/articles/server-side-apps-with-client-side-rendering) - [reinink.ca](https://reinink.ca)



---
## ✨ Random delights from around the world
⭐ [Rails Event Store](https://railseventstore.org) - Rails Event Store is a library for publishing, consuming, storing and retrieving events. It's your best companion for going with an Event-Driven Architecture for your Rails application.

⭐ [Github State of the Octoverse Report](https://octoverse.github.com/) - Github's analysis of how open source is being used everywhere and the trending programming languages and more. Check it out. 

⭐⭐ [Adam Watham's live TailwindCSS streams](https://youtu.be/6xgMkGMIudE) - Adam Watham live streams as he builds a fancy Inbox UI with TailwindCSS, as designed by Steve Schoger. A must watch for someone who wants to up their design skills.

---
## 🙈 Shameless Plugs

[Follow me on Twitter](https://twitter.com/intent/follow?screen_name=kudapara), I post mainly about programming, design and some updates on the projects I'm working on.

---

> Live as if you were to die tomorrow. Learn as if you were to live forever.
 – Mahatma Gandhi

---

Cheers 🥂
[@kudapara](https://twitter.com/kudapara)
How to Make HTTP Requests In React
Tags: showdev, react, javascript
Published: 2019-11-09 20:59:48

We often make HTTP requests to an API endpoint or server to get data, for instance, user data, using various methods. This is a common task in web development, and in this video, I will be showing you how to do that.

We'll be using Indreed API in this video, which is a free job search as a service built on Python.

There are many ways to send HTTP requests either using the native Javascript APIs or using a library that reduces the steps you take to send a request with the native API.

Lets get started...

{% youtube nz4VSM0OxPE %}
Implementing manual OAuth sign-in flow for Facebook and Google
Tags: discuss
Published: 2019-11-09 19:53:16

---
title: Implementing manual OAuth sign-in flow for Facebook and Google
published: true
tags: discuss
---

Our web app uses Facebook and Google social logins. We've implemented those using the recommended approach with JS SDKs. 

That was easy to do and works fine most of the time, but I've started to see many users facing issues with that when they access the web app using a private browsing mode or have other privacy-related settings turned on. Namely some browsers block the Facebook JS SDKs, and many block third-party cookies which breaks the default Google sign-in.

Given that I've started thinking about implementing the OAuth flow manually completely skipping the JS SDKs. Seems like this will give the most robust results, it is better for user's privacy and can save some bandwidth on the initial page load.

Have anyone followed the same route? Are there any concerns with this approach, e.g. about the security of SDK way vs the manual way?

See also:
* [Google OAuth Flow](https://developers.google.com/identity/protocols/OAuth2UserAgent)
* [Google JS SDK Sign-in](https://developers.google.com/identity/sign-in/web/sign-in)
* [Facebook OAuth Flow](https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow)
* [Facebook JS SDK Sign-in](https://developers.facebook.com/docs/facebook-login/web)
My experience with .NET IoT (so far)
Tags: csharp, dotnet, iot, programming
Published: 2019-11-09 19:26:52

---
title: My experience with .NET IoT (so far)
published: true
description: I haven't done any embedded development in a while and I was thinking to build myself a remote controlled toy car with video streaming.
tags: csharp, dotnet, iot, programming
---

![cover](https://thepracticaldev.s3.amazonaws.com/i/t8680jyx9l0y8fbgeir2.jpg)

I haven't done any embedded development in a while and I was thinking to build myself a remote controlled toy car with video streaming.

The project is going to take me a while. To build it I'm going to use C#. I'm already too familiar with Python and a little challenge doesn't hurt.

To interface with the hardware, I'm going to use the [.Net Core IoT Libraries](https://github.com/dotnet/iot) from Microsoft.

---

My idea was to create a set of [.Net Core](https://dotnet.microsoft.com/download) services that communicate internally via [gRPC](https://grpc.io/) and an ASP.Net Core web application to control the car. (Now that I'm writing this I'm thinking that could possibly drop the web app and use gRPC directly from the client).

The client would be a desktop application that will display the video stream and data from the sensors. It should work with an Xbox controller or else it won't be fun. :( 

To write it I will probably use [Mono](https://www.mono-project.com/) or [Unity](https://unity.com/).

---

After burning the latest version of Raspbian on the board using [Etcher](https://www.balena.io/etcher/) and spending a few hours in [Rider](https://www.jetbrains.com/rider/) developing a base for the app. I've Installed .Net Core 3 SDK and ran the application. The results were amazing! I've checked the thermostat in the office and it was set on 25

![readings](https://thepracticaldev.s3.amazonaws.com/i/4p9r02yigi8ky2jczk10.jpg)

And the application only consumes ~10MB RAM! That's awesome!

---

I'm really impressed and so far things are looking bright for `dotnet/iot`. I can't wait to test the gRpc support and other hardware modules. 

The full code can be found here: https://github.com/dnutiu/NucuCar

If you want to run the app on your Raspberry you'll need to install the .Net Core Sdk ([Instructions](https://dotnet.microsoft.com/download/thank-you/dotnet-sdk-3.0.100-linux-arm32-binaries)) and run the following commands:

```bash
git clone https://github.com/dnutiu/NucuCar.git
cd NucuCar
dotnet build
cd NucuCar.Sensors
dotnet run
``` 

---

Thanks for reading!

I hope you will give `dotnet/iot` a try for your next project!
Language Flaws - Let's talk about them
Tags: discuss, watercooler
Published: 2019-11-09 18:54:29

I hear a lot about the flaws of JavaScript and why people don't like it or think the language (JavaScript) is "garbage" for reason A or B... etc. 

I don't very often hear about the quirks and flaws of other programming languages; now to be clear, I don't think any language is "garbage" I think that is generally naive or myopic perspective, each language was a tool created for solving a problem/s even if its a multitool that doesn't make it perfect. If there was a perfect programming language, I feel like we would all be using it for everything.

So let's hear about some of those flaws and quirks of other programming languages.
4 Underrated Nuxt Modules
Tags: nuxt, vue, webdev, jamstack
Published: 2019-11-09 18:34:04

_Post updated with the release of Nuxt v2.13: replaced nuxt-payload-extractor with nuxt-netlify-cache_

## 1. nuxt-polyfill
Do you have to support that dying IE11? Then you probably need some polyfills. An easy and performant way of adding polyfills is through this plugin: [nuxt-polyfill](https://github.com/Timkor/nuxt-polyfill)

## 2. nuxt-svg-loader
SVGs are great and performant, especially when inlined. However, the inlined code can quickly become unwieldy. It would be great to be able to import them as you would import Vue components, and even pass props to them, right? Well look no further: [nuxt-svg-loader](https://github.com/Developmint/nuxt-svg-loader) has got you covered.

Tip: if you work with [Tailwind](https://tailwindcss.com/), you can easily use Tailwind classes to control the size and the color of the SVG.

```html

<my-imported-svg class="fill-current text-teal-500 inline-block h-12 w-12"><my-imported-svg>

```
## 3. portal-vue
Thanks to this Vue component, you can organize your HTML code logically and not according to the rules of the DOM. For example, if a button opens a modal, you can have that modal right next to the button in your code, but have it rendered before the closing body tag. [portal-vue](https://github.com/LinusBorg/portal-vue) is a truly versatile component, which will be built into Vue 3!

```html
<body>
 <main>
  <div>
   <button>Open Modal</button>
   <portal to="modal">
    <div>My Modal</div>
   </portal>
  <div>
 </main>
 <portal-target name="modal"></portal-target>
</body>

``` 

## 4. v-lazy-image
The Intersection Observer API is now supported in all major browsers and lets you do stuff like programmatically load images. Although that API is not so complicated, it still takes some time to implement the logic for lazy loading images.
In Chrome you can already write `<img loading="lazy">`, but it will take a while before the other browser vendors support this new attribute.
In the meantime, use [v-lazy-image](https://github.com/alexjoverm/v-lazy-image) to achieve the same effect! You can even provide a low-resolution placeholder!
What keeps you motivated and what do you find rewarding in your career?
Tags: career, discuss, webdev
Published: 2019-11-09 17:02:27

---
title: What keeps you motivated and what do you find rewarding in your career?
published: true
description: Discussion about motivation and rewards in the web development industry
tags: #career, #discuss. #webdev
---

I've been in the web development industry for many years now and I find this is a tricky question to answer sometimes. Personal growth has always been a major driving factor in my career, and I find it satisfying to experiment with the latest web technologies. It seems like the best motivation and reward is being able to work on something you genuinely care about and have passion for.

However, we don't always have that luxury at work. Unless you are the owner of the company, it's hard to *always* be passionate about the work you are doing. What if you don't actually care about your latest project at your job?

This leads me to the question: What types of incentives and rewards work well in our industry? If you meet that tight deadline after months of coding, does your company do anything to reward you? Should they?

I can only speak to my personal experience, but normally it's a favorable annual review and a salary bump. Our company also uses https://bonus.ly as a peer to peer reward system, which is kinda fun but sometimes seems lacking. We also have at least 1 or 2 team building activities throughout the year.

I've heard that money is usually a bad motivator in our field. If you dangle a cash prize at the end of a deadline, it leads to more stress and poor code quality. If you have experienced with this, or if your company has a good system of incentives and rewards, please share below!
GRUNT JAVASCRIPT FOR BEGINNERS
Tags: grunt
Published: 2019-10-21 14:35:49

#Allow me to Introduce Grunt
Grunt is automation created by Ben Alman. Many companies use grunt to name the same are Walmart, Microsoft, Adobe, jQuery, Twitter, Mozilla, Bootstrap. It is also a build/task manager written on top Node.js.Some advantages are that it can make your code run more efficiently. This article will discuss many things such as installing it on the terminal, the three components, concatenation, uglify, minification, and how they all tie together. 

#Installing Grunt on terminal OSX Mac#
To use grunt you need to install it in the command line interface globally, so you can use it on many projects. The command line you enter is npm install -g grunt -cli.  The -g stands for globally, the grunt allows it to be run in any directory. The grunt -cli stands for it to be multiple versions installed simultaneously. People use Grunt because of having the idea of having a common set of tasks that can be executed across many unique repositories. There are three components to Grunt, they are the command-line interface, a repositories Grunt file, great plugins. 
#Three components to Grunt 
## A repositories Grunt file
The Gruntfile.js or the Gruntfile.coffee file is a valid belong in the root directory that is right next to package.json. This file should be committed to the project source.  The Grunt file has four parts the function, project and task configuration, loading Grunt plugins and tasks, and custom task.
## The Command-Line Interface and The Plugins 
Installing plug-in the terminal can be tricky. However, the easiest way to install the plugin is npm install <module> --save -dev. For the <module>I highly recommend downloading the module starting with grunt -contrib…. By doing that, the plugin that the creator made, and it is well documented. The three popular plugins are concatenation, minification, and uglify. 

# Concatenation, Minification, and Uglify
To download any of these plugins you would follow the command line to download plugin replacing the module with the respected plugin name. Concat will concatenate a specified amount of files into one. This will save time on reading pages. Minify gets rids of white spaces, which make the computer quicker to read. Uglify changes the variable and functions name up. By doing that, it will provide security and making it hard to understand what is going on. Most people use all there and by doing all that, it will create or app development to run faster and provide security. 

#Conclusion
There is still a lot you definitely should read about because Grunt is very effective, yet very complex. Grunt is a task and environmental runner, and is broken down three components are command-line interface, a repositories Grunt file, great plugins. Can use concat, minify, and uglify to make your code fast and secure. Also, I highly recommend to check out the grunt documentations.
JQuery: How do I remove the fly effect of .hide?
Tags: jquery, javascript, html, help
Published: 2019-11-09 16:59:31

Hi guys! I have a thing to ask.
Do you know how to remove the effect of the .hide function of jquery that make the elements fly before disappearing?
Because in this code https://pastebin.com/ByFrsC9b I want that the first image disappears to make the second image take his place (as two slides), but the first image fly up before disappearing, and it mess up the scrolling.
Is there a way to remove this effect?