teleren/devto huggingface dataset:
Server-render your SPA in CI at deploy time 📸
Tags: javascript, webdev, github, githubactions
Published: 2023-03-02 10:47:36

If you deploy your SPA using [GitHub Actions](https://github.com/features/actions) you can add this new [action](https://github.com/marketplace/actions/server-side-render-ssr-with-react-snap) to your workflow to have it build server-rendered HTML!

Server-side rendering (SSR) is [great for SEO and performance](https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8). I use it for projects that have an expensive initial render or have links that I want to be discoverable.

[react-snap](https://github.com/stereobooster/react-snap) is a tool to help with SSR; a while ago I wrote about it:

{% embed https://dev.to/bryce/perform-a-react-disappearing-act-with-react-snap-1eo3 %}

I've been using it as a `postbuild` script but it recently broke in CI. The fix for it became rather complex, so rather than include this in each project that I use it for I decided to bundle everything into a standalone action. This also significantly reduced the number of per-project dependencies as it prevents installing big ones like `puppeteer`.

Though `react` is in the name, this will work for any framework that supports hydration. In [Svelte](https://svelte.dev/docs) for example, this just means switching the `hydrate` flag:

```js
import App from './App.svelte';

const app = new App({
  target: document.querySelector('#server-rendered-html'),
  hydrate: true
});
```

Once your app is hydratable, replacing your `build` step with this [action](https://github.com/marketplace/actions/server-side-render-ssr-with-react-snap) will run `npm build` followed by `react-snap`:

```yml
jobs:
  prerender:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      ...
      
      - name: Server-side render
        uses: brycedorn/react-snap-action@v1.0.2
```

You can then deploy this to GitHub Pages or wherever. Give it a try and let me know if it helps simplify your workflow!

{% github brycedorn/react-snap-action no-readme %}
Building Serverless Applications with AWS Lambda
Tags: aws, books, serverless, lambda
Published: 2023-03-02 14:08:44

{% youtube gGe022vdK5E %}
“[AWS Lambda in Action: Event-driven serverless applications](https://rebrand.ly/devshelf-004
)” by Danilo Poccia is a comprehensive guide for developers looking to understand and implement serverless applications using Amazon Web Services (AWS) Lambda. The book covers the core concepts of serverless architecture and walks readers through the process of building and deploying real-world applications on AWS Lambda.

**What Does This Book Cover?**

The book explains the benefits of serverless computing and why AWS Lambda is a popular choice for implementing event-driven applications. It also provides clear, step-by-step instructions for setting up the necessary components for serverless computing, including AWS S3, API Gateway, and DynamoDB. Throughout the book, readers will learn how to develop, test, and deploy Lambda functions using Node.js, and also how to integrate other AWS services and tools.

> Chapter 1: Running functions in the cloud
> Chapter 2: Your first Lambda function
> Chapter 3: Your function as a web API
> Chapter 4: Managing security
> Chapter 5: Using standalone functions
> Chapter 6: Managing identities
> Chapter 7: Calling functions from a client
> Chapter 8: Designing an authentication service
> Chapter 9: Implementing an authentication service
> Chapter 10: Adding more features to the authentication service
> Chapter 11: Building a media-sharing application
> Chapter 12: Why event-driven?
> Chapter 13: Improving development and testing
> Chapter 14: Automating deployment
> Chapter 15: Automating infrastructure management
> Chapter 16: Calling external services
> Chapter 17: Receiving events from other services

The book is well-organized and easy to follow, making it accessible to both beginner and intermediate-level developers. It provides hands-on examples and practical advice for optimizing serverless applications and avoiding common pitfalls. The author’s writing style is clear and concise, making it easy to understand the concepts being presented.

In conclusion, “[AWS Lambda in Action](https://rebrand.ly/devshelf-004
)” is a must-read for developers looking to build and deploy serverless applications on AWS. The book provides a solid foundation of knowledge and practical skills for utilizing AWS Lambda, and is a valuable resource for anyone looking to get started with serverless computing.

📚[Get the Book in Amazon](https://rebrand.ly/devshelf-004
)

---

[![DevShelf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v04cas2nc9gcvaznw3va.jpg)](https://devshelf.co/)
Validate file with ZOD
Tags: zod, validation, file, schema
Published: 2023-03-03 09:33:12

Zod is a TypeScript-first schema validation library with static type inference. You can create validation schemas for either field-level validation or form-level validation1. Here’s an example of how you can use Zod for schema validation for a file:



```
const MAX_FILE_SIZE = 5000000;
function checkFileType(file: File) {
	if (file?.name) {
		const fileType = file.name.split(".").pop();
		if (fileType === "docx" || fileType === "pdf") return true;
	}
	return false;
}

export const fileSchema = z.object({
z.any()
.refine((file: File) => file?.length !== 0, "File is required")
.refine((file) => file.size < MAX_FILE_SIZE, "Max size is 5MB.")
.refine((file) => checkFileType(file), "Only .pdf, .docx formats are supported."),`
});
```
Manage Profiles in VS Code
Tags: vscode, productivity, tutorial
Published: 2023-03-02 17:07:28

In Visual Studio Code, a profile is a set of settings that help you customize your environment for your projects. Profiles are a great way to customize VS Code to better fit your need. You can save a set of configurations such as settings, extensions, font size, color theme etc., sync them across your devices, and even easily share them with colleagues. You can create multiple profiles for different scenarios.

For example, a python project might require specific extensions to run python script smoothly, while a Golang project will require different extensions and settings. 

In another use case, you can create a profile with a specific set of extensions and settings like font size, and color theme for a demo project. By doing this, the demo will not mess up your normal VS Code setup, and you can customize VS Code for better visibility during your demo.

## How to Create a Profile in VS Code

### On Windows

To create a new profile, navigate to the top left of your screen, Click File > Preferences > Profiles > Create Profile.

![Windows OS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yohe6sa1ulsfg3k5nr8h.png)

### For macOS

Navigate to Code > Preferences > Profiles > Create Profile.


![macOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3riqu0zq8tzw6vf0wvgx.png)

Alternatively, you can click on settings (gear ⚙️ Icon) at the bottom left of your screen > Profiles > Create Profile. This works for both macOS and windows.

In the image above, I have created a DevOps VS Code profile to meet my DevOps needs. 

When creating a profile, you can choose either “Create an Empty Profile” or “Create from current profile”. 

![Create Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcj5jj801aiyytqw2toe.png)

Selecting “Create from Empty Profile” above will create a new profile without any customizations as though you just downloaded and installed VS Code, while creating from current profile will carry/include all changes or settings, if any exists.

## Manage Profiles
You can easily switch, rename, create, delete, export or import profiles in VS Code by following the prompts on your screen.

![Manage Profiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9i6j6g8ps3m2pmvefl7.png)

## Sync Profiles:
Enable profiles to sync across all devices by using the [setting sync](https://code.visualstudio.com/docs/editor/settings-sync) feature. With this setting sync enabled, creating and deleting a profile from one device, creates and deletes it across all your synced devices respectively.

Is VS Code Profile a feature you would like to explore? Share your thoughts in the comments section.

💡 This article was first published at [blog.paschalogu.com](https://blog.paschalogu.com/). If you found it useful, follow me on [Twitter](https://twitter.com/Paschal_ik) and also on [LinkedIn](https://www.linkedin.com/in/paschal-ogu). Thanks for reading!
Register for Notifications on Android SDK 33
Published: 2023-03-20 14:14:43

Problem: Notifications are not being received after upgrading to Android SDK 33.

Solution: In Android SDK 33 you now have to request permissions to display Notifications. Asking for POST_NOTIFICATIONS alone wasn't sufficient, and some of these maybe overkill but this is what worked for me.

To get the notifications permission, you need to first request permission for the following items:

```
private string[] PermissionsForNotifications =
            {
                Manifest.Permission.ReceiveBootCompleted,
                Manifest.Permission.WakeLock,
                Manifest.Permission.Vibrate,
                Manifest.Permission.Internet,
                Manifest.Permission.AccessNetworkState,
                Manifest.Permission.PostNotifications,
                Manifest.Permission.ForegroundService,
                "com.google.android.c2dm.permission.RECEIVE",                "com.google.android.finsky.permission.BIND_GET_INSTALL_REFERRER_SERVICE",                "android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS",
                "android.permission.REQUEST_COMPANION_RUN_IN_BACKGROUND"
            };
```

When calling the registration it seemed the Channel ID was also required.

```
private int RequestNotificationId = 1000;
ActivityCompat.RequestPermissions(CurrentActivity, PermissionsForNotifications, RequestNotificationId);
```
HTML tags for beginners
Tags: beginners, html, frontend, devjournal
Published: 2023-03-20 15:35:10

HTML elements consist of start and end tags. If you start the tag, you must always end it! An example of this would be:

`<tagname>`Text goes here...</`tagname`>

As you can see this tag has a start tag and an end tag. 

These are some HTML Elements where you will be able to recognise the start and end of the tags:

1. <`h1`>Heading goes here..</`h1`>

This is the heading element. You can see that in the middle of the start/end tag is where you insert the heading. 

2. <`p`>Paragraph goes here..</`p`>

This is the paragraph element. You can see that in the middle of the start/end tag is where you insert your paragraph.

3. <`strong`>Text...</`strong`>

This is the strong element. The strong element is used to wrap around a certain bit of text to show the strong importance of it. An example of the <`strong`> element would be:


```
<p>This is an example of a start/closing tag.<strong>You must always close the tag!</strong></p> 
```
Outcome:

This is an example of a start/closing tag. **You must always close the tag!**

These are only just a few of the HTML elements. There are plenty of others but in this blog I wanted to focus on understanding the very basics of starting a tag and ending it. 

Thank you for reading this blog. I hope that it has helped, in the meantime....

<`strong`>**KEEP CODING 😁**</`strong`>
OpenGauss common log introduction: system log
Published: 2023-03-21 03:33:27

system log
The logs generated by the openGauss runtime database node and the openGauss installation and deployment are collectively called system logs. If openGauss fails during operation, you can use these system logs to locate the cause of the failure in time, and formulate a method to restore openGauss according to the log content.

Log file storage path

The running logs of the database nodes are placed in the corresponding directories in "/var/log/gaussdb/username/pg_log".

The logs generated during the installation and uninstallation of OM openGauss are placed in the "/var/log/gaussdb/username/om" directory.

Log file naming format

Naming rules for database node running logs:

postgresql-creation time.log

By default, a new log file will be generated at 0 o'clock every day or when the log file is larger than 16MB or the database instance (database node) is restarted.

Naming rules for CM operation logs:

The log of cm_agent: cm_agent-creation time.log, cm_agent-creation time-current.log, system_call-creation time.log, system_call-creation time-current.log.
The log of cm_server: cm_server-creation time.log, cm_server-creation time-current.log; key_event-creation time.log, key_event-creation time-current.log.
om_monitor logs: om_monitor-creation time.log, om_monitor-creation time-current.log.
Among them, the file without the current identifier is the historical log file, and the file with the current identifier is the current log file. When the process is initially called, the process will first create a log file with the current identifier. When the size of the log file exceeds 16MB, the current log file will be renamed to a historical log file, and a new current log file will be generated at the current time .

Description of log content

The default format of the log content of each line of the database node:

Date + time + time zone + user name + database name + session ID + log level + log content

The default format of each line of log content of cm_agent, cm_server, and om_monitor:

Time + time zone + session ID + log content The SYSTEM_CALL system call log records the CM_AGENT calling tool commands during operation. The default format of each line of key_event log content: time + thread number + thread name: key event type + arbitration object instance ID + arbitration details.
creating badge-lists, fancy stuff
Tags: webdev, javascript, beginners, opensource
Published: 2023-03-21 06:25:46

![badge list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttbawbg80wklvel0z87i.png)

We're taking this, we're stealing it and we're making it open source. Like modern day Robin Hood.

Since I've borrowed an iPad from the University, I've been getting into making stickers and drawing stuff, so here's a rough sketch of our badge-list. 

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

The basis of this list is a map like we employed in the previous homework. This will be used to create the elements of the badge list and update the count. Everything will be done through a Vercel endpoint with a json file that will need update somehow whether through a database or other means. 

The badge-element will include the badge-icon, badge-title, badge-information or badge-description, badge-creator-icon, badge-creator-name, and a badge-steps-list that needs fleshed out but will be similar the badge-list but within a smaller container.

The drop-down icon is something that will be toggled with a reflective statement so that information can be populated from the Vercel endpoint only when triggered. The project will also need to be a11y compliant. 

Elements like information and titles should be included as slots, and the user should be able to select what icon they would look to use. 

While this is a rough summary, we will be implementing this general concept and then look towards adding more features and components. 



As always, music. 
{% embed https://open.spotify.com/track/3tjgYNFUvqyCGg5NEn4wYb?si=ce695a387d7e4d0e %}
Toured with them in Worchester, MA. They're badass.
Codecademy Python Terminal Project
Tags: codecademy, python, portfolio
Published: 2023-03-21 09:37:42

https://github.com/cece3333/Flashcard_game.git
One of my first project! A simple terminal game in which you can create, modify, delete and show flashcards stored in a json file. 
A "play mode" is accessible in which the front of a random flashcard is displayed for you to guess the back (like Anki without spaced repetition). This is the simpliest version, I intend to change the code and add classes and object to create more features.
What is the best example to learn the ES6 spread operator (...) ?
Tags: javascript, node, react
Published: 2023-03-21 12:47:45

The following example taken from **MDN** is the best example I ever found to learn the spread operator as of 21 March 2023:-

```
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
```
Take a screenshot of VSCode using Polacode Extension
Tags: webdev, vscode, plugins, tools
Published: 2019-10-03 22:39:55

---
title: Take a screenshot of VSCode using Polacode Extension
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k8o4tn51n5zwprs2ioio.png
tags: #webdev #vscode #plugins #tools
---

Sometimes I add some tweets that should include code, so we don't have the option to embed code on twitter, so for that, the only solution is to add an image, in this post I'll show you how to create a screenshot of your code from [Visual Studio Code](https://code.visualstudio.com) by using this extension [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

First, you've to install the extension, click on the `Extensions` icon on the left sidebar of your editor to open the extensions Market place, then type `Polacode` you'll find multiple ones, choose the one that has more downloads.

![Install Polacode for vscode](https://thepracticaldev.s3.amazonaws.com/i/cm0sreyxoo9fiphnylgf.gif)

Then we've to show the command palette by using the shortcut `Cmd+Shift+P` for Mac users, or `Ctrl+P` for Windows users, then type `> Polacode`

![Access Polacode Extension](https://thepracticaldev.s3.amazonaws.com/i/2dcnw4g257k2hk45a627.gif)

Open any file including code, in my case, I'm using a JavaScript as an example, select the code and it will be shown in the right of the editor.

![take a screenshot using vscode](https://thepracticaldev.s3.amazonaws.com/i/ybj3eo7usco5u4q79vid.gif)

I save the file `code.png` on the Desktop folder, so open the file to see the result.

![Open Polacode Result](https://thepracticaldev.s3.amazonaws.com/i/egpaocp4j31toycz2gz2.gif)
Relative color luminance
Tags: color, javascript, luminance
Published: 2019-11-07 23:26:39

C/P-ing this from my older blog posts. This one is from 2014. since I was a junior dev pretty much. Nevertheless it's astonishing how many digital products get this wrong when applying the hyped up dark mode.

---

This is the method for calculating color luminance about which Lea Verou gave talk at the Smashing conference. It enables you to dynamically pick appropriate colors in a way the text remains readable to the human being. Full explanation of the formula is at [w3.org](https://www.w3.org/WAI/GL/wiki/Relative_luminance).

The procedure goes as follows:

1. Calculate luminance for text and background
2. Calculate the contrast ratio using the following formula. (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter of the foreground or background colors, and L2 is the relative luminance of the darker of the foreground or background colors.
3. Check that the contrast ratio is equal to or greater than 4.5:1

The key to it all is to retain proper contrast ratio between foreground and background color luminance.

Here is the actual function that returns the relative luminance of the color:

```javascript
// color array - [r,g,b] , each color with value ranging from 0 to 255
// @return int - number [0-100], describes relative luminance of the color,
//          0 represents the luminance of completely black while
//          100 represents the luminance of the white color.

function luminance(color) {
  var rgb = color.map(function(c) {
    c /= 255 // to 0-1 range
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })

  return (
    21.26 * rgb[0] + // red
    71.52 * rgb[1] + // green
    7.22 * rgb[2]
  ) // blue
}

```

To test it right now you can open up a browser’s console, paste the function and try to use it right away.

Cheers!
How to build a social network with mongoDB?
Tags: mongodb, node, database, architecture
Published: 2019-11-15 13:46:47

I'm wanted to start developing a social network like instagram (more or less).
but I have tried to understand how to design my DB (using mongodb) for the main queries.

So I have few questions:
1. how to save the data of followers/following in the db? it should be in the same document of the users or other?
2. how to fetch all the posts for users from his followers?
3. can I use mongodb for building a social network like instagram?
iPad Sidecar Issues Over USB with VPN
Tags: ipad, sidecar, vpn, usb
Published: 2020-02-03 20:16:17

When I'm working away from home, I like to use my iPad as a second monitor using Apple's "sidecar" feature. However, I noticed that, if the wifi network isn't great, there can be some performance issues or disconnects. So, I wanted to use a USB cable instead.

This worked fine, until I switched on my company's VPN. Within seconds, sidecar disconnected with a cryptic error message. Any attempt to reconnect failed with odd behavior (I'd get an error in OSX, but a black screen would load on the iPad).

Turns out: VPN clients will disable IPv6 unless the VPN configuration has explicit support for IPv6. The reason for this is that a large majority of VPNs are _not_ configured for IPv6, so any IPv6 traffic will bypass the VPN. If you're attempting to use the VPN to secure all of your internet traffic, this is a problem! All of your IPv6 traffic will "leak".

It also turns out that connecting your iPad via USB makes it appear as a virtual ethernet device, configured to use IPv6. So, connecting to the VPN disables IPv6 and sidecar can no longer communicate with the iPad.

However, I'm not using a VPN to secure _all_ of my traffic—just the traffic to my company's network. All of that traffic is IPv4 anyway, so, this security feature is lost on me. Disabling it solves all my sidecar issues! Woo!

So, if you're in the same boat as me, trying to use sidecar with a VPN, try searching through your VPN client's settings or documentation for this feature and disable it. Here's how to do that with tunnelblick:

1. Click on tunnelblick's icon in the menu bar
2. Select "VPN Details"
3. Click on "Configurations" at the top
4. Select your VPN configuration from the left-hand side
5. Uncheck "Disable IPv6 unless the VPN server is accessed using IPv6"
6. You may need to restart the VPN?
7. Profit.
Why are these the gitignore rules for VS Code?
Tags: csharp, dotnet, git
Published: 2019-12-15 18:57:07

If you search for good `.gitignore` rules for Visual Studio Code, you often come across these.

```
##
## Visual Studio Code
##
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
```

I tried using them for a while, but they just lead to problems. It is the equivalent of committing the `.user` files in other .NET projects. The file `launch.json`, for example, contains my own command-line arguments, environment variables, etc. Why would I want those committed? Why would I want changes from other developers overriding mine all the time? Who decided this was a good idea?

It's particularly annoying because `dotnet new gitignore` imports these questionable rules. I just block the entire folder now.

```
.vscode/
```

If I ever clone my repo from scratch, VS Code offers to whip up a new set of files for me anyway. Are there other languages/environments where committing these files is extremely beneficial?