teleren/devto huggingface dataset:
Applying Solution Based Learning
Tags: webdev, read, tutorial, programming
Published: 2022-07-21 21:33:14

```java
Reading is a practice that I really enjoy, especially articles. 
```

But to learn, just reading is not enough, something is missing, but what?! It was in programming that I could better identify this, this lack is very evident when we are coding. It is necessary to **get your hands dirty** beyond theory if you want to go further...

What has helped me a lot to learn and evolve in **java** is precisely choosing problems to solve, and allowing this to drive me to understand new techniques and concepts.

I have matured the way of thinking, speaking and acting in the face of problems solved and experienced both with *Java* and with other technologies, and not only logic and reasoning but also the ways of doing household chores have changed a lot.

In my current job working with java, it is more conducive to learning, precisely because I have tasks to be developed where internal and external clients request and I need to use logic to solve them. I always take as a basis the solutions experienced, I look for new alternatives, and I solve them in the way I believe to be ideal.

`Ways I've put into practice:`

- Understand the problem;
- List the needs;
- Raise which knowledge and tools can be useful to solve;
- Test different solutions;
- Solve the problem;
- Evaluate points for improvement.

> Increasingly these points have helped me to achieve better personal and professional results and that's not all, there are different ways to solve problems and learn from these same "problems".

The important thing is to always stay focused!
KeywordFinder
Tags: vue, typescript, quasar, design
Published: 2022-07-21 21:28:00

The [KeywordFinder](https://github.com/JosunLP/KeywordFinder) is a project that arose from my vocational school graduation thesis and is now being further developed by me on GitHub as an open source project after completing my training.

 It is a tool to support text analysis, especially the analysis of tender texts. Accordingly, it is mainly aimed at the acquisition teams of companies, and self-employed.

 However, it can also be used flexibly for any other type of text analysis. Since the software runs 100% client-side and does not collect any data, it relies on browser local storage to persist the configuration. 
Additionally, this can be exported/imported in parts or completely. Furthermore, there is a button at the very bottom of the page to reset the application. This completely deletes the previous session.

[https://keywordfinder.josunlp.de/#/](https://keywordfinder.josunlp.de/#/)

[https://github.com/JosunLP/KeywordFinder](https://github.com/JosunLP/KeywordFinder)
Free One Page Responsive Website Templates with Slider HTML CSS
Tags: html, css, javascript, webdev
Published: 2022-07-21 21:24:00

**Are you looking for free one page responsive website Templates with sliders?** If so, [this blog post](https://www.hmablogs.com/free-one-page-responsive-website-templates-with-slider-html-css/) is for you! This post will show you how to create a free one page responsive website using HTML CSS and Bootstrap. You will also get the free source code for this bootstrap one page website.

## [Free One Page Responsive Website Templates](https://www.hmablogs.com/free-one-page-responsive-website-templates-with-slider-html-css/)
I have created this single page business website template using HTML CSS and Bootstrap 4 framework. The website homepage contains 6 sections and can be used to sell your services and digital products online. The website is fully mobile responsive and also contains a PHP-based working contact form.

We have collected the best free [one page responsive website templates](https://www.hmablogs.com/free-one-page-responsive-website-templates-with-slider-html-css/) with sliders using HTML CSS and bootstrap. This template will help you create a professional-looking website in just minutes. This template is perfect for any type of business and will help you build an amazing online presence.

## One Page Responsive Website Using HTML CSS and Bootstrap
The following is the **_video tutorial_** that shows and explains to you the different features and functions of this one page responsive website bootstrap template:

{% youtube e08Q16c9LNA %}

## [What is One Page Responsive Website with Slider?](https://www.hmablogs.com/free-one-page-responsive-website-templates-with-slider-html-css/)
Have you ever wondered what a one page responsive website with a slider might look like? wondered if it was a good idea, or if it would be hard to create? If so, you’re not alone. But don’t worry, because in this blog post we’ll walk you will get a one page responsive website with a slider with source code.

A one page responsive website is a great way to create a professional-looking website without having to use a lot of space. With a slider, you can add additional content to your website without having to worry about how it will look on your target audience’s device.

## What is a Bootstrap Website template?
A bootstrap website template is a pre-made website framework that is based on HTML, CSS, and JavaScript languages and you can customize it to fit your needs. The most important feature of a bootstrap template is that it’s fully responsive to all mobile devices. The website content can easily adjust itself according to the width of the screen.

## Read the Detailed Article Below:

{% embed https://www.hmablogs.com/free-one-page-responsive-website-templates-with-slider-html-css/ %}

****************************
𝗛𝗲𝘆, 𝗜𝗳 𝗧𝗵𝗶𝘀 𝗩𝗶𝗱𝗲𝗼 𝗶𝘀 𝗛𝗲𝗹𝗽𝗳𝘂𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂, 𝗣𝗹𝗲𝗮𝘀𝗲 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗖𝗼𝗳𝗳𝗲𝗲. 𝗧𝗵𝗮𝗻𝗸 𝗬𝗼𝘂!😇
https://www.buymeacoffee.com/hmaweb
 
****************************
When feeling overwhelmed and being new to coding...
Tags: discuss, beginners, codenewbie, productivity
Published: 2022-07-21 21:22:00

What is something that has helped you study coding when you first started out? 

Learning coding/ taking a bootcamp is very overwhelming with new information being thrown at you everyday and still feeling like you haven't totally grasped the concept of the lesson prior. 

Please help by listing below some helpful tips to #codenewbies.
[Desafio] - Frontend: Conectar a uma API para SSE
Published: 2022-07-21 21:21:00

> Conteúdo original [nesse tweet](https://twitter.com/zanfranceschi/status/1550228591652519936)

---

Ei dev frontend,

Vamos fortalecer nossa amizade com um desafio que preparei especialmente pra vc?

Quero só ver você fazer um frontend que se conecta a uma API que oferece um streaming de valores de ações usando Server Sent Events ─ SSE!

Chega mais.

cc @sseraphini

↓

![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lxlvek7x63c4qjxhtoa.png)

---

Não é o objetivo dessa thread explicar o que é SSE (dá uma pesquisada no Google). Mas, muito por cima, SSE funciona como uma forma do client receber um fluxo constante de informações do servidor ─ um streaming. É tipo um websocket só que a direção é só do server para o client.

---

Depois dessa introdução porca, vamos ao desafio!

Faça um frontend que se conecte a API (que já fiz e dockerizei com carinho pra você) pra começar a receber o fluxo de cotações de ações. Invente algum jeito de mostrar isso de forma dinâmica ─  um gráfico dinâmico pode ser legal!

---

Vamos às instruções pra você começar.

O jeito mais fácil e recomendado é

1. Subir um container docker;
2. Entender mais ou menos como funciona; e
3. Finalmente fazer um front do seu jeito.

Vamos detalhar cada passo à seguir.

---

1 . Subir um container docker:

docker run --rm -p 8080:80 zanfranceschi/desafio-02-frontend_e_sse

Mais fácil que dormir a tarde depois de comer uma feijoada.

---

2 . Entender mais ou menos como funciona:

Depois de ter subido o container, simplesmente navegue até http://localhost:8080/. Eu montei uma coisa bem básica e horrorosa pra você se incomodar e fazer melhor. Olha o fonte pra ter uma ideia.

![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffg19xilhyqqztml5808.png)
![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jze5xgmiv3aiyex8pezn.png)

---

3 . Finalmente fazer um front do seu jeito:

Essa parte é importante você fazer do jeito que quiser, tá?

Entretanto, se quiser ou precisar duma sugestão, dá uma olhada na lib highcharts e nos seus gráficos dinâmicos.

https://highcharts.com/demo

https://highcharts.com/demo/live-data

---
 
Tudo que fiz pra esse desfio está disponível no github caso queira dar uma olhada.

Se você fizer o desafio e versionar no git, abre um pull request pra adicionar um link no README do repo desse desafio, tá? Vou ficar muito feliz!

https://github.com/zanfranceschi/desafio-02-frontend_e_sse

---

Se chegou até aqui, não preciso nem dizer, né? ❤️

Muitos anos atrás, durante uma aula na faculdade, uma professora falou que "a qualidade do software é ditada pela interface com o usuário". Na hora achei errado, mas hoje consigo entender o que ela quis dizer. E ela tá certa!
🍿 Organizational Performance with Open Data, 5S & digital art
Tags: showdev, api, management, leadership
Published: 2022-07-21 21:12:32

## ❔ About

It's now time to put things together, especially after : 

{% embed https://dev.to/optnc/from-waiting-time-metrics-to-generative-art-2d6d %}

{% embed https://dev.to/optnc/dataviz-et-culture-dentreprise-2mke %}

In this short post, you'll see how all things come together, from its inception to technology and management gains.

## 🍿 Show time

Below are the contents that inspired - and keep on inspiring - me on a daily basis.

So...

1. Sit down
2. Relax
3. Enjoy the show

{% youtube WHzd_9v2ocw %}

## 📚 Bibliography

Below a short selection of the books that inspired me : 

- [Liberté & cie](https://www.goodreads.com/book/show/35654633-libert-cie)
- [Daily Rituals: How Artists Work ](https://www.goodreads.com/book/show/15799151-daily-rituals)
- [Guide pratique des 5S et du management visuel](https://www.goodreads.com/book/show/24468085-guide-pratique-des-5s-et-du-management-visuel)
- [Open innovation : Développez une culture ouverte et collaborative pour mieux innover (Stratégies et Management) ](https://www.goodreads.com/book/show/25204011-open-innovation)
- [La règle? pas de règles: Netflix et la culture de la réinvention ](https://www.goodreads.com/book/show/57254246-la-r-gle-pas-de-r-gles)
- [Employees First, Customers Second: Turning Conventional Management Upside Down](https://www.goodreads.com/book/show/8038126-employees-first-customers-second)

## 📑 Worth viewing related contents

### Teaser

{% youtube 0mNTITLV698 %}

### Short version

{% youtube lGShsSQatN8 %}

### Full version

{% youtube 2MLVYEwXGL0 %}
You should be able to use module scripts in the `file://` protocol!
Tags: html, javascript, webdev, watercooler
Published: 2022-07-21 20:56:59

So, I recently made an Issue on the official HTML repository, [whatwg/html](https://github.com/whatwg/html), titled with a similar name, [#8121, "Suggestion: You should be able to load module-scripts in the file:// protocol."](https://github.com/whatwg/html/issues/8121).

But, rather than go in-depth onto why I think we should allow this, I'm going to reiterate over my list of reasons why this should be supported.
If you want to read a more in-depth description and reasoning you can read the Issue.

1. In the end module scripts have the same effect as loading in multiple dependencies through `<script src=""></script>`.
2. For every HTML file that relies on a dependency you must write out all the `<script>` tags needed to point to every required file, and the scripts have to all be in dependency-resolution order.
3. It will be hard to debug if you have a lot of dependencies and miss one file or have a typo.
4. You can't have any of your scripts, dependencies or your main JavaScript files, be `async` or you risk them loading in the wrong order.
5. Testing JavaScript code, especially packages, is more difficult without easy access to modules.
6. The ES6 `import`/`export` syntax looks way nicer than a bunch of `<script src=""></script>`s being spammed.
7. It can confuse people who don't know about CORS, especially for someone who doesn't understand why this would be an error in the first place.
8. It already has been the source of confusion as at least three StackOverflow articles have been created on the premise of "Why doesn't my module work in the browser?".
9. Almost no changes need to be made for it to be utilized by browsers (or by web developers).
10. The only reason it isn't allowed is because "New features shouldn't be allowed to get around CORS. No exceptions.".
Weekly 0022
Tags: weeklyretro
Published: 2022-07-21 20:56:00

### Monday

In the morning I received a surprise from LinkedIn Learning 🙂
They sent to me a flowers bucket because of my sickness.
Thank you very much!

![https://pbs.twimg.com/media/FX8nnhdWIAAPo4o?format=jpg&name=small](https://pbs.twimg.com/media/FX8nnhdWIAAPo4o?format=jpg&name=small)

[https://twitter.com/kasuken/status/1549000360534151175?s=20&t=Q1W-mFwL0nRUGliG1x7b3w](https://twitter.com/kasuken/status/1549000360534151175?s=20&t=Q1W-mFwL0nRUGliG1x7b3w)

In the morning I was full of power and I wrote 6 scripts for LinkedIn Learning (almost 7).
Good impressions.

In the afternoon I updated one of my project on GitHub called stone.css. I received an issue with an improvement and I did it. You can find the project here: [https://github.com/kasuken/stone.css](https://github.com/kasuken/stone.css)

Before the end of the working day time I scheduled some activities after vacation about side business.

**Mood:** 🎉

### Tuesday

Full of energy also this morning.
I started the morning to finalize two scripts for LinkedIn Learning.
I changed my habits and I went to the gym at 09:30 to 10:30 and when I came back at home office, I started to work again on Red Origin.
I try to automatize the deploy in production environments for customers (and also for our environments).
At lunch I launched a network assessment with Network Guardian for the same customer as last time, because during the report creation we found some weird values. We want to be more sure that these information are right and not for some issues on the network.

I did a call in the afternoon to reschedule our activities based on my actual capacity.
I will work hard again after my vacation, in two weeks.

**Mood**: 🙂

### Wednesday

In the morning I retrieved all the reports from Network Guardian from a customer… and I sent them to my colleagues for creating a report with PowerBI. The report creation is automated as well, but I don’t know how it works. 🙂

I sent out sessions proposal to at least 5-6 events that will be live from September to November.
One is just confirmed! 🙂 and it’s about GitHub Codespaces!

I will wait for the others.

Fighting with the Red Origin deploy on Azure… 🧑‍💻

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl6wnu0bn0ln4jslrva3.png) 

**Mood: 🙂**

### Thursday

Today I worked a lot on Red Origin and I finalized one of the last chapters of the book about Minimal API that should be published in the next october!

![https://static.packt-cdn.com/products/9781803237824/cover/smaller](https://static.packt-cdn.com/products/9781803237824/cover/smaller)

[https://www.packtpub.com/product/minimal-apis-in-asp-net-core-6/9781803237824](https://www.packtpub.com/product/minimal-apis-in-asp-net-core-6/9781803237824)

**Mood: 🎉**

### Friday

Short week because since today I am official in vacation until 7th of August 🙂

![https://images.unsplash.com/photo-1597634285596-01fd1bffe116?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy](https://images.unsplash.com/photo-1597634285596-01fd1bffe116?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy)

**Mood: 🎉**
One (serious) problem with callback in Javascript
Tags: javascript, programming, webdev
Published: 2022-07-21 20:54:00

Callbacks, these are functions that are passed as argument to other functions. These callbacks are then invoked by function to which it is passed. We commonly pass callback while using function such as `setTimeout()` and `setTimeout()`. 

While callback seem to be obvious in their use, they have a inherent flaw with them. This post is all about this problem which i learnt recently in KyleSimpson's course at Frontend Masters.

## Is it the infamous Callback hell?

The first thought that comes to our mind while addressing the problem with callback is callback hell. However this not is not even closer to the problem we have. 

Enough of setting the stage, now let's go directly to it. 😅

## Inversion of Control

Wikipedia states IOC as:

>In software engineering, inversion of control (IoC) is a programming principle. IoC inverts the flow of control as compared to traditional control flow. In IoC, custom-written portions of a computer program receive the flow of control from a generic framework. A software architecture with this design inverts control as compared to traditional procedural programming

To put simply, IOC is loosing the program flow control from our hands to some external code.

Now let's see how this is possible with callback.

Suppose there is a function for tracking checkout which takes two arguments, first one for product info and second as a callback to be invoked when someone checkouts.

And this is how we call it.

```js
trackCheckout(purchaseInfo,function finish(){
    chargeCreditCard(purchaseInfo);
    showThankYouPage();
});
```

The problem with passing the callback here is that it's invocation is not in our hand. We are giving the control to the trackCheckout function which is provided with some third party code. 

What if the developer of trackCheckout mistakenly calls our callback like this?

```js
function trackCheckout(options,callback){
    process(option);
    callback();
    callback();// 
}
```

Did you notice that our callback now was executed two times!? This mean that now our end users will get charged twice instead of once and this is the least expected shopping experience. 

Further, it can also happen that our callback is not even called which now will put us to loss. 

```js
function trackCheckout(options,callback){
    process(option);
    //callback();
}
```

So, this is how we callback lead of inversion of control, the problem to this is promise which i will cover in some other blog someday.

## Thank You
Apptron Demo: Zero Config HTML5 Native Apps
Tags: showdev, html, webdev
Published: 2022-07-21 20:30:07

---
title: "Apptron Demo: Zero Config HTML5 Native Apps"
published: true
description: "In this demo I use the Apptron build command to create an executable from a single HTML file."
tags: showdev, html, webdev
cover_image: https://i3.ytimg.com/vi/7zsCQGOEBRU/maxresdefault.jpg
# Use a ratio of 100:42 for best results.
---
{% embed https://www.youtube.com/watch?v=7zsCQGOEBRU %}

In this demo I use the [Apptron](https://progrium.com/blog/apptron-announcement/) build command to create an executable from a single HTML file. No setup, no configuration. If you want to change how the window looks, you can add a meta tag to your HTML file. It's not only simple, it's fast.

The way this works is actually similar to the last demo where we built a simple Go application to host our webview app, except Apptron is building it for us. Unlike all other commands of Apptron, this build command does have a dependency, which is the Go compiler. Luckily, this compiler is also a self-contained tool that's easy to install on any platform. 

At some point, I'd like to try embedding the Go compiler with Apptron, but this does introduce some complexity I don't want to take on just yet. However, if anybody is interested in making this happen, please join early access so you can help us make Apptron great.

Speaking of help, this demo avoids talking about something that's somewhat necessary on modern platforms: signing. If you've ever downloaded an executable on Windows, I'm sure you've gotten a giant alert asking if you really want to run it. This is because it's an unsigned executable, which means it can't be proven to not be tampered with by a non-author. Platforms are getting stricter and stricter about this.

On Mac, you have to not only sign but notarize your executable before another Mac will be allowed to run it. This is a tricky process that can be done on your own with an Apptron built executable, but I have preliminary tooling to help with the process. The same tooling can also bundle up your executable into a Mac app bundle. 

However, I need help getting these last mile features in. So please consider [joining early access](https://tractor.dev/apptron/), not only to try Apptron, but if you have the experience, to help us finish these core features before it debuts as a public open source project. 

See you with the next demo!

-jeff
Day 103: Full time day work
Published: 2022-07-21 20:13:49

Hi!
today was a full time  day work and I'm so tired that I have to sleep 4 hours earlier the usual time finally meeting my sleeping alarm hahaha! :) I fought with the slick package and I was able to get to something that I'm okay with. I worked on another feature tomorrow I will be focusing on data presentation but after I sleep 

Signing off...
Spinning up MySQL Database with Docker
Tags: mysql, docker, php, laravel
Published: 2022-07-21 20:08:00

This article was originally published on my blog, visit it [here](https://celeroncoder.github.io/blog/posts/spinning-up-mysql-database-with-docker/).

This is the best way to start since you don't have to install MySQL locally and configure it and run into like thousands of issues and in the end not being able to make it, docker makes it much easier for me or probably for you also to spin up a MySQL database in minutes.

**To get started, follow these steps:**

- Pull the latest image,
```bash
docker pull mysql:latest
```

You don't have to do it manually, it will download automatically if not installed when we spin up the container.

- **Start the container** using the following command
```bash
docker run --name <container_name> -p 3306:3306 -v mysql_volume:/var/lib/mysql/ -d -e "MYSQL_ROOT_PASSWORD=<root_password>" mysql
```

This will create a new container with the name _<container_name>_, with the `mysql:latest` image, and publish the ports `3306` to the local environment to use the instance outside the container.

This also sets up the volume for the container to persist the database's data, so that it doesn't reset on restarts of the host system or the container.

We also pass in the environment variable **MYSQL_ROOT_PASSWORD** to set a root password for the database.

If not provided, it will generate a random strong password, we can see it in the container logs using this command:

```bash
docker container logs <container_name>
```

You can pass in the following **Environment Variables** when starting the container:

- `MYSQL_ROOT_PASSWORD`: Set up your password using this environment variable.
- `MYSQL_ALLOW_EMPTY_PASSWORD`: Blank or Null password will be set. You have to set MYSQL_ALLOW_EMPTY_PASSWORD=1.
- `MYSQL_RANDOM_ROOT_PASSWORD`: a random password will be generated when the container is started. You have to set `MYSQL_RANDOM_ROOT_PASSWORD=1` to generate the random password.

> Don't pass in the permanent password in production, as the password will be visible in the shell history, which we obviously don't want.
> A possible solution is that we pass in a temporary password like temp123 and then change it afterwards.

**We can change the root password as follows**:

- Get into the container using 
```bash
docker exec -it <container_name> bash`.
```
- Login into the MySQL shell using
```bash
mysql -u root -p
```
This will prompt you to enter the password which we set up before, in our case it was _temp123_.

- After logging into the shell, run the following SQL query to change the password
```sql
ALTER USER 'root'@'localhost' IDENTIFIED BY '<new_password>';
```

**References**:

- View this article on [Instapaper](https://www.instapaper.com/read/1523582174/20140126) with notes.
- View the original one [here](https://ostechnix.com/setup-mysql-with-docker-in-linux).