teleren/devto huggingface dataset:
Divtober Day 1: Fan
Tags: codepen, divtober, css, art
Published: 2021-10-02 02:43:10

---
title: Divtober Day 1: Fan
description: My entry for the first day of Divtober: an animated ceiling fan that starts moving when you pulled the string.
published: true
tags: codepen,divtober,css,art
series: divtober
---

[Lynn Fisher](https://twitter.com/lynnandtonic) is an amazing CSS Artist, and she is especially great at [creating CSS drawings using just a single HTML element](https://a.singlediv.com/) among many other projects she does ([Nestflix](https://nestflix.fun/) is a lot of fun!)

In October, she organizes #divtober, a one-month challenge in which she draws (and encourages other to participate too) CSS art based on different topics. This is the list for this year:

{% twitter 1442895061000155136 %}

And this is my entry for the first day of Divtober: an [animated ceiling fan that starts moving when you pulled the string](https://codepen.io/alvaromontoro/pen/gORyXgq).

{% codepen https://codepen.io/alvaromontoro/pen/gORyXgq %}

I'm not a big fan (no pun intended) of the colors I used, and some people may claim that I cheated by using an `<a>` instead of a `<div>`, but that allows for more interesting playground because it has different states that a `<div>` doesn't have, plus it can be used to redirect the page (only once though) and make use of the `:target` pseudo-class.
BinarySearch - Escape-Maze
Tags: programming, cpp, binarysearch, tutorial
Published: 2021-10-02 02:33:35

[https://binarysearch.com/problems/Escape-Maze](https://binarysearch.com/problems/Escape-Maze)

## Problem

You are given a two dimensional integer matrix, representing a maze where 0 is an empty cell, and 1 is a wall. Given that you start at matrix[0][0], return the minimum number of squares it would take to get to matrix[R - 1][C - 1] where R and C are the number of rows and columns in the matrix.

If it's not possible, return -1.

Constraints

n, m ≤ 250 where n and m are the number of rows and columns in matrix

## Solution

Use standard BFS.

Check if the matrix[0][0] and matrix[m-1][n-1] is 1 or not. If so, return -1.

Then we need a queue to store the coordinates and the local count.

Starting from (0,0), go for four directions and check if the target cell is valid or not. If so, update matrix[xx][yy] so that we won't visit it again and add it to the queue. If xx and yy reaches m-1 and n-1, check if the count is the minimal.

```cpp
int ans = INT_MAX, m, n;
int dx[4] = {-1, 0, 1, 0}, dy[4] = {0, -1, 0, 1};
bool ok(int i, int j) {
    return !(i < 0 || i > m - 1 || j < 0 || j > n - 1);
}
int solve(vector<vector<int>>& matrix) {
    m = matrix.size(), n = matrix[0].size();
    if (matrix[0][0] == 1 || matrix[m - 1][n - 1] == 1) return -1;
    queue<pair<pair<int, int>, int>> q;  // i, j, cnt
    q.push({{0, 0}, 1});
    matrix[0][0] = 1;
    while (!q.empty()) {
        auto p = q.front();
        q.pop();
        int x = p.first.first, y = p.first.second, cnt = p.second;
        if (x == m - 1 && y == n - 1) ans = min(ans, cnt);
        for (int i = 0; i < 4; i++) {
            int xx = x + dx[i], yy = y + dy[i];
            if (ok(xx, yy) && matrix[xx][yy] == 0) {
                matrix[xx][yy] = 1;
                q.push({{xx, yy}, cnt + 1});
            }
        }
    }
    return ans == INT_MAX ? -1 : ans;
}
```
BinarySearch - One Edit Distance
Tags: programming, binarysearch, tutorial, cpp
Published: 2021-10-02 02:32:47

[https://binarysearch.com/problems/One-Edit-Distance](https://binarysearch.com/problems/One-Edit-Distance)

## Problem 

Given two strings s0 and s1 determine whether they are one or zero edit distance away. An edit can be described as deleting a character, adding a character, or replacing a character with another character.

Constraints

n ≤ 100,000 where n is the length of s0.
m ≤ 100,000 where m is the length of s1.

## Solution

Find the first index i that s0[i] is not equal to s1[i]

Based on the length of s0 and s1, compare the rest of the sub string are same or not.

```cpp
bool solve(string s0, string s1) {
    int m = s0.size(), n = s1.size();
    for (int i = 0; i < min(m, n); i++) {
        if (s0[i] != s1[i]) {
            if (m == n)
                return s0.substr(i + 1) == s1.substr(i + 1);
            else if (m < n)
                return s0.substr(i) == s1.substr(i + 1);
            else
                return s0.substr(i + 1) == s1.substr(i);
        }
    }
    return abs(m - n) <= 1;
}
```
Web Component Progress
Published: 2021-10-02 02:30:16

We are currently making a reusable button web component in one of my classes. I'm going to run through the current status of the project.

When clicked the button will play a randomly picked audio clip from a selection of meme audios. Currently, the button has five properties (link, title, icon, disabled, play) that can be adjusted to personalize the button for yourself. When clicked the button plays an audio clip then opens the link in a new window. The button has functionality that will updated properties based on other properties. For example, is the play property is set to true, the button will also be disabled to prevent spamming. We also included various CSS properties to not only shape the button but change how it looks based on different states. For example, when the button is hovered over, the text and button color will change. Also, when the button is playing an audio clip, the button color will change as well.

Link to repo: https://github.com/IST-402-Group-1/KMBtn
(I haven't pushed most of the changes yet)
{Insert Hacktoberfest 2021-Related Title Here}
Tags: hacktoberfest, opensource
Published: 2021-10-02 02:27:12

---
title: {Insert Hacktoberfest 2021-Related Title Here}
published: true
tags: hacktoberfest, opensource 
---
<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 

### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2021 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Why we've to use Redux. The Problem it solved.
Tags: redux, javascript, react
Published: 2021-10-02 02:16:45

In this tutorial, I'll show you

1) What is Redux,
2) Why We've to learn Redux
3) Which specific problem solved by Redux
4) Why Redux is Beautiful and we must learn it to become a pro React Developer.
 

## What is Redux:

1. Redux is A Predictable State Management Library Manage Whole Applications State
1. Redux Follow Single Source of Truth Behave Consistence - Do Exactly What in Reducer
1. Redux is a Library or Framework Independent.
1. Redux Can work with -
 - React JS
 - Vue JS
 - Angular
1. Persistence Data could be saved across whole application Can prevent all re-render

## What was the Problem of a normal Data communication in React Application

Let's assume, we have a simple E-commerce application. So, here will be the data storage system of this

Get Full Article on DevsEnv - https://devsenv.com/tutorials/redux-js-introduction-what,-why-and-how-to-start

Download Source Codes Day Wise - https://github.com/ManiruzzamanAkash/redux-learning
🚀Una revisión rápida a los web components con Lit 🔥
Tags: javascript, webdev, programming, tutorial
Published: 2021-10-02 02:16:29

En este post tendremos una pequeña vista de como crear web components utilizando Lit 2.0 el cual hace esta tarea bastante sencilla. Además, nos da la libertad de escalar tanto como lo necesitemos. Ya sea agregando **unit testing, story books, patrones de diseño, entre otros**.

Personalmente, he tenido mayor experiencia trabajando con Stenciljs pero con esta librería he encontrado un mundo de posibilidades a la hora de agregar componentes independientes o módulos a una aplicación sea ya creada o una que apenas comienza.

##Sintáxis de Lit##

```javascript
import {html, css, LitElement} from 'lit';

export class ExampleComponent extends LitElement {
  static styles = css`p { color: blue }`;

  static get properties() {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Good, ${this.name}! 🚀</p>`;
  }
}
customElements.define('example-component', ExampleComponent );

```

En este punto es importante mencionar que lit puede trabajar con Typescript o Javascript y elegir entre uno de ellos va a depender de que necesitamos para nuestro proyecto. Asimismo, los componentes de Lit están basados en class components, tienen un ciclo de vida y manejan un método render donde usualmente muestran el HTML del componente.

La forma de llamar a nuestro componente es tan sencilla como:

```
<!DOCTYPE html>
<head>
  <script type="module" src="./example-component.js"></script>
</head>
<body>
  <example-component name="Gabriel"></example-component>
</body>
```

Algo que hace interesante a Lit, es el peso de sus componentes ya que son bastante ligeros en comparación a otras librerías generadoras de web components.

Invito a probar esta librería en su link oficial = () => https://lit.dev/
Introduction to Java
Tags: java, programming, opensource, dsa
Published: 2021-10-02 02:05:10

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s69jvxcme5m2bxnb77ur.png)
 
###What is Java?

Java is a popular programming language, created in 1995.

It is owned by Oracle, and more than 3 billion devices run Java.

It is used for:

* Mobile applications (specially Android apps)
* Desktop applications
* Web applications
* Web servers and application servers
* Games
* Database connection and much more 

###Why Use Java?
Java works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc.) and thus platform independent.
* It is one of the most popular programming language in the world
* It is easy to learn and simple to use
* It is open-source and free
* It is secure, fast and powerful
* It has a huge community support (tens of millions of developers)
* Java is an object oriented language which gives a clear structure to programs and allows code to be reused, lowering development costs
* As Java is close to C++ and C#, it makes it easy for programmers to switch to Java or vice versa

###How to get started
I would surely advice you to first downloading the Java Development Kit(jdk) from the official Oracle website [here](https://www.oracle.com/java/technologies/downloads/#jdk17-windows) dependent on your system whether linux, Macos or Windows.

Next, I would download an Integrated Development Environment(IDE). They are a tone of IDE's out there but I would surely recommend Intellij IDE made by JetBrains due to a number of reasons here and there, you can download the Intellij community edition from [here](https://www.jetbrains.com/idea/).


* A quick hello world program
```
// a small Java program
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
```
For a more detailed introduction to java programming, I would surely encourage you to check out this wonderful [Introduction to Java - Architecture & Installation](https://www.youtube.com/watch?v=4EP8YzcN0hQ&list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ&index=3) by *kunal kushwaha*

Feel free to connect with me on [github](https://github.com/rukundob451) and [linkedin](https://www.linkedin.com/in/benjamin-rukundo-539ab01a6/), thank you.

Happy new month to all of you!
Working on Different Branches in Parallel   
Tags: opensource, csharp, github, git
Published: 2021-10-02 01:28:51

For this lab I continued my contribution to [glazed-donut](https://dev.to/belokond/glazed-donut-release-0-1-22nc). I have learned a couple of new commands. One of them was to create a new branch:

    git branch branchName

I also learned how to checkout (aka changing/going to) to a specific branch: 

    git checkout branchName

It was super cool to see how we can work on same branches at the same time. The process of it was effortless, just type in one command and you are good to go😋😎 I also had no idea that Visual Studio IDE had a merging conflict editor! Woah!

# New Features

## Feature 1: --lang

This time, I've added two features for [Glazed-Donut](https://github.com/dbelokon/glazed-donut). It now supports the [--lang](https://github.com/dbelokon/glazed-donut/issues/9) (or simply -l) command, where you can specify a language tag (ex: fr-CA for Canadian French) and it will set the lang attribute in the generated HTML files to whatever value you put. By default, it will set the lang attribute to en-CA. It is done so that the browser can know what language the contents of the file are, and how it can better interpret them. 

### Implementation Thought Process for --lang
The way I approached the implementation was that I added a new command to ArgumentParser and then modified the HTML skeleton that I was generating by adding the lang attribute and a placeholder for its value. 

## Feature 2: `<hr>`
Another feature I've implemented was supporting the [horizontal rule](https://github.com/dbelokon/glazed-donut/issues/10) in Markdown files. Basically how the program works now is that whenever it finds 3 or more dashes surrounded by empty spaces, it will replace them with the `<hr>` element in the generated HTML file(s). 

### Implementation Thought Process for `<hr>`
Then, I changed the parsing algorithm for markdown files so that I could identify whether a line had only 3 dashes or more while allowing white spaces before or after them. 

## Merging Process 
The first feature got merged without any conflicts. Everything failed when I was trying to merge the second feature. I had merging conflicts in my README.md file. There was also a conflict in the Program.cs file because it couldn't figure out what line of code to choose. In my case, I just had to choose what lines I wanted from both sides and remove the one that was no longer relevant to the updated code. Luckily, all the merge conflicts ([ad2b74c](https://github.com/dbelokon/glazed-donut/commit/ad2b74ce547b15a251d381eee2c75cd3dea54cd4)) were resolved successfully. 

# The End
Overall it was nice to see how powerful Git, GitHub, and Visual Studio are for software development. It was amazing to learn more about each of these tools.
My hacktoberfest adventure!
Tags: hacktoberfest, opensource, github
Published: 2021-10-02 00:54:51

---
title: My hacktoberfest adventure!
published: true
description: how I entered to open source contributions through hacktoberfest 
tags: hacktoberfest, opensource, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytoj26tnt6duwtcvrpio.png
 
---

It was a few years ago when I started this journey to participate in the Hacktoberfest event and I must confess I was quite nervous about it as I'm actually now too.

I've always looked up to dev who actively contribute to opensource projects since I know how difficult it is to keep up the pace and commitment it requires.

Back then in 2018 I started looking there for opensource project to contribute to during hacktoberfest and I realize even though most of them have a very strict process to get PRs accepted if there's a well defined guide to follow is because the core team is open to contributions, and if so they're also really open to help you out get started on it!

So my advice is to not be shy to start contributing and also reaching the core team with questions about the project!

I still remember that time when I received this package with that awesome T-shirt and the swag! I was excited about reaching my goal of completing the challenge.

![Hacktoberfest 2018 gift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbuplxhg3m242ck5jv0g.png)

from then on I continued participating on Hacktoberfest each year but later on last year was quite great! since I moved on a step on not only looking for opensource projects to contribute to but more known repos and tools used by hundreds on devs...

Yes I'm talking about [GitHub-CLI](https://github.com/cli/cli) it was a great adventure! I learnt a lot from it, using Golang in good known cli tool to add a new *command*

The thread started from a feature request I found in the **issues** section inside the repo, I picked that up and starting working (even without the approval of the core team to add that new feature) I started the R&D process and implementation, asking questions about the project to the core team and building the new feature

Finally I made a PR and bum! 🤯 Pipeline failed to build the app for Windows!!! and then I realized, of course I'm trying to build a feature for a tool which is used across OS (Mac, Linux, Win) and honestly I had never done that before

It was a huge investigation phase until I finally made the feature work for the three major OS, opened up the PR and prayed 🙏 to be accepted by the core team

Discussions stated in the *code review* until it turns out the core team decided that was not feature they wanted to include in the CLI.

Well! sadly it was not merged and release to the users but I got the experience of at trying it and also the added up benefit of getting all that new knowledge.

Right now I'm looking for some **fun opensource project** to contribute to, so if your a maintainer and want some sort of contribution please write it down in the comments so I'll check it out.

Let's go Hacking! 💪 and thanks for reading.
You always wanted to dive into Machine Learning, what are u waiting for ? #100DaysOfML
Published: 2021-10-02 00:29:48




> **As a technologist, I see how AI and the fourth industrial 
  revolution will impact every aspect of people’s lives.**
– Fei-Fei Li, Professor of Computer Science at Stanford University.




I currently have been studying Machine Learning (ML) and I'm loving it.

I still just doing some tutorials and trying to understand a few concepts on Deep Learning, but I would like to make sure I will be even more committed to it.

That's why, I wanna invite you to follow a series called **"#100DaysOfML"** taught by [Smith Kolan on YouTube](https://www.youtube.com/playlist?list=PLVBat3Ko2nN9z2L0izo1Reb3SmXdw7npz).

ML might look like something extremely difficult, but it doesn't need to be, I encourage you to at least give it a try.

Maybe we could form a study group and share anything we're learning besides watching the videos. I'm open to  suggestions :D.
Screw online coding courses
Tags: beginners, codenewbie, decodingcoding
Published: 2021-10-02 00:28:34

---
title: Screw online coding courses
published: true
description: Why I dropped online courses and learned by doing instead
tags: beginners, codenewbies, decodingcoding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6kzx4x03w36uephf34q.jpg
---

There's an analogy about learning programming that I really like. Learning coding is like Lego, about starting small, block by block, to learn how things work before trying to bundle things together. In many ways, that’s how I started out on my coding journey. But I’m realising that maybe that has to be turned upside down now.

I did an online course on [Udemy](https://www.udemy.com/the-complete-web-developer-course-2/), learned the fundamentals of front-end and back-end development - HTML, CSS, Javascript, jQuery, Bootstrap, PHP and MySQL. Made some interesting little websites and apps, like a weather scraper. I enjoy learning by doing, and this course so far had a nice balance of 80:20 practice and theory for me.

But as the saying goes, there’s many ways to skin a cat, so there’s many ways to learn programming. Or anything for that matter. Particularly for programming, I feel like I’m starting to hit a wall. After all, I’m still following a predetermined course structure, set by *someone else* who have no idea what my level of proficiency is (or lack of), what my larger goals are, what my learning style is like, and how best to help me address those things. 

Ultimately, my goal is make products, but I feel like I’m constantly having to second-guess how the course is going to help me with that goal (even if they are fundamentals). 

So at this stage, I’m going to turn the “start small” approach on its head and go **big** instead. I’ll just try to build the product I want, with what little I know, and pick up the programming knowledge I need from there. In that way, it feels like I only need to learn what I need to build my product, nothing more, nothing less. Very efficient. No second-guessing whether something will come in useful later, like while on the course. 

So what’s the best way to learn programming? Start small? Or go big or go home? Or is there a third/fourth/nth way? I think there’s no silver bullet answer that applies for all situations, backgrounds and people. At least based on my own narrow silver of experience.

Best to try out various approaches, and adapt the best one(s) to suit your own context. And be open to changing that approach you initially picked when your situation changes.


---

Follow my daily writings on [Lifelog](https://golifelog.com/goals/30), where I write about learning to code, goals, productivity, indie hacking and tech for good.