teleren/devto huggingface dataset:
React18のStreaming SSRを使ってNextJSのアプリケーションを部分的にHydrateさせてUXを向上させる
Tags: webdev, react, nextjs
Published: 2022-11-02 16:57:07

React16.6から追加され、いまだにexperimentalではある`<Suspense />`というコンポーネントがあります。React18から [Streaming SSR](https://nextjs.org/docs/advanced-features/react-18/streaming) が実装され、コンポーネントを非同期にレンダリングできるようになりました。それによってSSRを効かせたアプリケーションを部分的に読み込ませたままユーザーに返すことで実時間を短縮してユーザー体験を向上させよう！という話です。

## SSRについて
そもそもSSRのデータフローについて軽く話しておきます。ここでは、レンダリングの際に何らかのWebAPIからデータをFetchするアプリケーションを想定します。

まずクライアントがURLにアクセスしてリクエストを飛ばします。リクエストを受け取ったサーバーはgetServerSidePropsを通してWebAPIからデータをFetchしてきます。データのFetchが完了するのを待った上でpropsが定義され、コンポーネントがレンダリングされます。

```tsx
export async function getServerSideProps(context) {
  const data = await fetch('...')
  return {
    props: {
      // ...
    },
  }
}
```

レンダリングされたHTMLをクライアントに送り、JSを読み込み、最終的にHTMLにHydrateします。Hydrateが完了するとユーザーがWebページを操作できる状態になります。

さて、この段階で「待たなければいけない瞬間」が存在しています。データのFetch、JSの読み込み、Hydrate、これらの処理が実行されている間ユーザーは待つしかありません。フロント側でいくらチューニングされていても、呼び出したWebAPIが遅ければ、それだけでページのレスポンスが悪くなってしまいます。

## Streaming SSR
目玉機能の登場です。こいつの登場によって、これらの「待たなければいけない瞬間」を有効活用できるようになります。

例えば、以下のようなコンポーネントが存在するとします。非同期にデータをfetchするコンポーネントCがある場合、fetchが完了するまで関係のないコンポーネント（A、B）も待つ必要がありました。しかしReact18からは以下のように`<Suspense />`コンポーネントでラップしたコンポーネントを除いたコンポーネントのHTMLが先にクライアントに返却されるようになります。代わりに`fallback`propsに渡したコンポーネントが描画されます。

```tsx
import { Suspense } from 'react'

const Component = (props: Props) => {
  return (
    <Container>
      <A />
      <B />
      <Suspense fallback={<Loading />}>
        <C />
      </Suspense>
    </Container>
  )
}
```

クライアントサイド側でコンポーネントCのデータFetchを行い、完了した時点でレンダリングされます。これによってAPIによるページ全体のレンダリングの遅延は解決できるようになりました。

## Hydrate
しかしこの状態、表示はされますがページが操作可能な状態にはなっていないので、周りのUIはハリボテ状態になっています。しかし、`React.lazy`を組み合わせることで、Fetchが完了する前にコンポーネントCを待たずにHydrateさせることができます。（`<Suspense />`と組み合わせることでSSRでも効くように）

```tsx
import { Suspense, lazy } from 'react'

const C = lazy(() => import('./C.tsx'))

const Component = (props: Props) => {
  return (
    <Container>
      <A />
      <B />
      <Suspense fallback={<Loading />}>
        <C />
      </Suspense>
    </Container>
  )
}
```

うれしい！
Freecodecamp Portfolio Project
Tags: codepen
Published: 2022-11-02 16:43:40

Hey Guys i am finally done with my Responsive web design course and  this is the last project i have not  done much project. So those projects are from freecodecamp, but i was the one that build the portfolio like freecodecamps own
{% codepen https://codepen.io/avwerosuotrust/pen/GRGgjvJ %}
Navbar issue. Please help!
Tags: help, beginners
Published: 2022-11-02 16:37:16

Hi,

First post here (hopefully not last).

My dev skills are very basic, not sure where this should go. I have a navbar item that works fine, except for one small issue:

When I am in Stock 1 page, the subnav menu items don't appear (I assume it has to do with the page being active). However, this only happens inside this specific page. The rest of the submenu pages do show the submenu items. Can you take a look at the code and suggest what could be the problem?

Thanks.

Here is the code:

HTML

<div class="navbar">
  <a href="https://happil.sg-host.com/">Home</a>
  <a href="https://happil.sg-host.com/about-efa">About EFA</a>
  <a href="https://happil.sg-host.com/about-happi">About Happi</a>
  <div class="subnav">
    <button class="subnavbtn" onclick="window.location.href='https://happil.sg-host.com/courses';">Courses
    <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="https://happil.sg-host.com/course-stock-1/">Stock 1</a>
      <a href="https://happil.sg-host.com/course-stock-2/">Stock 2</a>
      <a href="https://happil.sg-host.com/course-stock-3/">Stock 3</a>
      <a href="https://happil.sg-host.com/course-options-1/">Options 1</a>
      <a href="https://happil.sg-host.com/course-options-2/">Options 2</a>
      <a href="https://happil.sg-host.com/course-options-3/">Options 3</a>
    </div>
  </div>
  <a href="https://happil.sg-host.com/contact">Contact</a>
</div>


CSS

.navbar {
  overflow: hidden;
  background-color: #ffffff;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: #64748B;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #64748B;
  padding: 14px 16px;
  background-color: #ffffff;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: #ffffff;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  width: 100%;
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: #64748B;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}
Webpack 2
Tags: webpack, javascript, typescript, react
Published: 2022-11-02 16:31:36


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

```
npm install webpack --save-dev
```


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

```
 npm install webpack-cli --save-dev

## soddaroq ko'rinishi
 npm i -D webpack webpack-cli 
```

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


We can uninstall on npm

```
npm uninstall webpack webpack-cli

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8swco4sogl1x8g6xzhxm.png)
How can I get XDT to recognise NLOG section?
Tags: help, dotnet, webdev
Published: 2022-11-02 16:23:09

---
title: How can I get XDT to recognise NLOG section?
published: true
tags: help, dotnet, webdev
---

I am somewhat stuck trying to get the configuration file to change depending on the build (release vs debug).

Has anyone else solved this issue?

{% stackoverflow 74291019 %}
Webpack 1
Tags: webpack, javascript, react, lean
Published: 2022-11-02 16:18:37

**Webpack learning**

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



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


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4veb7i4udf7j24e0n4ui.png)
Guard clauses & Magic numbers
Tags: cleancode, readability, magic, guard
Published: 2022-11-02 16:15:29

These two simple, language-agnostic concepts helped me significantly improve the **readability** of my code. I'll give you a quick definition for each and a few examples to illustrate why they're pretty cool. Let's go.
    
##**Guard Clauses**

Guard clauses are basically checks that immediately exit a function if its conditions are met. There's a few reasons to use them, but I mainly like them for the improvement to code readability.

You can think of them as little bouncers or **guardians** for the rest of your code. Let's look at an example:

Starting with this function:

```java
public void party(Person dancer, Song song) {

  if(dancer.isCool) {
    if(dancer.likes(song) {
       dancer.dance();
    } else {
      throw new DancerDislikesSongException();
    }
  } else {
    throw new DancerIsntCoolException();
  }
}
```

We can use **guard clauses** to make the function much easier to read:

```java
public void party(Person dancer, Song song) {

  //Cool people only!
  if(!dancer.isCool) {
    throw new DancerIsntCoolException();
  }
  
  //I'm not moving if I ain't groovin'
  if(!dancer.likes(song)) {
    throw new DancerDislikesSongException();
  }
  
  dancer.dance();
}
```
See how the conditional statements are "protecting" the rest of the code? Those are our **guard clauses**! Easy, right? Let's move on to our next concept.

##**Magic numbers and strings**

We call a number or string "magic" because we are unsure of their meaning in a certain context. They are there, doing something, but we **don't really know what they're doing**. 

The solution to these is to replace them with **constants**, using a name that accurately describes their meaning.

Here's an example:

```java
public void pay(Double subtotal, PaymentMethod pm) {
   if(pm.getId() == 1){
      throw new NotImplementedException();
   }
   
   Double total = subtotal * 1.10D * 1.37D;
   pm.pay(total);
}
```
_The numbers Mason! What do they mean??_

To help with code readability and as a favor to the rest of your team (and yourself), we can replace these magic numbers with constants:

```java
//You would usually put these in an Enum
public static final Double TAXES = 1.10D;
public static final Double SHIPPING_FEE = 1.37D;
public static final Long DEBIT = 1L;

public void pay(Double subtotal, PaymentMethod pm) {
   if(pm.getId() == DEBIT){
      throw new NotImplementedException();
   }
   
   Double total = subtotal * TAXES * SHIPPING_FEE;
   pm.pay(total);
}
```
Now, our code speaks for itself and the meaning of those pesky magic numbers is evident. 

And that's it! Two concepts to **help you write cleaner code**.

Do you have any techniques like these that you'd like to share with me? Leave them in the comments and let's help each other improve!
Getting Started on Elixir and Ecto Part 4
Tags: elixir, database, programming, webdev
Published: 2022-11-02 16:05:07

## Creating and Validating input Data


To insert a new record into our `tasks` table, run this code:

```
task = %Taskers.Tasks{}
Taskers.Repo.insert(task)
```

To insert the data into our database, we call `insert`. which is the module that uses Ecto to talk to our database. A successful insertion will return a tuple, like so:

```
{:ok, %Taskers.Tasks{__meta__: #Ecto.Schema.Metadata<:loaded, "tasks">, title: nil, id: 1, ...}}
```

The `:ok` atom can be used for pattern matching purposes to ensure that the insertion succeeds.

```
{:ok, tasks} = Taskers.Repo.insert person
```


> **NOTE:** In Ecto, you may wish to validate changes before they go to the database. For this, Ecto has [changesets](https://hexdocs.pm/ecto/Ecto.Changeset.html). _Changeset will only allow defined parameters through and anything not in the list will be ignored._

{% embed https://gist.github.com/itskenzylimon/026623e0ac2fc441407224146ab3b781 %}

This insertion will fail since the required values are not passed. The first return element is a tuple `:error` which contains the specifics of the error

{% embed https://gist.github.com/itskenzylimon/c68cd8e4d00aa4c2bd427960e568e52e %}

We can access these **error messages** by doing some **pattern matching:**

{% embed https://gist.github.com/itskenzylimon/b7429ca463bdcaeb7edb4c49667b1fff %}


> **NOTE:** **Since changeset had errors, no record was inserted** into the tasks table. For a better way to handle changeset, use a case statement on the turple.


{% embed https://gist.github.com/itskenzylimon/c94c794b6f07746a06b459e6073d0bbd %}


**To show these error messages** in a more **human-friendly** way, we can use [Ecto.Changeset.traverse_errors/2:](https://hexdocs.pm/ecto/Ecto.Changeset.html#traverse_errors/2)


{% embed https://gist.github.com/itskenzylimon/ec7b03ff7e3c2dcbd5cc26a38659771f %}

```
This will return the following output:
%{   
   user_id: ["can't be blank"],
   title: ["can't be blank"],
 }
```
Introduction to COM
Tags: excel, automation, python, win32com
Published: 2022-11-02 15:48:47

This will be the first post of a series i intend to write in order to challenge myself and share my knowledge about COM automation on Windows.

## Useful sources
- Early vs Late binding:
  - [this](https://stackoverflow.com/a/70821925/8965861) and [this](https://stackoverflow.com/questions/50127959/win32-dispatch-vs-win32-gencache-in-python-what-are-the-pros-and-cons) SO answers
  - "[Python Programming on Win32](http://www.icodeguru.com/WebServer/Python-Programming-on-Win32/ch12.htm#:~:text=Forcing%20Early%20or%20Late%20Binding)" book (_Andy Robinson, Mark Hammond_)
  - [pywin32 docs](http://timgolden.me.uk/pywin32-docs/html/com/win32com/HTML/QuickStartClientCom.html#StaticDispatch)
  - "[Early Vs Late Binding In Win32Com](https://www.youtube.com/watch?v=xPtp8qFAHuA)" Youtube video (by "Sigma Coding")
- API references:
  - [Office Suite VBA Documentation](https://learn.microsoft.com/en-us/office/vba/api/overview)
- Use COM [Constants](http://timgolden.me.uk/pywin32-docs/html/com/win32com/HTML/QuickStartClientCom.html#UsingComConstants:~:text=of%20the%20object.-,Using%20COM%20Constants,-Makepy%20automatically%20installs)
- Tutorials:
  - [Python - Win32COM - Core Concepts](https://www.youtube.com/watch?v=MTFCV2qbAIw&list=PLcFcktZ0wnNkHGYuS-p8wUu7SrzO7TKR3)
  - [Python Outlook Automation | pywin32](https://www.youtube.com/playlist?list=PLHnSLOMOPT11njaNmENJN6p2ro9MTc7t_)
Python: My Learning Journey
Tags: beginners, programming, python, devjournal
Published: 2022-11-02 15:29:54

Hi there,

My name is Terrell, and I am an aspiring software engineer. I am starting this writing to accomplish a few tasks.

The first is to put what I'm learning into a format that reenforces the skills that I am developing.  What skills you ask?? PYTHON the wonderful world of automation, data manipulation and of course API's.

Truth be told.... I um...don't really know what all of that means. But finding out what these terms mean is the purpose of this blog along with reason 2 of why I'm doing this. 

It is to hopefully help others who are learning Python as well. I have dabbled in HTML, CSS and JavaScript. I found the first two to be pretty easy to learn. JavaScript....well we won't talk about that right now. I'm having a good day, lol. 

Anyways, when I started learning about Python I was immediately engaged and wanted to know more. I've heard that Python is super easy to learn and user friendly and it is a great beginner language. Well...I'm a beginner so heck yeah! 

As with anything worth doing. This won't be a cakewalk. I will certainly oof on understanding certain concepts, tools and best practices. (I'm taking to you PEP 8 standards)

But my hope is with struggle comes understanding. and from this understanding comes skill. This way we can get past the technicalities and start solving issues.

So, stay tuned, odds are I will have more questions than answers. But the great thing is we can answer them together. Be well.
Easy Board
Tags: webdev, beginners, html
Published: 2022-11-02 15:44:57

**Need** a way to type things down temporarily? Don't go looking for an extension or go to VS Code. Just type in _about:blank_ then right-click, look at the bottom of the menu, click _inspect_ then a popup with the blank slate pops up, and you can change it to say what you want. After you reload the page, you cannot see the changes. I will find a way to incorporate Javascript into the code. Cya!
__________

USERone signing off...
7 Platforms To Prepare You For Programming Interviews
Tags: programming, beginners, tutorial, career
Published: 2022-11-02 15:27:28

# Learn How To Program Like A Pro

Don't be intimidated by the notion of getting a programming job. Even if you've never programmed a day in your life, there are ways for you to learn how to program like a pro on your own time.

If you're looking to land a programming job, it's important to be prepared for the technical interview. In fact, many companies use this interview as a way to screen out candidates who are unqualified for the position.

Technical interviews usually involve a short written test and/or an in-person coding exercise. These tests can be intimidating, but with practice, you can learn how to program like a pro!

Here are 5 platforms that will help prepare you for programming interviews:

## 1. LeetCode
LeetCode is arguably the best platform practice technical interview questions.

Interview prep? This is where you want to be!

Developers preparing for jobs at the largest of companies, Facebook, Google, use LeetCode.


## 2. InterviewBit
I highly recommend this platform for technical interview prep.

They have the exact questions that are used in various large tech companies.

Interview guides for different tech companies.

They even have free mock interviews.

check this out: https://www.sleeplessyogi.com/posts/8-free-sites-to-master-frontend-development


## 3. CodeWars
CodeWars is extremely popular for learning programming.

It's also great for technical interview prep.  There are a ton of good questions here.

And they have over 55 languages that you can work in, so go nuts.


## 4. CodeChef
CodeChef has a wide difficulty rating with 3,000+ questions. So you can build yourself up step by step.

— Beginner friendly
— Expert friendly

If you're feeling really courageous you can also compete with others on technical questions.


## 5. HackerRank
Solve computer programming challenges to get hired.

It’s actually an employment platform.

Demonstrate how skilled you are here and you might end up with a job offer.


## 6. HackerEarth
8,000+ questions.

2,000+ challenges.

1,000+ hackathons.

Join over 3 million other developers.

Trusted by over 1,000 companies for hiring.


## 7. Edabit
Edabit is new kid on the block that is really good.

It's great for learning to code or learning a new language.

Apply a filter to only see difficult challenges and you will be given  a plethora of Qs you can use for interview prep.


## To sum it up

If you think you have what it takes to learn to code like a pro, these 7 platforms are some of the best online resources for you. But before you get started with learning the fundamentals, be sure to do your research and prepare for the practical application that is about to come your way. Good luck!

______________________________

I love jotting down my thoughts on my blog [Sleepless Yogi](https://www.sleeplessyogi.com/).

Follow me on Twitter [@sleeplessyogi]
Deploy Azure Key Vault and Azure Container Registry for Document Signing with Notary
Tags: cloudnative, security, devops, azure
Published: 2022-11-02 15:22:29

In this article, you'll deploy an Azure Key Vault and Azure Container Registry instance with Terraform.

Terraform is an infrastructure as code tool that lets you define your infrastructure resources with readable configuration files. You'll use it to deploy the necessary Azure infrastructure that your GitHub workflow depends on for signing container images.

By the end of this article, you'll have deployed all the Azure resources needed to digitally sign container images with Notary.

## Create a service principal

Your GitHub workflow and Terraform both need an service principal for authenticating with Azure. 

Create a new service principal by running the following `az` command:

```bash
az ad sp create-for-rbac --name notary-gh-sp --role contributor \
--scopes /subscriptions/<subscriptionId> --sdk-auth
```

Replace `subscriptionId` with your Azure subscriptions Id.

> **TIP** _Store the JSON object in a secure place_. You'll use it to create a credential to authenticate to Azure with the Azure Login GitHub Action.

## Export Terraform environment variables

One of several ways to pass credentials to Terraform is through environment variables, without these variables Terraform will failed to authenticate to Azure.

Use the following `export` commands to set the necessary environment variables for the Azure Terraform provider.

```bash
export ARM_CLIENT_ID="00000000-0000-0000-0000-000000000000"
export ARM_CLIENT_SECRET="00000000-0000-0000-0000-000000000000"
export ARM_SUBSCRIPTION_ID="00000000-0000-0000-0000-000000000000"
export ARM_TENANT_ID="00000000-0000-0000-0000-000000000000"
```

Replace the `00000000` with the values provided in the JSON from the `az ad sp create-for-rbac` command.

## Apply the Terraform configuration

With the service principal created and the environment variable set, you're now ready to apply the Terraform configuration.

1. Change directories to the `terraform` folder.
    ```bash
    cd terraform
    ```
2. Initialize Terraform
    ```bash
    terraform init
    ```
3. Apply the Terraform configuration
    ```bash
    terraform apply
    ```
    When prompted type `yes` into the terminal and hit **enter**.


![Terraform apply command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akkmzxd98u8oyb4g00bv.png)

## Create an Azure Container Registry Token

Your last task in this tutorial is to create a token that Notation, the command-line tool for Notary, will use to authenticate to the registry when signing images.

Run the following command to create an ACR token:

```bash
az acr token create \
--name exampleToken \
--registry <registryName> \
--scope-map _repositories_admin \
--query 'credentials.passwords[0].value' \
--only-show-errors \
--output tsv
```

> **TIP** _Store the password value in a secure place_. You'll need to store it as a GitHub secret later in the demo.
Signing Container with Notary and GitHub Actions on Azure
Tags: cloudnative, security, devops, azure
Published: 2022-11-02 15:22:16

In this series, you'll learn how to digitally sign a container image hosted in Azure Container Registry using Notary with a GitHub workflow.

[Notary](https://notaryproject.dev/) is a CNCF project that provides a set of tools that help you sign, store, and verify OCI artifacts using OCI-conformant registries. Digitally signing artifacts is one of many steps you can take to secure your software supply chains and improve the security of your software.

By the end of this series, you'll have a GitHub workflow that builds a simple web app container image, pushes that image to ACR, and signs the container image with Notation.

## Prerequisites

- [Azure subscription](https://learn.microsoft.com/dynamics-nav/how-to--sign-up-for-a-microsoft-azure-subscription)
- [GitHub account](https://github.com/signup)
- [Terraform](https://learn.hashicorp.com/tutorials/terraform/install-cli)

## Create a new repository with the template

A sample repository is provided to give you all the scaffolding needed to setup a GitHub workflow for signing container images using Notary. 

Complete the following steps to create a new repository using the template.

1. Go to the [acr-notary-sign-images-sample](https://github.com/Azure-Samples/acr-notary-sign-images-sample).
2. Click **Use this template**.
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykfurboiwhe6vrndhxl1.png)
3. Select an _Owner_ and enter a _Repository name_, then click **Create repository from template**.
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4diprzfxrthgp9pjn4mw.png)
4. Wait for the template to create, then the click **Code** button Under the _Clone_ section, copy the URL.
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1qzdrmiasdcooatlqss.png)
5. Next open a terminal window and use the `git clone` command to pull down the new repository.
    ```bash
    git clone <yourRepoURLHere>
    ```
## Next steps

Continue to the next article to deploy the required Azure resources.