teleren/devto huggingface dataset:
Docker, FROM scratch 🐋
Tags: docker, todayilearned, beginners, tutorial
Published: 2020-04-26 23:09:54

---
title: Docker, FROM scratch 🐋
published: true
date: 2020-04-24 05:46:43 UTC
tags: docker,til,beginner,tutorial
canonical_url: https://www.aaron-powell.com/posts/2020-04-24-docker-from-scratch/
---

Over the years I've given many talks, but there's one talk that I've gone back to time and time again because I not only really enjoy giving it, but it's always really well received, and that's my talk [Docker, FROM scratch](https://www.aaron-powell.com/talks/docker-from-scratch/).

The premise behind the talk is simple, we start with zero knowledge of Docker and go through 14 exercises, building on each other, to look at use cases for Docker and then how to apply them. All the exercises are on my [GitHub](https://github.com/aaronpowell/docker-from-scratch) as separate tags, with a `run.sh`/`run.bat` script in the root to execute the step.

And what's more exciting is now you can watch it online as a talk I gave as part of the [Microsoft Reactor Virtual Learn at Lunch sessions](https://www.meetup.com/Microsoft-Reactor-Sydney/).

So, grab a beverage, open up a terminal and let's learn Docker together!

{% youtube gWYm2OwJRWg %}
Can you guys suggest me video streaming solution for my conditions?
Tags: help
Published: 2020-04-24 05:40:01

Hi geniuses.

I have to build video streaming service for 300 ~ 500 people in a day but i don't have much time to build this server from scratch so i'm looking for some solution for video streaming.

Can you guys suggest which solution is good for my conditions? please..

Conditions:

1 The budget is under $10,000

2 Period of service is 5 months

3 Maximum concurrent user is 500

4 Still not sure which video quality we're gonna serve but i think we should consider 1080p, therefore the maximum bandwidth would be 500M ~ 1G?

Please recommend the solution you think is good for my conditions. It would be much better if you leave a short reason too.

Thank you 🙇‍♂️
Are you an early 🐤 or a night 🦉? Let's check out in the Gist
Tags: github, gist, productivity, sideprojects
Published: 2020-04-24 05:27:29

> Last week, I build a simple GitHub Action, called [productive-box](https://github.com/maxam2017/productive-box). It's my first time creating a GitHub Action so I would like to share some insight about it.

The kernel concept about this project is using commit histories to find your most productive hours and declare which type of people you are (simply an early 🐤 or a night 🦉), finally write into your Gist.

## Commit history
When it comes to 'commit', we always think of GitHub. That's right. Here I using GitHub API to access commit history. It's also my first time using it. In the beginning, I check out the v3 RESTful API, but I found something new - v4 GraphQL API, so I gave it a try.

The greatest part of GitHub GraphQL API is it provides a real-time and interactive playground: GraphQL Explorer which makes a better experience with this new stuff.

![https://developer.github.com/v4/explorer/](https://miro.medium.com/max/1400/1*eHICRoedi-p_hEuYHoyPUw.gif)
<figcaption>https://developer.github.com/v4/explorer/</figcaption>

After I completed this project, I knew that GraphQL just means POST a query and gets something you REALLY need.

## Gist
> reference to an amazing project - matchai/waka-box

Like him, I also use @octokit/rest, the GitHub REST API client for JavaScript.

## WorkFlows
> Workflows are custom automated processes that you can set up in your repository to build, test, package, release, or deploy any project on GitHub.

![](https://miro.medium.com/max/1400/1*vlwUwQu65WX13QyzSKRvMA.png)
<figcaption>Easily checkout your workflows in the 'Actions' tab</figcaption>

Simply saying, it uses GitHub's virtual machine to execute our script and we just only need to write YAML config into .github/workflows/xxx.yml.
My Action simply listens to two events: push and schedule. It means that when we push some commits to the master branch(by default) or periodically(just a Linux cron job), it will trigger my built script.

## Going Forward

I also have some other ideas about this project. Welcome to follow up or star ⭐ ️[my project](https://github.com/maxam2017/productivity-box) if you're interested in it.

{% github https://github.com/maxam2017/productive-box %}

Feedback welcome! Thanks for reading.
#help React-spring transition problem
Tags: help, javascript, react
Published: 2020-04-24 05:12:50


Hi!

I have a question; how i can  achieve a progressive delay in the entry of each element, using **react-spring** transition.

The first example shown on the react-spring transition oficial page is wrong, the code does not correspond to the animation shown:
[https://www.react-spring.io/docs/hooks/use-transition](https://www.react-spring.io/docs/hooks/use-transition)

How could I achieve that same effect?, how I can insert a delay between the input of each component, using a spring easing, like the example?.

When I try the example code, all components enter at the same time.

```js
const [items, set] = useState([...])
const transitions = useTransition(items, item => item.key, {
    from: { transform: 'translate3d(0,-40px,0)' },
    enter: { transform: 'translate3d(0,0px,0)' },
    leave: { transform: 'translate3d(0,-40px,0)' },
})

return transitions.map(({ item, props, key }) =>
    <animated.div key={key} style={props}>{item.text}</animated.div>
```


Excuse me if it's an absurd question, but the documentation of this library is poor, and I think setting a setTimeout is not the best way...

What method do you currently use to perform the animations in conjunction with React; pure css/sass animations, javascript, styled components, animate.js?
go modでプライベートgithub参照の時
Tags: go, gomod, gomodules
Published: 2020-04-24 05:12:30

---
title: go modでプライベートgithub参照の時
published: true
description: 
tags: go, golang, gomod, gomodules
---

こんなエラー出たら
```
go: finding module for package github.com/***/***
go: downloading github.com/***/*** v0.0.0-20200424032624-7ee614f6e303
github.com/***/*** imports
        github.com/***/***/***: github.com/***/***@v0.0.0-20200424032624-7ee614f6e303: verifying module: github.com/***/***@v0.0.0-20200424032624-7ee614f6e303: reading https://sum.golang.org/lookup/github.com/***/***@v0.0.0-20200424032624-7ee614f6e303: 410 Gone
        server response:
        not found: github.com/***/***@v0.0.0-20200424032624-7ee614f6e303: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/2d253e2ea6ebdb2e3be78af07d3b07b09c565cb0a0efc6a1ac5deb8f6aeca582: exit status 128:
                fatal: could not read Username for 'https://github.com': terminal prompts disabled
```

以下のように設定
```
$ vim ~/.gitconfig
[url "git@github.com:"]
    insteadOf = https://github.com/

$ vim ~/.bashrc
export GO111MODULE=on # Go Mobules
export GOSUMDB=off
export GOPROXY=direct
```
Day 2 + 3
Tags: twiliohackathon, android, java
Published: 2020-04-24 04:56:40

Its been 2 days since my [last update](https://dev.to/abusyprogrammer/tracking-lines-at-stores-during-covid-19-k7b) on my project status, as they were quite hectic. The focus of these days was to pick a good cloud service to host the user data, store data, and reviews. I will split the reviews by day:

# Day 1
The entire day was invested in finding a maps API that would allow me to find a store programmatically. I started with Google Maps API; however, the features that I needed for my application were not free. I then went for the Bing Maps API, which had a simple pricing model, and detailed documentation (I found Google's pricing model somewhat more complex).

I decided to go with Bing's Maps API. The next part involved finding the right API to use. There was a wide variety; however, the one that best served my needs was the **Local Search** API. This one would allow me to pass in a simple query, like "Mcdonald's redwood", and it would return all the Mcdonalds in that area. The only downside is that this API only works in the United States (Sorry Canada 😔). 

By the end of the day, I was able to use Java to prompt the user for a store name and location and return all the stores near or in that location.

# Day 2
Originally, my plan was to use Amazon Web Services to host my platform. This is my first time working with any cloud computing platform, and I was planning on picking it up along the way. However, within 2 hours of navigating through AWS, I was lost. I then did a search on *the best cloud platform for beginners* and got Google's **Firebase** in my results, which I found much easier to wrap my head around. So I took some time to set it up, and along with it, create a blank Android Studio project to pair with Firebase

# Day 3
Day 3, which is today, involved me setting up user account functionality. In order to leave reviews, I needed to have a user sign-up and login mechanism, and Firebase made it easy to set up with its Authentication system. The longest part was to create an Android interface for it.

# Now
Right now, I have a functioning login and sign-up system on my app, and I am able to access Bing's Maps API. The next steps are:
1. Set up a Cloud Firestore database with all the collections and documents necessary.
2. Integrate the Bing Maps API functionality into the app
3. Finalize the app's flow by filling in and completing middle activities.
4. Integrate Twilio's API
5. Improve the user interface.

This project is getting more and more exciting for me day by day, and I'm really looking forward to seeing how it turns out.
Day 1 of #100DaysOfCode: Design a layout for shopping cart template with CSS grid and Media query
Tags: react, codepen, css, 100daysofcode
Published: 2020-04-24 04:41:06

## Introduction
What I did on the first day is to create a template for a shopping cart.
Design a layout is a good practice for using some CSS frameworks like CSS grid and Media query for the front-end developer. 

## Implementations

{% codepen https://codepen.io/JenHsuan/pen/ZEbpyOW %}  

## CSS grid containers
The layout for desktop consists of two CSS grid box. 
* The sidebar and products are the containers of the box 1, the blue one. 
```sass
.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    border-radius: 5px;
 }
```
* The form is the containers of box 2, the green one.
```sass
.grid-box2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    border-radius: 5px;
 }
```

## CSS grid items for desktop
* Layout
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1hnxnkcun8q9f0pe7zp.png)

* Code
```sass
 .products {
    grid-column-start: 2;
    grid-column-end: 4;
 }

 .sidebar1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
 }

 .step2 {
    grid-column-start: 2;
    grid-column-end: 4;
}
```
## CSS grid items for moble
* Layout
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/06fajcu3uuflkwx0czq6.png)

* Code
```sass
 .sidebar1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
     }    

     .products {
        grid-column-start: 1;
        grid-column-end: 4;
     }
```
## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
Demystifying Development Environments
Tags: environments, programming, juniorengineers, devops
Published: 2020-04-24 04:32:40

---
title: Demystifying Development Environments
published: true
description: Improve your Programming with Multiple Development Environments
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pst56uefsm810xubhuoo.png
tags: environments, programming, junior engineers, devops
---


To ensure that software is reliable and robust, it is important to consider using multiple environments in the process of software development. The environment setup I am most familiar with is one that has a **development**, **staging**, and **production** environment, sometimes referred to in their condensed form: **Dev Env**, **Staging Env**, and **Prod Env**. 

#### 🖌️ Dev Env 
The development environment would be the first stage where a developer could deploy and test their code. It's like a sketchbook with existing sketches, where you can draw your first drafts of an illustration. This would be the first stage where potential bugs are found and fixed before moving onto the next environment: staging.

#### 🎨 Staging Env 
The staging environment is the next stage where code is deployed for additional testing. This is also the stage where Quality Assurance testing is performed. Staging is the environment where developers can test interactions between dependencies and is meant to mimic a production environment. Staging is where a variety of test cases are performed which either reveal bugs or affirm that the code is operating as intended. Once the code and all the test cases are verified, the code is deployed to the final stage: production.

#### 🖼️ Prod Env 
The production environment is the stage where code is live to users and fully functioning. Although, that doesn't mean there __aren't__ bugs. 🐛😉
Thuê xe tải cần giấy tờ gì ?  Những điều cần biết khi thuê xe tải vận chuyển đồ
Published: 2020-04-24 04:27:12

Vấn đề thuê xe tải cần giấy tờ gì và những lưu ý cần biết khi thuê xe tải chuyển đồ đang là điều được nhiều khách hàng hết sức quan tâm.

Khi nhắc đến dịch vụ thuê xe tải chở đồ, các dịch vụ vận tải hàng hóa chuyển nhà hay chuyển văn phòng là nhắc đến công ty vận tải Mai Linh của chúng tôi. Nếu quý khách phân vân không biết thuê xe tải cần giấy tờ gì thì câu trả lời sẽ có ngay trong bài viêt này.

Những lý do nên chọn dịch vụ thuê xe tải chở hàng
https://chuyennhatrongoigiare.com.vn/thue-xe-taxi-tai-gia-re.html
Đáp ứng được nhu cầu vận tải hàng hóa với khối lượng lớn, thuận tiện và an toàn.
Chủ động được thời gian trong quá trình vận chuyển.
Tiết kiệm chi phí đi lại do không cần vận chuyển hàng hóa và đồ đạc nhiều lần.
Những giấy tờ cần khi sử dụng dịch vụ thuê xe tải

Thông thường theo khảo sát thì tại hầu hết các đơn vị cho thuê xe tải đều yêu cầu 3 loại giấy tờ đó là hộ khẩu, CMND, cà vạt xe của người có nhu cầu thuê. Chính vì vậy bạn nên chuẩn bị kỹ trước khi đi thuê xe để không mất thời gian di chuyển nhiều lần.

Hộ khẩu của người thuê xe: Điều này để đảm bảo an toàn về thông tin của người thuê được xác thực thì đơn vị cho thuê mới có thể cho bạn thuê, tránh các trường hợp xấu có thể gây bất lợi cho đơn vị cho thuê.
CMND hoặc căn cước công dân: Người thuê cần xuất trình CMND hoặc căn cước công dân để xác thực các thông tin có khớp với nhau không, điều này là hết sức cần thiết để đảm bảo tính xác thực cho cả 2 bên thuê và cho thuê.
Cà vẹt xe: của bất kỳ loại xe nào mà hiện tại người thuê đang sở hữu một cách hợp pháp giống như một hình thức đặt cọc làm niềm tin với đơn vị cho thuê xe.
Vì sao bạn nên chọn công ty vận tải Mai Linh để thuê xe tải.
Không cần rườm rà giấy tờ: Bạn sợ mất thời gian và vướng them phiền toái với các loại giấy tờ và giấy phép khi có nhu cầu thuê xe, sợ mất thời gian thì hãy đến với dịch vụ cho thuê xe tải vận chuyển hàng của công ty Mai Linh để được hỗ trợ sử dụng dịch vụ nhanh chóng, không giấy tờ rườm rà.
Được tài xế hỗ trợ tối đa: Chúng tôi có đội ngũ tài xế chuyên nghiệp, am hiểu đường xá, các ngõ ngách, những con đường an toàn và dễ đi luôn sẵn sàng tư vấn hỗ trợ khách hàng trong quá trình vận chuyển hàng và đồ đạc.
Chi phí thuê xe rẻ: Đến với Mai Linh khách hàng sẽ có cơ hội trải nghiệm và chọn nhiều loại xe với đủ trọng tải, luôn sẵn sàng đáp ứng nhu cầu sử dụng với mức giá thuê xe vô cùng hấp dẫn.
Nguồn https://chuyennhatrongoigiare.com.vn/dich-vu-chuyen-nha-gia-re.html
Using CSS Grid to Layout a Page Feels Like Cheating
Tags: css, beginners, career
Published: 2020-04-24 04:21:17

I have 4 things on a page. I give each thing a name - header, main, sidebar, footer. Then I get to precisely describe the space I want each thing to take up visually. It's like drag and drop, it's like paint by numbers. It's simple, it's clear...dare I say elegant.  

But it was not always possible to describe CSS layout this directly. [A history lesson] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) - there were HTML table layouts, floats, positioning, and all kinds of hacks - using some property not exactly as intended to make it work, because there were no better options.

Consider this - when designers/developers were coding CSS layouts with floats and such, there were also beginners trying to learn the same approach. The beginners probably felt the same frustrations that the experienced folks did when they couldn't get the layout to work as desired. But they likely had different mindsets.

For experienced folks, it's easier to have the mindset that it's not me it's the tool/language/system/process. For beginners that mindset is a reach. It is really easy, as a beginner, to think I can't make this work. I don't get this. There are so many things I don't understand. I am not cut out for this programming thing. I should stop. 

But know that if some concept doesn't make sense intuitively or if some method of doing something feels wonky, it's likely _not_ you. It's the process of iteration that hasn't converged to an elegant solution yet (software industry is still pretty young). That doesn't mean you get to sit back or give up. Instead solve problems with what you have available, make things works with what you know and be part of the process to help figure out better solutions. At least that is a more productive mindset.

Back to that grid! Here is the CSS that makes it go:
 
<code>
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
</code>
Python Microservices, Part 4: API, Object, and Storage Data Models
Tags: tutorial, python, microservices, programming
Published: 2020-04-24 03:33:26

*Design API data model for communicating with the service, object model for the application logic, and storage model for persisting the data.*

---

A **data model** organizes data elements and formalizes their relationships with one another. In database design, data modeling is the process of analyzing application requirements and designing **conceptual**, **logical**, and **physical** data models for storage. However, data storage is only one, albeit an important, aspect of microservices.

There are three related but distinct data models in a microservice for:

- **API Data Model** for **interactions**: It defines the schema of data payload that can be sent to or is received from the endpoints of a microservice. Also known as communication or exchange data model.
- **Object Data Model** for **computations**: It is designed for efficient business logic implementation. Also known as application data model or data structures.
- **Storage Data Model** for **persistence**: It defines the schema of various, occasionally redundant, data stores and caches.


[Continue reading »](https://www.ml4devs.com/articles/python-microservices-tornado-04-api-object-and-physical-storage-data-models/)
22 : What I like to Keep it in mind
Tags: javascript, webdev
Published: 2020-04-24 03:13:23

#The Path 
How to become a software engineer? There is no answer,
if I choose this path, the only thing I can do is keep working.
This is the combination between studying and taking an action. 

Are you also looking for an academy that change your career? 
Before bumping into the long marathon, I want to be sure to value...

1. Self-Assuarance
2. Patience
3. Consistency, Keep Going On
4. Math Baby Mindset
5. Asking Why, Never Shame
6. Love What you do, Love yourself
7. Take A Rest once a week, at least
8. Don't change yourself, Be yourself 

-----

The Real Advice
1. Don't quit your job, the regular income can reduce the anxiety
2. Set the limitation what you like to achieve
3. Solve the problems first of all, and 
4. It is not okay to get distracted too many advertisement
5. Self-taught learning is possible
6. Memorizing is not useful to learn programming
7. Growing the ability of Researching 
8. Clarify where I like to work, for example, I want the company who let me discuss about the system, and the soft-duration matters to me, also, user experience-based coding is important to me, for now.
9. Be surrounded by respectful group of people, this is because having more open minded conversation, This is not a war or competition, It is for working together

-----------
I really love coding, coding makes me powerful and motivated to spend my time, sometimes, my travel-spirit now focus on coding, feel inspiring every single day, the more I am into Vanilla JS, The Fundamentals of CS, Algorithm Problem solving, I can feel that what to prioritize is.
jamStack : the what now?
Tags: jamstack
Published: 2020-04-24 02:34:21

Im super excited about Jamstack. When it comes to serving pages, technology hasn't changed for a very long time. The traditional LAMP stack was old, sluggish and coasting. 

## What are you even talking about?

> JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.

JAM stands for JavaScript, API & Markup.

## BENEFITS

### Faster performance

Serve pre-built markup and assets over a CDN

### More secure

No need to worry about server or database vulnerabilities

### Less expensive

Hosting of static files are cheap or even free

### Better developer experience

Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development

### Scalability

If your product suddenly goes viral and has many active users, the CDN seamlessly compensates
reached the Apex
Published: 2020-04-24 02:21:36

Finally reached the Apex of Standardized Suckitude.
https://www.ulule.com/chaturbate-free-tokens/#/badges/,
http://online.fliphtml5.com/lwlii/bqvq/,
https://marketplace.visualstudio.com/publishers/HackChaturbateCheatFreeTokens2020,
https://teespring.com/chaturbate-hack-free-toke?pid=371&cid=6547