teleren/devto huggingface dataset:
React Custom Hook: usePrevious
Tags: webdev, javascript, programming, react
Published: 2023-08-24 21:00:00

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "usePrevious" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Github: https://github.com/sergeyleschev/react-custom-hooks
```javascript
import { useRef } from "react"

export default function usePrevious(value) {
    const currentRef = useRef(value)
    const previousRef = useRef()
    if (currentRef.current !== value) {
        previousRef.current = currentRef.current
        currentRef.current = value
    }
    return previousRef.current
}
```
The advantages of using **usePrevious** are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes. By comparing the current and previous values, you can easily detect and respond to changes in your component's data.

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for your application's logic.

Let's take a glance at how usePrevious can be used in practice. Consider a React component called PreviousComponent, where we have a count state, a name state, and a button to increment the count and change the name. By incorporating usePrevious, we can effortlessly display the current count alongside its previous value, enabling users to visualize the count's changes at a glance.
```javascript
import { useState } from "react"
import usePrevious from "./usePrevious"

export default function PreviousComponent() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState("Sergey")
    const previousCount = usePrevious(count)
    return (
        <div>
            <div>
                {count} - {previousCount}
            </div>
            <div>{name}</div>
            <button onClick={() => setCount(currentCount => currentCount + 1)}>
                Increment
            </button>
            <button onClick={() => setName("John")}>Change Name</button>
        </div>
    )
}
```
Throughout this article series, we focused on one of the gems from the collection of React custom hooks – "_usePrevious_". This hook, sourced from the "react-custom-hooks" repository, revolutionizes how we work in our React applications.

Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4
Returning to Angular
Tags: angular
Published: 2023-08-24 20:57:58

I've been around the block, from Vue to React the Svelte and a long time ago, Angular. I have grown to love single file components and the productivity that brings, remembering that all the dogma, that's just for us the developers, so why not make the most efficient path.

So here are my tips to go from the above back to angular and not feel quite so itchy.

## Learn from the best:

In Svelte, the default project structure is flat, pretty much, you put your components in the src folder, I have always liked more how Vue does it with a components folder and the app root being the root of src:

![Vue default structure](https://i.stack.imgur.com/OQRZN.png)
  
Now I once listened to a video that explained Angular teams idea of all components files in their related folders including tests.

I cant shake that test need to be away from src, I also dont like navigating between lots of files its quite disruptive, Single file components are immersive.

**So this is my setup:**
```json
...
"schematics": {
        "@schematics/angular:component": {
          "inlineStyle": true,
          "inlineTemplate": true,
          "skipTests": true,
          "path": "src/app/components",
          "flat": true
        }
      },
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahe25oain1qjpvn7evb9.png)

## My feelings
Much as I say that one is not better than another and it depends, I do have my personal preferences.

I lean havily away from complexity and magic and more towards simplicity, Svelte really really scratches that itch. Angular not so much, but I understand why its used, standards are indeed productive... probably, have I got any analytics on how fast it is to develop one over another, no not really.
Vue by the way is probably smack bang in the middle, I have enjoyed it.

I don't talk about React, its not bad, but I think Stencil does JSX better.

## Final thoughts
Now for those unaware, most solutions these days support TypeScript - this means one less criteria to judge Angular against, we can look at it at OOP slightly overly complex compared to others.

Many thanks :)
📃 | Understanding The Limits Of Creating Posts On The DASC©️ Google Group
Tags: communitysupport, dasccommunity
Published: 2023-08-24 20:53:36

It Just Takes a Few Lessons that Have to be Learned at The [at the DASC©️ Google Group](https://groups.google.com/g/discord-account-support-corporation) 

So Consider Yourself Making a Post On The DASC©️ Google Group 

```
Consider it a A Possibility in getting a Post Approved By a Manager that reviews posts
```

`While You May Post Whatever You Want Or about Yourself or the Company You Own Or Organization you Own`

**DASC©️ Community Guidelines say you that you Should not post about your Organization you own the The Company You Work For or you can’t write about yourself including Your Hobbies + more** 

While You May Already Have viewed The Community Guidelines though you still have to abide by them All the Time no matter what when you create a Post at DASC©️
Solar battery usage
Tags: blog, electronics, solar
Published: 2023-08-25 15:04:22

---
title: Solar battery usage
published: true
date: 2023-08-24 20:34:10 UTC
tags: Blog,Electronics,Solar
canonical_url: https://ncot.uk/solar-battery-usage/
---

It’s a crappy cloudy day today. There was about enough sunlight to power the house, but not enough to also charge the batteries.

![](https://ncot.uk/wp-content/uploads/2023/08/image.png)

The sharp downward slope just after 5pm is when I cooked tea and then turned the TV on. That also appears to be a thing. The TV doesn’t use much power really, but if I leave it on for six hours, it does.

Here’s the 18th of August. On the 18th of August I managed to completely drain the batteries before midnight.

![](https://ncot.uk/wp-content/uploads/2023/08/image-1-1024x798.png)

This was partly due to there being constant cloud cover and it raining non-stop all day and the panels barely making any power. But the slope is still a bit steeper than normal. That’s because we forgot to switch the PS4 off that had done an update and was then in the middle of a game for some reason.

The 23rd of August was an odd day. Also cloudy and overcast, but then the sun came out just long enough to fully charge the batteries again.

![](https://ncot.uk/wp-content/uploads/2023/08/image-2.png)

The day before was a good one too. Sunny all day to keep the batteries full, then I turned the oven on for a few hours to cook tea and bake a pie.

![](https://ncot.uk/wp-content/uploads/2023/08/image-3-1024x830.png)

I think all this means that in Winter when it’s grey and shit for the whole of December I will have enough battery to run the house all day if we’re careful with power. And if the sun comes out for a few hours sometime before mid-day it’ll charge the batteries up again.

I still feel like I want to stick another panel on my shed and have better batteries in there. The panels on the house catch the morning sun, the one on the shed gets the afternoon sun until the house shades the garden. But then as I discovered last winter, the shed panel doesn’t make a lot of power and the AGM batteries don’t have much capacity. Replacing them with lithium iron phosphate would be good, but be expensive.

<!-- YARPP List -->
### Related posts:

1. [Shut up you noisy inverter](https://ncot.uk/shut-up-you-noisy-inverter/ "Shut up you noisy inverter")
2. [Home Assistant Solar Monitoring](https://ncot.uk/home-assistant-solar-monitoring/ "Home Assistant Solar Monitoring")
3. [Crap quality USB cables](https://ncot.uk/crap-quality-usb-cables/ "Crap quality USB cables")
Setting Up Laravel 10 on Windows
Tags: laravel, webdev, beginners, tutorial
Published: 2023-08-24 20:27:45

I have been using Laravel on GNU/Linux for sometime now and the installation process has been quite smooth. 
I however tried installing Laravel on Windows and I kept getting errors such as...

```
Your requirements could not be resolved to an installable set of packages.
```

```
The zip extension and unzip/7z commands are both missing, skipping.
```
If you are getting these same errors then this article is for you.
This article assumes that you have already tried setting up Laravel using composer but got errors in the process.

To solve it:
1. Install 7-zip 

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



2. If you are using composer to setup your laravel project, use this CLI command

```
composer create-project laravel/laravel example-app --ignore-platform-req=ext-fileinfo
```
Remember to replace example-app with your project name


And that's it. If you have tried this and it still doesn't work, feel free to hmu.

Happy Coding :)
Twitter X Logo for Bootstrap Icons
Tags: bootstrap, icons, webdev, css
Published: 2023-08-24 20:25:13

I just needed the new Twitter X Logo now for a project that uses the Bootstrap Icon Library. So I created a workaround that should work until the logo is officially included in the Bootstrap Icons.

With this CSS snippet, you can use the new Twitter X Logo in your project. The downside: it's a quick and temporary solution, and therefore you have to resize the icons manually. The default size is 16x16 pixels.

## How does it work?
To make it as simple as possible, I simply created a new CSS class "bi-twitter-x". I previously converted the SVG Twitter X logo into a string, which I shortened for the article. You can find the full code in the CodePen. The image is used as background image and is always squared using the CSS property "aspect-ratio". Therefore only the height has to be adjusted to scale the logo.

```css
/* New Class: bi-twitter-x */

.bi-twitter-x:before{
  content:'';
  background-image: url('data:image/svg+....);
  background-size: cover;
  height: 16px;
  aspect-ratio: 1 / 1;
}
```

## Sizing is not easy, because it's not a web font (yet)
I have added some custom size to fit the logo to the size of the headlines. You can adapt these classes to your project if you like.

```css
/* Example: Standalone logo sizes */

h1 .bi-twitter-x:before,
.fs-1 .bi-twitter-x:before{
  height: 40px;
}
h2 .bi-twitter-x:before,
.fs-2 .bi-twitter-x:before{
  height: 32px;
}
h3 .bi-twitter-x:before,
.fs-3 .bi-twitter-x:before{
  height: 28px;
}
h4 .bi-twitter-x:before,
.fs-4 .bi-twitter-x:before{
  height: 25px;
}
```
## CodePen Twitter X Logo for Bootstrap Icons
{% codepen https://codepen.io/typo3-freelancer/pen/GRPpKqR  %}

## Do you like my Stuff?
Sign up for my Newsletter: https://simonkoehler.com/newsletter

Thanks for reading! (100% human written mthrfckrs!)
Articles to read - Week 34/2023
Tags: devops, architecture
Published: 2023-08-24 20:16:48

Here are some of the articles I've read and want to keep track.

- You have logs, I guess. How can you understand what's happening? [Read every error. You can't read every error](https://basta.substack.com/p/read-every-error-you-cant-read-every) -- [Matt Basta](https://substack.com/@basta)  

- Have you ever heard about [RBAC x ABAC](https://www.cloudflare.com/learning/access-management/role-based-access-control-rbac/)? I was trying to understand how to play with different roles or access level when building information systems. Do you use any framework that helps when configuring or building this in your systems? Please share! 

- You are a software developer like me, right? Do you develop products and maintain and keep all happening with security standards? I was reading more about CISO e security topics. [The CISO’s Guide to Data Loss Prevention: DLP Strategy Tips, Quick Wins, and Myths to Avoid](https://www.digitalguardian.com/blog/ciso%E2%80%99s-guide-data-loss-prevention-dlp-strategy-tips-quick-wins-and-myths-avoid).
  
- How can we move to a place where we are able to evolve as we are learning from our practice and our principles and values? [Prescriptive Agile / Stuck in Shu](https://www.industriallogic.com/blog/prescriptive-agile-stuck-in-shu/).

-- Daniel Wildt

P.S.: If you would like to suggest articles for me, please feel free to do it!
Capsolver Extension - Solve Cloudflare in your browser
Tags: javascript, captcha, solver
Published: 2023-08-24 20:14:13

![Solve Cloudflare Challenge / Turnstile in your browser](https://assets.capsolver.com/prod/images/post/2023-08-22/3606bb74-edf7-44a0-b598-055bf66ab091.png)


## ☄️ Step 1: Obtain Capsolver API Key
Before you can solve Cloudflare Challenge / Turnstile Captcha in your browser, you need to have some requeriments to be able to solve reCaptcha.

**⚙️ Requeriments:**
- Capsolver API Key
- Funds in your API Key
- Capsolver Extension

### How you can obtain your API Key?
1. [Register on capsolver](https://dashboard.capsolver.com/passport/register) or [Login on capsolver](https://dashboard.capsolver.com/passport/login)
If you are already registered or logged, skip this step. 
2. Copy your API Key 
![](https://assets.capsolver.com/prod/images/post/2023-08-10/981efd6d-f295-475e-afe7-e09aaff54b10.png)

## 🤯 Step 2: Install Extension on your Chrome
1. [Download the extension](https://chrome.google.com/webstore/detail/capsolver-captcha-bypass/pgojnojmmhpofjgdmaebadhbocahppod)
2.  Paste the API Key that you previously copied.
   ![Solver Cloudflare Captcha](https://assets.capsolver.com/prod/images/post/2023-08-22/438e2d2d-93f5-4141-95f3-9ff59beced30.png)
3. Now you will be able to solve Cloudflare Challenge / Turnstile captcha without effort!
5. Go to [Demo Cloudflare Turnstile](https://react-turnstile.vercel.app/basic)
6. Put in 'Demo Site Key Type' , 'the Force Interactive challenge', like the picture:
![Setup page for solve Cloudflare](https://assets.capsolver.com/prod/images/post/2023-08-22/7280d402-0bc9-4b99-9924-3c59ddbbb784.png)
7. Capsolver extension will automatically solve the tursntile captcha, if you want to keep testing, click the button 'reset'
8. Enjoy!
Set up a Node.js project + TypeScript + Jest using ES Modules
Tags: node, typescript, jest, esm
Published: 2023-08-24 20:04:45

## TL;DR

In this tutorial, you will learn how to configure your Node.js app with TypeScript + Jest using ECMAScript modules (ESM).

What are ECMAScript modules?

> ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements. - [nodejs.org](https://nodejs.org/api/esm.html#introduction)

As the description says, it is the official standard format. To know more about the differences and benefits there are plenty of articles talking about it. The intention here is to show you how to set up as smoothly as possible your app.

---

## Let's set it up 🔧

---

### Prerequisites

* Node.js >= v18.12.0

---

### Initial steps

```
mkdir app-esm
cd app-esm
npm init -y
```

---

### Install dev dependencies

```
npm install --save-dev typescript@5.1.6 ts-node@10.9.1 ts-jest@29.1.1 jest@29.6.2 @types/jest@29.5.3
```

---

### Initialize TypeScript

```
npx tsc --init
```

---

### Set up project folder structure
```
app-esm/
├── __test__/
│   └── index.test.ts
├── src/
│   └── index.ts
├── jest.config.ts
├── package.json
└── tsconfig.json
```
_P.S._ create manually **jest.config.ts**

---

### Configuration steps

* **package.json**
```json
{
  ...
  "type": "module",
  "scripts": {
    "build": "tsc",
    "test": "node --experimental-vm-modules node_modules/.bin/jest",
    "start": "node dist/index.js"
  },
  ...
}
```

* **tsconfig.json**

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "./*.ts", "__test__"]
}
```

* **jest.config.ts**

```typescript
import type { JestConfigWithTsJest } from "ts-jest";

const config: JestConfigWithTsJest = {
  verbose: true,
  transform: {
    "^.+\\.ts?$": [
      "ts-jest",
      {
        useESM: true,
      },
    ],
  },
  extensionsToTreatAsEsm: [".ts"],
  moduleNameMapper: {
    "^(\\.{1,2}/.*)\\.js$": "$1",
  },
};

export default config;
```

* **That's it!** Now you can start coding without bothering with the setup part. 🍺

##### _P.S._ you can refer to this [template](https://github.com/manganellidev/dev.to/tree/main/app-esm-jest). There you will find some jest tests with mock examples.

---

### Useful links
* [Node.js ECMAScript Modules](https://nodejs.org/api/esm.html)
* [Typescript ECMAScript Module Support](https://www.typescriptlang.org/docs/handbook/esm-node.html)
* [Jest ECMAScript Modules](https://jestjs.io/docs/ecmascript-modules)
* [TS Jest ECMAScript Module Support](https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/)

---

### Tutorials that might interest you as well
* [Set up Hot Reload for Typescript ESM projects](https://dev.to/mangadev/set-up-hot-reload-for-typescript-esm-projects-42en)

---

I hope this tutorial helps you focus on what really matters. 

Thank you for reading! Happy coding! 🥳
How to Get More Views on TikTok
Published: 2023-08-24 19:59:17


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

New to TikTok? Whether you are a beginner to TikTok or if you are struggling to get views on your videos, the social media site is worth investing your marketing dollars in. 

TikTok records the highest Social engagement rate per post.

Tiktok has considerably more engagement than Instagram or Youtube. For example, micro-influencers have engagement rates of 17.96% on TikTok, 3.86% on Instagram, and 1.63% on Youtube.

Views are important on TikTok as they can create a snowballing effect. That is the more views a video gets, the more likely it will be served to larger audiences. 

But more importantly, the TikTok algorithm relies on how a user views and interacts with your video (watch time and engagement) to learn if they should display your video. 

In this article, we will be covering everything essential about marketing on TikTok. But first, let’s understand TikTok’s definition of a view... [Read More](https://shorturl.at/uFPZ2)
Tips For How To Get More YouTube Views
Published: 2023-08-24 19:54:54


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

Ask any creator who is active on the platform and they will quickly confirm that increasing real, organic YouTube views and growing a dedicated subscriber base takes time, skill, and dedication. However, with the right audience development strategy, tools, and mindset, any video creator can build an engaged fan base when they understand what YouTube viewers want to watch, and what they will keep returning to YouTube to watch more of.

Making content you are passionate about is just the first step. You need to know how to reach the right audience and get your videos discovered. Remember - viewers love YouTube and will spend HOURS watching the videos they really care about. Understand what your audience wants and double-down on those videos so viewers will flock to your channel.

Even though there are over 50 million channels on YouTube, there are still incredible opportunities for every single creator to build a dedicated audience, generate a huge number of views and subscribers, and reach out to over 1.9 Billion users who visit YouTube every day. But to build an authentic strategy around subscriber and view growth it's important to remember that:

YouTube wants the viewer to stay on the platform as long as possible
If your content keeps viewers around (on your own channel or elsewhere on the site) YouTube may start to promote your content in search results or 'Suggested Videos'
More exposure on YouTube should lead to more views and a higher subscriber growth rate
You can increase your chance of YouTube suggesting your content by increasing your Watch Time and Click-Through Rates
All the above takes knowledge, patience, and dedication... [Read More](https://shorturl.at/qvwVZ)
🦜🔗 Track Package Delivery w. Langchain Agent Custom Tools
Tags: ai, openai, api, showdev
Published: 2023-08-24 19:53:48

## ☝️ About

Big enteprises build Strategic Plans to project themselves into the future.

[OPT-NC](https://www.opt.nc/) makes no exception and has recently designed its own called _"Construire demain"_:

{% embed https://office.opt.nc/fr/strategie/construire-demain-OPT-2025 %}

A strategic plan may have a lot (maybe plenty) of points... and in the mean time should be resumable into a very few keypoints -let's say 3 -,

> **_so anyone can understand and talk about the big picture with ease._**

👉 With this post, we'll **dive into a journey** where, with the help of various AI driven tools, we will:

1. **📚 Chat** with the plan itself
2. **🤔 Imagine** a near future
3. **💡 Pitch** an idea
4. **🗣️ Explain & Implement** the idea
5. **🕹️ Play** with the prototype
6. 🎯 Loop back on strategic plan to **how it fits**
7. 🔭 Think about other **opportunities**

## 💭 About Chatbots & Primary Customer Service

Below some context about ChatBot based service, good to knonw before delivering such services in production:
[
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csielgyveszrsp54a9n7.png)](https://www.gartner.com/en/newsroom/press-releases/2022-07-27-gartner-predicts-chatbots-will-become-a-primary-customer-service-channel-within-five-years)

## 🧰 Tools

We will use many tools here:

- [🧠 `Quivr`](https://www.quivr.app/) as "the brain" of the Strategic Plan, which holds the knowledge of what the plan we have stored in
- [🦾 `OpenAI`](https://openai.com/) : the API that will give us the `LLM`, the engine that will _"do the job"_
- [🤖 `ChatGPT`](https://chat.openai.com/) : for casual question or little explanations (eg. _"What's a `LLM` ?"_)
- [🦜🔗 `Langchain`](https://python.langchain.com/) : the framework, the "glue" we will use to interact with the `LLM`
- [😽 `Kor`](https://github.com/eyurtsev/kor) : A tool to extract structured data out raw unstructured text

## 🎯 What we'll do

In this demo, we'll see how to build very custom tools (add our very own ones) to achieve specific customer-centric  tasks... but operated by autonomous AI-driven agent.

At the end, we'll get a kind of connected chatGPT.

## 📽️ Demo

{% youtube BN5Fdtvu21Q %}

## 🤯 What Ive learned and reflexions

- **Trust** LLM capabilities (experiment early with tools)
- **Screenwriter** role
- Customer **Experience Designer**
- Designing **Custom Tools**
- About **static content** : fallback
- Agent **Contextualizaiotn**
- Agent **design**
- Agent & tools unit testing
- Chatbot KPIs

## 📚 Must-reads

- [Digital Humanism: For a Humane Transformation of Democracy, Economy and Culture in the Digital Age](https://www.goodreads.com/book/show/122035634-digital-humanism)
- [A World Without Work: Technology, Automation, and How We Should Respond](https://www.goodreads.com/book/show/51300408-a-world-without-work)
- [🎯 Data strategy for (not so) dummies](https://dev.to/optnc/data-strategy-for-not-so-dummies-1b23)