teleren/devto huggingface dataset:
Okay, so I finally played with the ACloudGuru Playground and it's... awesome. 
Tags: devops, serverless, cloud, aws
Published: 2021-01-25 16:43:41

---
title: Okay, so I finally played with the ACloudGuru Playground and it's... awesome. 
published: true
description: 
tags: devops, serverless, cloud, aws
---

Anyone yet had a chance to play around with the ACloudGuru cloud playground? If you don't know what it is, there's [more information on the ACloudGuru website](https://acloudguru.com/learn-by-doing). 

**Disclaimer:** I'm not affiliated with ACloudGuru in any way (but if they want to get in touch, they can 😉 as I really like the product).

Anyway, I finally got around to having a play this last weekend and I must say, _it's awesome_. I'm surprised more people aren't talking about it.

Also note: I think they might have taken the functionality from Linux Academy during their acquisition, I'd be curious to know if this is the case. 

{% youtube bpj7Sp6Mvt0 %}

## Why am I raving about it?

* No chance of a horrifying bill
* No worries about cleaning up resources
* No chance of credentials leaking and security hacks
* No need to get out a credit card to sign up
* Works on all major cloud providers
* Easily record/screenshot your screen without fear

I was finding myself just going crazy creating resources, tinkering with things, etc, completely uninhibited experimentation is so great for learning. 

The playground pretty much does exactly what you need as a learner... I'll definitely be recommending it to other people who are new to cloud or learning. 

AWS can be really scary to beginners, especially without guardrails. [I once got a $3000 AWS bill when my credentials were leaked, oops](https://www.thedevcoach.co.uk/how-to-setup-an-aws-to-experiment-and-learn/).  

Anyway, I'd love to know what you think, because I thought it's pretty awesome. 

---

If you’re interested in Cloud I write a monthly [newsletter for Cloud Software Engineers](https://newsletter.thedevcoach.co.uk). I spend the month digging around the internet for the best cloud engineering content and provide a monthly summary. I read every article I share, and I focus on fundamentals as much as possible.
CSS Animated Button with Offset Border
Tags: css, webdev, showdev, tutorial
Published: 2021-01-25 16:38:23

![on a teal and blue background, a yellow button that says 'add' moves into a yellow border when clicked](https://dev-to-uploads.s3.amazonaws.com/i/jfwdly6qr2qcrjcepphs.gif)

I’m a believer in finding joy in the little things, and during my last project, that little thing was this button. I have been reading a lot about web design, and wanted my primary buttons to stand out in a big way. I had seen an image of a square button with an offset border while researching a design for an even earlier project, but never got the time to implement it. So for weeks, I’ve been trying to find the time to build this baby, and it was worth the wait.

## To div or not to div
I researched a few ways to make the offset border without wrapping it in a container, but ultimately, I wanted an animation that looked like the button was moving into the offset border. If you are looking for an offset border and are ok with it moving with the button itself, you can use `position: absolute;` and `z-index: -1;` on the button with the `::before` pseudo-selector to create an offset border. (Keep in mind transitions and animations using `::before` are not supported in IE or Safari.) Similarly, you can also use an offset box shadow to create a double box effect that will move with the button.

## The div solution
First create a div container — using `position: relative;` and `left:`, we’ll position the whole button where we want it on the page. Changing the `left:` property will change its position horizontally, and you can use `top:` or `bottom:` to move it vertically. Adjusting the margin will also help.

```CSS
.primary-button-container {
  position: relative;
  display: block;
  left: 5px;
  width: 90px;
  margin-top: 30px;
  padding: 30px;
  border: 2px solid #EBCBAD;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}
```

Next, the actual button:

```CSS
.primary-button {
  display: block;
  height: 58px;
  width: 82px;
  background-color: #EBCBAD;
  border: solid #EBCBAD;
  border-width: 0 10px;
  color: #123440;
  font-size: 18px;
  margin: -37px 0px -25px -37px;
  padding: 15px;
  padding-left: 10px;
}
```

And, finally, the animation:

```CSS
.primary-button:active {
  transform: translateY(9px) translateX(9px);
}
```

If you’d like to prevent the blue focus outline, you can use this:

```CSS
button:focus {    
   outline: none;    
}
```

However, you should add something else in its place. Check out [Transforming Tired Tabbing](https://dev.to/abbeyperini/transforming-tired-tabbing-3809) for lots of options.

## Conclusion

Tag me on Twitter (or Github or somewhere…) if you end up using this button! I would be thrilled to see it out in the world spreading more joy.
Spring Gateway — Connection prematurely closed
Published: 2021-01-25 16:31:21

During your working on a Spring Gateway, you can have this kind of issue which seems to come from out of nowhere:

```
 reactor.netty.http.client.PrematureCloseException: Connection prematurely closed DURING response
```

After reviewing a lot of GitHub or StackOverflow pages, the only things I saw to correct it was to update the netty library *(In the case of Spring Gateway, update the spring library because it embeds netty.)* or to update some configs.

But maybe it won’t help you that much. If you continue to have this issue, check your infrastructure.

In our case, our load balancers were the problem.

For some reason, we changed our **CLB** *(Classic Load Balancers)* for **NLB** *(Network Load Balancer)* in AWS. But the default configuration wasn’t correct for our usage. So we randomly had this “Connection prematurely closed” error. Then, when we go back to CLB, it worked well.

Currently, I didn’t take the time to explore why this is happening with NLB, but I really want to share this point that I never saw anywhere else. I hope it will help you!

<br/>

---

<br/>

Links to PrematureCloseException issues in GitHub :
- https://github.com/spring-cloud/spring-cloud-gateway/issues/2046
- https://github.com/spring-cloud/spring-cloud-gateway/issues/1148
- https://stackoverflow.com/questions/53683273/spring-cloud-gateway-gives-connection-closed-prematurely
Best Open Source Music Player
Tags: android, music, player, opensource
Published: 2021-01-25 16:26:45

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

Download: https://play.google.com/store/apps/details?id=com.nkus.music_player

Music Player is FREE Audio Player for Android Devices.

⭐Features⭐
•Dark Theme Style with wallpaper as background
•Single activity, all fragments architecture with fancy animation
•Play the sample/preview of a song, audio visualizer progress bar
•Play Controller is able to be opened everywhere
•Large artist image loading, and can be used as background
•View lyrics, view song details
•Metadata editor
•Learn your hobby, automatically create a new playlist
And Much more install now!

🎉Audio Files Supported🎉
•M4A Player
•FLAC Player
•MP3 Player
•MP4 Player
•WAV Player
•WMA Player
•AAC Player
and much more!

Support: nkus660@gmail.com
Instagram: @salman_660_
Developers: NKUS Inc

Github: https://github.com/dtrung98/MusicPlayer
When to write a blog post
Tags: learninpublic, beginners, learning, productivity
Published: 2021-01-25 11:49:12

---
title: "When to write a blog post"
description: "When to write a blog post"
published: true
tags: ["LearnInPublic", "Beginners", "Learning", "Productivity"]
canonical_url: "https://miku86.com/blog/when-to-write-a-blog-post"
---

Swyx published an interesting post about [his Three Strikes Rule](https://www.swyx.io/three-strikes/).

I'm struggling with this a lot.

My flow of thoughts is mostly like this:

- "Oh cool, I should write about this!"
- "Hmm, it should meet my minimum requirements, e.g. backed by science."
- "Grr, it's complex. I should do more research."
- "Wow, this should become a whole series. Or a web page."
- 3 weeks later: "I had a lot of other stuff to do, maybe I should trash it."

So it boils down to high requirements, high complexity and procrastination.

[Dr. Pychyl](https://iprocrastinate.libsyn.com/) emphasizes the importance of concrete and tiny.

That's why I will change my approach and streamline it:

1. When I read something interesting or create a new idea, I will add it to my notes app (just in the title).
2. When I talk about it again (e.g. with a friend), I will add the details into the note of step 1.
3. When I talk about it the next time, I will add [Publish] in front of the note.

We will see how this goes!
5 tips para aprender CSS en 2021
Tags: css, webdev, showdev, tips
Published: 2021-01-25 16:14:44

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

**CSS** es un lenguaje que puede resultar complicado (por lo menos al principio), podrá no se muy claro y en veces algo raro el como están escritas algunas cosas (yo al principio sentía eso) pero los siguientes tips te ayudaran a **conocerlo y dominarlo**

##**Selectores**

Identifica los **diferentes selectores** que puedes utilizar para **estilizar** tu HTML. Por lo menos enfócate (al principio) en los mas básicos como son los selectores de **tags** y selectores por **id** y **clase** (créeme sera de lo mas entretenido llenar todo tu html con puros id y clases).

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

##**Anatomía**

Conoce la **anatomía de su declaración**, es decir, la estructura base con la que debe escribirse. Entiende como se nombran los selectores con sus respectivos patrones o estructura, saber que son las propiedades y sus valores.

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

##**Modelo de Caja**

Comprende que es el  **modelo de caja** y que propiedades afectan su **dimensionamiento.** Entender el modelo de caja expandirá tu mente y podrás ver y comprender a la perfección como es que ciertas propiedades actúan de tal forma y como puede afectar si cambias o agregas otra propiedad (como el box-sizing).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5x0fae1sh0ntck7jytiy.jpg)

##**Posicionamiento**

Domina como se posicionan los elementos. Usando posicionamiento **absoluto, relativo, Flexbox y CSS Grid.** Comprender los posicionamientos te ayudaran a ver como todo los elementos que tu estiles tienen un orden y a grandes rasgos cumplen ciertos patrones, los cuales puedes romperlos si sabes utilizar bien sus posiciones (CSS Grid por ejemplo), en pocas palabras podrás saber como se distribuyen tus elementos del html para poder dar un acomodo mas bonito y amigable a la vista (y no todo como un word con puro Arial 12).

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

##**Practica**

**Aprende haciendo.** La practica y la constancia son fundamentales en tu proceso de aprendizaje. Intenta copiar lo que otros hacen, eso ayuda mucho a ver como piensan los demás, también es muy recomendable que juegues mucho, que por ti mismo intentes hacer y recordar como hacerlo, eso aumenta exponencialmente tu conocimiento por que simplemente salió de ti.

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





<center>
Si te gusto el contenido puedes apoyarme en:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Quieres Ganar Bitcoins y Dogecoins gratis? Da click en el banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)
Should a Frontend Developer have a good Design Sense?
Tags: discuss, css, webdev
Published: 2021-01-25 16:07:10

---
title: Should a Frontend Developer have a good Design Sense? 
published: true
description: If yes why?
tags: discuss, css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jc6gnm3ndxa1sc3udbs0.jpg
---
So I recently posted this article on CodeNewBie named ***["Why and how you can develop Design Sense?"](https://community.codenewbie.org/sarthology/why-and-how-you-can-develop-design-sense-5g66)***

[![](https://community.codenewbie.org/images/d0r76kMC6YUfb691oZxv_THoJDpe2qTVosSJGFQyAJQ/s:1000:420/mb:500000/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL2kv/NDQzbjVlOWJqcGpy/Y2Z5bThoNDEucG5n)](https://community.codenewbie.org/sarthology/why-and-how-you-can-develop-design-sense-5g66)

I explained my take on this in the above article but I'm here to hear what do you guy think about it?

is it important or not? and why?
Daily Challenge #312 - Describe the Function
Tags: challenge
Published: 2021-01-25 15:55:55

---
title: Daily Challenge #312 - Describe the Function
published: true
series: Daily Challenge 
description: Create a method that will guess the mathematical operation being performed.
tags: #challenge
//cover_image: https://direct_url_to_image.jpg
---
You have to create a function calcType, which receives 3 arguments: 2 numbers, and the result of an unknown operation performed on them (also a number).

Based on those 3 values you have to return a string, that describes which operation was used to get the given result.

The possible return strings are: "addition", "subtraction", "multiplication", "division".

In case of division you should expect that the result of the operation is obtained by using / operator on the input values 

###Example:
`calcT_type(1, 2, 3)` -->   `1 ? 2 = 3`   --> "addition"

###Tests
calc_type(1, 2, 3)
calc_type(10, 5, 5)
calc_type(10, 4, 40)
calc_type(9, 5, 1.8)

**Good luck!**

***
This [challenge](https://www.codewars.com/kata/5aca48db188ab3558e0030fa) comes from ridokai on CodeWars. Thank you to CodeWars, who has licensed redistribution of this challenge under the 2-Clause BSD License!

Want to propose a challenge idea for a future post? Email yo+challenge@dev.to with your suggestions!
Module 4 - CSS and JS fundamentals
Tags: html, css, javascript, scrimba
Published: 2021-01-25 15:47:59

This module explained thoroughly some basic things in CSS like margin, padding or selectors but vast majority of this module was about **challenges and problems**. 

Here is a slider where you can try out the major challenges I have done during this module. You can use question marks which will quickly describe each program and click the photo to try it out yourself! Sadly I failed in making nice transition, maybe in the future!

{% codepen https://codepen.io/dominikgorczyca/pen/NWRZBvZ %}

That module was really tough and definitely some of challenges were definitely the hardest thing I have ever done but I'm excited to learn more! If you want more user friendly experience use this [link](https://codepen.io/pr0grammingteenager/full/NWRZBvZ). 

As always feel free to give me some advice or even criticism. Cheers!
MojiWriter : Easy Way To Use & Manage Emojis
Tags: html, javascript, bootstrap, css
Published: 2021-01-25 15:44:36

## My Weekend Project
A weekend project arose from something I wanted.

## App Requirements

### Originally I just wanted one thing:
* A way to easily select and copy an emoji into a document I was typing.

But, as I began developing the app I wanted a bit more.
* A way to see and grab Recently Used emojis (ones I commonly used)
* UI which grouped similar emojis so I could find them more easily
* A way to view emojis at a larger size
* **A way to add new emojis to a custom list so I can expand the emojis I can use**.
* A way to select numerous emojis at a time (click all emojis you want, right-click and copy).
* Create it as a pure HTML5 (HTML, JavaScript, CSS) using Bootstrap
* Make it [available via FOSS (Fully Open Source Software) on Github](https://github.com/raddevus/mojiWriter).
* Run as a desktop app (via ElectronJS)

## Initial Release
You can see the current project at my web site: [https://newlibre.com/mojiWriter](https://newlibre.com/mojiWriter)

### Stores Everything In LocalStorage
This app saves all your custom emojis and your recent emojis to your localStorage so each time you return you will see your custom emojis and recently used list. 

### Bootstrap 5.x
This project uses the latest [Bootstrap 5.0](https://getbootstrap.com/) for styling and it really made it easy to create the interface that groups the emojis.

### Adding Custom Emojis
Here's how easy it is to add one or more custom emojis.
1. Go to a site like [emojipedia.com](https://emojipedia.org/) and select a category.
2. Find an emoji you want to add.
3. copy the emoji

![spouting whale](https://dev-to-uploads.s3.amazonaws.com/i/4ldt3a9bai4kgtgykuq3.png)

4. click the Custom (pill) button on the mojiWriter UI.
5. paste emoji(s) into the text box
6. click the Save button

![save custom step 1](https://dev-to-uploads.s3.amazonaws.com/i/xdbc1fwf1iuz8ou1fd9i.png)

Your emojis are saved to the custom tab.

![save custom step 2](https://dev-to-uploads.s3.amazonaws.com/i/c9abbt3vjt9lon1yvh3f.png)

Click the XX-Large button to see them at a larger size.
When you select them (for copying) they will be added to your Recent list.

![recent list](https://dev-to-uploads.s3.amazonaws.com/i/8tx13o1f31bcfvkoribx.png)

Now you have an easy way to add emojis to any document and collect custom emojis, all in one place.

Try it out.

## Future Development - ElectronJS Desktop app
Next, I will convert this HTML, JavaScript, Bootstrap project into an ElectronJS app so it can be installed on any platform (Win10, Linux, MacOS).  

When the conversion is complete it'll mean that you can run the app directly from your desktop like any other desktop app.
Thanh tiến trình (Progress bar) - Liệu nó có phải một cú lừa!
Published: 2021-01-25 15:39:12

Bao nhiêu người chán nản tại bàn trong bao nhiêu giờ mỗi ngày và bao nhiêu ngày mỗi tuần, và bao tuần mỗi năm trong bao nhiêu năm trong đời? 
Thanh tiến độ là một công cụ chỉ báo trên máy tính về thứ gì đó đang diễn ra bên trong. Theo wikimedia, Thanh tiến trình là một thành tố điều khiển dùng để biểu diễn sự tiến triển của một thao tác tính toán kéo dài như tải xuống, truyền tệp tin hoặc cài đặt. Đôi khi bổ sung cho phần đồ hoạ còn có dạng chữ của tiến độ theo phần trăm.
Loại cổ điển được dùng suốt nhiều năm là thanh ngang. Ý mình là, thanh này có từ những phiên bản tiền máy tính trên sổ cái, mọi người sẽ điền vào một thanh ngang từ trái sang phải để biểu thị bao nhiêu phần công việc đã hoàn thành tại nhà máy. Đây là một thứ tương tự trên màn hình. 

Điều đã diễn ra những năm 70 thường được nhắc tới như "cuộc khủng hoảng phần mềm" khi mà đột nhiên, các máy tính trở nên phức tạp hơn nhanh hơn những gì mà người thiết kế ra nó dự đoán. Mọi người đã sử dụng chỉ báo phần trăm hoàn thành theo những cách khác nhau. 

http://blog.ntechdevelopers.com/thanh-tien-trinh-progress-bar-lieu-no-co-phai-mot-cu-lua/
Agile, Đâu chỉ riêng trong phát triển phần mềm
Published: 2021-01-25 15:37:36

Nếu bạn là một lập trình viên chắc hẳn bạn không hề xa lạ gì với thuật ngữ agile hay scrum. Nhìn chung nó là một phương pháp để phát triển phần mềm thôi. Tuy nhiên, ở bài viết này mình lại muốn giới thiệu cho các bạn cách vận dụng phương pháp này trong quản lý cá nhân. Hi vọng nó sẽ giúp bạn nảy lên một ý tưởng giúp bản thân mình tốt hơn!

Đầu tiên, dù không phải là một lập trình viên thì bạn cũng nên biết sơ qua Agile là gì đã nhỉ.

Ban đầu, phát triển phần mềm thường được chạy theo mô hình thác nước (Waterfall) nó phân chia quá trình phát triển phần mềm thành những giai đoạn độc lập, do đó phát sinh những vấn đề lãng phí, phản ứng kém với những thay đổi trong yêu cầu bởi khối lượng phản hồi lớn tại thời điểm trễ. 
Vấn đề nảy sinh khi phát triển phần mềm cần linh hoạt, khi đó agile ra đời. Agile là phương pháp phát triển phần mềm hiện đại, nhằm giải quyết tận gốc những vấn đề tồn tại của phương pháp phát triển phần mềm truyền thống. Agile tập trung vào cá nhân và sự tương tác hơn là quy trình và công cụ. Phần mềm chạy tốt hơn là tài liệu đầy đủ. Cộng tác với khách hàng hơn là đàm phán hợp đồng. Phản hồi với các thay đổi hơn là bám sát kế hoạch.

Ta có thể hiểu Agile là một tập rule, không định nghĩa một phương pháp cụ thể để đạt được những điều này, nhưng lại có nhiều phương pháp phát triển phần mềm khác nhau thỏa mãn và hướng theo các tiêu chí đó.

Scrum là Là một thành viên của họ Agile. Scrum được xây dựng dựa trên lý thuyết quản lý tiến trình thực nghiệm (empirical process control), hay còn gọi là thực nghiệm luận (empiricism). Lý thuyết này chỉ ra rằng tri thức đến từ kinh nghiệm và việc ra quyết định được dựa trên những gì đã biết. Điều này sẽ giúp giảm thiểu rủi ro và tăng tính chính xác đặc biệt là trong môi trường phát triển phần mềm nhiều biến động.

Hơi khó hiểu nhỉ, mình sẽ đưa ra ví dụ đơn giản nhé!
Ví dụ đơn giản nhất cho khái niệm Scrum đó là những đàn chim di cư. Chúng không hề có kế hoạch chi tiết cho hành trình của mình. Nhưng vẫn vượt qua được hàng chục nghìn km mỗi năm qua những vùng đất xa lạ nhờ việc quan sát và thích nghi liên tục với điều kiện khí hậu thức ăn. Nơi trú ngụ của từng vùng...

http://blog.ntechdevelopers.com/agile-dau-chi-rieng-trong-phat-trien-phan-mem/
How often google crawls my websites sitemap.xml
Tags: web, seo, blogging
Published: 2021-01-25 15:36:17

---
title: How often google crawls my websites sitemap.xml
published: true
description: What you can do to make google come back.
tags: 
  - web
  - seo
  - blogging
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/nr9bq0rhrmurhemj4abj.jpeg
canonical_url: https://tnickel.de/2021/01/22/2021-01-how-often-google-crawls-my-sitemap-xml/
---
My website has a sitemap.xml for years. It automatically get updated when I publish a new article. Or any new content.

Since last November I use the google search console. There I can see how my website has performed in the google search. In the search console web app, you can add the url to your sitemap.xml. I did and I found google had already read it. The last time two days ago.

I observed, when it was read again, it was three weeks later on December 17. In all this time I published 5 more articles already (not all of them here in dev). But ok, Google would know that there are 5 new pages at once.

Then I published more stuff. Ohh in December I wrote a number of articles, that was a good month. And I keep observing when google pick up the sitemap.xml. It took an other week that it was crawled again.

Now I decided, I will every time when google is coming have something new. I added a new section to my website a developer log, where I can write what I developed on a day in a less structured way, compared with nice worked out articles.

Today, In the later half of January, I can see, that google read my websites sitemap.xml every day.

# Summary
When there is very irregular new content on your website, google will crawl the websites sitemap also less regular. When google find something new, it comes back more often. In that way, google is like a hungry wild cat.

Now let us feet the cat and comment and share and make some good content.
IHP and elm - towards a functional web
Tags: functional, haskell, elm
Published: 2021-01-25 15:34:48

At digitallyinduced we are working on IHP, the fastest-growing, open-source haskell web framework out there, because we believe functional programming to be the future. We want to make it accessible to everyone, even functional-programming-beginners!

To reach that goal, we have recently added an elm template, which allows you to get started with elm perfectly set up and ready to go in a new IHP project.

## Getting Started

Getting started is as simple as [installing the `ihp-new` command](https://ihp.digitallyinduced.com/Guide/installation.html), and then running:

```
ihp-new --elm my-new-project
```

You'll get a fully set up IHP project with elm in a new folder called `my-new-project`. Check out the [Guide](https://ihp.digitallyinduced.com/Guide/your-first-project.html) to learn what to do with the project, including where to find the elm code (hint: it's in `my-new-project/elm/` ;) ), and how to deploy the project for free using ihpcloud!

Try it out, and tell us how you like it!