teleren/devto huggingface dataset:
Does NextJS SSR Render Just the VDOM Nodes?
Tags: react, tips, short
Published: 2023-08-03 16:40:39

---
title: Does NextJS SSR Render Just the VDOM Nodes?
published: true
date: 2023-08-03 00:45:09 UTC
tags: react,tips,reactjs,short
canonical_url: 
---

### Does NextJS SSR Render Just The VDOM Nodes?

One of the great things about running a coding [YouTube channel](https://youtube.com/@jherr) are the amazing questions that I get that give me some insights into how folks are thinking about React and NextJS. One recent question was about the NextJS App Router and whether it renders only VDOM or if it renders the entire page.

![](https://cdn-images-1.medium.com/max/1024/1*w03XojOiHkHkZ0o3e9dISw.jpeg)
_React + Next Questions and Answers banner_

**Answer** : The App Router renders the requested route into **both** the Virtual DOM (VDOM) and the HTML. The HTML is what the customer sees on the page, and the VDOM is used to initialize the React Virtual DOM on the client.

There are three ways you can see exactly what’s coming out of your NextJS server for a given route. You can `curl` it on the command line using a command like this:

```
curl http://localhost:3000
```

Or if you don’t like the command line you can right click on the page in the browser and select View Page Source. The page source is exactly what came back from the server. It is not a live view of the current DOM of the page.

A third way is to bring up the inspector in your browser, select the Network tab, and then refresh the page. The first item in the list will be a GET request for the current route and the response is the HTML that came back from the server. You can click on that item and then select the Preview tab to see the HTML.

The response from the server looks pretty bad because all of the whitespace is removed between the tags, so it will all be on one line. In the browser if you are viewing the page source you can click on the Line Wrap option to at least see all the HTML.

At the top you will see the rendered HTML of the components. Below that is a **large** set of script tags that set up the Virtual DOM on the client. Those aren’t really VDOM nodes per se, they are a combination of component references, props, rendered DOM nodes, and other information that is used to initialize the client side VDOM.

If you want you can analyze that VDOM section further using this [RSC Parser tool](https://rsc-parser.vercel.app).

I can understand why you might think the server only generates VDOM nodes since React does so much client side rendering. But believe me, if the server only generated VDOM nodes then the page would be blank, and search engines would have nothing to index if they only looked at the HTML. That would give Search Engine Optimization folks a heart attack.

> Jack Herrington is currently working on a [course on NextJS](https://pronextjs.dev), subscribe to the newsletter to get updates as well as React and NextJS tips, tricks and tutorials.
Shopify App - Theme Extension with React + Tailwind CSS
Tags: shopify, react, vite, tailwindcss
Published: 2023-08-03 00:07:23

_Full course available now! 👉 [Shopify App Development Crash Course](https://www.buildnextshop.com/shopify-theme-extension-app)_

In the last few years Shopify has been revamping their App CLI and all the tooling.

We now have the App Theme Extensions here to replace the Script Tag API and make it an improved experience for merchants and their customers. 

Since these upgrades are so new, there is hardly any tutorials on it! 

I am currently building a theme extension app for Shopify. I initially started with Vanilla JS and regular CSS but soon realized that I wouldn't be able to build the customer experience that I wanted to with those tools. Plus it would be a bad developer experience for me also. 

So about 25% way through the project I decided to switch to React and Tailwind CSS for the Theme Extension. However, this wasn't so easy to setup. So I want to share the process with you in this walkthrough!


### _Full Tech Stack_:
- Shopify App CLI
- Vite
- Theme Extension
- React + Tailwind CSS


### Step 1: Clone Template Extension App

[Extension Template Github Repo](https://github.com/iskurbanov/theme-app-extension-react)

### Step 2: Create a test store

In your Shopify Partner Account (it's free), create a test store. 


### Step 3: Run the app and install it

```
cd your-app-name && npm install
```

Go through all the installation instructions 

### Step 4: Deploy the extension

```
npm run deploy
```


### Step 5: Check the Deployment

Go to the Shopify Partner Dashboard -> Apps -> Versions

And check that the Shopify app was deployed with the extension.

### Step 6: Enable Extension on Store

Run
```
npm run dev
```

Install the app by clicking on the link in #1. Then go to link in #2 and navigate to the contact page in the theme. Then select the app from the 

![Install the App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1z8jesyoo4ne06u9dca.png)


Add the Extension in the Sections
![Add Extension Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edvxf2db9w4j60av93nn.png)


See the text "Hello From React!" on your page!
![See the text "Hello From React!" on your page!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq40t8mfuh8wo76rj7xg.png)



Great! You now should have a working Shopify App Theme Extension that you can work on! 🎉 🎉 🎉
Can't ssh to tryhackme server no matter what I do
Tags: tryhackme
Published: 2023-08-02 23:54:22

I've been having trouble connecting to tryhackme's ssh server from my linux machine(Linux Mint 21.1 Cinnamon) the terminal displays a port 22 connection timeout error.

here's the output from the terminal

```
ssh -vvv tryhackme@10.10.21.145
OpenSSH_8.9p1 Ubuntu-3ubuntu0.3, OpenSSL 3.0.2 15 Mar 2022
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: /etc/ssh/ssh_config line 19: include /etc/ssh/ssh_config.d/*.conf matched no files
debug1: /etc/ssh/ssh_config line 21: Applying options for *
debug2: resolve_canonicalize: hostname 10.10.21.145 is address
debug3: expanded UserKnownHostsFile '~/.ssh/known_hosts' -> '/home/deus-ex/.ssh/known_hosts'
debug3: expanded UserKnownHostsFile '~/.ssh/known_hosts2' -> '/home/deus-ex/.ssh/known_hosts2'
debug3: ssh_connect_direct: entering
debug1: Connecting to 10.10.21.145 [10.10.21.145] port 22.
debug3: set_sock_tos: set socket 3 IP_TOS 0x10
debug1: connect to address 10.10.21.145 port 22: Connection timed out
ssh: connect to host 10.10.21.145 port 22: Connection timed out
```
How else can I troubleshoot this problem with my limited skillset ?

I configured openvpn correctly and imported the .ovpn file from the site proper and it says I'm connected on the sites access page.

I allowed ssh in ufw and allowed input and output chains I messed with the ssh configuration file (the ForwardX11 is set to yes and the ForwardX11Trusted is set to no).
Postgresql Optimization: fsync
Tags: postgres, apacheage
Published: 2023-08-02 23:43:57

Different parameters perform different optimization functions when tuned. It is not a one size fits all. Let's consider `fsync`, a concept common in most computer systems.

Failing to plan for unforeseen events during read and write operations in Postgresql is equivalent to planing to fail. `fsync` ensures that the Postgresql cluster can maintain it's state after an operating system or hardware failure.
With `fsync` parameter turning on, Postgres will ensure that data changes will be written back to disks. So that in case of operating system or hardware failure, the database can
always return to a consistent state. However it will cause additional overhead while doing `WAL`. It not recommended of setting this parameter to off, instead turning off
`synchronous_commit` under noncritical circumstance improve the database performance.

## What is WAL and synchronous_commit?

### WAL
WAL stands for `Write-Ahead Logging`. What does this mean in Postgresql operation? WAL plays a key role in Postgresql data integrity. It restores database file contents after a crash. 

### synchronous_commit
Synchronous commit guarantees a transaction is committed and changes on data are written into disk permanently before it is recorded as complete in WAL. This ensures no data will lose under any circumstances. However, it is known that disk access is quite an expensive operation, having synchronous_commit on will cause significant overhead in a transaction time. The risk of having this parameter off is the data loss of
the most recent transactions before power off or hardware failure. Normally under noncritical environment, it is a good way to have it disabled.
Setting up PHP for Local Development
Tags: php, beginners, programming, laravel
Published: 2023-08-02 22:16:11

---
canonical_url: https://seankegel.com/setting-up-php-for-local-development
---

I am building a new PHP application with [PHP](https://www.php.net/) and [Laravel](https://laravel.com/).

Before, for MacOS, I typically installed PHP with Homebrew. Sometimes, I've even used Docker and things like Laravel Sail, however, those could sometimes have performance issues and there were still tools where I wanted PHP locally.

Recently, Laravel Herd was released to make this process much easier. I will use [Herd](https://herd.laravel.com/) to quickly get started. It is a tool for MacOS to quickly install everything needed to spin up a new Laravel or other PHP based applications locally.

![Installing Laravel Herd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo0v0hwjigmiloor33qu.png)

If you have used something like Laravel Valet previously, Herd does much of the same, however, it is much faster to setup. Also, since Herd is using static binaries of PHP, it actually provides better performance than the Homebrew installations.

After completing the Herd installation, `php`, `composer`, and `laravel` will be available in your terminal. Any sites you place in the `~/Herd` directory will be available in the browser. This path is configurable and additional paths can be added through the settings.

![Laravel Herd - Services and PHP Versions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91wauu6m36o0y1bvv9jo.png)

The settings also allow installing additional versions of PHP and quickly switching between them.

Now that we have Herd setup and PHP, Composer, and Laravel installed I will move on to setting up a Laravel application in a future post.

And thank you to the Laravel team and BeyondCode team for creating an amazing tool!

---

**Continue Learning**

- [Setup a Local Database](https://dev.to/sean_kegel/setup-a-local-database-136p)
Day 796 : What's It Gonna Take
Tags: hiphop, code, coding, lifelongdev
Published: 2023-08-02 22:14:47

_liner notes_:
- Professional : Signed in with a message waiting for me that I would probably need to make changes to the documentation. Had a meeting where I double checked if the changes would be necessary. It was agreed that the changes should be made. Spent some time responding to questions in a GitHub repo and community channel. Started working on one ticket and ran into something that I have a question about. I scheduled a message for my manager so they can see it in the morning. Decided it would be a good time to go ahead and make the updates to the documentation. Finished that up and it was time to call it a day.

- Personal : Went through some tracks for the radio show. Looked through Bandcamp for tracks that I'll pick up on Friday for Bandcamp Friday so that artists will see a bigger share of the sales. I also paid my bills for the month. Did a little work on my side project. I also ordered a new battery for my van.

![Rows of sharp rocks coming up out of the sand in Sakoneta Beach, Spain at sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gck07be3om05sx6lnae9.jpg)

I did a test of the solution I came up with securing my cabinets to the frame. Feels really sturdy so I'll bolt things down on the real frame. I think is what's it gonna take to hold it together. Shouldn't take too long, there are only 2 sections I need to fasten. Fingers crossed it goes smoothly. Think I'll put together the Bandcamp list early so I can just pick them on Friday and do my social media posts. Maybe work on the details page for my side project. The new "Guardians of the Galaxy" released on Disney+ so I'll probably end the night watching it.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 3p_sDhfeEX0 %}
NPM Commands Practical Guide: Get to Know Your Packages and Keep Your Project Up-to-Date
Tags: npm, javascript, webdev
Published: 2023-08-02 22:08:46


---
title: NPM Commands Practical Guide: Get to Know Your Packages and Keep Your Project Up-to-Date
published: true
description: Detailed guide to npm commands. Explains commands that are useful for managing dependencies and searching for information.
tags: npm,  JavaScript, WebDev
---


# NPM Commands Practical Guide: Get to Know Your Packages and Keep Your Project Up-to-Date

## Table of Contents

1. [Introduction](#introduction)
2. [npm docs Command](#npm-docs-command)
3. [npm repo Command](#npm-repo-command)
4. [npm outdated Command](#npm-outdated-command)
5. [npm v Command](#npm-v-command)
6. [Conclusion](#conclusion)

---

## 1. Introduction

For developers working with Node.js, npm is an indispensable tool. However, npm has many commands, and not all developers may be fully aware of each command's functionality. This article will explain several npm commands and how they can enhance a developer's productivity.

---

## 2. npm docs Command

The npm docs command is used to open the official documentation of a specified package in a browser. For instance, running the following command will open the official documentation of Express.js.

```
npm docs express
```

This command is extremely handy when you want to learn about a new package or check the usage of an existing package.

---

## 3. npm repo Command

The npm repo command is used to open the repository (usually on GitHub) of a specified package in a browser. Running the following command will open the GitHub repository of Lodash.

```
npm repo lodash
```

This command is useful when you want to refer to the source code of a package or report an issue.

---

## 4. npm outdated Command

The npm outdated command is used to display the packages in your project that need updating. Running the following command will display the current version, latest version, and where the package is specified (dependencies) for each package.

```
npm outdated
```

It is recommended to run this command regularly to keep your project up to date.

---

## 5. npm v Command

The npm v command is used to display detailed information about a specified package. Running the following command will display all published versions of React.

```
npm v react versions
```

If you want to see detailed information about a package, run the command as follows:

```
npm v mongoose
```

This command will display the package description, version history, repository URL, license information, dependencies, etc. It is helpful when choosing a new package or investigating detailed information about an existing package.

---

## 6. Conclusion

In this article, we introduced several handy npm commands. By using these commands, you can easily open package documentation and repositories, and also ensure that the dependent packages of your project are up to date.

Npm is a powerful tool, and fully utilizing its functionality can significantly enhance a developer's productivity.

---
Home Value Regression Analysis
Tags: python, beginners, learning, datascience
Published: 2023-08-02 22:01:23

[GitHub](https://github.com/cristopher-d-delgado)

- As I continue my journey into data science and continue learning new data analysis methods, I am proud to have completed my second project showcasing my skills. This project is all about predicting home values located in King County Washington within the years 2021-2022. 

## Methodology:   
- Perform data cleaning which consisted of changing data types to appropriate/expected types.
- Normalize data and linearize continuous data accordingly.
- Perform exploratory data analysis to understand the correlations of the features with the price of a home.
- Take on an iterative approach to creating prediction models using Linear Regression.

## Data Normalization:

- I prepared the continous data by standardizing the distribution in order to compare it to a z-distribution. In doing so I was able to remove any outliers 3 standards deviations away from the sample mean and then convert the values back into their original values.  

![normalization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7g8zcg3x2036e2jdhg5.png)

## General Trends:
- After removing outliers, correcting datatypes, and manipulating data representations I was then able to begin viewing general trends in the data with my target variable being 'price'. Price in this context refers to the home sell price. 
- Viewing general trends then allowed me to see the features that most impact a home value.   

![bath](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o6zlyttlokc5cs58ru8.png)
![cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9kqd7owpenfh7c5tg5m.png)

## Best Model: 
This model has the best interpretability and lowest err out of all the models I generated for this project. This model was achieved using polynomial regression. 
 
![model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knmn3k13ztxrhla92197.png)

## Conclusions:
- Location can make up for most of the price in a home's value. 
- Home aspects such as bedrooms, bathrooms, and square footage matter. 
- A home's construction and state matter.

## Challenges: 
- A part of my data preparation was zip code extraction so I can consider visualizing how location impacts price more in depth. Unfortunately, I was not able to develop a clear graph that showcased its impact due to so many unique zip codes. I still included zip code impact in my models. 

## Learning Outcomes:
- I managed to create predictive models and learned all about statics used in data science. 
- I improved my data visualization abilities. 
- Learned to draw insights from regression modeling.  

Please feel free to review the entire project in my GitHub [repository](https://github.com/cristopher-d-delgado/Project_Linear_Regression_King_County).
The 51st Day of the 100 Days of Code Challenge
Published: 2023-08-02 22:00:29

Hey everyone!

Today I finished everything I believe needs to be in the initial upgrade of the real-time transcription app project I've been working on. Hoping it gets merged!

Took yesterday off because of some math homework, will probably happen some more during this month.

I implemented "sequential" transcription, meaning the entire audio data will be re-transcribed every set amount of seconds. It allows for constant refinement and way more accuracy in the transcriptions. The speaker diarization isn't all that good though, since I'm simply using pyannote's diarization pipeline. The occasional speaker-swapping may occur, where Speaker 1 becomes Speaker 2 and so on. This is because I don't have any control over the speakers, I'd have to use pyannote's building blocks to do it. I also refactored the entire codebase to accompany this change. That's it! Hoping to finally move on to more exciting projects and keep this one a maintenance and usual improvement one :)

Happy coding!
#DEVDiscuss: API Designing
Tags: devdiscuss
Published: 2023-08-02 21:52:13

---
title: #DEVDiscuss: API Designing
published: true
description: 
tags: devdiscuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f92fzhfxojcul2gejan.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-26 18:51 +0000
---
Time for #DEVDiscuss — right here on DEV 😎

{% embed https://dev.to/karishmashukla/building-resilient-systems-with-idempotent-apis-5e5p %}

Inspired by @karishmashukla's Top 7 post, tonight’s topic is... API Designing! 

Effective API design is essential for creating user-friendly, efficient, and maintainable software systems. Idempotency is just one aspect, so what elements of API design are most crucial to you and your team? 

### Questions:
- **How do you handle versioning effectively?**
- **When it comes to error handling in APIs, what practices have you found most effective?**
- **How important is idempotency in your line of work?**
- **Any triumphs, fails, or other stories you'd like to share on this topic?**
Introducing Nobox.cloud: A Backend as a Service for JS Devs
Tags: javascript, backend, frontend, firebase
Published: 2023-08-02 21:51:27

Late last year - 2022, I suddenly found myself in a situation where I got flooded with several solutions I needed to build with little or no resources to bring them to reality, time being the scarcest of these resources. 

Best thing I could do, as I thought then, was to build a backend as a service product that would at least remove the backend challenge off my list. I guess , you would be wondering why I didn't just use firebase at the time. I just didn't like to do that, the integration process was already disappointing.  I wanted something that fit into my workflow and most importantly, a BAAS that gives me a custom-experience most backend-as-a-service out there couldn't give. 

I ended up building nobox.cloud with help from some of my friends and since then, it has evolved far beyond being just a personal tool – it's now being embraced and used by others too!.  

Bottom line here is: We would really love it if you could check out nobox.cloud and give us some feedback. 

Currently, we're in the Alpha Release stage and have decided not to have a waitlist, so registration is open for a limited time.

During this Alpha phase, we're particularly eager to gather feedback from users like you. 

I'm looking forward to hearing your thoughts on nobox.cloud!
Go queries
Tags: discuss, go, backenddevelopment, technicalwriting
Published: 2023-08-02 21:35:06

Hey Dev Community, 👋🏾

I've been doing some #Go learning and practicing. Also working on article - "How to achieve Concurrency in Go"

For the #Gophers and anyone interested in Go. 

- What aspect of Go would you like to learn about?

- Have you struggled with any particular Go concept that you'd like me to explain in detail?

- Is there a specific Go library or tool you'd like a tutorial on?

Mention it here, I'll pick from the comments and write an article on it. 😎
Intro to Python - Day 3 - Class Variables vs Instance Variables
Tags: python, webdev, beginners, programming
Published: 2023-08-02 21:30:10

*Hi there. I'm a New York City based web developer documenting my journey with React, React Native, and Python for all to see. Please follow my dev.to profile or [my twitter](https://twitter.com/stonestwebdev) for updates and feel free to reach out if you have questions. Thanks for your support!*

Today's lesson is a simple one yet presents an important milestone in the Object-oriented programming journey. It closely follows [yesterday's tutorial on creating classes](https://dev.to/jwhubert91/intro-to-python-instantiating-a-class-2550).

When creating a class in Python, you can either create a variable on the class or you can create an instance variable within the constructor function.

The difference is that class variables are defined on the entire class. When they're changed anywhere they are changed for every instance of the class. This makes them similar to a global variable, and very dangerous.

There may be rare instances where we want to create these, but in general in the wild you'll want to stick to instance variables 99% of the time. These are variables defined only on an instance of a class. When you change them for one instance of a class it doesn't have any effect on the other instances of that class.

In code it would look like this:

```python
class Person:
    name = "James"

class Dog:
    def __init__(self):
        self.name = "Fido"
```

**If you like projects like this and want to stay up to date with more, check out my Twitter [@stonestwebdev](https://twitter.com/stonestwebdev), I follow back! See you tomorrow for another project.**