teleren/devto huggingface dataset:
Awesome list in GitHub is awesome.
Published: 2021-03-06 21:54:08

I checked https://github.com/topics/awesome

It is the "awesome list" on the GitHub, and I found a lot of really awesome stuff. 

## What is an awesome list?

A list of repositories in GitHub.
An awesome list is a curated repository on a specific topic, usually listed in a Markdown list. Also accepts contributions (more popular repositories have stricter guidelines).

## Where?

Here: https://awesome.re/

## What?

>If you want your list to be included on awesome, try to only include actual awesome stuff in your list. After all, it's a curation, not a collection.

>But what is awesome?

>Only awesome is awesome
>Research if the stuff you're including is actually awesome. Only put stuff on the list that you or another contributor can personally recommend. You should rather leave stuff out than include too much.

In other words, it's a complete list of AWESOME things.


## Examples

List of Free Learning Resources In Many Languages
https://github.com/EbookFoundation/free-programming-books#readme

Roadmaps
https://github.com/liuchong/awesome-roadmaps#readme

Algorithms
https://github.com/tayllan/awesome-algorithms#readme



Enjoy and play with awesome!
Understanding Kubernetes in a visual way (in 🎥 video): part 5 – Jobs
Tags: kubernetes, devops, docker, beginners
Published: 2021-03-06 21:53:15

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 5 – Jobs
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu6jlw4o8e5pmqfy3ti3.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

The third episode is focused on a very important Kubernetes object: Namespaces.

{% youtube X5Lx757zeWM %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

Here the illustrations that you can see in the video:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4y7pb1zqod8yvi9mdk2.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/622v8wxy9sslid0w478c.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcua24v5j7k8klbva26a.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6ckhvh1thoj312hbbic.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwkbi6xeelpyk366lwzq.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b6nlfrpgdxry33fobe1.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esdroizgeyuu3rygdfg5.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pugsfgkgusqpl6nljbs.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/098zcylmrfoc2w8tuhdi.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5us2ycffo1c4244ik56.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co7n0yoijhzly760qb4g.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpjkrruuopgd57comrka.jpeg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Writing a TailwindCSS variant plugin
Tags: tailwindcss, css
Published: 2021-03-06 21:01:53

---
title: Writing a TailwindCSS variant plugin
published: true
description: Creating a small TailwindCSS variant plugin for the :first-line CSS pseudo-element.
tags: tailwindcss, css, tailwind
//cover_image: https://direct_url_to_image.jpg
---

I've been using [TailwindCSS](https://tailwindcss.com/) for the past few months and wanted to spend some time understanding how to create custom plugins.
I noticed that the CSS pseudo-element `:first-line` was not available by default in Tailwind so I decided to implement it myself by creating a variant plugin.

When using TailwindCSS, you add a `tailwind.config.js` file to your codebase where you specify different settings, themes, etc.
It's also in this file that you can add plugins.

To get started, you need to add a function inside the `plugins` property of your config file.

```javascript
// tailwind.config.js
plugins: [
    plugin(({ addVariant, e }) => {
    })
]
```

The `addVariant` is a helper function to register custom variants and `e` is for escaping strings meant to be used in class names.

Inside this plugin function is where you need to write the logic. 

In the end, I'd like to be able to write classes with the following syntax: `first-line:text-red`. This would set the color of the first line of an element to red, for example.

By default, `text-red` works but sets the color of the whole element, so how can we make the prefix `first-line:` work?

Here's the full code sample that I'll explain below.

```javascript
addVariant("first-line", ({ modifySelectors, separator }) => {
  modifySelectors(({ className }) => {
    const newClass = e(`first-line${separator}${className}`);
    return `.${newClass}:first-line`;
  });
});
```

In `addVariant`, I specify the name of my variant, here `first-line`.

Then, we need to use the `modifySelectors` function, and the `separator` option that lets you customise what character or string should be used to separate variant prefixes, in our case `:`.

Inside `modifySelectors`, we have access to the class that `first-line` is applied to. 

As we want to be able to write `first-line:text-red`, when the plugin detects that `first-line` is used, the `separator` is `:` and the `className` is `text-red`.

Then, this function returns this entire class and appends `:first-line` to target the first line of the element, the same way you would write it using vanilla CSS.

This way, the className generated in the end is `.first-line\:text-red:first-line`. Tailwind does its magic to use the color red, and this variant makes sure it's only applied to the first line of the element it's applied to. 🎉

And that's it! 🙂 If you'd like to have a look at the source code, you can find it on [Github](https://github.com/netlify/tailwindcss-first-line).
TL;DR of Why React is Not Reactive
Tags: react, speaking, summary
Published: 2021-03-06 20:48:22

---
title: TL;DR of Why React is Not Reactive
published: true
description: A recap of my first ever conference talk
tags: React, Speaking, Summary
slug: ReactRally
canonical_url: https://www.swyx.io/ReactRally
cover_image: https://user-images.githubusercontent.com/6764957/110220121-9f0aa500-7efe-11eb-8e7f-f2baddde1bbb.png
---

In 2018, I applied to [React Rally](https://2018.reactrally.com/) with the most interesting React problem I could think of: **Why do [the React docs](https://reactjs.org/docs/design-principles.html#scheduling) say that React is not fully Reactive?**

Here's the talk that resulted:

{% youtube nyFHR0dDZo0 %}

You can also read the accepted [React Rally CFP here](https://twitter.com/swyx/status/1112513571315830784?s=20) with long form details.

It's a 30 min talk but with a lot squeezed in there, because it was my first conference talk and I wanted to look smart in front of people I admired.

## TL;DR

Recently there has been some talk about [the "reactivity" of React](https://twitter.com/wycats/status/1368046172594565123?s=20) on Twitter recently, so I figured I would put up a quick TL;DR:

1. React *could* be fully push-reactive - i even wrote a PoC ([reactive-react](https://github.com/sw-yx/reactive-react)) to explore this. 
    
    I later realized this is basically the default state of things if you write any JS user interface with no scheduler.

2. But then you run into problems with [backpressure](https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7), where you need batching, and expensive renders (eventually causing the need for [time slicing and other async rendering techniques](https://www.swyx.io/react-outside/#why-look-outside-react)).

3. The solution is to **push updates** (reacting to external events) into a queue, but only **pull views on demand**. 

    ![https://pbs.twimg.com/media/Ev0gpXpVoAIzGHa?format=png&name=small](https://pbs.twimg.com/media/Ev0gpXpVoAIzGHa?format=png&name=small)
    
    This is also known as [scheduling](https://reactjs.org/docs/design-principles.html#scheduling). It's possible to implement this inside of an Rxjs-like paradigm, but it would be so finnicky that you'd basically be rebuilding push-pull reactivity inside of the scheduler anyway.

That's as short as I can make it. Let me know if this makes sense or you have better ways to put this!

*P.S. I was invited back for React Rally 2020, where I presented on [Growing a Meta-Language](https://www.youtube.com/watch?v=18F5v1diO_A), briefly sketching out some ideas for [React Single File Components](https://www.swyx.io/react-sfcs-here/).*
Let's Build for Ruby and Rails Developers - Part 18
Tags: ruby, rails, showdev
Published: 2021-03-30 14:16:46

---
title: Let's Build for Ruby and Rails Developers - Part 18
published: true
date: 2021-03-06 20:47:44 UTC
tags: ruby, rails, showdev
canonical_url: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-18
---

{% youtube Xsl0e48ZiNU %}

In part 18 of this Let's Build for Ruby and Rails developers series I begin adding more stateful UI to the mix to help improve the user experience as well as add some validation.

I chose to go with a library called [Vuelidate](https://vuelidate.js.org/) which aids in adding all types of validations to various inputs you may need. There are validators for email, URL, required fields, minimum character length, maximum character length, and much more. You can also create your own custom validators if you need even more control.

This library is not the easiest to work with (at least for me). It seems a little messy to implement and doesn't play well with a store pattern I like to use when working with Vue.js. All that said, trying to roll my own validation would take way too long to cook up so this library should work for now.

If this part is long-winded I apologize. I want to make sure to include some of the struggles in these videos as it's what really happens in the real world of being a developer. Some might not like that approach but I think it's helpful to see many aspects of the development cycle.

If you have any feedback, questions, tips, or concerns feel free to hit me up or reply in the comments.

Enjoy part 18!

- [View the entire collection so far](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers)
On Winning the Node Badge
Tags: discuss, webdev, node
Published: 2021-03-06 20:12:32

> **Disclaimer: This post contains no technical content.**

---

I wanted to write a brief post to express my gratitude for the overwhelming success of [my latest article](https://daily.dev/blog/how-to-build-an-smtp-mail-server-with-express-node-and-gmail). 

A special thanks goes out especially to my new subscribers and fans. I am honored and very grateful to you all. 

To express my appreciation, here's the highlights of what you helped me achieve! 

---

* **3x featured**
* **50+ retweets**
* **200+ reactions**
* **Over 6,000 views ...and...**

### **... 1 Node Badge!**
![Node Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdyag4vpdkittzwq1a7z.jpg)

---

And to the folks at [daily.dev](https://daily.dev) and [DEV](https://dev.to), thank you for providing the feedback, encouragement, and most of all the infrastructure to make this possible. 

I look forward to writing more quality articles that each of you will enjoy and benefit from. 

Thanks again! 🤗🤗🤗

  -- killshot13

---

{% user killshot13 %}

---
Learning Python
Tags: computerscience, python, programming
Published: 2021-03-06 19:43:46

My daughter attends a coding school and i'm amazed by the tools they use for coding. Gone are the days were you have to figure out which IDE you need to install and what version of framework is compatible and countless configuration files you need to tweak to get your IDE working in your machine. Now everything runs on browser and the browser becomes the IDE. That IMO is a game changer because they can now focus their time on what is important which is learning the language and forget all the hassles of setting up a development environment.

Here are some of the tools they use to learn coding

https://repl.it/ a free collaborative, in-browser IDE to code in 50+ languages — without spending a second on setup

https://colab.research.google.com/ allows you to write and execute Python in your browser, with Zero configuration required, Free access to GPUs & Easy sharing.

https://www.kaggle.com/ offers a huge repository of community published datasets and much more.
Python custom sum to speed up summation of range objects
Tags: python, algorithms
Published: 2021-03-06 19:00:28

If you have an object of type range in python, you can use the arithmetic progression formula to perform the sum of its elements.

> Sn = (n/2) [2a + (n-1)d]

Where,
n: total number of elements
a: first element
d: common difference

Create a custom sum in python to speed up summation of objects of type range.

```python
def custom_sum(obj):
    if isinstance(obj, range):
        n = len(obj)
        a = obj.start
        d = obj.step
        return (n * (2 * a + (n - 1) * d)) / 2
    else:
        return sum(obj)
```
How many?
Published: 2021-03-06 18:41:42

The other day I was chatting with a group of my Manipuri friends asking to the one who works in #devops the number of times their code gets deployed to production, he said 2-3 times a week and I said 4 times for my company, he said Jenkins and I said Bamboo and one question let to another and so on so forth from his role in implementing the whole CI/CD pipeline using Jenkins and Kubernetes in his current organization. Slowly I started wondering how many tech engineers must be there from Manipur and how nice would it be to learn from one another. Even though Manipur is such a small place, we have a produced a lot of engineers who contribute to this trillions of dollar industry. Won't it be nice to just hear and learn from their experiences like the work they do, the problems they face and the challenges they overcome?

This blog is just to capture the gist and intent of this group and provide a forum to promote collaboration where we exchanges ideas and help one another from our shared experiences. Be it learning a new language, getting proficient in a tool, library, framework or trying to narrow down on a tool or library for ones project.
AWS Quick Tip: Working with EC2 and IAM Roles
Tags: aws
Published: 2021-03-06 18:40:12

{% youtube lNzfPp2UYio %}

Allowing your applications to access cloud services on your behalf can sometimes be tricky. In AWS, you can take advantage of IAM roles to make this a lot easier.

Working with IAM roles and delegating service access to applications is a core concept when it comes to dealing with AWS.

In this AWS Quick Tip, CloudSkills Author Michael Levan explains how this works.
AKS Virtual Nodes with Chad Crowell
Tags: azure, devops, kubernetes
Published: 2021-03-06 18:37:41

{% youtube Mn56W-D-A-0 %}

Working with Azure Kubernetes Service (AKS)?

If you're in Azure and planning to work with Kubernetes, definitely check out how to SCALE virtual nodes and get your billing under control.

This 13 minute YouTube video is by CloudSkills Author Chad Crowell.
Find a pair in an array with a sum equal to the target using sorting.
Tags: geeksforgeeks, cpp, go, coding
Published: 2021-03-06 18:27:02

---
title: Find a pair in an array with a sum equal to the target using sorting.
published: true
description: Given array nums and a number target, check for pair in nums with sum as target.
tags: geeksforgeeks, cpp, golang, coding
---

https://alkeshghorpade.me/post/geeks-for-geeks-pair-in-array-with-sum-equal-to-target
How to use relational and graph db in one project?
Tags: discuss, graph, rdbms, neo4j
Published: 2021-03-06 18:23:17

---
title: How to use relational and graph db in one project?
published: true
tags: discuss, graph, rdbms, neo4j
---
I have some use cases which better fit graph db (neo4j), but most of the feature are handled in MySql.

I'm thinking of how to put a glue between both.
Would you duplicate some data to bind MySql with Neo4j, e.g nodes in neo4j keep reference to IDs from MySql or vice versa?

I'm using Spring and thought I'd use chained transactions to handle rollback gracefully of transactions which span both dbs.

For entities on the edge of both sql and graph worlds i plan to duplicate entities (not all properties, just the ones which are used in each db world + IDs)on both and on queries to join data on IDs.

In DDD it's a known technique to split domains and use separate DB for each domain, where certain DB technology fits better. Bit in my case it's really the same domain but different views.

I'm totally aware it all depends from the context and business use cases, but are you aware of some resources/examples of how people are doing it?

I know, "Google is my friend", but I had difficulties to find useful resources.
External access to your API in development with Conveyor
Tags: backend, api, conveyor, visualstudio
Published: 2021-03-09 15:35:51

---
title: External access to your API in development with Conveyor
published: true
date: 2021-03-06 18:11:50 UTC
tags: Backend,API,Conveyor,VisualStudio
canonical_url: https://blog.rodrigojuarez.com/2021/03/06/external-access-to-your-api-in-development-with-conveyor/
---

In my usual workflow, when I’m developing an API with Visual Studio, and I need to access it from a mobile app, I publish the API to Azure or a local IIS server.  
I need to do this because, by default, IIS express publish your API with the localhost endpoint, and it can’t be easily used outside the running machine.  
I was looking for a quick fix when I found [Conveyor, a Visual Studio extension](https://marketplace.visualstudio.com/items?itemName=vs-publisher-1448185.ConveyorbyKeyoti) that automatically provides our API’s external access. Additionally, I created an account on their website to enable public access to my API (outside of the local network).  
After installing the extension, it would start when I run my project in Debug mode.  
In the following screenshot, you can see which ones are the enabled endpoints.

![](https://rodrigojuarezdev.files.wordpress.com/2021/03/conveyor_endpoints.png?w=880)<figcaption>Enabled endpoints</figcaption>

We can also enable the use of certificates for HTTPS access.  
A great addition to my toolbox, easy to install and use ![😉](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f609.png)
Setup Local Git Server on your system
Tags: git, linux, tutorial
Published: 2021-03-06 17:55:02

Have you ever wonder how Github, Bitbucket are storing our git based project? Can we do these on our system? Let's find out.

So, the answer is Yes, we can create a local server on our system which behave exactly like popular version control software. Before starting I am assuming you know what Git is and used for.

#Create a server repository
Whenever you clone or initialize a git repository, there is two things which can be seen one is .git folder and other is your working area.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iaqqhiqgbmj53jql84x.png)

.git folder is the index folder which stores the metadata of working tree, config files, hooks, head refs etc. and other is the actual working area where you can see your local files.
To know more about .git folder. Follow this [link](https://www.greengeeks.in/tutorials/article/git-repository-structure/)

As, we are creating server so we don't need a working area. Can we do this? Of course.
First we create a server repository named **server.git**, you can name anything.

```
mkdir server.git
cd server.git
```
Now, initialize this repository with Git. But wait there is a change in the command. We have to use --bare argument with init command. What it does? It create a bare repository without any working directory. Make sense
```
git init --bare
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dot1j7q5djmjmh2kta8x.png)

As soon as you initialized the repo, you got the directory url which you can use in different directory as remote url. Isn't it so easy?

# Create a Client repository
Now it's time to create a client repository and check whether our setup is working or not. 
```
mkdir client && cd client
git init
```
Now, add our server as a remote to the repository.
```
git remote add origin /<path>/server.git/
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo04t7ctpfhbi533zhl2.png)

Let's check whether we're able to push our changes to the remote. Create a file with some content and add & commit.
Now push that file to the remote branch.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy19smk7qyi02xfgybdw.png)

Last step, can we clone this repository or download our changes.
```
git clone <path_to_your_local_server>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo0b42ah3j62rxrjqqjv.png)
Voila! It works

#What to do next?
Of course, you can host your local server repository over the internet using nginx or Apache. There are lot of things to do with Git. Comment your way to host local setup over internet.
How to spoof your timezone in Google Chrome
Tags: todayilearned, chrome, tips, timezones
Published: 2021-03-06 17:48:16

---
title: How to spoof your timezone in Google Chrome
published: true
description: How to spoof your timezone in Google Chrome without updating your system settings.
tags: todayilearned, chrome, tips, timezones
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5onffvy8m6oo2zol4dok.jpg
canonical_url: https://aileenrae.co.uk/blog/how-to-spoof-your-timezone-in-google-chrome/
---

Today I learned: you can spoof your timezone in Google Chrome **without** needing to change your system settings.

I was implementing user timezone preferences for a CMS product when I learned about this, much to my relief. I had been anticipating having to change my system settings over and over again as I tested how my datetime formatting behaved in different timezones.

So how do you do it?

1. Open DevTools in Chrome (<kbd>F12</kbd>).
2. If not already shown, open the Console drawer (<kbd>esc</kbd>).
3. Click the three, vertically-aligned dots at the top-left of the console drawer (`⋮`).
4. In the dropdown menu, select **Sensors**.
   ![Google Chrome Sensors tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e79bud0ywvwtdqk25mxa.jpg)
5. In the new Sensors tab, you can change your location to one of the presets, or choose "Other..." to manually enter a timezone.
   ![Google Chrome Sensors Geolocation option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5onffvy8m6oo2zol4dok.jpg)

If you're viewing this in Chrome, try it out now and take a look at the current time displayed in the Codepen below.

{% codepen https://codepen.io/aileen-r/pen/GRNXMvB %}