teleren/devto huggingface dataset:
Bulk Image Converter & Optimizer Tool using React and Electron
Tags: tool
Published: 2023-12-06 09:14:23

---
title: Bulk Image Converter & Optimizer Tool using React and Electron
published: true
date: 2023-11-27 00:27:00 UTC
tags: Tool
canonical_url: https://reactjsexample.com/bulk-image-converter-optimizer-tool-using-react-and-electron/
---

 ![Bulk Image Converter & Optimizer Tool using React and Electron](https://github.com/shehari007/BICO-bulk-image-converter-optimizer-tool/raw/main/public/logo.png?raw=true)

# BICO - Bulk Image Converter & Optimizer Tool For Desktop Platform Based on React Electron

## Current Version (v0.1.5) Last Updated (02/10/2023)
 ![Bulk Image Converter & Optimizer Tool using React and Electron](https://reactjsexample.com/content/images/2023/11/Code_2023-11_14-22-20.jpg)

Tool for converting bulk images supporting all image format and allow user to adjust dimensions, quality, animation, compression and many more options to discover.

## Tech Stack

**CLIENT:** React, Hooks, Ant Design 5+, Electron, Node

## Features

- Supports all various image formats (webp, jpg, png, tiff, jp2, heif, avif, jxl, raw, gif).
- Single form settings to select options for desired output.
- Uses Multi Threaded Task for quick compression and output for larger files.
- Generates a single Zip file of all converted images.
- Added Grayscale image conversion support (02/10/2023)
- Added avif with losseless compression support (02/10/2023)
- Supports Hardware acceleration.
- Shows a Table of selected files in an organized way.

## Pre Requirements For Local Development

- React 18+
- Node, NPM
- VSCODE With ES6+ Module

## Installation

Clone the project

```
git clone https://github.com/shehari007/BICO-bulk-image-converter-optimizer-tool.git
```

Go to the project directory

```
cd BICO-bulk-image-converter-optimizer-tool
```

Install dependencies

```
npm install
```

Start the Electron Project in Windows

```
npm run electron:start
```

Project will open in window mode not in browser as normal react app would, Happy Hacking!

## Deployment

Deployment is never been easy before, package.json is already configured for every platform (Window, Linux, MacOs). Just need to run build commands for each platform as follows:

## For Windows

```
npm run electron:package:win
```

## For Linux

```
npm run electron:package:linux
```

## For MacOS

```
npm run electron:package:mac
```

Running these commands will give you a package file (Windows->NSIS .exe) || (Linux->.deb) || (macOS->.dmg).

## License

[MIT](https://choosealicense.com/licenses/mit/)

## GitHub

[View Github](https://github.com/shehari007/BICO-bulk-image-converter-optimizer-tool)
How to save time using Python Decorators
Published: 2023-11-27 00:01:06

What are decorators in Python? Why are they useful?

Let's say I'm building a Python project and I want to know how long it takes for each of my functions to run. I could build timing functionality within each of my functions but what if I have hundreds of functions? That would take far too long.

Instead I'm going to create a function to do it for me. Let's call it `timer` and give it another function as an argument. Inside, we'll define a function called `wrapper`. Next let's define a variable that stores the start time. And finally we'll run the function that's passed into `timer`. 

After the function has executed we can determine how long it took by taking the current time and subtracting the starting time from it. Next we can print that it took t2-t1 seconds to execute. Finally let's return the wrapper function. 

```
import time 

def timer(func):
    def wrapper():
        t1 = time.time()
        func()
        t2 = time.time() - t1
        print(f'{func.__name__} ran in {t2} seconds')
    return wrapper

@timer 
def execute_this():
    time.sleep(1.3)

@timer 
def execute_that():
    time.sleep(.4)

execute_this()
execute_that()
```

Now finally on the to decorator!

Let's put `@timer` above each of the functions we want to time. Python sees this `@` symbol and understands the following function needs to be passed into a function named after the @ symbol, in this case `timer`.

The function `execute_this` runs in `timer` with the t1 and t2 variables determining the run time of each function. As you can see, reusing the `timer` function as a decorator allows us to save time and code as we expand our project and add many more functions that need to be timed.
Can You Transform Your Life in 6 Months?
Tags: discuss
Published: 2023-11-27 00:00:00

---
published_at : 2023-11-27 00:00 +0000
---
Can you transform your life in 6 months? What would you do? Share your plans and aspirations.<br>
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
Can Empathy Make You A Better Coder?
Tags: discuss, codenewbie, beginner
Published: 2023-11-27 00:00:00

---
published_at : 2023-11-27 00:00 +0000
---
What role does empathy play in achieving coding excellence? Share examples and insights on the importance of empathy in coding.
<br>
Follow the CodeNewbie Org and #codenewbie for more discussions and online camaraderie!
{% embed https://dev.to/codenewbieteam %}
Good bye sleep() and delay() with NodeJS, hello setTimeout()
Tags: node
Published: 2024-07-06 14:30:50

---
title: Good bye sleep() and delay() with NodeJS, hello setTimeout()
published: true
date: 2023-11-27 00:00:00 UTC
tags: ["nodejs"]
canonical_url: https://blog.lepape.me/good-bye-sleep-and-delay-with-nodejs-hello-settimeout
---

Stop to use home-made utilities sleep() and delay(), and use the native nodeJS timers API: setTimeout().

I have seen and added many times in nodeJS codebase the following snippet:

```ts
const sleep = (ms) =>
  new Promise((resolve) => setTimeout(resolve, ms));
```

Well, [today I learned](https://github.com/nestjs/terminus/pull/2422) that nodeJS has a native API for that: `setTimeout()`.

```ts
// https://nodejs.org/api/timers.html#timerspromisessettimeoutdelay-value-options
import { setTimeout } from 'node:timers/promises';

await setTimeout(2000); // sleep 2s
```

So time to stop to use home-made utilities `sleep()` and `delay()`, and use the native nodeJS timers API!
Consistent warnings between IntelliJ and Metals
Tags: scala
Published: 2023-11-26 23:30:35

---
title: Consistent warnings between IntelliJ and Metals
published: true
description: While IntelliJ shows a bunch of warnings out of the box in their IDE, Metals requires some settings. To Metals to show warnings you have to add scalac options.
tags: scala
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-26 23:22 +0000
---

Maybe your team, some people use IntelliJ and other people use Metals.
While IntelliJ shows a bunch of warnings out of the box in their IDE, Metals requires some settings (like unused imports).

Metals' warnings depends on Scala compilers warnings, while IntelliJ uses its own typechecker and shows them out of the box.
Which means, we have to add some `scalacOptions` to scala compiler such as `scalacOptions ++= Seq( "-Ywarn-unused:imports")` (for unused imports).

For Scala2, this blog post might be a good read [Make Your Scala Compiler Work Harder | by Dick Wall | Life at Hopper | Medium](https://medium.com/life-at-hopper/make-your-scala-compiler-work-harder-971be53ae914)
Little bit Git...
Tags: git, github, opensource, devops
Published: 2023-11-26 23:22:52

Getting started head on...


## git log ##
I was working on some project, the conflict error occured again and again while I was trying to push. So, I decided to use `rebase` and move ahead with the problem but I needed to git see the commit history before I could use `git rebase` so what command did I use back then?

Before you move forward!!!

Think hard...

The answer is this👇

```
git log <branch-to-rebase-onto>..HEAD
```
where `<branch-to-rebase-onto>` is replaced with the branch where I have to rebase it onto(generally it's `origin/master`)

## git stash ##

I was trying to setup an environment for some open source project, which needed installation of **Vagrant**(it's a Virtual Machine Environment in simple words). While doing the setup of the environment, I went through several Errors! 
I solved some with the help of my helpful brother   and some on my own but then in the end, I figured out that some Changes that I made in my configuration file for Vagrant were not suitable for pushing to the origin of the main repository for that open source project.

_In Short, there were some Changes specific for my own system(not suitable for a public repository)_

Now I needed to add my changes to git commit without adding that configuration file, which command did I use to ignore that particular file?

The answer is this👇

```
git stash
```

If you want to reapply the changes back to the working directory, use this command👇

```
git stash pop
```

## Stash Apply ##

There was a time when I wanted to restore some previously stashed work to a new Branch using git, How did I do it?

The answer is this👇

- 
**Create a New Branch:**
```
git checkout -b new_branch_name
```

- 
**Apply Stashed Changes:**
```
git stash apply
```

or

I can use this👇

```
git stash branch new_branch_name
```
where `branch` and `new_branch_name` are the branches from which you are taking stashed changes from and the branch you are pushing it to respectively

## Tags: ##

Tags are necessary to mark specific points the history of the commits!
Releases are one important example

To push tags to a remote repository:

```
git push origin <tagname>
```

replace `tagname` with whatever tag you want to paste

## git diff: ##

To review the changes that are currently staged (in the index) before committing them, use this👇

```
git diff --cached
```



If you have any feedback, then you can DM me on [Twitter](https://twitter.com/DhruvTr89566170) or [Linkedin](https://www.linkedin.com/in/dhruv-trivedi-06a767228/).
Mengatasi Path Include PHP yang Dianggap Salah Path
Published: 2023-11-26 23:13:00

---
title: Mengatasi Path Include PHP yang Dianggap Salah Path
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-26 23:05 +0000
---

Untuk menggunakan include di PHP, kita biasanya menggunakan kode seperti ini:

```php
<?php include "./footer.php" ?>
```

Misalnya aja file PHP tersebut kita panggil dari `index.php`. Jadi, posisi filenya seperti ini:

```
index.php
footer.php
```

Tapi, akan menjadi masalah jika file yang kita include, melakukan include lagi pada lokasi lainnya. Contohnya seperti ini:

```
index.php (include) komponen/footer.php
komponen/footer.php (include) keterangan.php
```

Nah, kita pasti di `komponen/footer.php` menuliskannya seperti ini:

```php
<?php include "../keterangan.php" ?>
```

Ketika kita membuka `localhost/komponen/footer.php`, dia works. Tapi, ketika membuka `localhost`, dia akan error pada bagian footer tadi karena  kita memanggil seperti ini yang dibaca oleh server: `localhost/../keterangan.php`, bukan `localhost/keterangan.php`.

Solusinya adalah menambahkan `dirname(__FILE__) . "/"`. Jadinya seperti ini:

```php
<?php include dirname(__FILE__) . "/" . "../keterangan.php" ?>
```
Software for Education
Published: 2023-11-26 23:12:10

There are numerous software applications designed to enhance and support education across various levels and subjects. The choice of software depends on the specific educational goals and requirements. Here are some categories of educational software along with examples:

**Learning Management Systems (LMS)**:

**Moodle**: An open-source LMS that supports online learning and course management.
**Canvas**: A widely used LMS with features for course creation, collaboration, and assessment.
Content Creation and Authoring Tools:

**Articulate Storyline**: A tool for creating interactive e-learning content.
**Adobe Captivate**: Enables the creation of e-learning content with multimedia elements.
Educational Games and Simulations:

**Kahoot!**: A game-based learning platform that makes learning fun through quizzes and games.
**Minecraft Education Edition**: A version of Minecraft designed for educational purposes, encouraging creativity and collaboration.
Collaboration Tools:

**Google Workspace for Education**: Includes tools like Google Docs, Sheets, and Classroom for collaboration and communication.
**Microsoft Teams for Education**: A platform for collaboration, communication, and assignment management.
Virtual Learning Environments:

**Blackboard**: A comprehensive platform for creating virtual learning environments and managing online courses.
**Schoology**: A learning management system with features for collaboration, assessment, and communication.
STEM Education Software:

**Scratch**: A visual programming language and online community for creating interactive stories, games, and animations.
**Labster**: Provides virtual labs for science education, allowing students to conduct experiments in a virtual environment.
Language Learning Software:

**Duolingo**: A language-learning platform that includes a language-learning website and app, as well as a digital language proficiency assessment exam.
**Rosetta Stone**: Known for its immersive approach to language learning.
Adaptive Learning Platforms:

**Knewton**: Offers adaptive learning technology to personalize educational content based on individual student needs.
**Smart Sparrow**: Provides adaptive e-learning platforms for creating interactive and personalized courses.
Specialized Educational Software:

**Autodesk Education Software**: Tools for students in architecture, engineering, and design fields.
**MATLAB**: Software for numerical computing and programming used in various educational disciplines.
Virtual Reality (VR) and Augmented Reality (AR) Apps:

**Google Expeditions**: Takes students on virtual trips and provides immersive experiences.
**Merge Cube**: An AR tool that allows students to interact with digital objects in the physical world.
When selecting educational software, it's essential to consider factors such as the target audience, educational objectives, ease of use, and compatibility with existing systems.
Massive 4K Resolution Woman & Man Class Ground Truth Stable Diffusion Regularization Images Dataset
Tags: sdxl, stablediffusion, ai, dreambooth
Published: 2023-11-26 23:03:53

Download link > https://www.patreon.com/posts/87700469

The best ever released Stable Diffusion classification / regularization images dataset just got a huge update.

More than 80,000 Man and Woman images are collected from Unsplash, post processed and then manually picked by me.

I am using ground truth images because they improve realism significantly and further fine tuning model.

You can use for Stable Diffusion LoRA, DreamBooth and Fine Tuning trainings including SDXL or any custom model.

Download link > https://www.patreon.com/posts/87700469


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


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jztutv40jeyf543ajtoo.png)
Self-hosted LanguageTool private instance is an offline alternative to Grammarly
Tags: grammar, privacy, languagetool, docker
Published: 2023-11-26 22:32:00

---
title: Self-hosted LanguageTool private instance is an offline alternative to Grammarly
published: true
description: Run a LanguageTool server in docker and use the official browser extension for privacy-minded grammar corrections.
tags: grammar, privacy, languagetool, docker
cover_image: https://languagetool.org/images/mac_illustration.png
published_at: 2023-11-27 11:32 +1300
---

Setting up LanguageTool is easy. If you have DNS ad blocking enabled then you will want to disable abTesting as described in this post.

## docker-compose.yml
```yaml
services:
  languagetool:
    image: silviof/docker-languagetool:latest
    restart: unless-stopped
    command: java -cp languagetool-server.jar org.languagetool.server.HTTPServer --port 8010 --public --allow-origin '*' --config /etc/http_server.cfg
    ports:
      - 127.0.0.1:8010:8010
    volumes:
      - ./ngrams:/ngrams
      - ./http_server.cfg:/etc/http_server.cfg
```

# Download ngrams

These weigh about `8.3`GB

```bash
mkdir ngrams
wget https://languagetool.org/download/ngram-data/ngrams-en-20150817.zip
(cd ngrams && unzip ../ngrams-en-20150817.zip)
rm -f ngrams-en-20150817.zip
```

# Disable AB Testing

To prevent outgoing network requests to fetch said tests:

```
cat <<EOF > http_server.cfg
languageModel=/ngrams
abTest=null
abTestClients=null
EOF
```
## Start Server

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

## Install Browser Extension

* From Chrome [Web Store](https://chromewebstore.google.com/detail/grammar-checker-paraphras/oldceeleldhonbafppcapldpdifcinji
)
* From [Mozilla](https://addons.mozilla.org/en-US/firefox/addon/languagetool/) 

## Configure Browser Extension

In advanced config set API server to `http://127.0.0.1:8010/v2`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4rouvvqex4eq0fsqfmq.png)
Understanding Programming Concepts: Syntactic Sugar, Magic Number, and Pure Function
Tags: programming, learning, softwareengineering, programmingconcepts
Published: 2023-11-26 22:21:28

I recently heard those three terms: syntactic sugar, magic number, and pure function. So let's share what those mean with the help of chatGPT.

### 1. Syntactic Sugar:

**Definition:** Syntactic sugar is a concept that describes syntax within a programming language that makes code easier to read or express. It doesn't introduce new functionality but provides a more convenient and human-friendly way to write code.

An example of syntactic sugar is the 'for...of' loop in JavaScript, introduced in ECMAScript 2015 (ES6). It simplifies the process of iterating over elements in an array compared to the traditional 'for' loop, making the code more concise and readable:

Traditional for loop:
```javascript
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
```

for...of loop (syntactic sugar):
```javascript
const array = [1, 2, 3];
for (const element of array) {
  console.log(element);
}
```

In this example, the 'for...of' loop serves as syntactic sugar, simplifying the code and enhancing readability without introducing new functionality. It offers a more convenient way to achieve the same result as the traditional 'for' loop.

### 2. Magic Number:

**Definition:** A magic number refers to a numeric literal used directly in the code without explanation or context. Using magic numbers can lead to code that is less maintainable and prone to errors, as their purpose may not be immediately clear.

**Example:**
```javascript
// Without Explanation
if (temperature > 70 && temperature < 80) {
    // Do something
}

// With Explanation (using named constants)
const MIN_OPTIMAL_TEMPERATURE = 70;
const MAX_OPTIMAL_TEMPERATURE = 80;

if (temperature > MIN_OPTIMAL_TEMPERATURE && temperature < MAX_OPTIMAL_TEMPERATURE) {
    // Do something
```

In the second example, named constants replace the magic numbers, making the code more self-explanatory and maintainable.

### 3. Pure Function:

**Definition:** A pure function is a function that, given the same inputs, always produces the same output and has no side effects. Pure functions play a crucial role in functional programming, promoting code predictability, testability, and parallelism.

**Example:**
```javascript
// Impure Function
let total = 0;

function impureAdd(x) {
    total += x;
    return total;
}

// Pure Function
function pureAdd(x, y) {
    return x + y;
}
```

While `impureAdd` modifies external state (`total`), `pureAdd` only depends on its inputs, making it a pure function.

Understanding these programming concepts not only expands your knowledge but also empowers you to write cleaner, more maintainable code. Whether you're enhancing code readability with syntactic sugar, avoiding magic numbers, or embracing the predictability of pure functions, these concepts contribute to better programming practices.
What happen with my logic?
Tags: programming, beginners, productivity
Published: 2023-11-26 21:35:27

I try think but my mind digress, i can't maintain the focus in short task (mechanical) but complex task i lose the focus.  


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

So, the complex task turn into in some impossible. 

My idea are disorganized and little premeditated. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32dxzuzsxoo7oh89gdk7.png)
Building a Social Platform
Tags: metaverse, social, angular
Published: 2023-11-26 21:00:37

---
title: "Building a Social Platform"
published: true
description: "Connect Social Platform"
series: Connect Social Platform
tags: metaverse, social, angular
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/520fumlon3nlm9rtbb3p.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-26 20:38 +0000
---

Social Platform (Connect)  
* Signing up with Google Bug Fixed. 
* Uploading Images when posting Bug Fixed. 
* Creating & Joining a community bug fixed.  

Join Connect via [https://connect.aiira.co](https://connect.aiira.co)  
Credit: Image is copyrighted to Sacha Goedegebure talk from #BCON23

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/520fumlon3nlm9rtbb3p.png)
How can I improve my skills in C#
Published: 2023-11-26 20:58:36

Hello folks,

I am a qualified software developer and have started a new job two weeks ago. We are developing a compliance software with C#, .NET Framework, HTML, CSS and so on. Now my question: How can I improve my knowledge in these areas privately? Does anyone have great ideas for some projects? Or tips on how I can get involved in communities where I can learn from others. Thanks in advance for your time.



Best Regards,

jp
Building a Web Game Engine: Controls
Tags: metaverse, threejs, angular, rapierjs
Published: 2023-11-26 20:53:42

---
title: "Building a Web Game Engine: Controls"
published: true
description: Web Game Engine with threejs and rapierjs using Angular 
series: Building a Web Game Engine
tags: metaverse, threejs, angular, rapierjs
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkp0gd3hazcei4e6s7sg.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-26 20:38 +0000
---
Devlog Web Game Engine with threejs and rapierjs using Angular 
* Camera Movement (WASD/Arrows), Pan, Zoom & Orbit Changed 
* Added Undo/Redo to Viewport Editor for Scene 
* Added Building System (Pick/Place/Deselect/Delete Object) 
* Modeling Build Assets - floors/walls 
* --plenty errors to fix--

#### Camera Control 
* Orbit - middle mouse or Q & E
* Zoom- ctrl + middle mouse  or scroll mouse wheel
* Pan - shift + middle mouse  or WASD or ArrowKeys
* Reset Camera To Origin - F2

#### Object In Scene
* Pick Object- shift + left mouse
* Place picked Object - left mouse
* Deselect Picked Object /  Reset Grid -  right mouse
* Delete -  shift + right mouse

##### Picked Mode
* Move Grid  - ctrl +mouse-move
* Set Origin to Object - Double Right Click
* Undo/Redo - Ctrl + Z/ Ctrl + Y
* when object is picked, you can move the grid up/down while holding control.
* you can also rotate picked object to face your mouse direction when holding Alt

[https://play.aiira.co](https://play.aiira.co)

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