teleren/devto huggingface dataset:
Angular 17 - Lazy-loading with @defer block
Tags: angular
Published: 2023-11-23 03:00:00

You can lazy-load any standalone component anywhere, anytime, and on your terms, as you can decide the [trigger](https://angular.dev/guide/defer?ck_subscriber_id=1979351037&utm_source=convertkit&utm_medium=email&utm_campaign=Angular%2017:%20Lazy-loading%20with%20@defer%20%5BDaily%20Angular%5D%20-%2012220295#triggers) to load that component.

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

The above code will load the HelloComponent as soon as the browser is idle, which means it's done loading everything else. While that is happening, we can decide to display a placeholder, and in my case, I decided that such a placeholder would be displayed for a minimum of 2 seconds no matter what. You can use seconds (s) or milliseconds (ms) as a time unit:

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

We can also specify a [loading](https://angular.dev/guide/defer?ck_subscriber_id=1979351037&utm_source=convertkit&utm_medium=email&utm_campaign=Angular%2017:%20Lazy-loading%20with%20@defer%20%5BDaily%20Angular%5D%20-%2012220295#loading) template and an [error template](https://angular.dev/guide/defer?ck_subscriber_id=1979351037&utm_source=convertkit&utm_medium=email&utm_campaign=Angular%2017:%20Lazy-loading%20with%20@defer%20%5BDaily%20Angular%5D%20-%2012220295#error), all customizable with a minimum amount of time during which we would display those templates:

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

Note that @loading supports an "after " option only to show the loading template if loading takes more than a certain amount of time, so you don't have to display anything if the component loads quickly. Both parameters are optional:

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

These are the different new blocks available with @defer

---

Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs
- dev.to: https://dev.to/nhannguyendevjs
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs
Win456 - win456 casino nhà cái uy tín nhất thị trường Việt Nam
Published: 2023-11-23 02:48:30

Win456, một địa chỉ cá cược hàng đầu, đã đồng hành cùng cộng đồng người chơi với hơn 10 năm kinh nghiệm. Win456 nổi tiếng với sự đa dạng của các trò chơi giải trí trực tuyến cao cấp, là điểm đến không chỉ là sòng bài lớn mà còn là nguồn đáng tin cậy và an toàn. Cam kết bảo vệ thông tin cá nhân, Win456 mang đến trải nghiệm cá cược với dịch vụ hỗ trợ khách hàng chuyên nghiệp. Đặc biệt, những chương trình khuyến mãi và nạp tiền thường xuyên được tổ chức, giúp người chơi nhận thêm nguồn vốn và trải nghiệm không gian giải trí đỉnh cao. Hãy tham gia Win456 ngay hôm nay để khám phá thế giới đa dạng và hấp dẫn của cá cược online!
Brand: Win456
Địa chỉ: 40 Đ. Nguyễn Duy Hiệu, Thảo Điền, Quận 2, Thành phố Hồ Chí Minh, Việt Nam
Postcode:  71107
SDT:  09498707034
Email: win456comco@gmail.com
Website: https://win456.com.co
TAGS:#Win456 #linkWin456 #appWin456 #Win456casino #NhacaiWin456 #taiWin456 #CasinoWin456 
 
Social Links:

https://www.facebook.com/win456comco/

https://twitter.com/win456comco

https://www.pinterest.com/win456comco/

https://500px.com/p/win456comco?view=photos

https://www.flickr.com/people/win456comco/

https://www.youtube.com/channel/UCbIuX6JECLK2l3Nz68xIXag

https://www.reddit.com/user/win456comco

https://www.blogger.com/profile/12303935184363823827

https://win456comco.blogspot.com/

https://win456comco.tumblr.com/

https://bbs.now.qq.com/home.php?mod=space&uid=6202625

https://www.twitch.tv/win456comco/about

https://profile.hatena.ne.jp/win456comco/profile

https://gravatar.com/win456comco

https://issuu.com/win456comco

https://www.liveinternet.ru/users/win456comco/

https://dribbble.com/win456comco/about

https://about.me/win456comco/edit

https://www.deviantart.com/win456comco

https://ko-fi.com/win456comco

https://www.provenexpert.com/win456-comco/

https://hub.docker.com/u/win456comco

https://independent.academia.edu/Win456Comco

https://profile.ameba.jp/ameba/win456comco

https://sketchfab.com/win456comco

https://gitee.com/win456comco

https://public.tableau.com/app/profile/win456comco/

https://connect.garmin.com/modern/profile/64b59b01-3726-4a6a-a52a-0b0d9cb38cd7
Parallax using scroll driven animations
Tags: webdev, css, html
Published: 2023-11-23 02:08:40

Few things are more satisfying than an immersive and beautiful parallax effect well-placed on a website. Unfortunately, the better-looking more complex effects tend to be, well, more complex (to implement), and parallax isn't an exception.

There are several approaches to creating a parallax effect, perhaps the most common is using JavaScript, where you listen for a user scroll event and update the position of a certain element accordingly. However, it's all too easy to end up with a janky and low-performance result, and making it look smooth takes a ton of work. (Yeah, there are also libraries out there, but that just adds more bloat to your app and often lacks customization.)

Then there's the CSS trick where you play with perspective and 3D translations. The issue here? Embrace it: it's hard, confusing, and doesn't always work.

With that out of the way, recently I looked into the relatively new (and as of now Chrome-only) [scroll-driven animation API](https://developer.chrome.com/articles/scroll-driven-animations/). This approach allows you to apply CSS animations using a scroll-based (instead of time-based) timeline, in other words, you animate stuff based on the user scrolling, without using JavaScript. You might see where this is headed: we can animate the _translation_ of an element based on the scroll position, giving us a very straightforward and smooth effect. Is this approach necessarily better? I don't know, but it looks a lot more doable (plus, it'll be fun).

Alright, here's some actual code. Define a CSS animation...
```css
@keyframes p-1 {
  from { transform: translateY(0) }
  to { transform: translateY(-100px) }
}
```
and add it to some element:
```css
#parallax {
  animation-name: p-1;
  animation-timeline: scroll();
  animation-timing-function: linear;
}
```
Yeah. That's it. _Mic drop._

All you have to do is tweak how much you translate a certain element in the animation to determine its "scroll speed".

Oh, and of course, [the codepen](https://codepen.io/codingjlu/pen/mdvLBrx).

Sponsored by scroll-driven animations. (Just kidding.)
clipboard sync with sudo vim
Published: 2023-11-23 01:50:32

## Intro

This post explains, how to sync the system clipboard with vim while using sudo. 

## Install some gui for vim
Some GUI version of vim like vim-gtk3, vim-gtk, or vim-athena for making clipboard work. Because, the plain vim is not compiled with clipboard flags enabled (at least in Debian based Distros).

`sudo apt install  vim-gtk3`

## Configure clipboard

Switch to root user
`sudo su`

Now edit root user's vimrc (vim config file)
`vim ~/.vimrc`

Add this line,

`set clipboard=unnamed,unnamedplus`

### Pro tip
Use a minimal vim config like this to make your life easier
```
set tabstop=4
set shiftwidth=4
set softtabstop=4
set expandtab
set nu
set ic
set is
set smartindent
set clipboard=unnamed,unnamedplus
syntax on
```

## Result

After following this post, you will be able to work with `sudo vim` and the system clipboard will sync once you copy/cut/paste the content from vim.
Com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Specified key was too long; max key length is 1000 byte
Tags: javascript, programming, tutorial, java
Published: 2023-11-23 01:19:42

https://javatute.com/hibernate/com-mysql-jdbc-exceptions-jdbc4-mysqlsyntaxerrorexception-specified-key-was-too-long-max-key-length-is-1000-byte/)
Title: Enhancing User Authentication: A Deep Dive into the Login Page
Tags: programming, typescript, opensource, reactnative
Published: 2023-11-23 00:35:15

We will discuss the recent pull request that brings substantial improvements to our user authentication procedure in this blog post. The updated login page is the main feature of this update. Let's examine the process of ideation, execution, and lessons discovered along the road. By adding a more user-friendly and aesthetically pleasing login screen, this pull request aimed to improve the user login experience. Furthermore, the integration of Microsoft and Google login choices was done to give consumers safe and practical options.
Reworking the login page's design was one of the first things to do. To guarantee that customers will have an intuitive and visually pleasant experience, a simple and user-friendly design was chosen. A makeover was applied to the login form to improve readability and overall design. To produce a consistent and polished appearance, appropriate font modifications, colour selections, and spacing were used. Expo Router was used to elegantly incorporate the login page into the pre-existing navigation structure. The Tabs.The login screen was added as a navigable option alongside the current tabs using a screen component.
Core React Native components, such as TextInput for user input and Button for login actions, were used to construct the login form. The form fields might be updated dynamically thanks to state management using useState. The implementation of the handleLogin, handleGoogleLogin, and handleMicrosoftLogin routines took care of the logic for authentication. During the development stage, logging messages were positioned to make debugging easier.
An important step has been taken in the direction of improving the user login experience with this pull request. We have created a login page that complies with contemporary standards by giving equal weight to both functionality and aesthetics. Our dedication to providing high-quality user experiences is seen by the way we iterate and get better every time.
Fullstack anime streaming platform where you can watch & stream anime
Tags: website, anime
Published: 2023-12-06 09:23:32

---
title: Fullstack anime streaming platform where you can watch & stream anime
published: true
date: 2023-11-23 00:53:00 UTC
tags: WebSite,Anime
canonical_url: https://reactjsexample.com/fullstack-anime-streaming-platform-where-you-can-watch-stream-anime/
---

# Animinji – Anime Streaming Website
 ![Fullstack anime streaming platform where you can watch & stream anime](https://reactjsexample.com/content/images/2023/11/Code_2023-11_11-48-43.jpg)

Fullstack anime streaming platform where you can watch & stream anime.

## Overview

![Fullstack anime streaming platform where you can watch & stream anime](https://github.com/EugerBonete/animinji/raw/main/public/screenshot.png) ![Fullstack anime streaming platform where you can watch & stream anime](https://github.com/EugerBonete/animinji/raw/main/public/screenshot2.png)

## Built With

- [Next.js 13](https://nextjs.org/docs): A popular React framework for building web applications.
- [Shadcn](https://ui.shadcn.com/): A library for enhancing UI design.
- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs.
- [Supabase](https://supabase.com/): An open-source Firebase alternative for building serverless, real-time applications.
- [TanStack Query](https://tanstack.com/query/latest): A data-fetching library for React.
- [trpc](https://trpc.io/): A modern TypeScript utility for building type-safe APIs.
- [Clerk](https://clerk.com/): A solution for authentication and user management.
- [ArtPlayer](https://www.artplayer.org/document/): A customizable video player for your web application.
- [Sonner](https://sonner.emilkowal.ski/): A library for creating toasts in your web app.

## Features

Animinji allows users to watch anime, add favorites and leave comments for an engaging anime experience.

## Installation

Clone and add your own env files

```
# Installation commands
git clone https://github.com/EugerBonete/animinji.git
cd your-project
npm install
```

### How to use the example environment file

1. Copy the `.env.example` file.
2. Rename the copied file to `.env`.
3. Replace the placeholder values with your actual configuration values.

Now your application can read configurations from the `.env` file.

## GitHub

[View Github](https://github.com/EugerBonete/animinji?ref=reactjsexample.com)
Why you shouldn 't use Svelte
Published: 2023-11-23 00:44:54

From all frameworks for web development around the wild, there are pretty much 4 great alternatives: React, Angular, Vue and Svelte.
Svelte is clearly the one with highest growth recently, so I decided I should give it a try. Notice that I used to write most of my personal stuff in React (using NextJS hosted at Vercel).
What I did was to make the getting started tutorial and tried to create an application myself, from that experience I started to figure out how both svelte and SvelteKit works. And one thing started to bug me...

```
What if I want to make my application work offline?
```

Well... first of all let's split the problem in multiple parts. The svelte UI library is just a library with a compiler, it will generate some html, css and js that can be loaded by the browser and they can do it amazingly. The problem is related to the notion of a SSR application. That issue exists in NextJS + React also, or Angular + Server Components or Vue + NuxtJS. All of these SSR applications when taken in their core (and that's what SveltKit is all about) the result is an application that only cares about UI and the whole processing exists in the server and in the server only. So what applications do benefit from it and which applications will regret from it? Let's handle one by one and understand why.

## Who will benefit?

Pretty much any application where Reading is the most important feature and writing is a not so often approach, i.e., applications where blocking users write actions when offline isn't such a big of a deal, see some examples:

1. **Ecommerce:** Amazing use case for SSR results. The page will be changing frequently, every user can have a different page and that should be what users will see. No user can ever operate or create a transaction without knowing if the product is still available, there's no real degradation on letting the users to not access the website when offline, so go for it and be happy.
2. **Blogs/News:** Blogs can be not only be Server Side Rendered, but also Statically Generated, to create a single static file that will be cached and served everywhere.
3. **Social Media:** There's pretty much nothing to do in a social media when offline, except for some very specific use cases, you can cache the page you want to read but not being able to post offline isn't a degradation at all.

There's another set of applications that may benefit: apps without server state such as calculators, character building apps where you download the charater by the end of the process, or any other applications that doesn't need to write on a distributed system to provide it's functionality.

## Who will regret it?

Well, the other side of applications that DO need a very often writing experience that shouldn't ever be blocked, such as text editing applications, note taking apps, music editing software and so on. They may even be a great use case for the svelte UI library but for sure not for the SvelteKit itself because their main state shouldn't be network dependent, they should be locally dependent otherwise user experience will be degraded.
A Twitter Clone with Next.js React.js TypeScript MongoDB and Node.js
Tags: twitter
Published: 2023-12-06 09:27:13

---
title: A Twitter Clone with Next.js React.js TypeScript MongoDB and Node.js
published: true
date: 2023-11-23 00:38:00 UTC
tags: Twitter
canonical_url: https://reactjsexample.com/a-twitter-clone-with-next-js-react-js-typescript-mongodb-and-node-js/
---

# Building a Twitter Clone with Next.js React.js TypeScript MongoDB and Node.js
 ![A Twitter Clone with Next.js React.js TypeScript MongoDB and Node.js](https://reactjsexample.com/content/images/2023/11/Code_2023-11_09-33-10.jpg)

![A Twitter Clone with Next.js React.js TypeScript MongoDB and Node.js](https://camo.githubusercontent.com/841857716c19f614d3d07fc8ef37ef17798cc09944a3e5093f98adb663922863/68747470733a2f2f6d656469612e67726170686173736574732e636f6d2f356e3558383172415367694d626b317738776f68)

🚀 Dive into the world of modern web development with our latest project – a Twitter Clone! 🐦 In this exciting video we walk you through the technology stack we used to bring this social media platform to life.

## 🚀 Demo

[https://x.sammi.pro/](https://x.sammi.pro/)

## 🧐 Features

Here’re some of the project’s best features:

- Authentication system
- Following functionality
- Comments / Replies
- Likes functionality
- Google / Github authorization

## 🛠️ Installation Steps:

1. Cloning the repository

```
https://github.com/samarbadriddin0v/twitter-clone

```

2. Install packages

```
npm install

```

3. Setup .env file

```
GITHUB_CLIENT_ID=


GITHUB_CLIENT_SECRET=


GOOGLE_CLIENT_ID=


GOOGLE_CLIENT_SECRET=


NEXTAUTH_URL=


MONGO_URI=


NEXTAUTH_JWT_SECRET=


NEXTAUTH_SECRET=

```

11. Start the app

```
npm run dev

```

## 💻 Built with

Technologies used in the project:

- ReactJS
- NextJS
- NodeJS
- ExpressJS
- TailwindCSS
- Next auth
- MongoDB
- Mongoose
- Lodash

## GitHub

[View Github](https://github.com/samarbadriddin0v/twitter-clone?ref=reactjsexample.com)
[Javascript] - [Part 1] - Prototype
Tags: javascript, node
Published: 2023-11-23 00:22:29

"prototype" is called "a reference to another object". From where? From any javascript object.

So, prototype is a parent from your custom object.

If none parent is set, then the parent is the object "Object". 

And this parent points to primitive type "null". 
```
const b = { b: 1 }

b // the custom object
b.__proto__ // the parent "Object"
b.__proto__.__proto__ // null
```

> _\_\_proto\_\_ gets an object prototype from the object itself!_

Just it. Here we have what is called "prototype chain".

But, be careful, as we said before, every object point to the same parent "Object".

```
const custom1 = {c1:1}
const custom2 = {c2:2}

custom1.__proto__.myNewProp = 2

console.log(custom2.myNewProp) // prints: 2
```

Good luck! ;)
Securing Windows and Linux: PowerShell vs. Python - Cybersecurity Comparison
Tags: cybersecurity, scripting
Published: 2023-10-09 03:07:31

---
title: Securing Windows and Linux: PowerShell vs. Python - Cybersecurity Comparison
published: true
date: 2023-11-23 00:00:00 UTC
tags: Cybersecurity,Scripting
canonical_url: https://simeononsecurity.ch/articles/powershell-vs-python-cybersecurity-comparison/
---

Discover effortless ways to enhance system security with PowerShell and Python in this comprehensive cybersecurity analysis.

[https://simeononsecurity.ch/articles/powershell-vs-python-cybersecurity-comparison/](https://simeononsecurity.ch/articles/powershell-vs-python-cybersecurity-comparison/)
What Are Effective Strategies for Mental Well-Being?
Tags: discuss
Published: 2023-11-23 00:00:00

---
published_at : 2023-11-23 00:00 +0000
---
Share your strategies for improving mental well-being. How do you maintain a healthy mind?
<br>
Follow the DEVteam for more discussions and online camaraderie! {% embed https://dev.to/devteam %}
playtest! playtest! playtest!
Tags: gamedev, writing
Published: 2023-12-24 16:20:48

---
title: playtest! playtest! playtest!
published: true
date: 2023-11-23 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20231123-105-playtest-playtest-playtest/
---

Game designers have been banging their heads against the wall for years with **closed-door creation**.

In fact, this happens to a greater or lesser extent in all creative disciplines, but in video games **the consequences are brutal**.

What do I mean by creating behind closed doors? This:

1. I have an idea for a game. I think it's excellent, so I start creating it.
2. I spend 3 years creating the game I want, it's perfect.
3. I launch it on Steam and it receives bad reviews, so bad that my game is categorized as "Mixed" and therefore Steam stops showing it to new players.

What happened? We designed behind closed doors. We never showed our game to anyone during the development process.

The process of testing our games with _real_ players is called **playtesting** (emphasis on _real_).

The central idea of playtesting is to help develop our games iteratively and incrementally. The loop would go something like this:

1. I design and implement a part of the game.
2. I ask myself specific and general questions about this part of the game.
3. I do playtesting of this game segment with other people.
4. I allow players to give a general opinion and then ask them the specific questions I want to answer.
5. I collect the data, analyze it, and make decisions: is the game okay or does something need to change?

This may be an oversimplification of the process, but it more or less goes like that.

I want to propose here that narrative games are no different from other games, although they pose their own problems. I'll leave you some questions here, if there's one that catches your attention and you have opinions about it, please respond to this email and tell me!

- What things are important to playtest when we talk about narrative games?
- If narrative is about creating a mental model in the player's brain, how can we test that? Are we generating the mental model we want in the player's mind?
- If we have branching or probabilistic narrative elements, how do we test that all paths/possibilities are interesting?
- What do we do if a player tells us: "here you forced me to do this, but I wanted to do something else"?
- How do I test part of my game if the stories need to be complete to see if they work?

I will be addressing some of these issues in future emails because they seem crucial: there's a chance that one might write a book and people like it so much that it doesn't need to be modified, but, in my experience, this doesn't happen with video games.
Mastering Focus: Are You Distracted?
Tags: discuss, codenewbie, beginner
Published: 2023-11-23 00:00:00

---
published_at : 2023-11-23 00:00 +0000
---
What strategies do you use to overcome distractions and stay focused while coding? <br> Follow the CodeNewbie Org and #codenewbie for more discussions and online camaraderie! {% embed https://dev.to/codenewbieteam %}
Tests, Tests Everywhere
Tags: test, testdev, tutorial
Published: 2023-11-22 23:44:28

In these series we will **test** a simple **Hello World** using the most popular programming languages.

{% github rogervinas/tests-everywhere no-readme %}

For each case we will implement this simple logic:
![Implementation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjvork066nuon1g4nus5.png)

And we will test both **HelloMessage** ...
![HelloMessageTest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeinbxw78b95gh5faw0o.png)

... and **HelloApp**:
![HelloAppTest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbpp3fqvauh0opcxcvd9.png)

Happy Testing! 💙