teleren/devto huggingface dataset:
000 - Coding Challenges with Friends
Tags: challenge, webdev, programming, ccwf2021
Published: 2021-02-21 20:09:24

A couple of months ago, I along with two of my friends decided to form some sort of weekend accountability group. The purpose of the group is not only to help push each other to be better developers/designers, but to be able to have a space where we can discuss things we can't usually talk about at work, and to experiment on technologies that we don't get to use on a daily basis.

Then a couple of weeks ago, we came up with an idea for a great app (at least we think it's great). In our excitement, we quickly started researching, planning, and designing. It didn't take long before we realized that the scale of the project is much, much bigger than we initially thought. Don't get me wrong, alright. We still think it's a great idea for an app, but with our current individual schedules, it's almost impossible for us to work on something that big right now. So that was a bit of a downer.

So earlier today, instead of sulking on the fact that we simply don't have that much time and space for it, and to stay true to the purpose of the group, we decided to work on a series of smaller challenges instead. Small projects that we can finish in a month even if we only work on it for 3 hours a week. We thought that a series of smaller victories is much better than erratic and inconsistent bigger victories.

And that brings us to this series: Coding Challenges with Friends! We came up with an idea that we think is cool, but still small enough to fit a 3-week timeframe. So keep your eyes peeled for Challenge 001 because it's going to be amazing!
Dockerize your Flutter App
Tags: flutter, docker
Published: 2021-02-21 20:07:09

Docker is a platform that delivers software in containers and usually uses OS-level virtualization. 

## The Need
Of course, the first question to pop up is the need. Why do we need Docker for Flutter Apps? Well, here it is, as Flutter Developers, we know the hardship of setting up Flutter SDK to Android SDK, Java, and whatnot. With Docker, we can say goodbye to all these installation processes and just grab the Dockerfile to build, test, execute and even deploy. You even don't need to worry about scaling, as Docker does it all for you.

## Getting Started
Let's begin by creating a Dockerfile. Here, we will be using Docker to run integration and smoke testing on your Flutter app.

```
FROM ubuntu:20.10 as builder
RUN apt update && apt install -y curl git unzip xz-utils zip libglu1-mesa openjdk-8-jdk wget
RUN useradd -ms /bin/bash user
USER user
WORKDIR /home/user

#Installing Android SDK
RUN mkdir -p Android/sdk
ENV ANDROID_SDK_ROOT /home/user/Android/sdk
RUN mkdir -p .android && touch .android/repositories.cfg
RUN wget -O sdk-tools.zip https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip
RUN unzip sdk-tools.zip && rm sdk-tools.zip
RUN mv tools Android/sdk/tools
RUN cd Android/sdk/tools/bin && yes | ./sdkmanager --licenses
RUN cd Android/sdk/tools/bin && ./sdkmanager "build-tools;29.0.2" "patcher;v4" "platform-tools" "platforms;android-29" "sources;android-29"
ENV PATH "$PATH:/home/user/Android/sdk/platform-tools"

#Installing Flutter SDK
RUN git clone https://github.com/flutter/flutter.git
ENV PATH "$PATH:/home/user/flutter/bin"
RUN flutter channel dev
RUN flutter upgrade
RUN flutter doctor
``` 

Run this Dockerfile in your system using the command ``docker build -t flutterdockerfile .``
This will begin your Dockerfile and start installing all the required tools for the perfect Flutter Development. 

Now go ahead and push your Flutter app to your git repository and make sure you set up testing in your ``widget_test.dart`` file.

Once you are done pushing the Flutter app, add few more lines to the Dockerfile.

```
RUN git clone GIT_REPO_URL
RUN cd FILE_NAME && flutter test
```
Replace GIT_REPO_URL with your Flutter git repo URL and FILE_NAME will be the name of your repo.
This will now begin test on your Flutter application.

## Alternative Method
* Pull the Docker image by running ``docker pull ameysunu/flutterdocker`` in your terminal.

* Now run ``docker images`` and get the IMAGE ID for the container.

* With the obtained IMAGE ID, run ``docker run -i -t IMAGE ID``, and you will be in the container.

* Clone the Flutter app from your git repository and run ``flutter test`` for smoke testing

I'm also linking this amazing post on DEV for Flutter Dockerization with Android Emulator as well.

{% link https://dev.to/matsp/let-docker-flutter-for-you-3gc2 %}
Make a Personal GitLab Instance with ReclaimCloud
Tags: reclaimcloud, gitlab, ci, pipeline
Published: 2021-02-21 20:03:32

#GitLab > GitHub
I know, I know, this is a very bold statement. Don't get me wrong, I love GitHub, and there is a time and place for it. If you're working alone or on a small project team it works amazingly. For an enterprise, GitLab offers more features designed for a company as a whole. They have organizational sign-in which creates a greater security for your information. They also allow for Continuous Integration (CI) for free, and because they have been doing this longer, it is a little better than the version on GitHub. Overall, both are great tools, but for a company, I would recommend GitLab.

#How to run your own instance
Check out the video down below to watch me do this!

##Sign-up for Reclaim Cloud
[Reclaim Cloud](https://reclaim.cloud/signup/) is a great tool for supporting development environments including GitLab. It charges based on usage not limits, which will save you a lot of money in the long run.

##Install GitLab
Head over to the applications page and click install on the GitLab instance. This will send you a confirmation email where you can deploy it in your environment. 

##Configure Environment Topology
Make sure that you increase the cloudlets minimum so your server can has enough allocated resources to run. To do this click on the button showed below and increase the Vertical Scaling Per Node bar.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv8leyeh3x9fmuvdcyka.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7pa0hl1vqoguvqjcrjs.png)

##Use it!
Now that you have the environment clicking on the link and inputting the emailed username and password will allow you to start using GitLabs. You can create a new project and explore all of the new things that GitLab has to offer.

Good luck and keep coding!

{% youtube P8mVeb1k3VE %}
Destructuring Tweets - Episode 8 - Timeout!
Tags: snippet, javascript, destructuring, settimeout
Published: 2021-02-21 20:03:26

---
title: Destructuring Tweets - Episode 8 - Timeout!
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. This episode features insights about an unorthodox sort method.
tags: snippet, javascript, destructuring, setTimeout 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dezhamgu46vmp5niyfko.png
---

Ahoy! Welcome to one of the articles about destructuring a coding quiz from Twitter. This time, we check out a very funny sorting algorithm. Be prepared to order numbers with timeouts!

# Snippet of the Week

This week's [snippet](https://twitter.com/catalinmpit/status/1361617224600064000) is from [Catalin Pit](https://twitter.com/catalinmpit):
```javascript
const numbers = [29, 11, 201, 7, 99, 912, 39, 31];

for (let num of numbers) {
  setTimeout(() => console.log(num), num);
}
```
The author defines and initializes an array holding a bunch of random numbers. Afterward, we iterate over each of them to set a timer to execute a simple `console.log`. Each timer gets executed after so many milliseconds, as the value of the individual array item is.

# The Output

No big surprise here. Well, at least if you are familiar with the `setTimeout` API and gave the snippet some thought.
Indeed you get a list of sorted integers:
```javascript
7

11

29

31

39

99

201

912
```

# The Analysis

The idea behind this snippet is glorious! Instead of comparing the values and ordering them, you just let time decide. The highest value will delay the callback most, thus be printed last.

# Appendix

Don't take this snippet seriously! It's meant to be a joke. It would be best if you never utilized `setTimeout` like that. It's solely for, well, "setting a timer". Never _abuse_ this behavior.

# Snippet Summary

- **Trickery**: visualising how `setTimeout` works
- **Key Learning**: `setTimeout` is an API to execute a callback after n milliseconds
- **Further Reading**:
    - [WindowOrWorkerGlobalScope.setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
Week 2 update - creating a react native app
Published: 2021-02-21 19:59:09

Week 2 of the MLH fellowship is coming to an end. This past week, my team wasn't able to do much. We didn't have clear deliverables from the client. We were told we would be building one thing and then told another thing. So we did a lot of waiting around to get clarity. What we ended up with at the end of this week was a wireframing of our database and UI. 

Recognizing this is a good time to learn something new and create, I began turning an existing project into a mobile app using React Native. I had to rethink the UI. Mobile phones have smaller screens, obviously, but I didn't think a table would look good on mobile so I had to redesign it. I thought about how I can display the data just using views(which are divs in react-native). I focused on displaying the most important data for a user. Deciding the date, title, amount and whether or not it was paid was most important.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5qprq8dj2398ixzdwmi.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8xj6i861tglh1kpv7iw.PNG)

In my web application, I also had edit/delete buttons in the table for each instance of an expense or debt. That is what I removed from my mobile UI.

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

My next step would be to think about how a user will interact with the data. My initial thoughts for that are, a user could click on the data, and the option to edit or delete would appear on the screen. Or, they could swipe left for a delete button to appear and swipe right for an edit button. 

Getting a bottom navbar into my application was the hardest thing I had to do during this code sprint. But it felt similar to Router, Switch, and Link from react-router-dom. 

Here is a screenshot of code from the web application using react-router:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk1izizyvxbfo2kr5ate.png)

Now, a screenshot of the react-native navigation container: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkb81szxi97v0dvs0ynm.png)
Some resources about Dapr
Published: 2021-02-21 19:58:55

<sub><span>Photo by <a href="https://unsplash.com/@walre037">Rémi Walle</a> on <a href="https://unsplash.com/s/photos/companionship">Unsplash</a></span></sub>

Dapr is an interesting framework tasked to simplify tasks from modern distributed applications. It's developped around building block.

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

New ressources have popped recently:
- [ebook about Dapr](https://docs.microsoft.com/en-us/dotnet/architecture/dapr-for-net-developers/)
- [Quick demo using building blocks](https://www.youtube.com/watch?v=qejiWzy5etA) with [code available](https://github.com/dapr/samples/tree/master/twitter-sentiment-processor)
- [eShopOnDapr](https://github.com/dotnet-architecture/eShopOnDapr)
- [Presentation on .Net Live](https://www.youtube.com/watch?v=kIfmwmJHNMs)
 

Hope this helps !
My Second Week with Jadu Fellowship Program
Tags: learning, fullstack, jadu, jadujobs
Published: 2021-03-01 16:58:33

---
title: My Second Week with Jadu Fellowship Program
published: true
date: 2021-02-21 19:42:10 UTC
tags: learning,fullstack,jadu,jadujobs
canonical_url: https://medium.com/@techyarsal/my-second-week-with-jadu-fellowship-program-da547dec84b7
---

![home-page of jadujobs.com](https://cdn-images-1.medium.com/max/1024/1*-VlPYhTKCgCFNgMjcutnwQ.png)<figcaption>Jadu’s <a href="https://jadujobs.com/">Official Website</a></figcaption>

Well, It’s been two weeks now since I started with the [**Jadu Fellowship Program**](https://jadujobs.com/). At the start, I was kind of confused about what to expect. But it has been a really exciting experience for me so far! I have learned a lot during my sessions and the overall [**Jadu**](https://jadujobs.com/) community has been very kind and helpful.

### Technical Classes:

We have **three classes per week**. **Two of them are technical classes**. In these classes, we learned about the basics of **web technologies** and the introduction to front-end development. We learned about basic **HTML tags** and some of **their attributes** that are most commonly used. We learned about **div** containers and how we can use them to group items, and how we can use **forms** and different types of **input** elements for taking input from the user. **Our instructor** for technical classes, [**Arslan Khattak**](https://www.khattak.dev/), has a very calm and engaging way of teaching and has explained everything very clearly and effectively. **I just loved these technical sessions!**

### Non-technical Class:

The thing that I loved the most about this program, so far, is **the other class on soft skills**. That’s where we learned about how **personal branding** works, and what are the things that make your overall **social personality** , and **how you can use it** to make yourself a brand! And that is something that I had no or very little idea about! **The instructor** , [**Saad Hamid**](https://twitter.com/SaadGH), has such an amazing way of explaining stuff that **I just absolutely loved it!** It was a very informative and fun session, overall!

#### Final thoughts:

> Well, so far, I am enjoying these sessions a lot! They are very educating and I have learned many new things that would help me a lot in my personal and professional life. And I am very excited about the upcoming sessions! ❤
Make your Django models self-timestamp
Tags: django, python, beginners
Published: 2021-02-21 19:37:28

Make your Django models inherit from the below abstract class. You models will get automatically timestamped upon creation and update of instances.

```
from django.db import models


class TimeStampedModel(models.Model):
    """
    An abstract base class model that provides self-updating
    ``created_at`` and ``updated_at`` fields.
    """
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        abstract = True
```

Join my free newsletter [BORING BACKEND](https://www.boringbackend.dev). Soon i'll be starting mentoring people by doing micro-projects.
LeetCode 350: Intersection of Two Arrays II (Ruby)
Tags: codenewbie, algorithms, leetcode, ruby
Published: 2021-02-21 19:36:01

### Description: [https://leetcode.com/problems/intersection-of-two-arrays-ii/](https://leetcode.com/problems/intersection-of-two-arrays-ii/)

### Solution

```ruby
def intersect(nums1, nums2)
    result = []
    shorter = nil
    longer = nil
    
    shorter, longer = [nums1, nums2].sort_by &:length

    shorter.uniq.each do |n|
        shorter_count = [longer.count(n), shorter.count(n)].min
        shorter_count.times do
            result << n
        end
    end
    result
end
```

### Bechmark

Runtime: 76 ms, faster than 28.69% of Ruby online submissions for Intersection of Two Arrays II.

Memory Usage: 209.9 MB, less than 91.80% of Ruby online submissions for Intersection of Two Arrays II.
The meaning of using tools to code
Tags: codequality, healthydebate, productivity, programming
Published: 2021-02-21 17:49:14

You are on your computer writing code. You start a word and the autocomplete pops up. You press tab until you get the word you need. The autocomplete is reliable. It always appear when you start writing a command on the language that you use.

Now you are doing a test for a company. They insist that you use pen and paper. If you don't know it by memory, you don't really know it - they say. But is that really true?

Andy Clark and David Chalmers (https://icds.uoregon.edu/wp-content/uploads/2014/06/Clark-and-Chalmers-The-Extended-Mind.pdf) argues that this is false and I would argue that most programmers would agree with them. According to both, thinking and knowing isn't just a process that happens inside of a brain that is disconected of the rest of the world.

If you take a closer look of someone working, playing or thinking, the complete process always include going back and forth to the real world that is outside of our mind. Take the process of coding for example. 

First we start by reading what we need to do and the code base we are working on. Then we start to code some simple lines and memorizing some informations. When this starts to get confusing or complicated, we externalize that information. We debug, use console.logs/prints to check information or even write some ideas on paper. We Google to check something that we "forgot" how to use and check for other pieces of code, on other repositories, that we wrote a while ago that we might be able to copy and paste. Finally, if everything went right, we push our code for review.

None of us would say that the guy that needed to use print statements and Google some informations doesn't know how his code work or that he doesn't know how to code. However, as we can see, not all of the information that he used is stored in his brain per say. 

What the person on the example did was relaying on a tool to store that information for him. A tool that he knows it'll always be there for him to check and get that information at any moment in the same way we do with our memory. 

He can trust Google to always have a possible solution. The console to log the data he asks for. The paper to store what he writes on it . And the piece of code that is already validated do work as it worked when he wrote it.

We are able to use tools to do a lot of diferent types of work. Thinking is just a diferent type of work. To nail something, a woodworker uses a hammer. People that works using propositional thinking uses text, search engines and other kinds of tools to be able to store/get every kind of information. That doesn't make anyone knows less or more. It's just a way to use the tools that are at you disponible.

The client doesn't care about how did you do something. No one asks if the Facebook or Google engineer used a seach tool to copy a piece of work. More important than knowing a lot of information by memory is to be able to get what you need to work fast, in a reliable way. To able to adapt to any problem, any new framework or language that you might need to learn.
LeetCode 917: Reverse Only Letters (Ruby)
Tags: codenewbie, leetcode, ruby, algorithms
Published: 2021-02-21 18:45:45

### Description: [https://leetcode.com/problems/reverse-only-letters/](https://leetcode.com/problems/reverse-only-letters/)

### Solution

```ruby
def reverse_only_letters(string) # O(n)
    result = Array.new(string.length)
    letters = []

    string.each_char.with_index do |char, index|
        if is_letter?(char)
          letters << char
        else
          result[index] = char
        end
    end
    
    result.each_with_index do |char, index|
      result[index] = letters.pop if char == nil
    end
    result.join
end

def is_letter?(char)
    (/[a-zA-Z]/ =~ char) == 0
end
```

### Benchmark

Runtime: 52 ms, faster than 92.31% of Ruby online submissions for Reverse Only Letters.

Memory Usage: 210.1 MB, less than 30.77% of Ruby online submissions for Reverse Only Letters.

### Explanation

1- Create an array with the same amount of elements as the string we are given, and an array (stack) for the letters.

2- Iterate over each char of the string

2.1- If the char is a letter, add it to the letter stack.

2.2- If the char is not a letter, add it to the result array at the same position it was on the original string.

3- Now that our resulting array is filled with non-letters, we iterate through it; If the index we are in is nil, we pop a letter from the letters array and add it to the result array, at the current index position.

4- Join the array, so it becomes a string and return it.
Git Commands
Tags: github
Published: 2021-02-21 18:31:35

If you are new to using Git and GitHub, this article might be helpful. Here, I am going to list the most  frequently used Git commands that I use:

`git init` - Initialize git. The very first thing you do to initialize your local directory to a git repository.
`git status` - Lists any changed files within the directory.
`git add .` - Adds all the unstaged files that have been changed to staged status and makes the files ready to be committed. If you want to add a specific file only you can do so by using the `git add <file-path/name-of-file>` command.
`git commit -m “<your message>”` - Commits all the staged files with the message provided. It's important to write meaningful commit messages so that it can be easily understood as to what accepting the changes will do.
`git commit -am “<your message>”` - Add and commit all changed files at once.
`git reset --soft HEAD~` - Undo the last commit.
`git push` - Pushes all commits to the main branch. If you want to push to a specific branch you can do so by using the `git push <name of remote> <name of branch>` command.
`git branch` - Shows all the branches.
`git branch <branch name>` - Creates new branch.
`git checkout <branch name>` - Switch to branch.
`git checkout -b <branch name>` - Create and switch to the new branch at once.
`git branch -m <branch name> <new branch name>` - Rename branch name.
`git branch -D <branch name>` - Deletes branch that is not merged yet.
`git branch -d <branch name>` - Deletes branch that is already merged.
`git log` - Shows all the commits.
`git diff` - Compares modified files.

This is a good starting place to learn about git commands, but there are many more commands that are not listed above that I haven’t used much. Besides these commands, I learned another command a few weeks back that I found very helpful if you use certain git commands frequently.

`git config --global alias.st status` - Creates an alias(shortcut) for git status. Once this is done, the next time you want to run git status you can just do `st`. It will save some time. If you want to create shortcuts for other commands you can do the same steps but instead of `alias.st status` you will need to add `alias.<shortcut-name-you-want-to-give>< command-you-want-to-add-shortcut-to>`. For example, if we wanted to add the shortcut `gp` for `git push`, we can do so by typing `git config --global alias.gp push`. 
I hope this is helpful. Have a good Sunday!