teleren/devto huggingface dataset:
Plug Konva events into RxJS
Tags: typescript, rxjs, konva, webdev
Published: 2022-10-27 06:24:04

During the development of a complex interactive UI for the configuration of a digital laboratory ecosystem, we were utilizing the [Konva.js library](https://konvajs.org/). Konva is a wrapper around the HTML canvas that simplifies working with shapes and interacting with the canvas a lot. Everybody dealing with the plain canvas API knows how much code certain tasks require, especially when user interaction with the drawn shapes is required. The most important features Konva offers to me are

- simplified drawing of shapes
- introduction of custom events that fill the canvas with life
- attaching event handlers to the shapes (e.g. for click, dragging ...)

Especially, the stream of Konva events emitted under various circumstances gave rise to the idea to make use of a reactive approach to process them in a more readable and concise way. As I was researching on different styles of frontend architectures and the associated frameworks and libraries, I stumbled upon [RxJS](https://rxjs-dev.firebaseapp.com/), the reactive extension for Javascript. RxJS core concept, observable streams of data, seemed very suitable to handle the Konva events in a way that does not lead straight into callback hell.

However, at first glance, I did not find a suitable way to convert the Konva events to one of the RxJS data sources that really tackled the idiomatic idea and needs I faced in the project. After some experiments, I came up with the following solution that allows the desired transformation in a readable manner and gives the event processing pipeline direct access to the emitted Konva event object:

{% gist https://gist.github.com/fdlange/1f1cee4dcdc2a3c8e5956d041a25ea73 %}

This little adapter will be used in our current project and so far, the results look quite promising.
Creating an External, Bootable, MacOS Installer
Tags: macos
Published: 2022-10-27 06:03:17

For every major MacOS release, I've gotten in to the habit of formatting my computer and doing a fresh OS install. I've done this a few way over the years, but my current process starts with creating a bootable external drive I can boot from.

My current process to create a bootable MacOS drive, is as follows.

Step 1. Find an external USB drive with at least 16GB of free space, and plug it in. This drive will be wiped, so make sure there is no data on it that you need.

Step 2. Open the terminal and enter the following command 
```
softwareupdate --list-full-installers
```
This will give you a list of available installers.
![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv75pc31xk3anr40pxwx.png)

Step 3. In the terminal enter the following command using the version number of the OS version you want to download.
```
softwareupdate --fetch-full-installers --full-installer-version 13.0
```
This will take a while to download...

Step 4. Once the download has finished, back in the terminal write the following command.
```
sudo /Applications/Install\ macOS\ [macOS VERSION NAME].app/Contents/Resources/createinstallmedia --volume /Volumes/[USB DRIVE NAME]
```

Replace [macOS VERSION] with the version <u>name</u> you have downloaded, and replace [USB DRIVE NAME] with the name of the  external drive you are making bootable.
eg:
```
sudo /Applications/Install\ macOS\ Ventura.app/Contents/Resources/createinstallmedia --volume /Volumes/untitled
```

This will also take a while, but once it has finished, you will now have an external drive you can boot from!

To boot from an external drive, you will need to boot to the boot option screen and select the drive you just created.

To get to the boot option screen:
Intel Mac - Restart Holding down the Option key.
Apple Silicon -Shut down the computer, then press and hold the power button.


---
Reference
https://support.apple.com/en-us/HT201255
Post Pertama
Tags: tutorial, computerscience
Published: 2022-10-27 05:37:05

Saya mencoba produktif menulis berbagai artikel mengenai teknologi. Karena ini adalah post pertama saya, post ini hanya akan menjadi sapaan.

Semoga post selanjutnya bisa berkelanjutan dan menambah ilmu bagi kalian. Kunjungi juga website yang ada pada Bio agar semakin berkembang. Terima kasih.
Pure CSS Turbopack Logo
Tags: codepen, html, css, webdev
Published: 2022-10-27 05:12:22

---
title: Pure CSS Turbopack Logo
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/mdKyxKa %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1585495662480662528" target="_blank">https://twitter.com/asyrafhussin4/status/1585495662480662528</a></p>
Automation
Tags: qualityassurance, storybytes, automation, strategy
Published: 2022-10-27 05:09:07



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

Organizations are transitioning from a process-based set of automation technologies to a more connected and holistic automation strategy. Anything that can enhance the quality standards and save time is an added value to automation. That's the reason why we at Web and App Studio develop integrated offerings that combine technologies business process management into one complete packaged tool. Reducing the time by chasing false positives and focusing more on higher-risk issues improves our team's overall efficiency and productivity. As the application becomes more complex, automation allows us to deliver a high-quality product without slowing down due to bugs and other technical issues.
Software as a Service
Tags: storybytes, business, software, saasplatform
Published: 2022-10-27 05:05:54


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

Software as a Service (SaaS) is based mainly on the Cloud. It is an approach to software distribution. We at Web and App Studio host a combination of servers, databases, and code to create applications that users can access from anywhere. SaaS brings the power of our workflow to any user, anywhere, anytime in the world. While cost is a significant reason for using SaaS in a business environment, the potential of scale and all time availability is not compromised at all.
stainless steel basin
Tags: faucet, sink
Published: 2022-10-27 05:05:42

When it comes to buying a  sink, you have several options. Copper sinks are a great choice if you want a sink that is naturally rust-resistant and anti-microbial. However, you need to make sure that the sink you buy is made of 99 percent pure copper. Some sinks have a small amount of metal added for strength. Copper sinks are an acquired taste, and they won't replace stainless steel anytime soon.
If you don't want to spend a lot of money, you can opt for a granite composite [stainless steel basin](https://www.nivito.sg/en_SG/kitchen-basin/cu-500-b.html). A composite material of granite stone and acrylic resin gives you a stone-like look without the expense. These sinks often have integrated drainboards and faucet drilling. Depending on your kitchen's size, you can buy a one, two, or three-bowl sink. Remember to factor in the size of your family when choosing the type of sink you want.

Stainless steel is another option, but it is generally more expensive than porcelain or cast iron sinks. Stainless steel is also highly scratch-resistantowever, scratches do tend to stand out and are difficult to repair. Stainless steel can also dent, but not as easily as other materials. However, this is more common with thinner gauge steel.

made of enameled steel. Similar to enameled cast iron, enameled steel is made from a steel frame that is coated in a non-porous enamel. This material is also easier to clean, but it is not as durable as enameled cast iron. It is also more likely to rust, but it can be repaired with a little work.

If you don't want to spend a lot of money, you can opt for a granite composite [stainless steel basin](url). A composite material of granite stone and acrylic resin gives you a stone-like look without the expense. These sinks often have integrated drainboards and faucet drilling. Depending on your kitchen's size, you can buy a one, two, or three-bowl sink. Remember to factor in the size of your family when choosing the type of sink you want.
Paket Aqiqah Abah Husein Cilacap Murah, Mudah, Berkah
Tags: aqiqah, paketaqiqah, aqiqahabahhusein
Published: 2022-10-27 05:00:52

hukum aqiqah,
aqiqah untuk anak laki-laki adalah,
dalil aqiqah,
aqiqah dalam islam,
batas umur aqiqah anak,
hukum aqiqah setelah dewasa,
tujuan dari aqiqah adalah,
aqiqah untuk anak perempuan adalah
[**Paket Aqiqah Abah Husein Cilacap**](https://aqiqahabahhusein.id/)
The ferocious ink wars
Tags: beginners, tutorial, react, programming
Published: 2022-10-27 04:39:39

Splatoon 3, the third installment of the renowned third-person shooter trilogy, which is now playable for free online! This game focuses the entire player experience on the online shooting mode, which is incredibly exciting, as opposed to being violent like the shooting games we used to play before. 
This game should be on your list of favorite games, regardless of whether you are an expert or a beginner. Your main objective is to cover the playing surface of the opposing team with ink using the weapon you previously chose. The Crab Tank, which allows you to roll about the playing field and shoot in a wide area, is one of the numerous new weapons in this version.
The gameplay in [splatoon 3](https://splatoon3.io/) is incredibly fun and colorful. Similar to other Splatoon games, you will take control of the Inklings from a third-person viewpoint and attempt to ink the entire surface with the character's chosen weapon.
835. Leetcode solution in python3
Tags: python, challenge
Published: 2022-10-27 04:31:01


```python
class Solution:
  def largestOverlap(self, A: List[List[int]], B: List[List[int]]) -> int:
    n = len(A)
    magic = 100
    onesA = []
    onesB = []
    dict = defaultdict(int)

    for i in range(n):
      for j in range(n):
        if A[i][j] == 1:
          onesA.append([i, j])
        if B[i][j] == 1:
          onesB.append([i, j])

    for a in onesA:
      for b in onesB:
        dict[(a[0] - b[0]) * magic + (a[1] - b[1])] += 1

    return max(dict.values()) if dict else 0

```
#Leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/image-overlap/
POSSIBLE TECHNIQUES ON HOW TO SECURE NODEJS APP.
Tags: javascript, webdev, beginners
Published: 2022-10-27 04:14:12

POSSIBLE TECHNIQUES ON HOW TO SECURE NODEJS APP.

-Use secure authentication as required.

One of the most frequent vulnerabilities is having an authentication mechanism that is unreliable, flawed, or insufficient. It’s possibly because many developers believe that if they have authentication, they are safe. In truth, it’s simple to get around poor or incompatible authentication. Utilizing current authentication tools like Okta or OAuth is one option.
There are a few things you should keep in mind if you decide to remain with native Node.js security solutions. Use Bcrypt or Scrypt instead of the built-in Node.js security library when creating passwords. Limit the number of unsuccessful login attempts and don’t inform the user if the username or password is invalid; rather, offer a generic error message such as “invalid credentials.”
You also need to have appropriate session management policies. Additionally, make sure to use the 2FA authentication step. If done correctly, it can significantly boost your application’s security. With modules like node-2fa or speakeasy, you can accomplish it.

-Safeguard and monitor your Node.js applications in use

Switching left and securing your Node.js applications as soon as possible is a good idea, however due to changing and dynamic surroundings, it is practically hard to properly secure everything in your app. Shifting appropriately, safeguarding, and keeping an eye on your applications in use are therefore crucial. You may security solutions into your Node.js apps with the use of application security management solutions, which can also detect and stop assaults in real time, preventing attackers from evading your safe coding efforts.

-Use database accounts with the least privileges permitted to secure your app from SQL injections.

Database accounts with the least privileges permitted are recommended. Avoid using database accounts with admin permissions in your Node.js application. Create unique users with read-only and read/write access. Lastly, to restrict access to particular database columns or joins, utilize SQL views.
The Forsaken
Tags: beginners, python
Published: 2022-10-27 03:35:34

This is the first program that I have wrote and it is a command line game that allows you to level your character while fighting progressively harder opponents working up to challenge the main boss. I plan on making this program a work in progress as I continue to learn more about coding and development with the end goal of making more classes, introducing items, and hopefully eventually turn it into a playable app with animations along with more "story" options. Here is a link to the project, feel free to leave any comments or suggestions!  https://github.com/Jyndrek/The_Forsaken
3 Ways to Protect Your Business from Ransomware
Tags: cybersecurity, security, ransomwareattacks
Published: 2022-10-27 03:23:05

Ransomware is a type of malware that encrypts your files and holds them hostage until you pay a ransom. Ransomware attacks are becoming more common, and they can be devastating to businesses. Here are three ways to protect your business from ransomware:

Educate your employees about the risks of clicking on links in emails or opening attachments from unknown senders. Train them to spot phishing attempts and report suspicious activity to IT immediately.

Make sure your backups are stored offline so they can't be encrypted by ransomware. Test your backups regularly to ensure they're working properly.

Consider investing in cyber insurance to financially protect yourself in the event of a successful [ransomware attack](https://www.datasciencecentral.com/10-tips-to-protect-your-organization-against-ransomware-attacks-in-2022/). Cyber insurance can help cover the cost of ransom payments, as well as the cost of recovery and business interruption.

* If you're concerned about ransomware, these three steps can help you protect your business. Stay safe out there!

* Back up your data regularly and keep multiple copies in different locations

* Educate yourself and your employees about phishing attempts and how to avoid them

By following these tips, you can help ensure that your design team is motivated and inspired to deliver their best results.
Using UseRef hook for form data
Tags: react, reacthooks, webdev, productivity
Published: 2022-10-27 02:38:41

---
title: Using UseRef hook for form data
category: Tutorial
description: An approach of using useRef since useState causes unnecessary rerenders.
author: Kaartik Nayak
duration: 5 min read
tags: ["reactjs", "reacthooks","webdev","productivity"]
---

In this blog we will see how to use useRef hook instead of the useState hook.

The usual way:
```js:🤓.jsx
export default function Form() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const submit = (e) => {
    e.preventDefault();
    console.log(email, password);
  };
  // rerenders component eveytime when a character is added in the input field
  React.useEffect(() => {
    console.log("value changed");
  }, [email, password]);

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Using `useRef` hook 

```js:😎.jsx
export default function Ref() {
  const emailRef = React.useRef(null);
  const passwordRef = React.useRef(null);
  const submit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value, passwordRef.current.value);
  };
  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input ref={emailRef} type="email" name="email" />
      <label htmlFor="password">Password</label>
      <input ref={passwordRef} type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
```
When we use `useRef`hook, the component does not rerender when the value of the input field changes. This is because the `useRef` hook does not cause any rerenders. It is used to store the reference of the DOM element.

## Conclusion

In this blog we saw how to use `useRef` hook instead of `useState` hook. This is useful when we want to store the value of the input field without causing any rerenders 👌

So that's it for this blog.
Hope you liked it 🤗
View my [portfolio app](https://kaartiknayak.vercel.app)
Also, do follow me on [Twitter](https://twitter.com/KaartikNayak) <3
Docusaurus
Tags: javascript, opensource, programming, html
Published: 2022-10-27 02:11:14

Starting off week 7 we are asked to pick a feature of Docusaurus that we would have to implement into our code. The following list is the possibilities of what we can do:

- Search Engine Optimization (SEO), including meta tags in the HTML head
- Improved Accessibility of generated HTML
- Support for React components
- Themes
- Plugins
- Configurable Sidebar (i.e., table of contents)
- Full Markdown support (e.g., swap out your basic version for an open source library/module that does it fully)
- Syntax Highlighting for code blocks
- Search
- Static Assets for images, stylesheets, etc.
- Markdown Frontmatter support
- Blog posts in addition to Pages

**How would you describe Docusaurus to a friend who has never used it before?**
Docusaurus is a tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details.

**What was it like to set up a Docusaurus project?**
Setting up a Docusaurus is as fast as running one script. Everything is ready to deploy, just need to replace some name and links. **Note**: Replace "my-website" with the name you want.
```
npm init docusaurus@latest my-website classic
```
After that modify a couple values that will allow to push to GitHub and run the program on pages.

https://lostbutton.github.io/my-doc/ 

**Which feature did you decide to copy from Docusaurus? Why did you choose it?**
`Full Markdown support (e.g., swap out your basic version for an open source library/module that does it fully)`
I thought, since we already implemented something similar, why not go for a full markdown support? So that's exactly what I did.

**How did you approach adding it to your SSG?**
First I had to find a library that is capable of converting and provide markdown support. In a previous lab I have refactored my code so that to convert a markdown file, it would have to call a function. All I had to do was figure out how to render it and push it into the string array so that it could be returned so then it can be converted into the html. 

**How did the planning experience compare to the actual work? How close were you in your estimation about what you could get done vs. what was left for the future?**
The concept itself was simple, though the execution for trying to figure out how the syntax really worked gave me trouble. It was what I just about expected.
I create (an initial) medical python program
Published: 2022-10-27 01:43:20

Hi everyone!
This is my first comment here since I'm just starting this journey of learning to code.
I'm a doctor, and I'm currently working as a doctor, one of the biggest challenges I want to solve is to avoid inherent human mistake in repetitive tasks, as filling a medical record again and again, so I started the first project in Python having in mind a program that allows you to input a symptom and that would give you some possible diseases.

It's nothing to fancy, it's just my first program, but I'm excited with the results achieved.


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

If you want to see the full code, I'll let you the GitHub file.
https://github.com/JorgeValencia97/proyect-codecademy-1.git

Also, every (good or bad) comment will be very gratefully received as a way to improve.

I dream of improving the way we do medicine.
plsql anonymous blocks
Tags: database, sql, tutorial, oldprogramming
Published: 2022-10-27 01:35:06

```
DECLARE
  vSQL VARCHAR2(4000);
  vUser VARCHAR2(30);
  vCodBeer :NUMBER;
  vNameBeer VARCHAR2(30);
  vMachine VARCHAR2(30);
  vProgram VARCHAR2(50);
  vName Users.name%TYPE;
BEGIN
  
  vUser := SYS_CONTEXT('USERENV', 'OS_USER');
  vMachine := SYS_CONTEXT('USERENV', 'HOST');
  vProgram := SYS_CONTEXT('USERENV', 'MODULE');   
  
  FOR LIST IN (SELECT '21'AS COD, '/BEER21' AS NAMEBEER FROM DUAL 
        UNION  SELECT '22'AS COD, 'BEER22.' AS NAMEBEER FROM DUAL 
        UNION  SELECT '23'AS COD, 'BE-ER23' AS NAMEBEER FROM DUAL) 
  LOOP
    
    --The results of this select - down - cannot be null
    SELECT CODBEER, NAMEBEER 
      INTO vCodBeer, vNameBeer FROM BEERS 
    WHERE BEERS.COD = LIST.COD;
   
    IF vCodBeer = 0 THEN
      vNameBeer := REPLACE(LIST.NAMEBEER,'.','');
      vNameBeer := REPLACE(vNameBeer,'/','');
      vNameBeer := REPLACE(vNameBeer,'-',''); 
    
      vSQL := 'INSERT INTO BEERS  '||
              '  (CODBEER         '||
              '  ,NAMEBEER        '||
              '  ,MACHINE         '||
              '  ,PROGRAM         '||
              '  ,USER)           '||                           
              'VALUES (:CODBEER   '||
              '      , :NAMEBEER  '||
              '      , :MACHINE   '||
              '      , :PROGRAM   '||
              '      , :USER)     ';
               
      EXECUTE IMMEDIATE vSQL 
                  USING CODBEER, NAMEBEER, MACHINE, PROGRAM, USER;
    END IF; 
  END LOOP;
END;

```
Data Is a Wild West
Tags: dremio, arctic, iceberg, data
Published: 2022-10-27 00:54:19

Data is a wild west even more than the web. We have different engines coming from different vendors doing different things. And even very sophisticated practitioners have difficulty categorizing all these things with abstractions that would make sense to a layperson. It even confuses practitioners who do nothing but data all day. 

Iceberg is metadata; Parquet is data. Iceberg is metadata about a file pointing to the physical file in object storage. A catalog like Arctic organizes the metadata and the metadata files provide query plans or pointers to the files and locations in those files where the data lives. 

[Alex Merced shows us how to convert a csv file into Iceberg](https://www.youtube.com/watch?v=RX2_zVh-zo0), which is the same process we use in query tools like mstr to map a semantic layer to a physical layer or a 'logical table' to a physical warehouse schema. In programming terminology, we are creating and assigning a struct or a tuple type to the data, which will help categorize it for queries related to the html form input, api format over the wire, and ultimately inside the data column in the db. 

Here is a reference to [Dremio Artic](https://docs.dremio.com/cloud/getting-started/arctic-architecture/), a catalog for the metadata which provides organization and what the [modern data stack presentation](https://www.youtube.com/watch?v=C_R6VHJfQn4) refers to as 'awareness', which, when coupled with the Iceberg metadata file mapping to Parquet, provides version control to the object storage, allowing in-place transformation and time-travel debugging. 

As a personal anecdote, I have installed Dremio both on AWS and in Docker (have yet to try it in kubernetes on Okteto free tier). I do not know how to control my AWS bill when I fire up the cluster required to run this machinery. And the Docker instance is quite limited in terms of features, especially vis-a-vis various integrations. But it is great for a demo.