teleren/devto huggingface dataset:
What can you do with React.js? Its Practical Uses, Real Example, and More
Tags: react, programming, javascript, learning
Published: 2023-10-17 01:53:49

![What can you do with React.js? Its Practical Uses, Real Example, and More](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujn0d8lgf2xfjmnabwo1.png)

React.js is one of the high-standard and advanced JavaScript libraries that helps in creating user interfaces. It is used to create Single-Page Applications **([SPA](https://dev.to/shariqahmed525/single-page-application-spa-vs-multi-page-application-mpa-a-user-friendly-comparison-5gg3))**. Back in the day, JQuery used to help out with making web pages by facilitating DOM manipulations and messing around with stuff on them. However, when you use React.js, you can create quicker, more reactive, and faster user interfaces.

Further, many major websites, including **_Instagram_**, **_Netflix_**, **_Salesforce_**, and **_Asana_**, are built using React.js. React.js is also a component-based library that aids in the creation of modular user interfaces.

Furthermore, React.js is extremely useful when developing a website where information or data continuously changes over time. **It employs reusable UI components that reduce development time and display dynamically changing data.**

> For example, consider the likes on an Instagram post. You may have noticed that when reading a post made by a celebrity the likes count is at 10k. However, as you finish reading the post, without reloading the page, it increases to 15k. Now, how does it happen? Well, all thanks to Virtual DOM, you can find information about this topic in this article **[DOM vs Virtual DOM](https://dev.to/shariqahmed525/dom-vs-virtual-dom-key-differences-5e6e)**.

Additionally, with React.js, you can create complex UIs without much difficulty. Also, it is a declarative library, meaning you need to specify everything, including what needs to be done and where you want something, through code. But how will this be implemented? React.js takes care of it!


## Why do I choose React.js?

![React JS because it is simple, faster than some libraries or frameworks, and makes web development easier. It's quite popular, so you can find lots of help, and resources online, and the React community is huge, which is a big advantage.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr32skow2bn24acxhbk6.jpg)

Well, you should use React.js because it is simple, faster than some libraries or frameworks, and makes web development easier. It’s quite popular, so you can find lots of help, and resources online, and the React community is huge, which is a big advantage.

You should also choose React.js if you are looking for a simple architecture. Also, it is really flexible and it’s way easier to develop because of its modular design. Additionally, if you have a know-how of JavaScript then go for React.js as it is written in Javascript.
Marko: 10 Minute Docs Audit
Tags: javascript, html, docsaudit, webdev
Published: 2023-10-17 01:49:44

[Marko](https://markojs.com/) is a library that extends HTML markup, and enables users to build dynamic UIs. 

{% embed https://youtu.be/9VpL2O2OFlI %}

I run a technical documentation business specializing in writing and editing documentation. I made this series to share my insights and help projects craft impactful documentation.

## What's The Criteria?

3- Excellent
2 - OK
1 - Poor

Purposeful: Does the QuickStart explain what problem it's trying to solve? Who is the intended audience?

UX Experience: How seamless is the experience? Must the user create an account to get through the Quickstart? Does the Quickstart elicit a sense of joy and achievement?

Accurate: Are the instructions correct? Are they complete?

##[The Results](https://www.loom.com/share/3bf475b479674a05b5d52b69336d23e5?sid=17cbd231-f423-496e-849c-db82ab10321b)

I had difficulty figuring out what problem marko was trying to solve. The landing page listed a bunch of features. But honestly, I wasn't sure who it was for and why should I care. When I headed over to the Getting Started Guide, I was greeted with what seemed like a reference guide. There was a tutorial, but it lacked context and wasn't compelling. 

I'm sure Marko is a great library, but I wished the documentation spelled out who Marko was for and what problem they're trying to solve. 


|               | Score |
|---------------|-------|
| Purposeful    | 1.5   |
| UX Experience | 1.5   |
| Accurate      | 2.5   |

Are you interested in a FREE Quickstart audit for your company? [Start here](https://forms.gle/5jDeuQraBwahkjT16).
JavaScript Magic Tricks: Executing Privately
Published: 2023-10-17 01:38:24

If it is possible to load and execute JavaScript code in a webpage privately, it would be very beneficial for protecting JavaScript code. In this article, we will explore and demonstrate a technique for privately executing JavaScript code.

**Source**

```
<html>
<script>
    window.onload =  function () {
		var  xhr =  new  XMLHttpRequest();
		//获取png文件
		xhr.open("GET" , "http://127.0.0.1:2080/backup/js_png/test.png");
		xhr.send("");

		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				console.log(xhr.responseText);
				//执行png文件中的js代码
				eval(xhr.responseText);
			}
		}
	}
</script>
</html>
```

The above is the front-end HTML page code. The principle is: when the page is loaded, an Ajax request is made for a png image file. After obtaining the png file, the file content is executed as js code. The content of the png file on the server is shown in the following figure.

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

The above image looks like a png image file, but it is actually a javascript file with a png suffix, which is used to disguise it during transmission, making others think it is just a picture.

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

**Execute**

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

This achieves the effect of removing this js code and js file from the webpage, and the js file loading is not visible in the developer tools, but the js function is executed.

However, someone who is attentive may detect abnormalities from two aspects. The first is at the location of Ajax requests in the webpage.

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

The second is that opening the js file disguised as a png image may reveal its js code.

As shown in the figure below, Firefox browser cannot be identified.

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

As shown in the figure below, the Chome browser can recognize js.

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

In comparison, the JavaScript code can be obfuscated to further improve security.

After the javascript code is obfuscated using the JShaman JavaScript Obfuscator, it can be made impossible to discern the Ajax request logic, as shown in the following image.

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

The backend disguises a JavaScript file as a PNG image, encrypts it with jjencode to make it appear as gibberish, as shown in the following figure.

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

In this way, both ends of the JavaScript code are encrypted, making it harder to analyze and making the execution more secretive.
A Fullstack Notion Clone using Next.js 13
Tags: notion
Published: 2023-10-22 17:54:45

---
title: A Fullstack Notion Clone using Next.js 13
published: true
date: 2023-10-17 00:58:00 UTC
tags: Notion
canonical_url: https://reactjsexample.com/a-fullstack-notion-clone-using-next-js-13/
---

# Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023
 ![A Fullstack Notion Clone using Next.js 13](https://reactjsexample.com/content/images/2023/10/Code_2023-10_10-53-36.jpg)

![A Fullstack Notion Clone using Next.js 13](https://user-images.githubusercontent.com/23248726/274474860-66bcfca3-93bf-4aa4-950d-f98c020e1156.png)

This is a repository for Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

[VIDEO TUTORIAL](https://www.youtube.com/watch?v=ZbX4Ok9YX94)

Key Features:

- Real-time database 🔗
- Notion-style editor 📝
- Light and Dark mode 🌓
- Infinite children documents 🌲
- Trash can & soft delete 🗑️
- Authentication 🔐
- File upload
- File deletion
- File replacement
- Icons for each document (changes in real-time) 🌠
- Expandable sidebar ➡️🔀⬅️
- Full mobile responsiveness 📱
- Publish your note to the web 🌐
- Fully collapsable sidebar ↕️
- Landing page 🛬
- Cover image of each document 🖼️
- Recover deleted files 🔄📄

### Prerequisites

**Node version 18.x.x**

### Cloning the repository

```
git clone https://github.com/AntonioErdeljac/notion-clone-tutorial.git
```

### Install packages

```
npm i
```

### Setup .env file

```
# Deployment used by `npx convex dev`
CONVEX\_DEPLOYMENT=
NEXT\_PUBLIC\_CONVEX\_URL=

NEXT\_PUBLIC\_CLERK\_PUBLISHABLE\_KEY=
CLERK\_SECRET\_KEY=

EDGE\_STORE\_ACCESS\_KEY=
EDGE\_STORE\_SECRET\_KEY=
```

### Setup Convex

```
npx convex dev

```

### Start the app

```
npm run dev
```

## GitHub

[View Github](https://github.com/AntonioErdeljac/notion-clone-tutorial?ref=reactjsexample.com)
Production Release
Published: 2023-10-17 00:47:04

1단계: 프로세스는 제품 소유자가 요구 사항에 따라 사용자 스토리를 작성하는 것으로 시작됩니다.

2단계: 개발팀은 백로그에서 사용자 스토리를 선택하여 2주 개발 주기의 스프린트에 투입합니다.

3단계: 개발자는 소스 코드를 코드 저장소 Git에 커밋합니다.

4단계: Jenkins에서 빌드가 트리거됩니다. 소스 코드는 SonarQube의 단위 테스트, 코드 적용 범위 임계값 및 게이트를 통과해야 합니다.

5단계: 빌드가 성공하면 빌드가 아티팩트에 저장됩니다. 그런 다음 빌드가 개발 환경에 배포됩니다.

6단계: 다양한 기능을 작업하는 여러 개발팀이 있을 수 있습니다. 기능은 독립적으로 테스트되어야 하므로 QA1 및 QA2에 배포됩니다.

7단계: QA 팀은 새로운 QA 환경을 선택하고 QA 테스트, 회귀 테스트, 성능 테스트를 수행합니다.

8단계: QA 빌드가 QA 팀의 검증을 통과하면 UAT 환경에 배포됩니다.

9단계: UAT 테스트가 성공하면 빌드가 릴리스 후보가 되고 일정에 따라 프로덕션 환경에 배포됩니다.

10단계: SRE(사이트 안정성 엔지니어링) 팀이 제품 모니터링을 담당합니다.
Make your ruby gems install faster
Published: 2023-10-17 00:24:02

"--no-ri --no-rdoc" 
**How to make --no-ri --no-rdoc the default for gem install?**

To make the --no-ri and --no-rdoc options the default for the gem install command, you can configure this behavior in your Gem configuration file or by setting environment variables. Here's how to do it:

Option 1: Using the Gem Configuration File (Recommended)

Open your Gem configuration file. The location of the file depends on your operating system:

On Unix-based systems (Linux, macOS), it's typically located at ~/.gemrc.
On Windows, it might be located at %USERPROFILE%\.gemrc or C:\Ruby{version}\etc\gemrc.
If the file doesn't exist, you can create it.

Add the following lines to the Gem configuration file:

---
install: --no-ri --no-rdoc
This sets the default options for gem install to include --no-ri and --no-rdoc.

Save the Gem configuration file.
If You Could Redefine Your Life, What Career Would You Choose?
Tags: discuss
Published: 2023-10-17 00:00:00

---
published_at : 2023-10-17 00:00 +0000
---
If you could embark on an entirely new career path, one that aligns with your deepest passions and values, what would it look like, and how would it change your life's narrative?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Are You Motivated or Disciplined?
Tags: discuss, codenewbie, beginner
Published: 2023-10-17 00:00:00

---
published_at : 2023-10-17 00:00 +0000
---
Some people say that motivation gets you started, but discipline keeps you going. Which comes more naturally to you? And how do you work on strengthening the aspect that you find more challenging?


Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Making a nice neon button
Tags: css
Published: 2023-12-27 07:42:06

---
title: Making a nice neon button
published: true
date: 2023-10-17 00:00:00 UTC
tags: Css
canonical_url: https://zellwk.com/blog/neon-button/
---

When I was building the [Magical Dev School](https://magicaldevschool.com) website, I accidentally stumbled on a way to make Neon buttons look good.

{% embed https://youtu.be/uiI7eEUFbc4 %}

There are three important elements:

1. A little bit of glow around the text
2. A larger glow around the button
3. A nice zoom effect

## Making the text glow

The trick here is to use `drop-shadow` instead of `text-shadow` to create the glow effect.

`drop-shadow` works better because it creates a softer and more enveloping blur - very much like how a soft light source would fall into its surroundings.

`text-shadow` is too harsh.

<img  src='https://zellwk.com/images/blog/neon-button/text-vs-drop-shadow.png' />

We only want to use `drop-shadow` on the text, so we need to change the markup a little bit to include an extra span element.

```html
<button>
  <span class="text">Text goes here </span>
</button>
```

And we can include the `drop-shadow` like this:

```css
.text {
  filter: drop-shadow(0 0 1px currentcolor);
}
```

## Making the larger glow around the button

We can make a larger glow around the button with `drop-shadow` and `box-shadow`. In this case, I prefer `box-shadow` over `drop-shadow` because I can control the spread.

This lets me cast a harsher shadow that accentuates the border.

<img src='https://zellwk.com/images/blog/neon-button/drop-vs-box-shadow.jpg' />

The code for `drop-shadow` is simpler because you can attach it directly to the button.

```css
button {
  filter: drop-shadow(0 0 1rem var(--purple-300));
}
```

The code for `box-shadow` is slightly harder because you'll have to use a pseudo-element to make smooth animation. That's because transitioning `box-shadow` [creates jank](https://web.dev/animations-guide/).

```css
button {
  position: relative;
  z-index: 1;
  /* ... */
}

button:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0.6;
  box-shadow: 0 0 1em 0.5em var(--purple-300);
}
```

## A nice zoom effect

The third and final piece is to jell everything together with a little bit of animations.

{% embed https://youtu.be/L-89PGVLxLo %}

Here, I opted to:

- Change the `background-color`
- Change the `color`
- Make the button bigger (as if it's floating outwards)
- And make the background glow a little bit stronger by changing the `opacity`

## Codepen Link

Here's Codepen for you to play around with this [neon button](https://codepen.io/zellwk/pen/poQMqvW).

**By the way, this article is originally written on my [blog](https://zellwk.com/blog/neon-button/)**. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.
surrealdb driver github.com/4sp1/surrealhigh
Tags: sideprojects
Published: 2023-10-16 23:19:59

---
title: surrealdb driver github.com/4sp1/surrealhigh
published: true
description: 
tags: sideproject
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-16 22:53 +0000
---

❓Open-Source
❓Side-Project
❓SurrealDB driver

👤 Surreal High "Coming Out"

Open Source Side Project

Higher level interface to the amazing SurrealDB Rusty DB engine featuring NoSQL, GraphDB, sqlDB with an original query language with permissions and more. They finally release the production edition.

I think Golang interface is lacking behind so I wrote a very handcrafted layer above the existing Go driver to make integrations and tasks easier. Indeed, this is a little trick to generate types for all of the data structures fields you would like to work with. At the moment support is limited and I already alpha tested it with 2 other side projects where I wanted to try a little more SurrealDB. Of course I have more projects to come so this will make the overall product better.

Also there is very basic and incomplete query constructors but it should be seamlessly easy for you to start a discussion so we could get it done together!

Looking forward to your feedback,
Back to you!

Malik

PS

❓Techinality
❓Usability
❓Underground

👤 Install

https://github.com/4sp1/surrealhigh/commit/054984e9ac31

The link would get you to the version you should use

```
go install ./cmd/sh-gen-types
```

then in the package for your surrealdb adapter define some struct and for example prepose it with

👤 Use

```go
//go:generate sh-gen-types -doc=myDoc -pkg=mysdbdriver -o my_doc.sdb.gen.go
type myDoc struct{
//... non strictly typed doc
}
```

👤 Hack

also have a look at the few following flags and meanings
```go
var (
	doc = flag.String("doc", "", "comma-separated list of doc struct names; must be set")
	pkg = flag.String("pkg", "", "destination package")
	out = flag.String("o", "", "destination file .go")
)
```
from https://github.com/4sp1/surrealhigh/blob/054984e9ac3130d4326f608351d316c88f772ac0/cmd/sh-gen-types/main.go

the whole thing is backed with some template generator with some good and bad sides but it was worth trying and that might happen again:

👤 Dig

```
// :D
import "github.com/4sp1/surrealhigh/templates/jennifer"
```

🏁 We're done! It's amazing if you get done to the line

🎪🎪🎪
🌱 Introducing the Climate Positive Public License! 🌱
Tags: software, decarbonization, opensource, license
Published: 2023-10-16 23:09:52

## Hello everyone out there using open-source licenses,

I'm working on a new kind of license I'd like to present: the **Climate Positive Public License (`CPPL`)**. It's still in its early stages, much like the weather outside, unpredictable and ever-changing. However, I believe it holds a lot of promise.

Why another license, you might ask? Well, the goal isn't just to create software, but to do so with a climate-positive footprint. The `CPPL` is designed to promote climate-friendly software practices, CO2 neutrality, carbon capturing, and more. It's an endeavor that's not just for me; it's for our planet.

The license is very much influenced by the GPL, and the core idea is simple: 

> Use this license for your software, and in return, make sure your software or project actively contributes to the betterment of the environment.  
> If not, support the cause in another manner, through environmental funds or other means.  
> In essence, **it's a license with a conscience**.

I won't claim the `CPPL` to be the solution to all our environmental concerns. I'm not even sure if it will gain traction, but I'm hopeful. What I do know is that it's another tool in the toolbox for developers who are conscious about the environment and wish to make a positive impact through their work.

I'd appreciate any feedback, ideas, or contributions. The project is open-source and is very much a collaborative effort. If you're curious or want to contribute, the repo is available on GitHub.

Would love to hear what you think!  
Maybe [take a look on GitHub](https://github.com/realvorl/ClimatePositivePublicLicense).
Day 833 : Two Years
Tags: hiphop, code, coding, lifelongdev
Published: 2023-10-16 23:08:50

_liner notes_:
- Saturday : This week, we had a special guest stop by the show. I never really have guests on the show because it introduces some uncertainties into doing the show. Like, what if they show up late? What if they curse on air? And many other things. I like to try and keep the show as easy and stress free as possible! They arrived 3 minutes before we went live (stressing me out, haha). But the show went well. Had a great time. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of 3 people sitting at a table with microphones and other equipment with the words Oct 14th 2022 News Flash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxof94us043jb2ki6971.jpg)

- Sunday : Did my study sessions over at https://untilit.works . Got some stuff done. Played around with that open-source online radio software. I'm leaning more and more to it. I also went down a rabbit hole researching suitcases. For my next long trip coming up, I don't want to have to check in a bag. My last trip it was kind of a pain waiting in the lines. So, I ended up buying a carry on suitcase and a backpack. The difference is that they have a "closet" in them. I'm thinking I can put clothes both mostly in the carry-on and some in the backpack that will last me for a good amount of my trip before I wash some clothes. I'm also thinking my putting clothes around my radio equipment, it will add some padding. We'll see. Ended the night watching some anime.

- Professional : Went to get an eye checkup before starting work. Got back and rested a little because my eyes got dilated. Spent the day updating some docs, getting clarifying info about an SDK, and helping out with some community questions.

- Personal : Got the notification that both the suitcase and backpack I ordered on Sunday were shipped. They are supposed to be here by the end of the week. Nice! I'll be able to use it for my upcoming trip. For the amount I paid, I would hope it would come quick. haha.

![A wooden dock with railing one side has trees that partially cover and a lake on the other side with a pine tree forest and mountain in the distance at sunset.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6be1i547s59zvisqu87.jpg)

So I just picked up a pack of Samsung SmartTags to put in my luggage for my upcoming trip. Everything should be carry-on, but just in case I'm forced to check a bag. Plus the battery in them are supposed to last almost 2 years. Going to through tracks for the radio show because I need to build up a catalog so I don't have to do it during my trip. I also want to work on my side project. Before I leave, I'd like to get the online radio station up and running. Maybe watch some anime, but I'm not sure about that.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube PbS0vRxmvTA %}