teleren/devto huggingface dataset:
This week in Flutter #15
Tags: dart, flutter, news
Published: 2021-08-07 12:44:34

Microsoft is [pushing development](<https://devblogs.microsoft.com/surface-duo/dual-screen-developer-tools-recap/>) for the Surface Duo. They [published a package](<https://pub.dev/packages/dual_screen>) for **dual-screen apps**. Personally, I do not see this kind of device becoming popular. also did not see taking pictures using a tablet becoming popular, but they keep adding cameras on the back of entry-level tablets, so my opinion does not count much 😅.

In a small team, you need to make some **compromises** when you decide what to work on from the **backlog**, and if you have to choose between supporting dual-screens and, well, anything else, you often choose the latter. At least until Apple announces a dual screen tablet.

<small>- Michele Volpato</small>

## 🧑‍💻 Development

### [Flutter counter app, but using isolates](<https://dev.to/hrishiksh/flutter-counter-app-but-using-isolates-4e5j>)

In Flutter, you can use \*Isolates\* to run code in **parallel**. If you need to perform some laborious task in the background, like searching inside a big zip file, then you can defer the computation to a separate thread by **spawning** an `Isolate`. In this short and simple article, [Hrishikesh Pathak](<https://github.com/hrishiksh>) recreates the counter app using `Isolate`s.

---

### [Side Effects in Flutter: What they are and how to avoid them](<https://codewithandrea.com/articles/side-effects-flutter/>)

When you start with Flutter, you often end up adding a lot of code in the `build` method. For instance, you might *fire* a `Future`, or change the state. That leads to **chaos**. [Andrea Bizzotto](<https://twitter.com/biz84>) teaches you how to avoid such chaos. This is a **must-read** for new Flutter developers. Print the DOs and DONTs at the end of the article and stick them on the ceiling in your bedroom.

---

### [Adding Micro-Interactions With AnimatedSwitcher](<https://www.raywenderlich.com/24345609-adding-micro-interactions-with-animatedswitcher>)

Micro-interactions are those small animations that you do not notice, but that make the **user experience** so much better. They can be the reason why users keep or stop **enjoying your app**. [Alejandro Ulate Fallas](<https://twitter.com/codingalecr>) shows you how to get started with micro-interactions in your app.

---

[...]

[Read the rest on ishouldgotosleep.com](https://ishouldgotosleep.com/this-week-in-flutter-15/)
Amazing Promo Card Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-08-07 12:41:45

Hello,

Today I created a Amazing Promo Card Using HTML & CSS. This is a promotional card we use image in background simple text overlay and gradient color to looks text content clear so I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/ExmOaQz %}
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2021-08-07 12:00:23

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258ca137e1.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why was the computer freezing?

___A:___ It left its Windows open!
 -->
Why Do People Often Use Trendy Technologies ?
Tags: node, php, programming
Published: 2021-08-07 11:56:56

hello,
As my first post i wanted to talk about something i'm really passionate about, that is "Use A Technology You Like and Not A Trending Technology".

Though i'm  not really that experienced and i'm still a college student, i noticed that people are really attracted to technologies that are trending like flutter, go and whichever language that makes the more noise at that time,they go for it and do not stick with technologies that are proven to work and last like : Java, php, .net/C# C++ or anything in the top 5 or 6.
they make projects with these technologies and then stop for the lack of resources or for the lack of commitment and enjoyment.

for the past year i've done a challenge with my roommate, as he was learning the mern stack while i was learning .NET Core, his reason for learning it was because it's popular and so that he can freelance while studying, my reason was that i enjoyed the process of writing c# code and i found blazor a good replacement for javascript, the challenge was to see who can get to a 1000$ freelancing first, though both of us didn't reach it,i made 580$ ( 700$ before taxes) and i was told that it was a good price for a 20 day job and for a first job nonetheless.

the moral of the story is *"a technology/Framework is just a way/tool of achieving your projects, and enjoying the process is far more important for longevity"*
Exporting InDesign Files to HTML
Tags: html, indesign, programming, codenewbie
Published: 2021-08-07 11:40:20

Here's how you can convert your InDesign files to HTML without any issues:
 

1. Install the In5 plugin.
2. An option of “Export to HTML5 with In5” will appear in the file.
3. Select this option.
4. Choose "OK" to preview the results. 

To know the pros, cons and complete method of converting InDesign files to HTML with In5, read the complete guide here: https://tiiny.host/blog/indesign-to-html-with-in5-an-introduction-guide/
Introduction to Docker Compose
Tags: docker, devops, opensource
Published: 2021-08-07 11:16:59

➡️ If you are running a multi-container application using Docker and looking for a solution to easily manage the application without any hustle then do check out my new YouTube video on Docker Compose.

➡️ I have covered the following in this video:

1. Create a custom network with the driver of type bridge in Docker
2. Run MySQL database in Docker Container
3. Run PHPMyAdmin application in Docker Container
4. Remove both MySQL & PHPMyAdmin Docker Container
5. Remove custom network
6. What is Docker Compose?
7. What is Infrastructure As A code?
8. Create a docker-compose.yaml
9. Run MySQL database and PHPMyAdmin docker containers using Docker Compose
10. Remove MySQL database and PHPMyAdmin docker containers using Docker Compose

➡️ You could [buy me a coffee](https://www.buymeacoffee.com/sagarjadhv23) If you like the video and find it useful.

➡️ You can refer docker-compose.yaml [here](https://github.com/developersthought/examples/tree/main/youtube)

{% youtube 4pt8fl90dAE %}
Manejar PK Compuesta con Spring-R2DBC
Tags: java, spring, r2dbc, postgres
Published: 2021-08-07 11:13:45

Hasta la versión **spring-data-r2dbc:1.3.2** no es posible usar _Composite Key_ para mapear una tabla con más de un campo como PK.

Como _workaround_ se tiene este ejemplo.

---

La tabla en la base de datos **Postgresql**, se muestra con una PK compuesta:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj9i8oh46z83hwwpucv4.png)

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmyv9i1dmzcl56vqa4wa.png)
 
Vamos a agregar un campo que simule ser un PK. Debe ser del tipo _autoincrement_. 
```sql
alter table public.order_line
add column id serial not null unique;
```

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzhg7hy8c38sobxtrg5b.png)

--- 

Por parte del código Java, en el objeto que mapeamos dicha tabla; le especificamos como _Id_ el nuevo campo.
```java
@Table("order_line")
public class OrderLineDTO {

    @Id
    Long id;
    //PK
    String orderLineNumber;
    //PK
    Long orderNumber;
    @CreatedDate
    private LocalDateTime createdAt;
    @LastModifiedDate
    private LocalDateTime updatedAt;
```

Lo siguiente será implementar las búsquedas por los campos que conforman la llave primaria real.
{% gist https://gist.github.com/edgargs/124614a794286306b159733a0b3a5733 %}
 
---
#Documentación
https://www.postgresqltutorial.com/postgresql-serial/
https://docs.spring.io/spring-data/r2dbc/docs/1.3.2/reference/html/#r2dbc.repositories
How to delete preview video file with javascript or jquery
Tags: jquery, javascript, challenge, help
Published: 2021-08-07 10:50:37

js code :

```
$('#showvideo').on('change', function () {
        var $source = $('#video_here');
        $source[0].src = URL.createObjectURL(this.files[0]);
        console.log($source[0].src);
        $source.parent()[0].load();
    });
```
html code:
```
<video class="video"controls>
<source src="mov_bbb.mp4" id="video_here">
</video>
<input type="file" name="video" id="showvideo" class="file_multi_video" accept="video">
```


...............................................................
I try to delete scr but nothing happen,
how can I deselect the video that selcted.

thanks for your helping guy's,
Everything you need
for your next great idea.
Published: 2021-08-07 10:38:00

Vanjaro CMS https://www.vanjaro.com?ref=1000

All-in-one Fully Open Source ASP.Net based integrated Website Builder, CMS, Online Store, Memberships, and Digital Marketing platform that grows with your business.

Vanjaro is also available as an extension for DNN. Use this option if you're installing on an existing DNN 9.9.1+ Site.

You may install Vanjaro as any other DNN Extension. Refer to Getting Started Video for step by step instructions. You may also upgrade Vanjaro as any other DNN Extension.
Project "Охотник"
Published: 2021-08-07 10:34:49

So i've decided to write a little 2D platform game using C++ with SDL.

Why? Because i think i lack in project experience like this and i really need to occupy myself somehow.

My goal is really to keep up with this project until the result will be appreciable for me.

About the game:
It's a weekend like another one and sometime ago, our hero was offered a hunting rifle. He has finally decided to try something new and went for hunting. Unfortunately, he was not aware about about snakes, wolves, bears that he could meet there. Optimist like he's always, our hunter was only thinking about the rabbit roast he will have for dinner and that's where our journey begins...
Docker Pull Command
Published: 2021-08-07 10:18:37

To use an image, either you can have it located in the docker host, or you need to fetch the image from a <a href="https://dailytechlearning.com/cloud-computing/docker/docker-registry">docker registry . </a><a href="https://hub.docker.com/" target="_blank" rel="noreferrer noopener">Dockerhub</a> is the Docker’s offical registry , from where you can fetch multiple community images. There are tons of official and vendor-specific pre-built images in Dockerhub such as Ubuntu, Python, CentOs, Nginx, Apache, Java, NodeJs, etc.

You can browse the docker hub repository for the required image.

&nbsp;

<img class="alignnone size-full wp-image-2414" src="https://dailytechlearning.com/wp-content/uploads/2021/08/2021-08-07-15_33_05-Httpd-Official-Image-_-Docker-Hub-—-Mozilla-Firefox.png" alt="docker registry search" width="1440" height="467" />

&nbsp;

The other option is to look for the image using the docker search command.

docker search <image>

Example:

<code></code><code><img class="alignnone size-full wp-image-2415" src="https://dailytechlearning.com/wp-content/uploads/2021/08/2021-08-07-15_35_11-aws.png" alt="" width="1032" height="422" /></code>

&nbsp;

The pull command has following options

<code></code>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">ubuntu@ip-172-31-1-61:~$ docker pull --help

Usage: docker pull [OPTIONS] NAME[:TAG|@DIGEST]

Pull an image or a repository from a registry

Options:
-a, --all-tags Download all tagged images in the repository
--disable-content-trust Skip image verification (default true)
--platform string Set platform if server is multi-platform capable
-q, --quiet Suppress verbose output</pre>
<code></code>

&nbsp;

<code></code>

&nbsp;

To pull the image, you can use the pull command, the syntax is

<code></code>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">docker pull &lt;image:tag&gt;</pre>
<code></code>

&nbsp;

<code></code>

<code>Example:</code>

<code> <img class="alignnone size-full wp-image-2416" src="https://dailytechlearning.com/wp-content/uploads/2021/08/2021-08-07-15_35_34-aws.png" alt="" width="712" height="154" />
</code>

&nbsp;

Now you can check the images in your docker host.

<img class="alignnone size-full wp-image-2417" src="https://dailytechlearning.com/wp-content/uploads/2021/08/2021-08-07-15_38_42-aws.png" alt="" width="547" height="92" />

&nbsp;

Please share your thoughts, about the docker pull command.

&nbsp;

&nbsp;
Publish an article from a CLI
Published: 2021-08-07 10:07:20

## Publish an article from a CLI

Thanks to awesome API that `dev.to` offers it is possible to publish and update an article without manual intervention. I wrote a simple CLI that uses this API and publishes an article. Here its README:

```markdown
    # Devto Client
    
    This application reads your article and publishes or edits it in `dev.to` portal.
    
    ## File Format
    
    The application expects an article in the following format. 

        # Header
        
        ## Meta
        
        tags: go, programming
    
        ## Part 1, Intro
        
        Text of the article
    
    The level one header (`#`) will be used at a title for the article. Information in section `## Meta` represents a meta information about your article and won't be included into its text. `Tags` represent a list of tags of the article.
    
    ## Usage
    
    Publish an article:
    
        devto  --key=$KEY $FILEPATH
    
    where
    
        $KEY - is API Key for dev.to portal
        $FILEPATH -is filepath to the article.
```

This article was created using this tool :)

THe source code can be found [here](https://github.com/ayzu/devto).
What Are Microservices?
Tags: microservices, architecture, beginners, blog
Published: 2021-08-07 09:59:53

The software architecture organizes the software structures (components, interactions of the components with each other, environment, principles used to design the software product).

A software architect is a person who handles design architecture for a particular application. The software architect’s functions are, 👇
1. Identify the system’s structure.
2. Identify the use-cases relevant to different scenarios.
3. Organize the user requirements (functional and non-functional)

There are many software architectures. When developing an application, the most suitable architecture has to select. Fault selection of architecture leads to the failure of an application. So the time and allocated budget will become useless.

Micro-services

Micro-services is an architecture, which has Service Oriented Architecture (SOA). SOA has an application scope. It is suitable for a large-scale application. The micro-service architecture uses to develop an application and structure it as a group of services.

This architecture has five core components are, 👇
1. Micro-service
2. Container
3. Service mesh
4. Service discovery
5. API gateway.

When to use Micro-services? 💁

To build web applications that have to develop within a short period...... more at https://thavarajahpraveena.medium.com/what-are-microservices-4481cecb7317
Bootstrap: still the best?
Tags: webdev, css, bootstrap
Published: 2021-08-07 09:50:51

Is Bootstrap dead in 2021? It’s a question on many frontend web developers’ minds.
And with hot new CSS frameworks popping up on the regular, Bootstrap may seem decreasingly relevant.
##What is Bootstrap?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u86hruxwnheu2jwbngvg.png) 
Bootstrap is a CSS framework that lets you create interface components. With Bootstrap you can create nice-looking things like buttons, forms, layouts and navigation.

It has a nice features: easy setup, mobile first approach, customizable, responsive, consistent and flexible, good documentation, uses a grid system and plays nicely with other tech.

One of the most significant changes those years was dropping jQuery dependencies. However, there were quite a lot of other updates, too. This includes CSS custom properties, a utilities API, enhanced grid system, and more.

##Bootstrap's best feature
these words deserve a special section for them.
Bootstrap is great for beginners. The learning curve is pretty gentle. For example, you can create sharp-looking webpages in a few minutes with their layouts and other components.

##How The Influencers' Affect Bootstrap's Reputation
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlcgnwyos30psor666sw.png)
Influencers are great for bringing attention to certain technologies. They are largely a frontend web developers who focus strictly on the sexy.
When some other CSS frameworks appears they stick with it and call it the new sexy.
They just can’t stop talking about Material-UI or Tailwind CSS. (Don’t get me wrong – I love both of these too!)
However, chit-chat doesn’t make something. Just because people dump on Bootstrap (or never mention it anymore) doesn’t mean it’s dead.
#Final Thoughts
In summary, Bootstrap isn’t dead. Millions of developers use it. From Twitter to Spotify (40,000+ companies), Bootstrap is their responsive frontend CSS framework of choice.
After Bootstrap 5 has officially landed, I'm going to see what's new and you should too.
Let's Make a Security Camera using your smartphone [2021]
Tags: python, security, ip
Published: 2021-08-07 09:50:04

Turn your smartphone into a security camera that can communicate via wifi. Eventually, Python is Improved so that people can recognize it. A third-party application creates a web app that can communicate over a Wifi network.  [Read more](https://ilabacademy.blogspot.com/2021/08/security-camera-with-smartphone.html)
Simple React Dropdown
Tags: react, framermotion, css
Published: 2021-08-07 09:49:28

Just a simple dropdown menu that I am using in my project. I wanted to share it with you all because a lot of dropdown examples I searched for had some small issues.

I am using framer-motion library for the animations and it is a NextJS project. I am also using Tailwind for the styles. You can of course remove these, but since it's a famous stack to work with I decided to share the whole code as it is.

Feel free to copy and paste into your own projects!

Let's start with the imports:
```
import { useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
```

Just copy and paste the following code and everything works fine!
```
const Dropdown = () => {
  const [shown, setShown] = useState(false);

  const showMenu = {
    enter: {
      opacity: 1,
      y: 0,
      display: "block",
    },
    exit: {
      y: -5,
      opacity: 0,
      transition: {
        duration: 0.3,
      },
      transitionEnd: {
        display: "none",
      },
    },
  };
  return (
    <motion.div
      onHoverStart={() => setShown(true)}
      onHoverEnd={() => setShown(false)}
    >
      <span className="cursor-pointer">Sections</span>
      <motion.ul
        variants={showMenu}
        initial="exit"
        animate={shown ? "enter" : "exit"}
        className="absolute bg-white mt-1 border border-blue-strong border-opacity-50 rounded-sm p-2"
      >
        <Link href="/introduction">
          <motion.li
            whileHover={{
              color: "#FFB703",
              x: 2,
            }}
            className="cursor-pointer p-1 text-blue-primary"
          >
            Introduction
          </motion.li>
        </Link>

        <Link href="/html">
          <motion.li
            whileHover={{
              color: "#FFB703",
              x: 2,
            }}
            className="cursor-pointer p-1 text-blue-primary"
          >
            HTML
          </motion.li>
        </Link>

        <motion.li
          whileHover={{
            color: "#FFB703",
            x: 2,
          }}
          className="cursor-pointer p-1 text-blue-primary"
        >
          CSS
        </motion.li>
        <motion.li
          whileHover={{
            color: "#FFB703",
            x: 2,
          }}
          className="cursor-pointer p-1 text-blue-primary"
        >
          JAVASCRIPT
        </motion.li>
      </motion.ul>
    </motion.div>
  );
};
```

If you'd like take a look at my website:

https://stylidis.io

Or hit the follow on twitter:

https://twitter.com/AStylidis
How to detect if network connection is Online/Offline with Angular - RXJS
Tags: angular, javascript, network, rxjs
Published: 2021-08-07 09:45:34

![offline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm166qsg6u0y30b6mmdu.jpg)
 
We all might be familiar with the JavaScript way of checking Online/Offline status. But in the case of Angular, we need to properly unsubscribe the events we are listening to, otherwise, we might cause unnecessary behaviors and memory leaks.

Plain JS
------------
```javascript
window.addEventListener("load", () => {
  this.networkStatus = navigator.onLine

  window.addEventListener("online", () => {
    this.networkStatus = true
  });

  window.addEventListener("offline", () => {
    this.networkStatus = false
  });
});
```

Angular Way
-----------
```javascript
import { Component, OnDestroy, OnInit, VERSION } from '@angular/core';

import { fromEvent, merge, of, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  networkStatus: boolean = false;
  networkStatus$: Subscription = Subscription.EMPTY;

  constructor() {}

  ngOnInit(): void {
    this.checkNetworkStatus();
  }

  ngOnDestroy(): void {
    this.networkStatus$.unsubscribe();
  }

  checkNetworkStatus() {
    this.networkStatus = navigator.onLine;
    this.networkStatus$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    )
      .pipe(map(() => navigator.onLine))
      .subscribe(status => {
        console.log('status', status);
        this.networkStatus = status;
      });
  }
}

```

You can see the demo here: https://angular-check-offline-online.stackblitz.io

or check the code here: https://stackblitz.com/edit/angular-check-offline-online?file=src/app/app.component.ts


Happy coding!!! 🎉🎉🎉
GitHub awesome-sources
Tags: github, opensource, books, programming
Published: 2021-08-07 09:18:46

Hi everyone. 
This is my GitHub repository project: [awesome-sources](https://github.com/UlugbekMuslitdinov/awesome-sources)
I am self-taught programmer and I know how it is difficult to find free books in the Internet or what to read to learn particular programming language. So I decided to make an open-source project where everyone can upload book they'd suggest other programmers and others can download and read them.
For now there are more than 1GB of books on different programming languages and tools(e.g. Docker or Kubertenes) and this number is increasing day by day. Except books, there are bunch of useful resources, such as websites and other github repositories that are related to the programming.
This project is advancing and I am ready to receive your suggestions and criticism in order to make this project more advanced. Moreover, I want you to make some contribution to this repository and enrich this library of programming books and different sources.