teleren/devto huggingface dataset:
Tail AWS CloudWatch logs
Tags: aws, logs, cli
Published: 2022-01-07 14:38:12

Sometimes it is very useful to be able to stream remote logs from CloudWatch this is very easy with the [AWS CLI tail](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/logs/tail.html) command.

Basic version of the command:

```
aws logs tail log_group_name --tail since 1h --follow
```

we can also filter by the log stream name or its prefix.

```
aws logs  tail log_group_name --log-stream-name-prefix web --since 1h --follow
```
next-export-i18n v1.3.0: respecing the user's default language
Tags: webdev, nextjs, react, javascript
Published: 2022-01-07 14:27:44

Today I released `version 1.3.0` of `next-export-i18n`, the i18n module for Next.js which is fully compatible with `next export`.

---

Install `next-export-i18n` with `$ npm i next-export-i18n` or get [`next-export-i18n v1.3.0`](https://www.npmjs.com/package/next-export-i18n) from npm.js.

---

## New feature: Respecting the user's default language

Starting with Version 1.3.0, `next-export-i18n`reads the user's default language settings from the browser. If this language is available as `i18n` it is automatically used as the default language. 
 
---

## About `next-export-i18n`

**This npm module provides a simple solution for Internationalization (i18n) of projects using `next export`.**

Next.js already has support for internationalized (i18n) routing out-of-the-box. You can provide a list of locales, a default as well as  domain-specific locales and Next.js  automatically handles the routing. It streamlines the touring and locale parsing for nearly all existing l18n library solutions available for Next.js such as `react-intl`, `react-i18next`, `lingui`, `rosetta`, `next-intl`.

Unfortunately, [`Next.js` i18n-routing](https://nextjs.org/docs/advanced-features/i18n-routing) does not supports `next export`.
This means that _none_ of the i18n-libraries (which are utilizing the build in i18n-routing) is able to support fully static sites which are generated with `next export`. 

`next-export-i18n` provides a simple solution for Internationalization (i18n) when you want to generate a truly static website with `next export`.

Read the [Introduction to `next-export-i18n` - next.js: i18n with static sites](https://dev.to/martinkr/next-js-i18n-with-static-sites-2644) for more details.

---

### Sample implementation 

You can also take a look at the example implementation [next-export-i18n-example.vercel.app](https://next-export-i18n-example.vercel.app) and its source code at [github: `https://github.com/martinkr/next-export-i18n-example`](https://github.com/martinkr/next-export-i18n-example).

---


## Links
- [`next-export-i18n` npm module](https://www.npmjs.com/package/next-export-i18n)
- [next.js: i18n with static sites (Introduction)](https://dev.to/martinkr/next-js-i18n-with-static-sites-2644)
- Example implementation: https://next-export-i18n-example.vercel.app
- Github for the npm-module: https://github.com/martinkr/next-export-i18n
- Github for the example: https://github.com/martinkr/next-export-i18n-example

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

--- 

Photo by [Jerry Zhang](https://unsplash.com/@z734923105?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText") on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
[week1] Days 4 - Mini project around js and regex
Published: 2022-01-06 17:45:55

##Mini project 
Today I made a password verification by following online guides and from the knowledge acquired during the learning of regex , u can find it on [codepen.io](https://codepen.io/stephane-duboze/pen/JjrZgmM)
## I find a real problem
While doing this project I realized how difficult it is to initialize a project so I'm writing it down for later in order to improve this aspect 
## freeCodeCamp Debbuging 
On the freecode camp of the day I discovered a new way to use console to debug my programs

- console.clear()
Cleans the contents of the console

- console.log(..)
Allows you to display messages in the console. You can use wildcards and additional arguments with this method.

- console.debug(..)
You can only see the contents printed by the console.debug(..) method if your Console is set to Log-Level="debug". By default, Log-Level="log"

```javascript 
console.debug(obj1 [, obj2, ..., objN]);
console.debug(message [, subst1, ..., substN]);
```
- console.info(..)
Displays an informative message in the browser console. In Firefox and Chrome, a small i icon is displayed in front of the message.
```javascript 
var myObj = {firsname:"John", lastname:"Doe"};
console.info(myObj);/*{firsname: 'John', lastname: 'Doe'}
firsname: "John"
lastname: "Doe"*/
```
- console.warn(..)
Writes in the browser console the content of the object in the form of a warning with a warning pictogram in front of the line.
```javascript 
console.warn("First warning");
console.warn("Second warning");
```

- console.error(..)

Writes in the browser console the content of the object in the form of a error with a warning pictogram in front of the line.
```javascript 
console.warn("First error");
console.warn("Second error");
```

PS:

- if you see any spelling or grammar mistakes, can you notify me (I am still improving my English) ? thank you !
- if you have any tips for improving my post feel free to comment on the post
Build WhatsApp and SMS CRM app in 10 mins using low code
Tags: webdev, programming, opensource, showdev
Published: 2022-01-07 14:14:11

### Introduction

Here's the video tutorial for building WhatsApp and SMS CRM app. This app can let you send WhatsApp messages and SMS directly to your customers. 

#### Prerequisites:
- ToolJet (https://github.com/ToolJet/ToolJet): It is a free and open-source, low-code platform that allows you to quickly build tools. [Sign-in here](https://tooljet.com/)
- Google Sheets: Use this [mock data](https://docs.google.com/spreadsheets/d/1gIfeXMmgJAKrWmm_MtivOj68zZM_H9D8qR5mzVvzo6c/edit?usp=sharing)
- Twilio account with an active messaging service
- WhatsApp's click to chat API endpoint: https://api.whatsapp.com/send?phone=phonenumber&text=message

{% youtube 8PfcyJJmg9A %}
Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter ⚡

Tags: vue, vite, qusar
Published: 2022-01-07 14:09:25

Yeah, quasar's official vite cli is released. and I'v created a demo, to expose how to use `@/quasar/vite-plugin`

Pina as a replacement for vuex has been add. and also I'v switched to ts.

I'v add a online demo for this repo [https://fyeeme-vite-quasar.netlify.app/](https://fyeeme-vite-quasar.netlify.app/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0cdu0zjaojoo6svc4mx.png)
Testing useDebouncedValue Hook
Tags: react, hooks, testing
Published: 2022-01-07 13:47:43

### Subject Under Test(sut): 
A hook that debounces value to eliminate the performance penalty caused by rapid changes to a value. [Source: usehooks.com](https://usehooks.com/useDebounce/)

## Behaviour: 
Should only emit the last value change when specified debounce time is past.

## Code: 
{% gist
https://gist.github.com/rexebin/53efb4260a9db5769b3bc37013419ac1
%}

## Notes:

1. The test uses a React Component to test the sut's behaviour. It shows how the hook should be used.

2. The Test uses `useFakeTimers` to control the pass of time and assert when the debounced value should and should not be changed

One weird and interesting behavior of Jest's fake timer is that the fake timer somehow got influenced by other tests before it: 

If I move the second describe block (not using the fake timer) before the first, the last assessment fails:
```typescript
 act(() => {
      jest.advanceTimersByTime(1);
    });

    expect(debouncedValue.textContent).toBe('3'); // fails, got 0 instead of 3
    expect(value.textContent).toBe('3');
``` 
If anyone knows why the above fails, please, please let me know, I would be most grateful.
speeding up your learning journey efficiently.
Tags: webdev, programming, productivity, beginners
Published: 2022-01-07 13:20:48


However much we may want to hurry stuff up its really good to remember that coding is a skill that requires time and effort to grasp and use it in the real world. Personally while learning to code, I have seen that not all approaches to studying don’t work as well as we want them to, but applying these simple four tips to my programming study I have been able to drastically accelerate learning.

**1. Doing deliberate practice / active practice.**
  When learning we will read about a topic or watch a video and we have a feeling of “I think I’ve got it now “, but in real sense we only know the theory behind and have no real practical understanding of the topic at hand and when you maybe go to do some practice problems we get frustrated and end up giving up.
Doing active practice involves you setting clear and well defined goals for your learning and going through what the question really wants while doing this a number of times you gain proficiency through repetition.

**2. You are going to have to step out of your comfort zone.**

> “The easiest way to learn is the hard way
” I picked up this quote from Bob Zirol while doing the react course on [scrimba.com](https://scrimba.com/) which implies that we will have to do things that we don’t necessarily want to do because they make up feel less of an expert.  
Practice what you have learnt, apply it in a project and just be curious,  ask yourself questions go deeper not wider.

**3. Attacking your problems head on.**
When we are coding out a certain problem, times will come when we hit that “un-solvable” error or something that needs a certain kind of concept that we may or may not know. When this happens most of us including me sometimes get frustrated and comment out that part and move to the next section and when we come back we don’t know why we commented and the cycle continues. Instead try to think about the concept, note down what you don’t understand (your weaknesses) and then sit down and do drills whereby you are learning how to deal with different variations of complexity, doing this will gradually improve your understanding.

**4. be sure to keep your brain rested and healthy.**
Having a good 6-8 hours of sleep daily is a necessity while learning in general because during sleep we process information, catalogue and store. Working/Studying in blocks to space learning and allow time for rest and recuperation.

Lastly, when you are trying to teach yourself you need to have a self-determined path to follow that maximizes active learning and keeps you motivated and gives you momentum, with that I hope you found this super useful. I would really love to hear from you in the comments Tell me about your best strategies for effective study. Glad to have shared my first dev.to post the first of many more.
Carpet Installation
Published: 2022-01-07 13:20:04

Utah Flooring & Design offers trusted carpet installation services to commercial and residential properties in the Salt Lake City area. A qualified carpet contractor can ensure that your carpeting lasts as long as it should, and at Utah Flooring & Design, we employ some of the best material and installation methods anywhere in Salt Lake City. A carpet company should make your carpeting look first class, and we make it our number one priority to install carpets that exceed our Salt Lake City clients’ expectations. Our team guarantees your carpeting provides your home or business with comfort, warmth, and style.
5 mins talk about Streamlit and real-time video streaming at PyConJP 2021
Tags: python, pycon, streamlit, conferences
Published: 2022-01-13 16:48:33

---
title: 5 mins talk about Streamlit and real-time video streaming at PyConJP 2021
published: true
date: 2022-01-07 13:00:00 UTC
tags: python, pycon, streamlit, conferences
canonical_url: https://whitphx.info/posts/20220107-pyconjp2021-lightning-talk/
cover_image: http://img.youtube.com/vi/_LuLs8H1gJc/maxresdefault.jpg
---

I had an opportunity to have a lightning talk at PyCon JP 2021<sup id="fnref-1"><a href="#fn-1">1</a></sup> and its video has been recorded and published 😃

{% youtube _LuLs8H1gJc %}

In this LT, I demonstrated live coding of a real-time video app using Streamlit. Its content is also a part of [this post](https://dev.to/whitphx/developing-web-based-real-time-videoaudio-processing-apps-quickly-with-streamlit-4k89).  
The LT also contains live demos of the example apps.

I constructed the talk only with live coding and live demos and did not use any slides.  
The first reason is simple; I thought it would be attractive. I think the audience does not listen to the words so much, but they are focused if there are visual/moving things.  
The second is that I didn’t have enough time to prepare the talk because the presenters had been selected by lottery about 3 hours before the session. So I decided just to gather existing materials to make the presentation to minimize the amount of time I would waste if I was not selected.

This was the first time for me to have an English talk in front of a public audience (even though it was online this time).  
It was not perfect, but a good experience for me 😀 I look forward to the next chance.

* * *

1. [https://2021.pycon.jp/](https://2021.pycon.jp/)[↩](#fnref-1)
My latest microphone
Tags: streaming
Published: 2022-01-07 12:58:58

When I sent my friend my posts of my streaming setup, he asked what my mic was... and I forgot to mention it in my hu-ge update:
{% link https://dev.to/whykay/my-streaming-setups-since-dec-2m57 %}

![Sad Oh No GIF By Apple TV
](https://media.giphy.com/media/ZExdWjrto3qpXWX3l0/giphy.gif)

So here's a wee updated...
 
This is the mic I got: **Audio-Technica AT 2035** (Large Diaphragm Condenser Microphone)

![Audio-Technica AT 2035](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6odpzs6z3t22417nr78.png)

Bought it at https://www.thomann.de/ie/audio_technica_at2035.htm
Learning Python Like a Pro in 2022: Getting Started
Tags: python, beginners, codenewbie
Published: 2022-01-07 11:13:34

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

Python has become one of the most famous programming language in the world. In this article, you will get a hands on introduction in python programming language. Whether you're new to programming or an experienced developer, this article can help you get started with Python easily. So lets jump right in.

## **What is python**

Python is a simple, general purpose, high level, and object-oriented programming language founded by Guido Van Rossum.

Python is also an interpreted programming language, this means that as a developer you write Python (.py) files in a text editor and then put those files into the python interpreter to be executed.

## **Features of python**

- Easy to use and Learn
- Expressive Language
- Interpreted Language
- Object-Oriented Language
- Open Source Language
- Extensible
- Learn Standard Library
- GUI Programming Support
- Integrated
- Embeddable
- Dynamic Memory Allocation
- Wide Range of Libraries and Frameworks

## **Installation**
Many PCs and Macs will have python already installed. To check whether python is installed on your system, enter the following command on your terminal
```bash
python --version
```
If not installed: Then you can download it for free from the following [website](https://www.python.org/)

## **Python versions: Python 2 vs. Python 3**
The two versions Python 2 and Python 3 are very much different from each other. I will not dive deep into the differences between the two. However, for the sake of this article, we will be using python 3 which is the most recent version.

## **Applications of Python**

- Data Science
- Date Mining
- Desktop Applications
- Console-based Applications
- Mobile Applications
- Software Development
- Artificial Intelligence
- Web Applications
- Enterprise Applications
- 3D CAD Applications
- Machine Learning
- Computer Vision or Image Processing Applications.
- Speech Recognitions

**NB:**There are many IDEs to run our python project.However in these series of articles, i will be using visual stusio code to write and run our projects. There are great tools out there to run python programs, you can test them out. You can use any other editor or IDE that you prefer.

To install Visual studio code, visit their [website](https://code.visualstudio.com/) and follow the guidelines

## **Conclusion**
This article was basically giving a brief intro on what is python, its features and application. I am making a series on "Learning Python Like a Pro in 2022" and on my next article i will be tackling on the basics of Python.

In the mean time feel free to connect with me on [twitter](https://twitter.com/Emma_Donery) and [linkedin](https://www.linkedin.com/in/emma-donery-0831a7188/)

See you om the next article! Happy reading😊
List of Angular CLI commands we use daily
Tags: angular, webdev, beginners
Published: 2022-01-07 12:20:10

In this post, I am consolidating all the commonly used Angular CLI commands which every Angular developer uses frequently.

### Create a NEW angular project
```
ng new <project-name>

ng n <project-name>
```
----
### Add NPM packages

```
ng add <npm-package>
```
----
### Run the Angular project
The application is run on port 4200 by default. You can specify the port in the following command using _--port_ flag.
```
ng serve
```
----
### Generate new Schematics
Schematics can be _directives, components, pipes, modules, guards_ etc
```
ng generate <schematic-name> <sample-name>
```
----
### Build the Angular app
Compiles the application under the output directory named _/dist_
```
ng build
```
----
#### Run Unit tests in the app
```
ng test
```
----

And, that's it for today. Would you like to add anything else to the list?
【Unity】 A solution if you can't receive the event that finishes an app on mobile.
Tags: unity3d, mobile
Published: 2022-01-07 12:15:26

## Intro
I tried to receive the app's end event on mobile. 
However, it did not succeed.

So I have considered a compromise.  I'll write it down.

## Environments
| name | version |
|:-:|:-:|
|  Unity | 2019.4.23f1  |

## Problem
Unity has a solution to receive the app's end event.
It is [OnApplicationQuit](https://docs.unity3d.com/jp/current/ScriptReference/MonoBehaviour.OnApplicationQuit.html).

But it doesn't work on mobile.
`OnApplicationQuit` will only be called in situations that you explicitly call [Application.Quit](https://docs.unity3d.com/ja/current/ScriptReference/Application.Quit.html).

You can use [OnApplicationFocus](https://docs.unity3d.com/ja/current/ScriptReference/MonoBehaviour.OnApplicationFocus.html),but It is also called when working in the background.

## Solution
I have come up with one solution.

First, I tried to figure out why I would want to receive the app's end event.

In my case, I wanted to delete the cache of streaming files.
Therefore, I changed the implementation to delete a files when I start an app.

```C#
//Call on start an app. 
void Start()
{
    try
    {
        if (Directory.Exists(Path))
        {
            Directory.Delete(Path, true);
        }
        Debug.Log("Cache delete");
    }
    catch
    {
        Debug.LogError("Error deleting files.");
    }
}
```

It is my compromise solution.


If you want to send game scores and statuses at the end of the app, you may want to save the data when the user takes some action and send it at startup.

## Other Resources
[OnDisable and OnDestroy not Called on iOS](https://stackoverflow.com/questions/47220471/ondisable-and-ondestroy-not-called-on-ios)
Build a social network with ReactJS, Spring Boot and MongoDB
Tags: react, java, webdev, opensource
Published: 2022-01-07 12:13:56

I have developed a small social network web app for educational purpose and want to share this with the community. This app is built with ReactJS for frontend, Java Spring Boot for backend and MongoDB as the database.

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

The app tries to mimic a few functions of Twitter, including:

- Create post with text and image
- The number of characters in each post is limited to 200 characters
- Like, comment and re-post a post
- View the number of likes, comments and shares of a post
- Comments are toggle
- The number of character in each comment is limited to 100 characters
- Follow, un-follow someone
- See who are following us and follow them back
- Check who we are following
- View all posts of an individual
- View our own posts
- List all user accounts in the entire social network (due to the number of users are still small, I did not develop search user function)

- Other functions:
  - Due to limited storage space, client app compresses the uploaded image to the maximum of 250px (width or height)
User avatar is created by hashing user id and convert that hash code into a hexagonal image
  - Authentication and authorization use JWT
  - Responsive frontend for desktop and mobile devices

- Technical stack:
  - Frontend: ReactJS, Redux Toolkit, React Router, React Bootstrap
  - Backend: Java Spring Boot
  - Database: MongoDB

Hope you enjoy it and give me a ⭐ Github star ⭐ for my effort!

**Live Demo:**
https://psn-social-network.herokuapp.com/#/

**Source Code:**
https://github.com/linhtch90/psn-social-network-public-source
Testing ErrorFallback Component
Tags: react, testing, errorfallback
Published: 2022-01-07 11:32:18

### Subject Under Test(sut): 
An error fallback component to be passed to `ErrorBoundary` component from `react-error-boundary`. 

### Behaviours: 

1. In development mode, it shows error track trace

2. In production mode, it hides error track trace

3. It shows a `Reset` button, and clicking it calls resetErrorBoundary action passed by parent `ErrorBoundary` component.

### Code

{% gist
https://gist.github.com/rexebin/2bee21ccdafcde42d4f619318554cc69
%}

### Notes

1. The `renderInErrorBoundary` helper method renders a bomb component inside an actual `ErrorBoundary`, no mocks. It shows how the sut should be used. 
2. `getByText` itself implicitly asserts if the element is in the document because if not found, it will throw an error. However, I asserted anyway for clarity
3. `queryByTestId` is used to assert if the error stack trace is rendered in the DOM under production, it returns null if not found, contrary to `getByTestId`, which would throw an error when the element is not found.
4. `@epic/environments` is mocked out to override the value to test production mode behaviour.
5. The `renderStandalone` helper method renders the component as any other React component, for the sole purpose of testing the behaviour of the `Reset` button. Because the `resetErrorBoundary` is implicitly passed to the sut, and I don’t know a way to mock a React component prop yet. The test shouldn’t care about it anyway.