teleren/devto huggingface dataset:
Create a dynamic grid/layout using CSS variables.
Tags: html, css, grid
Published: 2021-08-18 15:04:37

You can create a layout in many ways. Using **Grid** Or **Flex** to create a layout is more advanced and customizable.

If your layout is dynamic and complex then you can use this approach to design your layout instead of creating the custom classes.

Traditional approach:
Let's assume that you want to create a layout like a cover image. 
For that you have to create a custom class like this:

**HTML**
```html
<div class="custom-grid-1"></div>
<div class="custom-grid-2"></div>
```

**CSS**
```css
.custom-grid-1 {
   display: grid;
   grid-template-columns: 1fr 1fr 2fr;
   grid-template-rows: auto;
}
.custom-grid-2 {
   display: grid;
   grid-template-columns: 3fr, 1fr;
   grid-template-rows: auto;
}
```

Now, instead of creating multiple classes for the layout, we will create a single grid class that will have a dynamic CSS variables to set the fractional unit(fr) and other properties.

In HTML, we will set the variable values in the style attribute.

**HTML**
```html
<div class="grid" style="--col: 1fr 1fr 2fr; --row: auto;"></div>
<div class="grid" style="--col: 3fr 1fr; --row:auto;"></div>
```

Then we will create a .grid class in CSS.

**CSS**
```css
.grid {
  display: grid;
  grid-template-columns: var(--col);
  grid-template-rows: var(--row);
}
```
By using this approach you can create any dynamic & complex grid/layout without creating a multiple classes.

Same way you can assign any properties in the grid class using CSS variables.

Share your thoughts in comment section.
Vite Update: PWA Documentation for VITE Started Rolling
Tags: vue, webdev, react, svelte
Published: 2021-08-18 14:45:51

Vite is actually becoming popular because of how fast it is when it comes to development server, not only that but it also optimizes your web application.

According to Wikipedia progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. Not only that, it caches your app so that it can work even if your offline and it has more features.

Enough of that, in this article I just want to introduce the new documentation for PWA in Vite. This way you can integrate PWA in your websites and make it even faster.

For now, the documentation is in development but you can still go ahead and check it out and start learning it instead.

This is the initial documentation for VITE. 
👉👉 https://vite-plugin-pwa.netlify.app/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhd4tyd1j6vgwm59i0jd.png)
 
You can check the docs progress here: https://github.com/antfu/vite-plugin-pwa/issues/88#issuecomment-901082076

The docs started by [userquin](https://github.com/userquin)

It contains How to get started and setting up your vite project using pwa. This includes different frameworks like ReactJs, Svelte, Vue, and others.

It also has information on how to deploy in Netlify, AWS, Vercel, NGINX, and Apache Server.

It also has information about workbox, on how to injectManifest, and many more.
live data acquisition device (LDAD) for estimating concrete maturity 
Tags: arduino, iot, ldad, transferlearning
Published: 2021-08-18 14:57:27

Is finally here, the #PCB i ordered for the #concrete #maturity sensor project.
With it. The final version of the #prototype is ready to deploy!

#openSource #openData #IoT

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6906oc7eehg9rag9iw7.jpg)
CryptoWallet HELP
Published: 2021-08-18 14:56:14

Hi there!
I need your help and appreciate any advices.
I'm discovering a flow of creating a non-custodial mobile wallet. It should include ADA coins, XPR coins, DOGE coins. And as I understood it requires special libraries, applicable for IOS and Android. So, if anyone can share a source where to find these libraries, documentation or any other stuff, I'll be very grateful!
Goals to be achieved during Kodecamp Internship 
Published: 2021-08-18 14:51:33

### Kodecamp
Kodecamp was established in 2018 to provide affordable digital solution to school's (K-12) all operations and academic processes to improve the efficiency and transparency in the system.
 [Visit Kodecamp to register](https://kodecamp.github.io/) 


#### My stack during the internship is Front-end Development.

## What is goal?
A goal is an idea of the future or desired result that a person or a group of people envision, plan and commit to achieve. People endeavor to reach goals within a finite time by setting deadlines.               [wikipeadia](https://en.wikipedia.org/wiki/Goal).

### Below are my goals for this internship and what I want to achieve at the end of 16 weeks.
- Building relationships with people who can serve as advisers or mentors.
- Expanding the network to include other like-minded interns.
- Gaining more knowledge and adding to my skills.
- Working with team.
- Building and working on real life projects.
- Helping others and become a better developer.
Why is a business expense tracker important for small business?
Published: 2021-08-18 14:50:02

Business expenses happen every day. If you have no idea how much you spend each day, you may run out of cash. You can also miss out on significant tax deductions when it comes to filing taxes. Thus, <a href="https://www.billdu.com/blog/business-expense-tracking-101/">business expense tracking</a> is really important.

You need to invest in a good business expense tracker. When you choose software to handle cost management, you take the burden off your employees. This frees them up to do other wonderful things. This is why an expense tracker is so important for a small business.

The purpose of the tracker is to give you an accurate report of your expenses and income. They often have features that allow you to connect to a credit card so that you can import transactions automatically.

The best way to use business expense trackers is on a mobile. This feature is especially useful when your employees are shopping on the go and the accounting can happen seamlessly with a mobile device.

<a href="https://www.zenbusiness.com/blog/manage-costs/">Managing expenses</a> is a difficult task, especially when you only have a few employees. In fact, there are many challenges in keeping track of costs when you own and run a small business.

While it is acceptable to make mistakes in life, it can cost a lot in accounting. Unfortunately, errors still occur. Your employee may press the wrong key when entering the shoping amount. Your accountant may misclassify your business expenses or choose the wrong date. There are many things that can go wrong when small businesses manually track costs.

Whether you work with paper or digital receipts, it can be difficult to keep track of them throughout the year. Paper receipts are often thrown into a folder and forgotten. Worse yet, your employees can accidentally dispose of them.

Digital receipts are not completely secure, either. When you have multiple company email accounts, losing digital receipts can be just as easy.

When choosing a tracker for your business expenses, you should consider your budget. Tracking apps have different prices. You can expect to spend anywhere from a few dollars to several hundred dollars a month. However, there are many free options to consider.

The more you pay for the expense tracking app, the more features it will typically offer. The most expensive does not always mean the best, so keep that in mind.

You do not need to spend a lot to track business expenses. Many free options work well for solo entrepreneurs. If you work independently or as a sole proprietorship, a free option may be a better option.

A free tracking app is also suitable for low-cost businesses. If you only make a few purchases per month, you can enjoy a free app with limited document scanning, business expense report, integration with your favorite cloud storage, integration with accounting software, download and share documents, etc among other features.
I write about...
Tags: python, blog, writing, about
Published: 2021-08-18 14:49:05

I like to write about and discuss Python implementations, designs, strategies, patterns, and alike. I don't intend to compose tutorials nor explain the basic concepts. Instead, I want to engage with you in fruitful discussions and explore more advanced topics. I currently have two post series here at DEV.to:

1. ["quick-reads"](https://dev.to/joaomcteixeira/series/14163)  
2. ["long-reads"](https://dev.to/joaomcteixeira/series/14162)

In the first series, I comment on Pythonic tips, tricks, or behaviours I encounter in daily projects. I dedicate the second series to long, highly contextualized discussions and conceptualizations on specific topics - most likely software architecture. I don't write in any defined order; I post as things come to mind.

I used to post on another blog - [Pythonic Thoughts Snippets](https://pythonicthoughtssnippets.github.io/) -, but I am migrating my programming writing activity entirely here to DEV.to.
🦋Top 10 Trending Flutter Packages in 2021
Tags: ios, android, flutter, programming
Published: 2021-08-18 14:20:41


Photo by [Onur Binay](https://unsplash.com/photos/d5_r6vWrkHU?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink) on unsplash

>Expand your programming knowledge in a nutshell

To design beautiful native apps Google introduced the Flutter UI in 2017. This Cross-Plattform UI Kit can be used to build web, Android, iOS, or desktop apps from a single codebase.

Flutter is written in C++ but uses the Dart Language for programming. It has a growing community and nice support from Google itself including YouTube Videos about reusable widgets.

With the website pub.dev, the Flutter team makes it possible to publish and share reusable packages to program Dart and Flutter apps.

This article lists one of the most liked and popular packages to demonstrate the huge possibilities of the flutter framework.

### [Continue Reading](https://link.medium.com/jYGmdRW8Oib)

---

[Buy me a sushi roll](https://www.buymeacoffee.com/lucianojung) if you like to support this kind of content.
Laravel 9: install and start building an app
Tags: webdev, laravel, php, news
Published: 2021-08-18 14:14:29

With the different features of Laravel, it is the most favorite framework amongst developers and companies using the PHP programming language. This adoption is due to the elegancy and scalability nature of the framework.
***
With the Laravel 9 release, the Laravel team switches from the traditional 6-month release cycle to a 12-month release cycle using the Semantic [Versioning(Semver)] (https://semver.org/) approach.
The initial schedule of the Laravel 9 release was supposed to be September 2021, following the traditional approach. Still, the release date changed to January 2022 as stated by the creator and with a few valid reasons, as noted below.
In this article, will also detail how to update or upgrade to Laravel 9 and install and start building an app with the new Laravel 9.

### Minimum PHP Requirement
Laravel 9 requires the newest version of PHP 8, PHPUnit 9, and a few other requirements specified in the future.
The PHP 8 requirement is because Laravel 9 is solely dependant on Symfony’s latest v6.0 release, which depends on PHP 8.
You can explore what is new in PHP 8 and the different PHP versions benchmarks to grasp the improvements and features of PHP 8 from Just-In-Time compiler (JIT) to constructor property promotion.

### How to install Laravel 9
If you’re like us, we love to explore the newest technologies before being open to the public. You can start playing with the upcoming Laravel v9 for development and testing purposes. You can easily install and run it on your local machine following the guide below.
In addition, Laravel 9 supports PHP version 8. Make sure to check and upgrade your PHP version to use Laravel 9 before next January 2022.
To install Laravel 9, the first method is the Laravel global CLI which creates a new Laravel project from the branch specified. In this case, we will choose to create the new Laravel project from the dev branch.
Run the following command below in your directory to create a new Laravel 9 project. Make sure to have Laravel CLI installed globally.
```bash
$ laravel new laravel-9-todo-app --dev
```

Next, to install Laravel 9 using composer, run the following command to install Laravel v9:
```bash
& composer create-project --prefer-dist laravel/laravel laravel-9-todo-app dev-develop
```

The composer command will create a new Laravel project with project name as `laravel-9-todo-app`, using the `dev-develop` will result in the latest Laravel 9.

Now that we have Laravel 9 installed, you can navigate to the new `laravel-9-todo-app` directory and run the following artisan command to check the version:

```bash
& cd laravel-9-dev 
& php artisan --version 
// Laravel Framework 9.x-dev
```

### Conclusion
It also explored how to update or upgrade to Laravel 9 and install and start building an app with the new Laravel 9.

* * *
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/saymontavares), [LinkedIn](https://www.linkedin.com/in/saymon-tavares/) and [DEV](https://dev.to/saymontavares) for more!
Leading a Community
Published: 2021-08-18 14:09:00

I look at this person and am honestly so proud of who she has become. Today marks exactly 1 year since I started leading **Google Developer Student Clubs Rongo University**. Back then I was too afraid to talk to people(imposter syndrome is real) because I did not feel skilled enough. I have had an amazing time getting to meet new people, hosting events, interacting with speakers and overall being part of the community.

My main win from leading this community is that I landed a role as a **Developer Advocate**. I am currently leading Lux Tech Academy Campus Chapters. This opportunity actually was as a result of interacting with a fellow lead who is doing great things in technology. I also got featured in an international coding series.

There have been highs and lows but all in all the journey has been one to remember. From introducing new members in the club to seeing them develop the most awesome projects. The lows have been some people giving up along the way, speakers cancelling meetups and much more but I have also seen people rise to their best selves during my tenure.

My advice to the incoming leads is, there is no formula for leading so just step in there and be awesome. Be very careful when choosing your core team because these people will be your support system throughout your tenure. Do not include your friends in the core team and do not rely on their support; they will always disappoint you.

My special shout out goes to **Muhammud Samu(Auwal)** for his unending support and encouragement throughout my tenure. My special thanks also goes to our new GDSC lead **Derrickson Ndambuki**. This guy never missed an event and was always there to help. Shout out to you **Harun Mwendwa** for believing in me. I look forward to working with you more.

I look forward to what this community will achieve in the future. Cheers to more wins and to making the world a better place through technology and collaborations.
Criando projeto com TypeScrit
Tags: node, typescript, express
Published: 2021-08-18 13:54:14

Para começar, vamos falar um pouquinho sobre TypeScript. O TypeScript é uma linguagem open-source da Microsoft, que traz um conjunto de muitas melhorias do JavaScript, ambas podem trabalhar juntas trazendo benefícios durante o desenvolvimento como tipagem(estática) de parâmetros, impedindo que sofram alteração no tipo do seu valor ao longo do desenvolvimento.
[Documentação do TypeScript](https://www.typescriptlang.org/docs/)

Agora sim vamos começar a criação do projeto seguindo um passo a passo bem simples.
> Caso você já tenha criado e só falta essa parte do TypeScript, pula pra parte 4 ou 5 — dependendo da sua situação e manda bala que vai dar certo.

Escolha o local onde vai ficar sua API e crie uma pasta, feito isso, acesse a pasta pelo seu terminal e execute o comando abaixo:
**1-** `yarn init -y` ⇒ Vai criar o arquivo packege.json
**2-** `yarn add express` ⇒ Serve para criarmos nossas rotas
**3-** `yarn add @types/express -D` ⇒ Evitando casualidade na hora de acessar diferentes tipos de rota, instalando todos os tipos do Express
**4-** `yarn add typescript -D` ⇒ Adiciona TypeScript como dependência de projeto.
**5-** `yarn tsc --init` ⇒ Cria o arquivo tsconfig.json
**6-** `yarn add ts-node-dev -D` ⇒ Responsável pelo funcionamento e conversão do arquivo TS. Depois de executar o comando, precisamos adicionar um script dentro de packege.json como no exemplo abaixo:
```
//Pode ficar entre license
"scripts": {
    "dev": "ts-node-dev src/server.ts"
},
//e dependencies
```
>Existem outras flags que podem ser adicionadas no script dev, que auxiliam em diferentes níveis no desenvolvimento da aplicação.

> _Flag é um parâmetro no comando que tem -- antes._

>Vou deixar abaixo como utilizo no meu aprendizado e uma descrição de cada uma delas.

```
"scripts": {
    "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules --respawn src/server.ts"
},
```

##Descrição das Flags
* `ts-node-dev` ou `tsnd` ⇒ Como já falamos, é para o funcionamento da aplicação e conversão dos arquivos TS.
* `--inspect` ⇒ Habilita a utilização do debug dentro da aplicação, e para configurar essa parte tem um outro post que fala sobre isso.
* `--transpile-only` ⇒ Desabilita a verificação de erros na aplicação, afinal de contas, o próprio VS Code e o ESLint já fazem isso.
* `--ignore-watch node_modules` ⇒ Não observa alterações dentro da pasta node_modules. Então acaba ajudando a diminuir a lentidão no restart da aplicação.
* `--respawn` ⇒ Da um reload na aplicação quando houver alterações no código.

>Outra observação, agora com relação a forma como eu estudo. É sobre desabilitar uma linha dentro de tsconfig.json que verifica alguns erros dentro da aplicação como declaração de variável. Pra isso basta procurar por "strict": "true" e comentar a linha.

—————————————————
###📌Para dúvidas ou sugestões:
Deixe seu comentário ou entre em contato.
How to use the dev.to API!
Tags: beginners, webdev, php, tutorial
Published: 2021-08-18 13:52:47

## Why?
I use dev.to as my main dev blogging area now, but I want to show-off my blogs on my portfolio! So we're going to create a simple list of the latest 3 blog articles which link back to the dev.to site. For this tutorial I'll be showing how this can be achieved in PHP.
## Let's go!
We're going to be using this endpoint: https://dev.to/api/articles?username=saymontavares which generates a JSON object with the author's latest 30 articles. To get your personal endpoint, change the nataliedeweerd username to your own.

So how do we get this data into our website? In PHP we can use something called cURL. cURL (client URL) is a PHP library which allows you to make HTTP requests. So you can call a URL in your code and get a HTML response from it.

The below code shows a basic curl function which gets us our data:
```php
$curl = curl_init();
$username = "saymontavares";
$url = "https://dev.to/api/articles?username={$username}";

curl_setopt_array($curl, [
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => [
        "cache-control: no-cache"
    ]
]);

$res = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);
```
OR
```php
$username = "saymontavares";
$url = "https://dev.to/api/articles?username={$username}";
$res = file_get_contents($url);
$res = json_decode($res, true);
```
*@chrisshennan thanks!*

We need to decode this data before we can effectively use it however.
```php
$res = json_decode($res, true);
```
This decodes the json object into a much more usable array! All we need to do now is loop through the array, and print out the results.
```php
foreach ($res as $article) {
    echo    "<a href='{$article['url']}' class='article'>
                <h2>{$article['title']}</h2>
                <div class='description'>{$article['description']}</div>
                <div class='readmore'>Read More</div>
            </a>";
}
```
And that's it! We just need to apply a bit of CSS and our dev.to articles are printing out wherever we want!
* * *
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/saymontavares), [LinkedIn](https://www.linkedin.com/in/saymon-tavares/) and [DEV](https://dev.to/saymontavares) for more!
Node.JS DevOps: Simplify Your Life with GitHub Actions
Tags: node, npm, github, devops
Published: 2021-08-18 13:51:31

n this article, I will share with you the configuration that I have adopted for deploying [MESS (MongoDB Event Sourcing System)](https://github.com/zeppaman/mongo-event-sourcing), my first **Node.js** opensource project. The configuration is a single YAML file that unlocks infinite powers to your GitHub repository.
What I realized here is a simple configuration that satisfies all the basic needs of a nowadays enterprise application:

- automatically version code 
- run test on every release 
- publish artefact to **NPMJS** (in case you have a library or you are delivering through NPM)
- publish your docker container ready to go to a container repository

All these features may seem hard to be reached, but you will discover that will come more or less out of the box using 
**GitHub** actions.
[Read the full article and learn how :)](https://towardsdatascience.com/node-js-devops-github-actions-2a1b2be1741f?sk=cc0e3c8069e2447c975f639ae6e099a6)