teleren/devto huggingface dataset:
Wonderful designed french sites
Tags: javascript, css, design, ux
Published: 2022-06-11 08:18:22

Yesterday I would like to go to Galerie Dior in Paris. Unfortunately, there are no places for the next 3 days, but I have seen the site and it is wonderful. That gives me an idea to show you some well-designed sites.

1) La Galerie Dior
This site is written with React.js, for CSS emotion.css was used and for animation GSAP and backend use Node.js
It's about Dior, and all its history, and also gives the possibility to reserve tickets for exposition. 
[La Galerie Dior](https://www.galeriedior.com/)

![La galeire Dior](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs4ygjzsnsf044mo3ndt.png)

2) Vivre avec schizophrénie 
This site was created for the 17th Day of schizophrenia at mars 2020. It explains what is schizophrenia, how people with this disease live, and where they can look for help.
It is written with Nuxt.js so with Vue and Node and for animations, GSAP is used. 

[schizinfo](https://schizinfo.com/connexion/)


![schizinfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a38pbsdwjz777hsn8fq4.png)

3) Leroy Merlin
In France Leroy Merlin it's one of the biggest DIY store. Here You can find all from the screwdriver to the next balcony plant. Last year they have deployed a site with different projects that you can realize with their products. 
It's written with Nuxt.js, Node.js and libraries GSAP, three.js.

[Leroy Merlin](https://www.leroymerlin.fr/big2/guides-2021/experience-inspiration.html)


![Leroy Merlin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjsqjikgwqhp0klsskvi.png)

4) Zero Impact
This is a home compostable coffee capsule compatible with Nespresso. What can I say more about it? You have to see it: 

[Zero impact](https://www.capsul-in-pro.com/home-compost-capsule/)


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

5) Un Printemps Suspendu
Last but not least wonderful site about an adventure of two extreme skiers in Alpes. It's a gorgeous experience for them but also for our eyes. 
This site is written with Nuxt, GSAP, and Node. 
Treat yourself

[A spring vertical](https://unprintempssuspendu.lequipe.fr/)


![A spring vertical](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpzfyl5hule7gvrfidmy.png)

It is only five of many other sites. Maby it will inspire you to create your little perles like this.  

Have a nice weekend
Longest Happy String
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 08:00:45

A string `s` is called **happy** if it satisfies the following conditions:

*   `s` only contains the letters `'a'`, `'b'`, and `'c'`.
*   `s` does not contain any of `"aaa"`, `"bbb"`, or `"ccc"` as a substring.
*   `s` contains **at most** `a` occurrences of the letter `'a'`.
*   `s` contains **at most** `b` occurrences of the letter `'b'`.
*   `s` contains **at most** `c` occurrences of the letter `'c'`.

Given three integers `a`, `b`, and `c`, return _the **longest possible happy** string_. If there are multiple longest happy strings, return _any of them_. If there is no such string, return _the empty string_ `""`.

A **substring** is a contiguous sequence of characters within a string.

**Example 1:**

**Input:** a = 1, b = 1, c = 7
**Output:** "ccaccbcc"
**Explanation:** "ccbccacc" would also be a correct answer.

**Example 2:**

**Input:** a = 7, b = 1, c = 0
**Output:** "aabaa"
**Explanation:** It is the only correct answer in this case.

**Constraints:**

*   `0 <= a, b, c <= 100`
*   `a + b + c > 0`

**SOLUTION:**

    import heapq
    
    class Solution:
        def longestDiverseString(self, a: int, b: int, c: int) -> str:
            op = ""
            heap = []
            for ctr, c in [(a, 'a'), (b, 'b'), (c, 'c')]:
                if ctr > 0:
                    heapq.heappush(heap, (-ctr, c))
            while len(heap) > 0:
                currn, currc = heapq.heappop(heap)
                if len(op) < 2 or op[-2:] not in {'aa', 'bb', 'cc'} or op[-1] != currc:
                    op += currc
                    if currn + 1 < 0:
                        heapq.heappush(heap, (currn + 1, currc))
                else:
                    if len(heap) == 0:
                        break
                    nextn, nextc = heapq.heappop(heap)
                    op += nextc
                    heapq.heappush(heap, (currn, currc))
                    if nextn + 1 < 0:
                        heapq.heappush(heap, (nextn + 1, nextc))
            return op
What are some advantages of using semantic HTML?
Tags: html, webdev
Published: 2022-06-11 07:57:01

There are several benefits of using Semantic HTML:

1. It brings about structure and clarity in the code.

2. Well-constructed and clearly interpretable markup helps with Search Engine Optimization (SEO). Search Engines are able to parse and find headings, paragraph texts and key words from a document much more easily if semantic HTML is used. So, semantic HTML increases SEO scores of a HTML document.

3. Semantically strutured HTML document favors accessiblity of a website using screenreaders. The site can be navigated better with semantic HTML by visually impaired people.

4. Semantic HTML is developer friendly, as it helps with both writing and reading the code.

5. It helps avoid writing unnecessary markup that may increase the size of an HTML document.

---
References

1. [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
2. [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
Aiotense - Time Processing Tool
Tags: python, showdev, tooling, programming
Published: 2022-06-11 07:39:01

**aiotense** - python time parsing tool.

GitHub - https://github.com/Animatea/aiotense

Documentation - https://animatea.github.io/aiotense/

**aiotense** is a tool that converts a string like "1day1minute 20seconds" into number of seconds or timedelta objects.

```py
import asyncio 
from aiotense import TenseParser  

time_string = "1d2minutes 5 sec"
  
# <-- Digit parser --> 
digit_parser = TenseParser(TenseParser.DIGIT) 
digit_value = asyncio.run(digit_parser.parse(time_string)) 
# <-- Assertions --> 
assert digit_value == 86525 
```
- If you need case insensitivity, you can use resolvers.

- Custom parsing sequence - custom resolvers.

- Need to convert result to string? You can write your own converter by inheriting `aiotense.application.ports.converters.AbstractConverter`.

- Need to cache the result? Write your own parser by inheriting `aiotense.application.ports.parsers.AbstractParser`.

**aiotense** has been designed with maximum flexibility, practicality and user friendliness in mind. I hope our project helped you or you were just interested in seeing it.
Setup Docker Container for MailHog to use it with Laravel app
Tags: webdev, docker, mailhog, laravel
Published: 2022-06-11 07:25:05

If you have local setup via Homestead or Valet, you might need to use `smtp` setup for emails in your application. For local development, one of the choices is to use [MailHog](https://github.com/mailhog/MailHog).

Setting up [MailHog](https://github.com/mailhog/MailHog) can be in many ways but in this article, we will talk about setting up docker container for it.

Following are the steps:

- Install docker desktop

You can go to this [link](https://www.docker.com/products/docker-desktop) and choose the desired application for your operating system.

- Create a folder called `docker-workspace`

``` 
mkdir docker-workspace
```

- Go to the folder and create a new file `docker-compose.yml`

```
cd docker-workspace
touch docker-compose.yml
```
- Open `docker-compose.yml` file and enter the following content:

```
version: "3.7"
services:

  # SMTP Server
  smtp:
    platform: linux/x86_64
    image: mailhog/mailhog
    container_name: docker-workspace-smtp
    logging:
      driver: 'none'
    ports:
      - "8003:1025"
      - "8100:8025"
    networks:
      - docker_workspace_network

networks:
  docker_workspace_network:
    driver: bridge
```

- Start the docker container via the following command:

```
docker-compose up -d
```

- Go to [http://localhost:8100/](http://localhost:8100/) and confirm the [MailHog](https://github.com/mailhog/MailHog) setup and you should see the following on successful setup

![MailHog app running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab6cpk63dw04l5kvphzr.png)

- In your Laravel application change the `.env` to the following:

```
MAIL_MAILER=smtp
MAIL_HOST=localhost
MAIL_PORT=8003
MAIL_USERNAME=''
MAIL_PASSWORD=''
MAIL_ENCRYPTION=null
```

- Now, sending emails from you app will start showing up in the MailHog


Happy Coding!
🎉 Devbox - A UI for local storage
Tags: showdev, productivity, devtool, chromeextension
Published: 2022-06-11 07:06:50

🎉 Launching my side project 'Devbox' - A chrome extension that shows data from local storage for easy viewing & copy-paste.

While development, there is a need to get fields from local storage (ex., userId, token, etc). This chrome extension helps create entries that read data from storage and show it in a small window at the bottom left corner of the development window.


Features:
- Create an entry by entering a local storage key name, path (if the key’s value is an object) & a label for reference.
- Clicking value copies the content to the clipboard.

Check it out - https://www.producthunt.com/posts/devbox-57e32865-572d-4a14-b068-70f00fe489d4


![Extension preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlkes5pg8nn99kxobdjj.png)


![Extension UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqdmpndeg36d58iqyqlr.png)


A small weekend project 🎉

Hope you find it useful
Thanks 😇

---

Other products
* [Array Builder](https://bit.ly/array-builder) - A work tracker for software developers
* [Fireboard](https://bit.ly/fireboardapp) - A work tracker for software developers
* [File Ops](https://bit.ly/file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
What is Semantic HTML?
Tags: webdev, html
Published: 2022-06-11 07:03:10

**Semantic HTML** is the notion of using properly named HTML tags in an HTML document.

There are over 110 tags available in **HTML5** and around 100 are semantic. Each semantic element serves specific purposes in an HTML document and is named according to the purposes it serves. For example, a `<h1>` heading is intended and named to serve the purpose of a main heading of a document or a section, where applicable. A `<video>` tag is named for and serves the purposes of a video element.

Many of these named elements have specific attributes and methods associated with the functionalities they serve. In other words - their names, attributes and methods accurately describe what they are, do and how they are different from others. For example, a `<video>` tag represents an element which has several different attributes and methods than `<img>` tag. So all HTML elements have a semantic description with respect to what they are and do.

There are cases when a certain HTML tag can be misused or incorrectly used. For eample, a `<nav>` tag properly describes a section that has navigation items, but using a more generic `<div>` tag does not represent precisely what is going on in there. Or using a `<nav>` tag to house the content of a paragraph would be laughable.

Semantic HTML is the idea of using properly named HTML tags for different parts of an HTML document.



---

References
1. [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)

2. [HTML: Good semantics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#good_semantics)

3. [How many HTML tags are there in HTML](https://devpractical.com/how-many-html-tags/)
Largest Number
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 07:00:46

Given a list of non-negative integers `nums`, arrange them such that they form the largest number and return it.

Since the result may be very large, so you need to return a string instead of an integer.

**Example 1:**

**Input:** nums = \[10,2\]
**Output:** "210"

**Example 2:**

**Input:** nums = \[3,30,34,5,9\]
**Output:** "9534330"

**Constraints:**

*   `1 <= nums.length <= 100`
*   `0 <= nums[i] <= 109`

**SOLUTION:**

    from functools import cmp_to_key
    
    class Solution:
        def compare(self, a, b):
            if a + b > b + a:
                return -1
            return 1
        
        def largestNumber(self, nums: List[int]) -> str:
            return str(int("".join(sorted([str(num) for num in nums], key = cmp_to_key(self.compare)))))
Get Started with Prisma and Nextjs with Supabase (Postgress Database)
Tags: nextjs, prisma, supabase, orm
Published: 2022-06-11 06:51:38

Welcome 👋 brothers and sisters to this amazing blog post where you will learn how to get started with Prisma setup in nextjs.

![](https://cdn-images-1.medium.com/max/2000/1*AniieqmtD3gO32SIW5wSRg.gif)

Things which we will need:

 1. Prisma Client

 2. Nextjs Project

 3. [Supabase ](https://supabase.com/)or Any other database

 4. 😁Enjoyment

**Step1: **Make a Nextjs project and open the terminal

**Step2: **Write this command in the terminal

    npm i @prisma/client

Then write this command:

    prisma init

Then you will find a new folder named: ‘**prisma**’ in your root directory.

![](https://cdn-images-1.medium.com/max/3840/1*NHR23j8YAVzkaSJLdWrMTA.jpeg)

Now go to ‘**schema.prisma**’

You can see something like this.
{% gist https://gist.github.com/studywithdesign/6eb9f5a48480c8c0f091c8026bc643be.js %}
Then go to ‘**.env**’ file in your directory.

You have to paste your database URI there

So, let’s go to supabase to find the URI:

![](https://cdn-images-1.medium.com/max/3840/1*Zhqv7TgvgbltXpkacj2A9g.jpeg)

Just paste it into your **.env** file

![](https://cdn-images-1.medium.com/max/3840/1*ikazLrx5-nqhyfv9k1jZ2A.jpeg)

Now you can enjoy it. You have set up all the things.

### 🤔Situation

Now you have two situations. **Either you have tables or you don’t have any tables inside your database.**

### 1. If you have tables in your database.

Just write the command

    prisma db pull

Then check out the **‘schema.prisma’** file

### 2. You don’t have any tables in your database.

For example, you can write this command in your ‘**schema.prisma**’ to make tables.

![](https://cdn-images-1.medium.com/max/3840/1*QjAKAXssHs-Hcx3DY5355A.jpeg)

Code:
{% gist https://gist.github.com/studywithdesign/19b92b84b1db47743c7a008ad5e897d3.js %}
Now, you have to write the command

    prisma migrate dev
>  Then it will ask you for your migration name.
>  You can write there anything you want.

Then you will see one folder as **Migrations **in your **prisma **directory.

You can check your database and see the results.

![](https://cdn-images-1.medium.com/max/3840/1*mw1z0MpDEOXqBBU4ppphgA.jpeg)

Thanks for reading this blog post.

For people who Hindi:
[https://youtu.be/pnai0oGVN9g](https://youtu.be/pnai0oGVN9g)

For people who want to join discord:
[**Join the Next Dev's server Discord Server!**](https://discord.gg/hN4Wc5VR4M)
This week’s newsletter is out! (11-06-2022) - Due diligence
Tags: javascript, tech, webdev, discuss
Published: 2022-06-11 06:35:06

---
title: This week’s newsletter is out! (11-06-2022) - Due diligence
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Due diligence

https://markjgsmith.substack.com/p/mark-smiths-newsletter-11-06-2022?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Reverse Only Letters
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 06:30:41

Given a string `s`, reverse the string according to the following rules:

*   All the characters that are not English letters remain in the same position.
*   All the English letters (lowercase or uppercase) should be reversed.

Return `s` _after reversing it_.

**Example 1:**

**Input:** s = "ab-cd"
**Output:** "dc-ba"

**Example 2:**

**Input:** s = "a-bC-dEf-ghIj"
**Output:** "j-Ih-gfE-dCba"

**Example 3:**

**Input:** s = "Test1ng-Leet=code-Q!"
**Output:** "Qedo1ct-eeLg=ntse-T!"

**Constraints:**

*   `1 <= s.length <= 100`
*   `s` consists of characters with ASCII values in the range `[33, 122]`.
*   `s` does not contain `'\"'` or `'\\'`.

**SOLUTION:**

    class Solution:
        def reverseOnlyLetters(self, s: str) -> str:
            s = list(s)
            n = len(s)
            stack = []
            for i in range(n):
                if s[i].islower() or s[i].isupper():
                    stack.append(s[i])
                    s[i] = -1
            for i in range(n):
                if s[i] == -1:
                    s[i] = stack.pop()
            return "".join(s)
I updated my portfolio site!
Tags: javascript, vue, portfolio, beginners
Published: 2022-06-11 06:27:00

With the help of a good template, I decided to finally give my old portfolio website a new look :D 

It has Vue.js for some API calls (to populate with blog posts from here) and neatly organized info about me and my skills. I am pretty proud of the result!

https://radocode.github.io/
VMWare Solution for New Digital Workspace
Tags: digitalworkspace, remotework, dell, vmwarecloud
Published: 2022-06-11 06:25:54

https://www.linkedin.com/posts/mahmoudrabie2004_didabryouabrknowabrthat-vmware-remotework-activity-6941273907584757760-mS3Z?utm_source=linkedin_share&utm_medium=member_desktop_web

The 𝙬𝙖𝙡𝙡𝙨 𝙤𝙛 𝙩𝙝𝙚 𝙤𝙛𝙛𝙞𝙘𝙚 𝙝𝙖𝙫𝙚 𝙘𝙤𝙢𝙚 𝙙𝙤𝙬𝙣 and the 𝙣𝙚𝙬 𝙙𝙞𝙜𝙞𝙩𝙖𝙡 𝙬𝙤𝙧𝙠𝙥𝙡𝙖𝙘𝙚𝙨 are:
(1) 📦 𝙬𝙞𝙩𝙝𝙤𝙪𝙩 𝙗𝙤𝙪𝙣𝙙𝙖𝙧𝙞𝙚𝙨, 
(2) 🌐 𝙨𝙥𝙖𝙣𝙣𝙞𝙣𝙜 𝙖𝙘𝙧𝙤𝙨𝙨 𝙜𝙚𝙤𝙜𝙧𝙖𝙥𝙝𝙞𝙚𝙨. 

The 𝙜𝙡𝙤𝙗𝙖𝙡 𝙝𝙚𝙖𝙡𝙩𝙝 𝙨𝙘𝙚𝙣𝙖𝙧𝙞𝙤 has turned 𝙧𝙚𝙢𝙤𝙩𝙚 𝙬𝙤𝙧𝙠, once a selective privilege, into a 𝙢𝙖𝙞𝙣𝙨𝙩𝙧𝙚𝙖𝙢 phenomenon. 

Those 𝙘𝙤𝙢𝙥𝙖𝙣𝙞𝙚𝙨 𝙬𝙞𝙡𝙡 𝙨𝙩𝙖𝙮 𝙖𝙝𝙚𝙖𝙙 of the curve provide a dynamic 𝙙𝙞𝙜𝙞𝙩𝙖𝙡 𝙬𝙤𝙧𝙠𝙨𝙥𝙖𝙘𝙚 𝙛𝙤𝙧 𝙖𝙡𝙡 𝙚𝙢𝙥𝙡𝙤𝙮𝙚𝙚𝙨 regardless of their location while maintaining 𝙙𝙖𝙩𝙖 𝙨𝙚𝙘𝙪𝙧𝙞𝙩𝙮 𝙖𝙣𝙙 𝙘𝙤𝙢𝙥𝙡𝙞𝙖𝙣𝙘𝙚. 

Businesses have been investing in digital workspace technologies to ensure a 𝙨𝙚𝙖𝙢𝙡𝙚𝙨𝙨 𝙧𝙚𝙢𝙤𝙩𝙚 𝙖𝙘𝙘𝙚𝙨𝙨 𝙚𝙭𝙥𝙚𝙧𝙞𝙚𝙣𝙘𝙚 for their employees while they continue to embark on their 𝙘𝙡𝙤𝙪𝙙 𝙖𝙘𝙘𝙚𝙡𝙚𝙧𝙖𝙩𝙞𝙤𝙣 𝙟𝙤𝙪𝙧𝙣𝙚𝙮.

VMware Horizon 𝙫𝙞𝙧𝙩𝙪𝙖𝙡 𝙙𝙚𝙨𝙠𝙩𝙤𝙥 𝙖𝙣𝙙 𝙖𝙥𝙥𝙨 solution is a 𝙩𝙧𝙪𝙨𝙩𝙚𝙙 𝙙𝙞𝙜𝙞𝙩𝙖𝙡 𝙬𝙤𝙧𝙠𝙨𝙥𝙖𝙘𝙚 𝙨𝙤𝙡𝙪𝙩𝙞𝙤𝙣 that empowers employees and drives collaboration 𝙛𝙧𝙤𝙢 𝙖𝙣𝙮𝙬𝙝𝙚𝙧𝙚 𝙖𝙣𝙙 𝙤𝙣 𝙖𝙣𝙮 𝙙𝙚𝙫𝙞𝙘𝙚. 

The Horizon VDI solution on VMware Cloud on Dell combines the market-proven remote-work solution 𝙬𝙞𝙩𝙝 𝙩𝙝𝙚 𝙛𝙪𝙡𝙡𝙮 𝙢𝙖𝙣𝙖𝙜𝙚𝙙 𝙤𝙣-𝙥𝙧𝙚𝙢𝙞𝙨𝙚𝙨 𝙄𝙣𝙛𝙧𝙖𝙨𝙩𝙧𝙪𝙘𝙩𝙪𝙧𝙚-𝙖𝙨-𝙖-𝙎𝙚𝙧𝙫𝙞𝙘𝙚 offering.

The 𝙠𝙚𝙮 𝙗𝙚𝙣𝙚𝙛𝙞𝙩𝙨 that customers enjoy in their journey of modernizing workspaces with 𝙑𝙈𝙬𝙖𝙧𝙚 𝙃𝙤𝙧𝙞𝙯𝙤𝙣 𝙤𝙣 𝙑𝙈𝙬𝙖𝙧𝙚 𝘾𝙡𝙤𝙪𝙙 𝙤𝙣 𝘿𝙚𝙡𝙡:
(1) 👤 Delightful 𝙀𝙢𝙥𝙡𝙤𝙮𝙚𝙚 𝙀𝙭𝙥𝙚𝙧𝙞𝙚𝙣𝙘𝙚
(2) 🎛️ Simplified 𝙖𝙙𝙢𝙞𝙣𝙞𝙨𝙩𝙧𝙖𝙩𝙞𝙤𝙣
(3) 🪪 License 𝙘𝙤𝙢𝙥𝙡𝙞𝙖𝙣𝙘𝙚
(4) ⏫ 𝙎𝙘𝙖𝙡𝙚 𝙤𝙣 𝙙𝙚𝙢𝙖𝙣𝙙

Thanks to Dinesh Singh for his blog post:
𝙍𝙚𝙙𝙚𝙛𝙞𝙣𝙚 𝘿𝙞𝙜𝙞𝙩𝙖𝙡 𝙒𝙤𝙧𝙠𝙨𝙥𝙖𝙘𝙚 𝙬𝙞𝙩𝙝 𝙑𝙈𝙬𝙖𝙧𝙚 𝙃𝙤𝙧𝙞𝙯𝙤𝙣 𝙤𝙣 𝙑𝙈𝙬𝙖𝙧𝙚 𝘾𝙡𝙤𝙪𝙙 𝙤𝙣 𝘿𝙚𝙡𝙡
https://blogs.vmware.com/cloud/2022/06/07/redefine-digital-workspace-with-vmware-horizon-on-vmware-cloud-on-dell/

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://www.linkedin.com/feed/hashtag/?keywords=did_you_know_that

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwldi2gqihb58j68ym13.jpeg)
Create app with Flet on python
Tags: python, flet, tutorial, flutter
Published: 2022-06-11 06:24:11

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

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.

Flet UI is built with Flutter, so your app looks professional and can be delivered to any platform. Flet simplifies Flutter model by combining smaller "widgets" into ready-to-use "controls" with imperative programming model.

# To run the app install flet module:

```
pip install flet
```

# Flet app example
- create file app.py
```
import flet
from flet import IconButton, Page, Row, TextField, icons

def main(page: Page):
    page.title = "Flet counter example"
    page.vertical_alignment = "center"

    txt_number = TextField(value="0", text_align="right", width=100)

    def minus_click(e):
        txt_number.value = int(txt_number.value) - 1
        page.update()

    def plus_click(e):
        txt_number.value = int(txt_number.value) + 1
        page.update()

    page.add(
        Row(
            [
                IconButton(icons.REMOVE, on_click=minus_click),
                txt_number,
                IconButton(icons.ADD, on_click=plus_click),
            ],
            alignment="center",
        )
    )

flet.app(target=main)
```
# and run the program:
```
python app.py
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiwafqyrmwzfr72tyybe.png)
 
# Now, if you want to run the app as a web app, just replace the 
last line with:
```
flet.app(target=main, view=flet.WEB_BROWSER)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkkuo3pt6yvcqnoyjloi.png)

[Creating Flet apps in Python](https://flet.dev/docs/getting-started/python/)


[Source](https://github.com/flet-dev/flet)

[Flet Document](https://flet.dev/docs/)
Understanding for loop in Python
Tags: beginners, python, tutorial, programming
Published: 2022-06-11 06:20:23

The for..loop is also a type of iteration or iterating sequence, which repeats a certain block of code at certain times until a certain condition is reached.
The loop can be used to iterate over a fixed number of times 
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy487holdw3b7xqoitfb.png)
Output:

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

For number in range(9)
Where 9 is the number of times from 0 to 9
In the range function, you can specify the starting point and the ending point of the loop, as well as the number of steps to jump that, is range(start, stop, skip)
See the three different codes and what is displayed by them.
Code:

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

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

The for loop unlike the while loop can be used to iterate over lists 
This is done by the following blocks of code
Following the structure
For (the name assigned to all values in the list) in (name of the list):
Then certain operations can be performed
Play around with the code and see what you can come up with.
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7iisrntitz4za4655pw.png)
Output:

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


Here's an example of the same code I wrote with while loop last week wrote with for loop
Code:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39ucn6udc6nou39vxl9n.png)
The difference between the for loop and the while loop in python is the application
The while loop can be used to run conditions a certain number of times even when the number of times is unknown.

The for loop can only be used to iterate over a fixed number of times provided I'm the range()

The while loop cannot be used to iterate over a list 
The for loop is used to iterate over the list 

I generally use the while loop for an  unknown number of times which can be input by the user when the code run over for the  loop 
I use For loop when dealing with lists 

Hope you enjoyed this short lesson 
From the  next lesson, we'll start using our current knowledge to solve some programming problems,
Read, like, share, and  have a wonderful day