teleren/devto huggingface dataset:
Service Design for YouBike - Give Users a Better Co-share Bike Rental Experience
Tags: 2020devgrad, octograd2020, showdev, githubsdp
Published: 2020-05-22 18:18:27

---
title: Service Design for YouBike - Give Users a Better Co-share Bike Rental Experience
published: true
description: I just graduated from National Chengchi University, and this was my final project.
tags: 2020devgrad, octograd2020, showdev, githubsdp
---

## My Final Project

This is a user experience design project for Taiwan's public sector through the design service research process.

#### About YouBike

- YouBike is a bike-rental sharing system located in Taipei, Taiwan.
- This public service is operated by Taipei City Department of Transportation as a BOT collaboration with Giant Bicycles.

## Demo Link
 
- [Figma](https://www.figma.com/file/eNw94kuIe68nBq93p5ko82/Service-Design-for-YouBike?node-id=1%3A2)
- [GitHub](https://github.com/laiyenju/laiyenju.github.io/blob/master/_posts/2020-04-08-Ubike-Service-Design.md)

## How I built it

- Through observation and self-test how people rent YouBike, confirm the target users.
- Draw user flow for target users to know more rental procedure details.
- Use costumer journey combined service blueprint to find user's touch points and pain points.
- Plan resolutions to solve above problems. 

## Additional Thoughts

I found that target users in these case are first-time and occasional user. Simplicity, clarity which is budget-balance are two key solutions for them.
My App was Under Attack!
Tags: python, flask
Published: 2020-05-22 18:11:55

I'm fully aware my title sounds like a clickbait video from YouTube but I assure you it kind of does sound like that, huh? 

A couple of weeks ago I created an app for Nintendo Switch owners to easily share their friend code with their friends. It's called [Ninny Code!](http://ninnycode.com). 

I received an email from Heroku, where I deployed the app, saying that I've exceeded the total amount of rows I'm allowed on the free tier.

The database DATABASE_URL on Heroku app ninnycode-b has exceeded its allocated storage capacity. Immediate action is required:

"The database contains 22,360 rows, exceeding the Hobby-dev plan limit of 10,000. INSERT privileges to the database will be automatically revoked in 7 days. This will cause service failures in most applications dependent on this database.

To avoid a disruption to your service, migrate the database to a Hobby Basic ($9/month) or higher database plan:

https://hello.heroku.com/upgrade-postgres-c#upgrading-with-pg-copy

If you are unable to upgrade the database, you should reduce the number of records stored in it."

In a panic, I quickly deleted all of the records. Yes, you read that right. I delete everything on complete accident. Ugh! That lesson was quickly learned the wrong way.

With my records at 0, a few hours later it was attacked again. And again, and again, and again. All day by somebody bored at home during the quarantine. 

I was forced to shut the app down which is unfortunate because I use the app to show future employers. After a bit of research, I found an easy way to stop this mad man from messing with my app!

Enter [Flask Limiter](https://flask-limiter.readthedocs.io/en/stable/). This Python package ensures that an API endpoint can only be called up to a specified limit from the same IP address. So in my `POST` endpoint I have set a limit of 5 per hour and I'm happy to say it has stopped!

Here is a very quick implementation to show you how easy it is to get set up in your Flask projects:

```py
from flask_limiter import Limiter
from flask_limiter.util import get_remote_address

@app.route('/api', methods=['POST'])
@limiter.limit("3 per hour")
def post_user():
    # create user
        
# custom 429 HTTP status
@app.errorhandler(429)
def ratelimit_handler(e):
    return {"Error": "Too many requests. Please try again later."}, 429
```

It's that easy! You'll see at the bottom I created a custom 429 status code because I'm using React to connect to my backend. Normally, Flask Limiter will create a bare-bones page with an h1 and p tag telling you you've reached the limit. If you try to create more than 5 users per hour on Ninny Code!, you'll see my solution is a bit more elegant!
Rutgers Bus Times
Tags: mnadev
Published: 2020-05-22 16:22:33

## Motivation
I went to Rutgers University - New Brunswick which has four campuses across which I had classes. To get to my classes on other campuses, or even on the same campus, I had to take buses. Rutgers had created an app on the phone which was used to track when a bus would arrive. But, I'm lazy and taking out a phone constantly was annoying and too much work. So, I created an app for the Pebble watch to display the bus times. This way i didn't have to take out my phone. Laziness ftw.

Even after this, I noticed that the estimated timings from the API were not always accurate and were worse with bad weather. With the API though, I could obtain timings, locations of buses, and the percentage occupied of the bus. I could also obtain the weather through other APIs. My goal was to create a service which would estimate bus timings based on the time of day (some times are more congested than others), the month of the year (since students tend to stop going to class later in the semester), and the weather. For this, I had to use machine learning. Unfortunately, I haven't finished yet and it's still a work in progress.

The code is found at these links:

https://github.com/mnadev/RUBus

https://github.com/mnadev/RU-BUSEE

## How I built it

I used JavaScript and AJAX for the Pebble watch app. For the more advanced service, I used Python to create the server. I am using SQL to store the records in a database and am using Xamarin to create the corresponding mobile applications.
Git e GitHub na prática
Tags: git, github
Published: 2020-05-22 18:04:07

---
title: Git e GitHub na prática
published: true
description: "Aprenda Git e GitHub do zero"
tags: git, github, git-hub
---

{% youtube Gzx45zj69h4 %}

Aprenda Git e GitHub do zero.

Entrevistas sobre a área de programação: https://bit.ly/udp-entrevistas

Programação para iniciantes: https://bit.ly/udp-programacao-iniciantes

Git e GitHub para iniciantes: https://bit.ly/git-e-github-iniciantes

Aprenda a programar do Zero! https://bit.ly/udp-aprenda-programar

Dicas de carreira em programação: https://bit.ly/udp-carreira-em-programacao

---

Segue o fio! Se inscreve no canal para não perder nada.

Não perca nenhuma novidade, assine a minha newsletter (http://eepurl.com/dNIYOk).

Quer participar do grupo exclusivo do Universo da Programação, me ajudar a melhorar meu conteúdo ou apoiar os meus projetos?

Você pode me apoiar via PicPay (será necessário a instalação do app): https://picpay.me/ouniversodaprogramacao

Se você está querendo entrar na área de programação, confere meu livro aqui: http://bit.ly/universo-da-programacao
Como funciona esse negócio de continuous integration (CI)?
Tags: ci, development, architecture
Published: 2020-05-22 18:02:41

---
title: Como funciona esse negócio de continuous integration (CI)?
published: true
description: Bate papo com o Luiz Limeira sobre continuous integration (CI), a importância desse processo e como fazer isso funcionar
tags: continuous-integration, continuousintegration, development, architecture
---

{% youtube CNz82Je7w8k%}

Um bate papo com o Luiz Limeira sobre continuous integration (CI), a importância desse processo e como fazer isso funcionar em nossos projetos ao vivo!

Entrevistas sobre a área de programação: https://bit.ly/udp-entrevistas

Programação para iniciantes: https://bit.ly/udp-programacao-iniciantes

Git e GitHub para iniciantes: https://bit.ly/git-e-github-iniciantes

Aprenda a programar do Zero! https://bit.ly/udp-aprenda-programar

Dicas de carreira em programação: https://bit.ly/udp-carreira-em-programacao

Vídeo sobre Isolamento Social: https://youtu.be/SK3hdlGQhtY

O que é code coverage: https://en.wikipedia.org/wiki/Code_coverage

Ferramentas legais

Visual Studio Code: https://code.visualstudio.com/
CircleCI: http://circleci.com/
TravisCI: https://travis-ci.org/
Docker: https://www.docker.com/

---

Segue o fio! Se inscreve no canal para não perder nada.

Não perca nenhuma novidade, assine a minha newsletter (http://eepurl.com/dNIYOk).

Quer participar do grupo exclusivo do Universo da Programação, me ajudar a melhorar meu conteúdo ou apoiar os meus projetos?

Você pode me apoiar via PicPay (será necessário a instalação do app): https://picpay.me/ouniversodaprogramacao

Se você está querendo entrar na área de programação, confere meu livro aqui: http://bit.ly/universo-da-programacao
O que é arquitetura de software em front-end?
Tags: frontend, arquitetura, architecture
Published: 2020-05-22 18:00:50

---
title: O que é arquitetura de software em front-end?
published: true
description: "Bate papo sobre arquitetura front-end com Andréa Zambrana"
tags: frontend, arquitetura, architecture, front-end
---

{% youtube 6WK0JFdTYws %}

Será que o front-end não tá complicado demais? front-end precisa de arquitetura? Existe isso? 

Vamos conferir nesse papo sobre arquitetura front-end com Andréa Zambrana.

Links comentados pela Andréa:

O que é Arquitetura de Software: https://pt.wikipedia.org/wiki/Arquitetura_de_software

Domain-Driven Design (inglês): https://amzn.to/3e7ZXNf
Domain-Driven Design (pt-br): https://amzn.to/3e7ZXNf

Clean Architecture (inglês): https://amzn.to/2To47IJ
Arquitetura Limpa: https://amzn.to/2AKqu4I

Microservice Architecture: https://microservices.io/patterns/microservices.html

Thinking React: https://reactjs.org/docs/thinking-in-react.html

Designing Data-Driven Interfaces: https://blog.marvelapp.com/designing-data-driven-interfaces/

React: https://pt-br.reactjs.org/
Angular: https://angular.io/

Aprenda TypeScript em 5 minutos: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Curso de Angular com Loiane Groner: https://www.youtube.com/watch?v=tPOMG0D57S0&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G

Aprenda React na Rocketseat: https://www.youtube.com/watch?v=7A4UQGrFU9Q&list=PL85ITvJ7FLoiuaKgHFYgrhZDwXOUEaxWI

https://hackernoon.com/application-architecture-explained-in-a-way-your-mom-will-understand-d9ce71c12903 
https://blog.webf.zone/contemporary-front-end-architectures-fb5b500b0231?gi=8a667acf2ca5 
https://hackernoon.com/architecting-single-page-applications-b842ea633c2e 
https://blog.codeminer42.com/scalable-frontend-1-architecture-9b80a16b8ec7/ 
https://blog.codeminer42.com/nodejs-and-good-practices-354e7d763626/ 
https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-
https://blog.codeminer42.com/scalable-frontend-1-architecture-9b80a16b8ec7/

Entrevistas sobre a área de programação: https://bit.ly/udp-entrevistas

Programação para iniciantes: https://bit.ly/udp-programacao-iniciantes

Git e GitHub para iniciantes: https://bit.ly/git-e-github-iniciantes

Aprenda a programar do Zero! https://bit.ly/udp-aprenda-programar

Dicas de carreira em programação: https://bit.ly/udp-carreira-em-programacao

---

Segue o fio! Se inscreve no canal para não perder nada.

Não perca nenhuma novidade, assine a minha newsletter (http://eepurl.com/dNIYOk).

Quer participar do grupo exclusivo do Universo da Programação, me ajudar a melhorar meu conteúdo ou apoiar os meus projetos?

Você pode me apoiar via PicPay (será necessário a instalação do app): https://picpay.me/ouniversodaprogramacao

Se você está querendo entrar na área de programação, confere meu livro aqui: http://bit.ly/universo-da-programacao
Qual o salário de um(a) programador(a)?
Tags: udp, universodaprogramacao, podcast, youtube
Published: 2020-05-22 18:00:10

---
title: "Qual o salário de um(a) programador(a)?"
published: true
description: "Este vídeo é uma live do canal O Universo da Programação, com o Lucas Santos e Luiz Limeira"
tags: udp, universo-da-programacao, podcast, youtube
---

Levantamos uma pesquisa sobre o salário de pessoas desenvolvedoras no Brasil.

Este vídeo é uma live do canal O Universo da Programação, com o Lucas Santos e Luiz Limeira

Neste vídeo temos uma reflexão sobre o assunto e espero que te ajude a se encontrar nesse universo de opções que é o Universo da Programação!

{% youtube j8GenNjjrvw %}
Design Patterns - Basic Iterator
Tags: java, oop, productivity, codequality
Published: 2020-05-22 17:54:32

Among the most common things in a collection of items is the ability to iterate through the collection.

In Java for example there are data structures that are allowing us to create collections for primitive data or our custom classes.

Here are some : `ArrayList<T>`, `LinkedList<T>` , `HashSet<T>` and others... 

The above have something in common , all are implementing the Interfaces : **Collection** and **Iterable**.

This can give us the abillity to make our own classes iterable :)

In this article we will explore how to do it.

## How it works

Below there is a simplified UML diagram illustrating the ArrayList <T>:

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

The above relationships are allowing us to use this magic:

```java
for(String s: stringList){
     // do something with s
      System.out.print(s);
}
```

The above is a convenient way to write a foreach loop in Java, but the language it self translates it to:

```java
Iterator<String> si = stringList.iterator();

while(si.hasNext()){
   String s = si.getNext();
   // do something with s
    System.out.print(s);
}

```

Now armed with this knowledge we can go beyond the default behaviors of the build in collections and can customize it for our own needs!

Lets play with a project!

## Project : CarPartsStore

[get the source code here](https://github.com/achimoraites/DesignPatterns/tree/master/IteratorPatternExamples/apps)

Here we will illustrate the customized behavior by exploring a Store that sells car parts, in this code-base we have the Warehouse class that contains a List of CarPart .

What we do here: We will use the basic Iterator Pattern to iterate through our Warehouse class for CarPart .

We will make something like the following to work:

```java
for(CarPart part: Warehouse){
  // do interesting stuff ...
}
```
by default the above is not working as our warehouse has a field of ArrayList<CarPart> , but having the new awesome Iterator powers we can can do it !

in our Warehouse class we have:

```java
public class Warehouse implements Iterable<CarPart> {
  private List<CarPart> carPartList;
  private String location;
...
```

 In our Warehouse class we add the implements Iterable :

```java
public class Warehouse implements Iterable<CarPart> 
```
notice that we used the **CarPart** type , as we want to iterate through a collection of CarPart.

also we will implement the following in our Warehouse class :

```java
@Override 
public Iterator<CarPart> iterator() {
    return carPartList.iterator();
}
```
Now when we try to iterate through our warehouse we iterate through the carPartList !

```java
// Now this magic is available :)
for(CarPart part: Warehouse){
  // do interesting stuff ...
}
```
Congratulations ! now you have learned how to take iteration to your hands!

Feel free to experiment with the code!!!

Happy coding!!!

the original article was posted [here](https://achimoraites.blogspot.com/2017/11/design-patterns-basic-iterator.html)
Are there racing enthusiasts here?
Tags: formulaone, fia, fom
Published: 2020-05-22 17:44:10

Hi friends. There are real racing enthusiasts here. How do you like the news on the transfer market? Do you think whether Vettel will go to Mercedes. I am very interested in this question.
And how do you like the news that Ferrari coped with its problems from the winter tests, they found the problem in a very light gearbox. Also, by the start of the season promise plus 20 horsepower.
The season promises to be very interesting.
@MemeMakerBot - a telegram bot to suit your Mememing needs.
Tags: octograd2020
Published: 2020-05-22 17:43:46

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## Telegram @MemeMakerBot
A Telegram Bot intended to give you a user-friendly Meme-Editing-Experience for "Panel'-Style Memes

## Demo Link
https://t.me/MemeMakerBot
 

## Link to Code
{% github Panther2804/Meme-Bot-Backend %}


[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
This Bot uses the python-telegram-bot wrapper for the telegram Bot api. This is my first public project - recieving messages from satisfied users is honestly a really good feeling.
Funny Story:
I had a lot of Trouble getting an approprate Handle for this Bot - i fortunately was abled to track down the former owner of the @MemeMakerBot handle, which then gave me this Handle.
My favourite Handle would be @MemeBot, but i have not been able to find the guy owning this handle yet.
A `zsh` script to make git squashes easy!
Tags: git, zsh
Published: 2020-05-22 17:32:30

---
title: A `zsh` script to make git squashes easy!
published: true
description: Keep a clean git source tree and squash your branches before merging! This script squashes all commits on your branch.
tags: git, zsh
cover_image: https://i.imgur.com/SnNWtjT.jpg
---

Keep a clean git source tree and squash your branches before merging!

**This script squashes all commits on your branch.**

When you look at your main branch’s git history, in most development environments it is more useful to just see commits for major changes, _not all the little steps and mistakes it took to get there._ A **“squash”** in git is the term used for combining past commits together, thereby reducing the amount of commits in your git history.

In most of my repositories, that means when I’m done building on a feature branch, I squash the branch down to one commit, rebase the feature onto the latest original branch (`master`, or `develop` in gitflow), force-push and merge.

This makes my git history of the main branch only show commits of the finished product of branches!  I use this script all the time.

_(Note: Most repository managers like Github and Bitbucket have a “squash and merge” option for merging Pull Requests. This is for those who are not using Pull Requests or do not have that option)_

If you use `zsh` in your terminal ([and you totally should](https://ohmyz.sh/)), this simple script will work great for you.

Copy and paste this into your `~/.zshrc` file (I put it just before my aliases are defined):

```zsh
squashon () {
  # If user just enters 'squashon', give help text
  if (( # == 0 )); then
    echo Hello!  This will squash your current branch down to one unstaged commit.
    echo Use by typing 'squashon rootBranchName' (not current branch name)
    echo usage: squashon develop
  fi
  # If a root branch is provided, run the squasher
  if (( # == 1 )); then
    branch=$(git symbolic-ref HEAD)
    echo Squashing all commits from $branch
    git reset $(git merge-base $1 $branch)
    echo ------SUCCESS!------
    echo Commits successfully squashed, all file changes are unstaged.
    echo Run 'git add -A' and 'git commit -m "your commit message"' to add your squashed commit.
  fi
}
```

## What `squashon` does

Assume you have a root branch called `develop`, and a feature branch called `feature/new-thing` which originated from `develop`. Your feature branch has 10 commits on it, the feature is complete and approved, and it is ready to be squashed!

Run the script in the terminal with: `squashon develop`

This will take all changes you made on your branch, bring you back to the point when you branched off of develop, and keep them as unstaged changes.

Now just run `git add -A && git commit -m 'your commit message'` and you’ll have one single commit that includes all of your branch’s changes!

Note that you will need to force-push if you already pushed up to your remote, because you are rewriting the git history on this branch.  `git push -f`
The importance of planning
Tags: planning
Published: 2020-05-22 17:29:00

---
title: The importance of planning
published: true
description: 
tags: planning
---

Recently I started undertaking the my first project large enough that I couldn't keep it all straight in my head. I got part way through my project and realized I had lost my vision and kept getting frustrated. Planning is a constant struggle for me. I find it tedious and if I don't have to do it I won't. But for this project I had to. I found this task organizer called [Habitica](https://habitica.com/static/home) which gamifies the experience and has made it a lot easier.
JavaScript DOM - Part 6 - Get Elements By TagName [video + article]
Tags: javascript, webdev, html, css
Published: 2020-05-22 17:26:26

> This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 6

You can read Part 5 here:
{% link https://dev.to/tharunshiv/javascript-dom-part-5-get-elements-by-classname-video-article-5h6m %}

{% youtube S-GP1OFvAFU %}

> **Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun**

## Several Elements with the same Tag Name

> Example of tags: `<p> <img> <form> <h1>`

We know that the same tag can be used. We can grab all of these elements having a particular tag name. Example use cases may be like, grabbing all the buttons of the page, grabbing all the images, or any element for that matter.

## Get elements by tag name

When we use `document.getElementsByTagName('element')`, it grabs all the elements that have the same tag name and returns us an HTML Collection that we can index or iterate to get the elements that we need in particular. An HTML Collection is similar to an Array that we're used to, so you can index it or get the length of it.

_syntax:_

```javascript
document.getElementsByTagName('element')
```

_example:_
_HTML_
```html
<p>Hey there</p>
<p>How's it going?</p>
<p>Great!</p>
<p>A set of elements with same tag</p>
```

_JavaScript_
```javascript
let para = document.getElementsByTagName('p');
console.log(para)

console.log(para[0].innerText)
```

_output_
```
HTMLCollection[]

Hey there
```

You can access the individual elements by indexing and access their properties, change them, and do anything. But wait, that's not all of it.

## Iterating through the HTML Collection

We can iterate through the HTML Collection, apply a particular operation on all of them. Below is an example of such iteration.

_HTML_
```html
<p>Hey there</p>
<p>How's it going?</p>
<p>Great!</p>
<p>A set of elements with same tag</p>
```

_JavaScript_
```javascript
let para = document.getElementsByTagName('p');

for (let x=0 ; x < para.length ; x++ ) {
   para[x].style.color = 'dodgerblue';
}
```

When this code is run, all the elements that have the tag name as 'p' are changed to `dodgerblue` text color. In the for loop, the `para.length` gives the length of the HTML Collection, which is used by the `for-loop`.
So as the usual rule goes by, once you grab an element, you can do anything with it.

> Note: it is getElementsByTagName, remember to add the 's' and be cautious about the capitalizations. 

So this is all you need to know for now about getting Elements By Tag Name 

Next Part coming tomorrow, where we discuss how you can get multiple elements by using QuerySelector.

Thank you for reading 😊
> **Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun**

Written by,

{% user tharunshiv %}