teleren/devto huggingface dataset:
How to reload an SSR Page
Tags: nextjs, javascript, ssr
Published: 2022-04-03 17:25:39

When using SSR you might need to update the data that has been served because a user has done something, such as updating a database or subscribed to your product.

This poses a problem, Next.js doesn't have a feature like `refetchprops` but if the team over at Vercel want to implement it... I am all for it. One solution would be just to hard refresh the page, but that feels almost an anti pattern.

So how do we do tackle this without using a hard refresh? First we should talk about the usual SSR flow that we think of when talking about it.

## The usual SSR flow

When we think of Server Side Rendering we have a two flows in mind and it usually goes something like:

* A user clicks a link that sends them to your website.
* Next.js calls the `getServerSideProps` method and generates the HTML with the data from your api(s)
* The user receives that HTML file, and React rehydrates on the client.

Or

* The User is already on your site, and they click a Next `Link` to navigate to the server-rendered page.
* Next.js calls your `getServerSideProps` method on the server but instead of generating an HTML file as in scenario one. It sends the data as JSON instead.
* React uses that data as the props when rendering the new page, in-browser.
* This is what I love about Next.js , two different scenarios handled slightly differently to increase performance and the user is none the wiser.

## The solution

So the solution is to use built in functionality of Next.js `router` . Using this we can ask Next.js to retrieve the latest from SSR without a hard refresh. If you are in a rush here is the solution: import { useRouter } from 'next/router';

```
import { useRouter } from 'next/router';
export default function YourPage(props) {
 
 const router = useRouter();
 const dataToUpdate = //some object;
 
// API that updates your DB
  const update = fetch('api/update',{
    method: 'PUT',
    body: JSON.stringify(dataToUpdate),
  });
  if(update.status == 200) {
    // ask next router to replace the current path with the current path.
   router.replace(router.asPath);
   }
}
```

### How does this work?

When describing SSR the second path we talked about how Next.js returns a JSON when you use Next `Link` through a client side transition. This is exactly what we are doing by using `router.replace` we are telling Next.js to *perform a client side transition.*

> If you are wondering what `router.replace` does, it does the exact same thing as `route.push` except it doesn't add history to the stack. This means if the user hits the back button it will perform as expected

This means that when this client side transition happens, `getServerSideProps` fires and the JSON returns with the latest information from your database or API.
C++ | Haqida
Tags: beginners, programming, cpp, rashidovdev
Published: 2022-04-03 17:24:06

### Nima uchun boshlovchilar uchun aynan `C++` tavsiya qilinadi ?🤔

### `C++` 
- C++ umumiy maqsadli dasturlash tili boʻlib, erkin shaklda va kompilyatsiya qilinadi. U o'rta darajadagi til sifatida qaraladi, chunki u yuqori va past darajadagi til xususiyatlarini o'z ichiga oladi. U imperativ, ob'ektga yo'naltirilgan va umumiy dasturlash xususiyatlarini ta'minlaydi.
Missing compliance pain in the 🐴
Published: 2022-04-03 17:15:05

For the most part, uploading applications on the AppStore is really straightforward. But you know that one thing you need to do after each upload has been processed? Yeah, that one....missing the code compliance "thing"

![xcode screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0ugmrfzk97qfahdssy5.jpg) 

It's definitely there for a reason. If you are using any kind of encryption you need to state that properly. But for the MOST of us I believe, which do some low-level type apps, and rarely use encryption, it has become one thing that is pain in the ass and with each upload you need to wait for the processing to complete so you can just tap that one radio button.

Well, no more! 🚀

It is surprisingly simple! (So simple it makes you wonder why isn't it there by default)

Just add this key *ITSAppUsesNonExemptEncryption* to your **Info.plist**, and set it to *NO*

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leeijmpfqo5d1knjbowl.jpg) 

---

And Boom! 💥 You are now ready to upload without any hassle. And next time your build is processed, it goes straight to your Testflight.

---

Thank you for reading, you superb person! ♥️

Get in touch on [Twitter][twitter]

Consider subscribing to the newsletter below if you loved the content.

Cheers! 🍻

[andy]: https://medium.com/swift-programming/swift-prettify-your-print-statements-pt-1-64832bb7fafa
[undead]: https://undeadpixel.dev
[twitter]: https://twitter.com/emin_ui
Leetcode Two Sum Problem | DSA | Python
Tags: tutorial, python, career, codenewbie
Published: 2022-04-02 18:15:33

_Leetcode Two Sum Problem link_: https://leetcode.com/problems/two-sum/

I have tried to explain both the bruteforce approach as well as the optimal approach. Easy two sum problem solution. If you are preparing for DSA rounds or for SDE interview then this is for you.If you have any queries feel free to leave a comment. 

## Problem

Given an array of integers _**nums**_ and an integer _**target**_, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

``` 
Example 1:
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].


Example 2:
Input: nums = [3,2,4], target = 6
Output: [1,2]

Example 3:
Input: nums = [3,3], target = 6
Output: [0,1]

```

**Solution 1 : [Bruteforce Method]**


```python
from typing import List
   def twoSum(self, nums: List[int], target: int) -> List[int]:
        for i in range(len(nums)):
            for j in range(i, len(nums)):
                if i!=j:
                    if nums[i] + nums[j] == target:
                        return [i, j]
```


**Solution 2 : [Optimal Solution]**


```python
from typing import List
 def twoSum(list: List[int], target: int) -> List[int]:
    if len(list) <= 1:
        return 'Please pass an array with atleast two elements'
    hashTable = {}
    for i in range(len(list)):
        complement =  target  - list[i]
        if complement in hashTable:
            return [list.index(complement), i]
        hashTable[list[i]] = list[i]
```


I have created a video explaining the solution. 
[](https://youtu.be/ByP2W4Z-A9c)
{% youtube ByP2W4Z-A9c %}.
What is a DevCard?
Tags: devcard, dailydev, reading, beginners
Published: 2022-04-03 17:08:45

## Table of Contents
1. [daily.dev](#dailydev)
2. [DevCards](#devcards)
3. [Adding Your DevCard to Your GitHub README.md](#adding-your-card-to-your-readmemd)

### daily.dev
What is [daily.dev](https://github.com/dailydotdev/daily#:~:text=daily.dev%20is%20an%20open,with%20the%20latest%20tech%20news.)?
> [daily.dev](https://docs.daily.dev/docs/how-does-daily-dev-work/dailydev-101) is an open-source browser extension that helps developers stay updated with the latest programming news

It's an extension available on [Google Chrome](https://r.daily.dev/chrome), Brave, [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/dailydev-news-for-busy/cbdhgldgiancdheindpekpcbkccpjaeb), and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/daily/). 

It is there to help you stay updated on articles from multiple platforms including, hashnode, dev.to, Medium, DevOps, Hacker News, Product Hunt, and many more. daily.dev allows you to follow tags that interest you to personalize your feed and suggest new sources for content. And each time you open a new tab, you'll get an updated feed of articles ready for you to browse. How easy! To read more about customizing your feed, [click here](https://docs.daily.dev/docs/customize-your-feed/layout).

#### Account Details
You can set personal information such as:

- Name, username, and bio
- Company and job title
- Twitter, GitHub, and Hashnode accounts
- Website link

#### Reputation Points
"Reputation" is just as it sounds, a rough estimation of how much the community trusts you through positive feedback they give on your articles and comments. The more [reputation you earn](https://docs.daily.dev/docs/how-does-daily-dev-work/reputation), the more privileges and tools you get access to on daily.dev. Note: Your reputation points are publicly visible on your profile.

You earn reputation as follows:

- Your comments gets up voted on (+1)
- Your comments get features (+2)
- Your article gets up voted (+1)
- Your content report leads to a moderator action (+1)

### DevCards
Ever want to show off how many articles you read, your favorite topics and/or publications? DevCards easily help you do just that in a beautiful and simple way. There are even limited edition cards throughout the year during holidays (ie, Halloween, Christmas, etc.)

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

You can activate your card [right here](https://app.daily.dev/devcard) and embed it into your website or GitHub README.md!

### Adding Your Card to Your README.md
Stocks or crypto, organize your positions technically.
Published: 2022-04-03 16:49:34

## You might be a trader in stocks, crypto, or maybe both. Whichever it is that you're a part in, here are few apps that could help you out, a LOT, to take clean, logical positions to make that **BUCK**.



### [**Fraction**](https://play.google.com/store/apps/details?id=com.shimronalakkal.fraction)

It is a simple app available, on android, internationally that can be used to find the ideal position size, calculate multiple pivot points and even track your trades and investments. Moreover, it’s free to download, you can use it in cases of crypto, and you don’t need an account to use it.

### [Chartink](http://chartink.com)
This is a cool website (not in its design but in the functionalities) that I use to find the potential stocks, previous day bulls and bears, 5 minute bursts etc.

### [TickerTape](https://play.google.com/store/apps/details?id=in.tickertape)
This is a great app to get news that could very well be used advantageously to take awesome trades.

### [Screener](https://screener.in)
This is another website that I use in cases of investment. I personally use this website to find the pitriosky score of stocks that I’m thinking of investing into.

### [GNews](https://play.google.com/store/apps/details?id=com.google.android.apps.magazines)
This is another great tool that I use to get to know more about the international situations along with other local news.
How To Solve the issue of WebView not redirecting to payment gateway or showing white screen
Tags: android, java
Published: 2022-04-03 16:32:28

If you are having a blank page when redirecting to another url within your WebView Android application or when redirecting to a payment gateway, this is how to resolve it.

In my case my webview had a layout_height="wrap_content", and this height is fine because of positioning inside relative layout, but when targeting sdk 21 webview was reporting 0 height to the page resulting all its elements collapse to 0 height as well. All I did was to change layout_height of the webview to match_parent and I had everything resolved, i hope this helps.
Implementando grandes dependências no AWS Lambda através do AWS Layer
Tags: aws, cloud, productivity
Published: 2022-04-03 16:27:06

Hoje irei falar um pouco desse serviço da AWS pouco utilizado, pois eu precisava implementar em um lambda algumas libs que somavam mais de 500 MB juntas, e obviamente não conseguia fazer o deploy, devido a limitação de 250 MB da AWS e tive que pesquisar bastante para solucionar o impasse.

Então descobri esse serviço, que você pode provisionar as dependências em layers (camadas) e especificar em qual lambda quer usar, podendo ser utilizado por vários lambdas simultaneamente. O uso de camadas reduz o tamanho dos arquivos de implantação carregados e agiliza a implantação do seu código.

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

Imagine que você precise desenvolver um lambda para declarar imposto de rendas e nesse lambda, precisa conter três dependência do node: express, sequelize e mysql. 

No meu exemplo utilizo node, mas o AWS Layer funciona em todas as linguagens em que a AWS dão suporte, continuando nosso exemplo, vamos supor que o express tem 100 MB, sequelize 100 MB e mysql 100 MB deszipados após o build da node_modules, logo o lambda não irá fazer deploy, pela limitação de 250 MB.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm7lbljps3d4sfgipqd9.png)
 
Para resolver esse problema, utiliza-se o AWS Layer, a solução seria criar um layer pro express, um layer pro sequelize e um layer pro mysql separadamente, como se fosse uma dependência do npm. Nas configurações do lambda, você declara o layer como dependência, como disse anteriormente, podendo ser utilizado por diversos lambdas, lembrando que cada layer também tem a limitação de 250 MB e pode ser versionado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsc9qcwygv49shavtlzk.png)
 
Esses casos de pacotes grandes são bem raros, mas quando precisei, essa foi a solução.  A AWS não cobra pelos layers, somente é cobrado o valor dos lambdas por execução. Você pode criar layers usando o console do Lambda, a API do Lambda, o AWS CloudFormation ou o AWS Serverless Application Model (AWS SAM). Para obter mais informações sobre como criar os layers consulte a documentação da AWS.

**Referências**
[Layer - AWS Docs](https://docs.aws.amazon.com/lambda/latest/dg/configuration-layers.html)
How HTTPS is secure?
Tags: beginners, webdev, codenewbie
Published: 2022-04-03 16:26:24

We saw what is HTTP in [another post](https://codewithkarthik.com/http). So now we will see
how HTTPS works.


### What is HTTPS?
HTTPS means Hyper Text Transfer Protocol Secure.

### Why do we need HTTPS?
To transfer data to a server securely.

Let's say you are sending some money to Alice. You are entering Alice's account number and amount in the bank website's form and clicking submit button. But what if someone who is connected to your network intercepts your request and changes Alice's account number to their account number.
Well, you will lose money if the bank's website does not have HTTPS protocol.

This type of attack is called a middle man attack. In order to prevent this type of attack, we should encrypt our data and send it to the server. The server will then decrypt data and then use it.
This encryption, decryption, and protection integrity of your data is handled by HTTPS.

### How does HTTPS protect your data?
HTTPS uses Transport Layer Security (TLS) protocol to send data securely to the server. 
```
Factoid: Transport Layer Security is the successor protocol to SSL (Secure Sockets Layer).
SSL is now obsolete and TLS is the new name for SSL protocol. Almost all websites that use
HTTPS uses TLS but everyone knows/says it is SSL.

```
Initially, the browser sends a handshake message to the server which contains data like the TLS version the browser supports, which cryptographic algorithm and a secret message called "client random".

Upon receiving the handshake server will send back an acknowledgment along with a digital certificate and random secret called "server random". This digital certificate contains a public key, which can be used to encrypt the messages sent to the server.

Once the client receives the digital certificate containing the public key, it will then send a secret key(premaster_secret) which is encrypted using the public key from digital certificate. Then server uses its private key to decrypt the message and will retrieve the secret. By using this client random, server random, and premaster_secret both server and client can create a secret called master secret. With this Handshake is complete. Now we have a secure secret key.

Now the form data which is sent to the server is encrypted using the master key. This master key is only known to the browser and the server. So middle man cannot decrypt your data without the secret.
Extracting credentials from App Service
Tags: azure, cloudsecurity, pentest
Published: 2022-04-03 16:04:25

---
title: Extracting credentials from App Service
published: true
description: 
tags: Azure, CloudSecurity, Pentest
//cover_image: https://direct_url_to_image.jpg
---
*Test at your own risk

1.Use the Get-AzPasswords function to perform a dump of credentials for App Service:
```
Get-AzPasswords -AutomationAccounts N -StorageAccounts N -Keys N -ACR N -CosmosDB N - Verbose | Out-GridView
```

2.When prompted to select an Azure subscription, select your test Azure subscription and click OK.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usomq5mi6ec8zt8kzsq5.PNG)

3.In the resulting output, you should see credentials that were dumped from the App service configurations.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wue4v1eoyaja0xe0e4om.PNG)
Now that we have access to the app service publish profile, we will see how these credentials can be used with the application.

**Reference**
https://github.com/cheahengsoon/Penetration-Testing-Azure-for-Ethical-Hackers
Use your favorite code editor & shell from DECK 🔥
Tags: webdev
Published: 2022-04-03 15:51:58



**DECK** now has an integration feature to choose your favorite editor and terminal for your projects. And it's just one step away,

- Choose your editor and terminal.

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

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

We have received excellent suggestions from our users, and this is one of them. We are amazed by the amount of appreciation **DECK** is receiving across the globe. So this is the first new feature we found suitable for the April release.

We are committed to building developer-friendly applications, and more great features are coming. So let us know your feedback. 

[Download DECK today](get-deck.com)💕.

_If you find this article helpful please share and follow us on [Twitter](https://twitter.com/deckdevstudio)._
Copy collection in same database.
Tags: mongodb
Published: 2022-04-03 15:50:16

---
title: Copy collection in same database.
published: true
description: Copy collection in same database without dump command on mongoDB
tags: mongodb
//cover_image: https://direct_url_to_image.jpg
---
Copy collection in same database without dump command.

```shell
db.collectionName.aggregate([{$match:{}},{$out:"copyCollectionName"}])

```
Paracetamol.js💊| #91: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-04-03 15:47:58

## **Explica este código JavaScript**

```js
const f = arr => Array.isArray(arr) && !arr.length;

console.log(f([1,2,3])); //?
console.log(f([0])); //?
console.log(f([])); //?

```

A. `true` `false` `true`
B. `false` `false` `false`
C. `true` `true` `true`
D. `false` `false` `true`

Respuesta en el primer comentario.

---
The Weekly Dev - 202214
Published: 2022-04-03 15:47:07

---
title: The Weekly Dev - 202214
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
canonical_url: 'https://kevwe.com/weekly/202214'
---
The Weekly Dev - 202214

With great experience, it comes a lot of trouble.

In our industry it's easy to feel ahead of the curve, unless you're bound to death to some legacy project.

But still, it's not the latest javascript framework to buy your lunch, nor the shiny new buttons that you feature on a website: it is the ability to keep it running. Regardless of the load of users that want to connect all at the same time, the confidence that it will gently bend without breaking when you will meet the real threats out there.

You cannot afford leaking sensible data, that's where your real playground lies: between the use of open technologies that let you scale, but also confident ownership of your data:

https://kevwe.com/weekly/202214
⚛️ 5 Things you need to know about React! 👨🏻‍💻 || Rithik Samanthula
Tags: react, javascript, webdev, programming
Published: 2022-04-03 15:46:07

Heyo Wasup Coders! 

I know it's been a long time since I've written but school life ykyk.

Anyways let's get into this blog. Today, I'll be telling you why I use React and why I believe that you and other fellow developers out there should also use React too. Let's get into it!


![Let's get down to business gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naia6e9agn1ypmh4yzql.gif)

## 1. Simplicity of Learning

In my opinion, React JS is one of the most EASIEST frameworks to learn apart from other JavaScript frameworks. I believe it's very direct and straightforward. Everything is to the point which I believe is a reason why you should learn it too. Developers can basically use JavaScript and utilize ReactJS within it. 

You can use HTML in React JS along with JSX which is also very easy to learn.


![Cat Computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hzogp1q5jetrtvqks4h.gif)

## 2. Virtual DOM

A feature that I love in React is the DOM. It is a very easy way to render elements, components, and data that can be easily utilized.

As I mentioned before previously, it is the best framework to produce the best UI with ease.


![Brandon dude](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlmyxwc7wtk7ckjc6iin.gif)

## 3. Responsive Web Development and SEO

It has good responsiveness between different platforms, devices and softwares. It helps in enabling to load just the relevant data. Loading speed and expert design are very well incorporated within React.

Coming to the SEO, React uses the Virtual DOM to render components onto an entire webpage. These are better than JavaScript apps for SEO.


![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdocvlhsb6v6xjhvhp5f.gif)

## 4. Reusable Components

Another thing I love about React is the feature of reusable components. Firstly, you create a component and provide props. I personally write the components in JSX. JSX is pretty OP. Then, the component will return a rendered HTML element. 

React components can be used multiple times at different parts of the website. These are very easy to incorporate within the website that you are making/.


![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8qrtzc5i8o013kzhig1.gif)

AND FINALLYYYY 

## 5. JSX

So basically, JSX or JavaScript XML is a an extension of JavaScript. Facebook made JSX to incorporate HTML features easily into JavaScript. You can directly write code bits of HTML in JavaScript with React. 

JSX, along with the Virtual DOM, increases the performance and efficiency of ReactJS apps. 


![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b07b3zjzafy1az4e110.gif)

So guys I hope that all those non-react using developers out there, hopefully are convinced enough to use React! You can contact me in case you want resources to learn React.

Thanks coders for reading this blog and remember...

## Keep Coding Y’all 👨🏻‍💻👨🏻‍💻