teleren/devto huggingface dataset:
Virtual Workshop on Low-Code Contributions for Hacktoberfest - Perfect for Beginners!
Tags: hacktoberfest, hacktoberfest23, opensource, beginners
Published: 2023-10-06 06:21:32

We are thrilled to announce a special virtual workshop tailored specifically for beginners, designed to help you make low code contributions for Hacktoberfest. Whether you're taking your first steps in the tech world or looking to dip your toes into open source, this event is your perfect starting point.

Register for the event from [here](https://events.mlh.io/events/10497-hacktoberfest-low-code-contribution-with-grimm-s-alchemy-chamber)

## Event Details:

- Date: 8 October 2023
- Day: Sunday
- Time: 11 AM
- Platform: [Discord](https://discord.gg/ZsNGUK84yk)

## What will be covered in the event :

- What is hacktoberfest and open-source?
- How to register and successfully complete Hacktoberfest ?
- Why contribute to open source?
- Git GitHub basic and first contribution
- How to make low code contributions to our repo

## Important Things to Note:

- This event is tailored for beginners, and we enthusiastically welcome newcomers.
- Please join the live stream on time to ensure you don't miss any beginner-focused insights.
- Have your laptop, and prepare for this hands-on learning experience.
- No prior knowledge is required; we'll guide you from the beginning.
- Create a GitHub account

Our event link will be shared exclusively within our welcoming [Discord community](https://discord.gg/ZsNGUK84yk), which is the perfect place for beginners like you to connect and learn together. Join us there to access the workshop and embark on your open-source journey.
Virtual Workshop on Low-Code Contributions for Hacktoberfest - Perfect for Beginners!
Published: 2023-10-06 06:21:30

We are thrilled to announce a special virtual workshop tailored specifically for beginners, designed to help you make low code contributions for Hacktoberfest. Whether you're taking your first steps in the tech world or looking to dip your toes into open source, this event is your perfect starting point.

Register for the event from [here](https://events.mlh.io/events/10497-hacktoberfest-low-code-contribution-with-grimm-s-alchemy-chamber)

## Event Details:

- Date: 8 October 2023
- Day: Sunday
- Time: 11 AM
- Platform: [Discord](https://discord.gg/ZsNGUK84yk)

## What will be covered in the event :

- What is hacktoberfest and open-source?
- How to register and successfully complete Hacktoberfest ?
- Why contribute to open source?
- Git GitHub basic and first contribution
- How to make low code contributions to our repo

## Important Things to Note:

- This event is tailored for beginners, and we enthusiastically welcome newcomers.
- Please join the live stream on time to ensure you don't miss any beginner-focused insights.
- Have your laptop, and prepare for this hands-on learning experience.
- No prior knowledge is required; we'll guide you from the beginning.
- Create a GitHub account

Our event link will be shared exclusively within our welcoming [Discord community](https://discord.gg/ZsNGUK84yk), which is the perfect place for beginners like you to connect and learn together. Join us there to access the workshop and embark on your open-source journey.
Canning Line
Tags: canningmachine, canningline
Published: 2023-10-06 05:50:28

https://gxcanning.com/canning-line-produce-your-beverage-with-the-best-canning-line/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmb8c2dl3e1e5soc1yq0.jpg)
Server-side rendering with Next.js
Published: 2023-10-06 05:47:13

## What is Next.js?

Next.js is a React framework, which is another layer on top of React to make it easy to build a full-stack web application developed and managed by Vercel. You use React components to build UIs and there are extra features that were added from Next.js.


## Client-side rendering **vs** Server-side rendering.

**- Client-side rendering**

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


React components are rendered on the client side means that UIs are built on the web browser. When there was no concept of Server-side rendering in the React world.

A normal react web application just consists of an empty HTML file with heavy and chunky Javascript files to build UIs so users had to wait until the web browser downloaded the Javascript file to show components on the screen.


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

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

_(Even though there are some UIs on the screen, you can see that there is nothing between the main div tag whose id is "root". This verifies that the content was rendered on the client side.)_

**- Server-side rendering**

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

On the other hand, When React components are rendered on the server side, the HTML of the page is generated on the server side, and HTML, JSON data and javascript instructions are sent to the browser. To make this possible you can use [getServerSideProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) if you are using [Pages Router](https://nextjs.org/docs).
(Next.js introduced App Router after version 13. It might be different to achieve server-side rendering with this version.)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy0vptfzsjgbijqnq1ej.png)
_(Unlike Client-side rendering, you can see HTML tags in the page.)_

In this case, now that React components are built on the server side, users can see the UIs on the screen right away without having to wait for the web browser to build components on the client side.

And then React uses the JSON data and Javascript instructions to make components interactive such as attaching event handlers to a button. This process is called **hydration**.Simply put, components are not functional without the hydration step.
Add `open with fleet` into context menu in linux mint
Tags: linux, ubuntu
Published: 2023-10-06 05:41:39

If you install the Fleet from **JetBrains Toolbox** you can use the config below. Add code below to ~/.local/share/nemo/actions/fleet.nemo\_action

```
[Nemo Action]
Name=Open in Fleet
Comment=Open in Fleet
Exec=/home/USERHOME/.local/share/JetBrains/Toolbox/apps/fleet/bin/Fleet "%F"
Icon-Name=Fleet
Selection=Any
Extensions=dir;

```

Do not forget to change the USERHOME to your user home path. Then in files go to folder you want to open with intellij then right click and choose open in intellij.
Postgresql group by day, week and month examples
Tags: postgressql, mysql
Published: 2023-10-06 05:41:10

at the end of any project there will be a reporting interfaces for numbers/counts. let say you build a advertisement site which gives people to publish their products on the site. they will want to see how many people visited their page in daily basis or weekly.

I used to do this in mysql like this

```sql
    SELECT create_time as Date, count(id) as 'Count', FROM
    views_of_product
    group by date_format(create_time, '%d %m %Y')
    order by date_format(create_time, '%Y-%m-%d') desc limit 7
```

this will nicely show last seven days views. but I needed to do same thing in postgresql. and like other days its not easily to find. I should check other report codes from project but no I allways research on google :) anyway here is my code:

```sql
    select to_char(created, 'YYYY-MM-DD') ,count(id)
    from videos_capture
    group by to_char(created, 'YYYY-MM-DD')
    order by to_char(created, 'YYYY-MM-DD') desc limit 7
```

its not bad actually works like a charm but understanding this code is not that easy. after I found this I started to implement needs and see better and easy to understand solutions.

weekly count example. this will show new users weekly parts for last 3 months:

```sql
    SELECT date_trunc('week', created) AS "Week" , count(id) AS "New Users"
    FROM users
    WHERE created > now() - interval '3 months'
    GROUP BY "Week"
    ORDER BY "Week" 
```

yearly example. this will show monthly 1 year users:

```sql
    SELECT date_trunc('month', created) AS "Month" , count(id) AS "New Users"
    FROM users
    WHERE created > now() - interval '1 year'
    GROUP BY "Month"
    ORDER BY "Month" 
```

I must say understanding postgresql’s sql more easy then mysql. And these sqls are from postgresql 7 :) it maynot work with the latest. Feel free to comment if they are not working.
FORWARDING MESSAGES TO ANYONE
Published: 2023-10-06 05:35:55

Communication has transcended traditional boundaries, and messaging platforms have redefined how we exchange information. A significant feature that has emerged with this paradigm shift is the ability to forward messages without limitations. This practice, exemplified by the term "WhatsApp Aero," signifies the potential of third-party tools to augment messaging experiences, further shaping the dynamics of this phenomenon.

Forwarding messages indiscriminately has introduced a new dimension to digital communication. On the one hand, it offers undeniable advantages. It enables the swift distribution of news, announcements, and multimedia content to a broader audience. This feature has proven invaluable in disseminating information, ranging from urgent updates to socially relevant causes. Moreover, it promotes collaborative efforts, enabling the exchange of ideas and resources at an unprecedented pace.
**[Website](https://quirkyquillsq.blogspot.com/forwarding-messages-to-anyone)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ino3j1dj3dtgu2nijw03.jpg)
Packaging and deploying Zappa applications on M1 silicon
Tags: python, zappa
Published: 2023-10-06 04:56:17

When deploying [Zappa applications](https://github.com/zappa/Zappa), it's possible to package a version during deployment that can manifest is a bunch of missing dependency errors:

```
[ERROR] ImportError: Unable to import required dependencies:
numpy: Error importing numpy: you should not try to import numpy from
        its source directory; please exit the numpy source tree, and relaunch
        your python interpreter from there.
[ERROR] ImportError: Unable to import required dependencies:
numpy: 

IMPORTANT: PLEASE READ THIS FOR ADVICE ON HOW TO SOLVE THIS ISSUE!

Importing the numpy C-extensions failed. This error can happen for
many reasons, often due to issues with your setup or how NumPy was
installed.
[ERROR] ImportError: No module named 'sklearn.__check_build._check_build'
It seems that scikit-learn has not been built correctly.
```

Zappa claims to:

> replace any dependencies with versions with wheels compatible with lambda

...but this doesn't seem to be the case (at least when building on apple M1 silicon). A fix I've found is to package and deploy within a docker container, which seems to work:

```
# Shell into a container.
docker run --platform linux/amd64 -v $(pwd):/builds/ -it python:3.9.18-slim-bullseye /bin/bash

# Create a virtual env to install dependencies.
cd /builds/
python3 -m venv .venv && source .venv/bin/activate

# Install the dependencies and zappa.
pip install -r requirements.txt
pip install zappa

# Add credentials and deploy.
mkdir ~/.aws && echo "creds" > ~/.aws/credentials
zappa deploy dev
```

Ensure that the environment within the container matches that of your lambda deployment:

![Deployed Zappa lambda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4q8owr9ec2pc5mdnfva.png)

* Confirm the 'Architecture' is the same by running `arch` within the container and comparing to the above.
* Ensure the python version matches by running `python --version` and selecting the correct docker container from this list: https://hub.docker.com/_/python/tags
How to Install Custom Android ROM
Tags: android, xiaomi, rom
Published: 2023-10-06 03:46:10

---
title: How to Install Custom Android ROM
published: true
description: install EU ROM for Redmi K30
tags: android, xiaomi, rom
---

I purchased a Redmi K30 from China, and it did not come with Google services. I attempted to install Google services from a third-party source, but it was missing some essential components, such as parental controls. Consequently, I decided to install an EU ROM.

The process was rather intricate, so I've documented the procedures here in case they might be helpful.

## background knowledge

- there are 2 partitions in your phone
  - recovery partition: contain tools to install the android os
  - system partition: where the android os resides

- TWRP: a 3rd party recovery tool
  - can override the stock recovery program
  - allow you to install 3rd party android ROM, eg. EU ROM
  - optionally install to the recovery partition, replace the stock recovery program

- fastboot mode
  - enter by long press volume down and power button
  - for unlock the phone, flash recovery partition... etc

- fastboot tools
  - program to flash the recovery partition with TWRP
  - or directly run TWRP without flashing the original recovery partition

- fastboot mode ≠ fastboot tools

## tools download

- First thing first: check the **code name** of your phone eg. Redmi K30 = phoenix
- xiaomi phone unlock tool + pc driver (pc only) https://en.miui.com/unlock/download_en.html
- fastboot tools (mac/pc) https://provider.xiaomi.eu/tools/fastboot.zip
- TWRP (recovery image, model specific) https://bit.ly/3ZITelV
- EU MIUI rom (model specific) https://bit.ly/45fMmNU

## unlock the phone (pc only)

- enable dev mode on the phone
  - enable OEM unlocking and USB debugging
- install phone driver on PC
- apply phone unlock from xiaomi, using the unlock tool
- ⚠️ wait 7 days ⚠️
  - don't press apply again within 7 days otherwise it will reset the waiting time‼️
- after 7 days, unlock the phone 
  - boot into fastboot mode (long press volume down & power button)
  - unlock with the xiaomi unlock tool

## run TWRP (mac/pc)

- boot the phone to fastboot mode (volume down + power) and connect to computer
- rename the TWRP image to `recovery.img` and put it in the same folder with fastboot binary
- in terminal, run `fastboot boot recovery.img`

- (optional) flash the recovery partition with TWRP
  - do if you want to replace the stock recovery program for good
  - easier to re-install or change the android os in future

- copy the EU rom to phone's root directory
  - you may not see the phone in computer before boot to TWRP
  - mac: use android file transfer
  - pc: use file manager
  - disconnect phone from computer

## install custom ROM

- in TWRP home, press install
- select the rom image(zip file), slide to install
- press wipe cache
- back several times to TWRP home
- press wipe > format data
- press reboot system (if no response after 3mins, press power button to reboot)

- done 🎉

## questions?

- [my twitter](https://twitter.com/hoishing)
- [github profile](https://hoishing.github.io)
Discover the Secret Check Wi-Fi Signal Strength: Make Sure your laptop is within range of Signal
Tags: webdev, programming, beginners
Published: 2023-10-06 03:33:23

You're sitting on your couch, about to conquer the latest level of your favorite online game, when suddenly the screen freezes. Your connection drops out, leaving you feeling defeated and ready to throw in the towel. 

But fear not! With just a few simple steps, you can check the strength of your Wi-Fi signal and ensure your laptop is within range. Get ready to dominate without interruptions – let's dive into the world of Wi-Fi signal strength!


## Windows

Taskbar Icon: Look at the Wi-Fi icon in the taskbar. It typically displays signal strength using bars or a wireless signal icon. More bars or a stronger signal icon indicates better signal strength.

**Network & Internet Settings:**

Right-click on the Wi-Fi icon in the taskbar and select "Open Network & Internet settings."
Under the "Wi-Fi" section, click on "Show available networks."
The available networks will display with their signal strength indicated by bars.

**Command Prompt**

You can also use the Command Prompt to check Wi-Fi signal strength:

Press Win + X and select "Windows Terminal" or "Command Prompt."
Type the command: netsh wlan show interfaces
Look for the "Signal" field, which represents signal strength in dBm (decibels milliwatts). A higher number indicates a stronger signal.

## MacOS:

**Menu Bar Icon:** Check the Wi-Fi menu bar icon in the upper-right corner of your screen. The number of curved lines next to the Wi-Fi icon represents signal strength. More lines mean a stronger signal.

**Option-click the Wi-Fi Icon:** Hold down the "Option" key (⌥) and click on the Wi-Fi icon. This will display more detailed information, including signal strength (measured in dBm) and other network-related data.

## Linux (Ubuntu):

**Wi-Fi Icon:** Similar to Windows and macOS, the Wi-Fi icon in the system tray usually shows signal strength with bars or curves. More bars indicate a stronger signal.

**Terminal:** You can also use the terminal to check Wi-Fi signal strength:

- Open the terminal (press Ctrl + Alt + T).
- Run the command: nmcli dev wifi list
- Look at the "SIGNAL" column to see the signal strength in dBm.

The steps and words may differ depending on your laptop's operating system. A stronger Wi-Fi signal means better internet. Put your computer near a strong password for a good connection. If the signal weakens, move closer to the router or use boosters to improve coverage.

Experience uninterrupted streaming, gaming, and downloading with Jeebr's [Home Broadband Service](https://www.jeebr.net/home-broadband-plans/). Our advanced technology guarantees fast internet speeds without lagging videos and frustrating connection drops. Enjoy a stable connection across all your devices thanks to our reliable network. Plus, unlimited data plans allow you to stream as much as you want without worrying about exceeding your limit. Choose Jeebr for a professional internet service provider that delivers seamless online experiences.
HTML Canvas cheat sheet
Tags: canvas, cheatsheet, html, javascript
Published: 2023-10-06 03:26:44

Certainly! Here's an [HTML Canvas cheat sheet](https://simplecheatsheet.com/) that covers some of the commonly used methods and properties:

**Canvas Setup:**
```html
<!-- Create a canvas element -->
<canvas id="myCanvas"></canvas>

<!-- Get the canvas element in JavaScript -->
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
```

**Drawing Shapes:**
```javascript
// Draw a rectangle
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = "color";
ctx.fill();
ctx.closePath();

// Draw a circle
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.fillStyle = "color";
ctx.fill();
ctx.closePath();

// Draw a line
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "color";
ctx.stroke();
ctx.closePath();
```

**Text Manipulation:**
```javascript
ctx.font = "fontStyle fontSize fontFamily";
ctx.fillStyle = "color";
ctx.fillText("Text", x, y);
ctx.strokeText("Text", x, y);
```

**Colors and Styles:**
```javascript
// Set fill color
ctx.fillStyle = "color";

// Set stroke color
ctx.strokeStyle = "color";

// Set line width
ctx.lineWidth = width;

// Set line join style
ctx.lineJoin = "style";

// Set line cap style
ctx.lineCap = "style";

// Set shadow
ctx.shadowColor = "color";
ctx.shadowBlur = value;
ctx.shadowOffsetX = value;
ctx.shadowOffsetY = value;
```

**Transformations:**
```javascript
// Translate the canvas origin
ctx.translate(x, y);

// Scale the canvas
ctx.scale(scaleX, scaleY);

// Rotate the canvas
ctx.rotate(angle);

// Reset transformations
ctx.setTransform(1, 0, 0, 1, 0, 0);
```

**Image Manipulation:**
```javascript
// Draw an image
var img = new Image();
img.src = "imageURL";
img.onload = function() {
    ctx.drawImage(img, x, y, width, height);
}

// Draw a portion of an image
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

// Create a pattern with an image
var pattern = ctx.createPattern(image, "repeat/repeat-x/repeat-y/no-repeat");
ctx.fillStyle = pattern;
ctx.fill();
```

Demo using html canvas: [Pixel Art Editor](https://www.simplepixelart.com/editor)
Why "login" icons look like that?
Published: 2023-10-06 02:57:17

The ["login" icon](https://icons8.com/icons/set/login) has taken various forms over time, often adapting to the context in which it's used. While there isn't a single universally accepted icon for "login," several common motifs are used. Let's break down a few of the typical visual metaphors and explain why they might look the way they do:

Arrow Entering a Door/Box: One frequent representation of "login" is an arrow pointing towards or entering an open door or a box. This metaphorically represents the act of entering a system or a secured space.

Key: Another common symbol associated with logging in is a key, sometimes combined with a keyhole or lock. The key metaphorically represents access or the unlocking of a secure space. Considering that passwords are essentially digital "keys," this is a fitting representation.

Person or User Icon with Arrow: Sometimes, icons combine a user/person silhouette with an arrow pointing right or inward, suggesting the user's movement into a system.

Text-based: Due to the lack of a universally recognized "login" symbol, many interfaces simply use the word "Login" or "Sign In" instead of, or in conjunction with, an icon.

Combination of Username and Key/Password: Some designs incorporate both a user icon and a key, or a combination of user icon and password representation, denoting both aspects of the typical login process.

Modern Evolution and Trends: With the evolution of UI/UX design, icons have become more minimalistic and abstract. While earlier icons might have been more literal, modern designs value simplicity and immediacy. This is why you might find very minimalistic representations of the above motifs in newer interfaces.

Why do these icons look the way they do? The reasons often tie back to the concepts of:

Metaphor: Icons use visual metaphors that can easily be related to the real-world action or concept they represent. Entering a door or unlocking something with a key are actions people can intuitively link to the idea of accessing a secure space.

Simplicity and Clarity: Effective icons should be simple enough to be recognized quickly and should not be ambiguous in their meaning.

Historical Precedent: Once a particular icon or style gains acceptance, it's often continued to be used for the sake of familiarity and consistency, making it easier for users to recognize and understand.

In essence, "login" icons are designed to be immediately recognizable, drawing on familiar metaphors that convey the concept of gaining access to a restricted or personal space.