teleren/devto huggingface dataset:
Expose SQL Logic as APIs
Tags: api, azure, microsoftsql, sql
Published: 2023-06-28 23:43:40

---
title: Expose SQL Logic as APIs
published: true
date: 2023-06-27 01:49:00 UTC
tags: API,Azure,MicrosoftSQL,SQL
canonical_url: 
---

HTTP-based APIs have become a very popular way of exposing functionality to external entities outside an organization. For example, in order to support certain features of their products, some Vendors require integrating with your data real-time by calling HTTP APIs to get the information they need. Or maybe you have a very tech-savy customer that would like to get their data via APIs your organization exposes.

Typically, a Development Team spins up those APIs using programming languages and platforms such as .NET and Java. But what if your organization only has Microsoft SQL developers? In this series of posts, I would like to propose that they are able to encapsulate the needed logic into T-SQL stored procedures and/or views without the need of the work of a typical development team. This is great for those “multiple hats” DBAs who might not be strong enough in regular languages, but with good enough skills to do some basic managing in Azure.

Here is an overview of the process:

1. **Design/Develop your database to address the use case**. Follow Domain Driven Design guidelines in SQL as if it were a regular programming language by using separate schemas for public and private objects and keeping logic and db limited to one Bounded Context.
2. **Publish your database to a SQL server that can be accessed by Azure**. This could be an Azure SQL db, managed instance, Azure VM or an on-prem SQL db (if you have Network connectivity between Azure and your on-prem data center).
3. **Build the HTTP-triggered Logic app**. Logic Apps can be built using a graphical interface, no need for code except for some formulas. This logic app will need to call your SQL server. There are many safe ways to authenticate the Logic App with your SQL server. The logic app will take care of transforming the data from the Stored Procedures/Views
4. **Expose the Logic App via Azure APIM**. This product will also allow you to add extra features to your API such as rate-limiting, subscription keys, analytics without code except for some XML and JSON (JSON for defining your OpenAPI schema).
5. **Implement security in layers** , by:
  1. Limiting what can access your SQL server (the logic app)
  2. Limiting what can access your Logic App (the APIM)
  3. Setting up OAuth Client Credentials for your consumers by using Azure AD and APIM token validation policies.

The Azure offerings mentioned in the above list have either a free or reduced cost pricing option, making this approach inexpensive. In future posts we will dig deeper into each of the items in the list. For a video series please see: [https://youtube.com/playlist?list=PLVObt25IiZ6gxbnlGMIDNa\_iquKiBjUmo](https://youtube.com/playlist?list=PLVObt25IiZ6gxbnlGMIDNa_iquKiBjUmo)
Taking a Bite out of Hamburger Menus in React
Tags: react, webdev, learning
Published: 2023-06-27 03:56:19

## Introduction
Hamburger menus are a common yet important part of an application's user interface that helps with navigation. They make navigation cleaner, provide top-level access, and are a very familiar icon to many users. In this article, I explore my process in creating a hamburger menu, and the hiccups along the way.

## The Problem
I wanted to create a nav menu that shows when you click on a hamburger menu icon. When the menu shows, you should be able to click on those links and navigate to those menus, with the nav menu closing automatically. Additionally, you should be able to exit out of the menu when you click outside of it. 

## The Process
I started off with just an onClick. So you can open up a menu, but you can only close the menu when clicking the hamburger icon again. If you click outside, the menu stays there. This is fine, but not the greatest for UX.

I did some research and these were some of the resources that helped me most.

[Focusing on Dynamically Added Element](https://stackoverflow.com/questions/72739930/how-to-focus-on-dynamically-added-input-field-in-react )

[Adding Hamburger Menu](https://ibaslogic.com/how-to-add-hamburger-menu-in-react/) 

[ForwardRef](https://www.carlrippon.com/react-forwardref-typescript/) 

This was what I found worked the best for me. 

## Implementation

- Click on nav button, handleClick to change state.
- I set up a useEffect hook that runs every time the value of toggleNav(state) is changed.
- Create a useRef hook to reference child component with forwardRef, which will be focused.
- Since nav menu is conditionally rendered (when hamburger is clicked), setTimeout to focus on the newly rendered menu (child component).
- Set up an event listener to 
- check if nav menu (toggleNav) is true, 
- if useRef current has a value, 
- and if the value of the currently clicked target (e.target), taken from the event listener, is not equal to useRef current. 
- If all the above conditions are fulfilled, then setToggleNav to false. This will make the nav bar close when you click anywhere that is outside of the ref. 
- Then remove the side effect (event listener) at the end of useEffect. 

## Resolving Final Issues
After trying a few different combinations of things, I was finally able to get my navbar to work. When I clicked outside of the menu, it would close. But now, when I clicked on the hamburger menu, it would stay open, or rather reopen!

At first I tried changing the conditions to the event listener, but that didn't give any good results. I ended up going with a CSS solution, preventing the user from clicking the hamburger menu icon again by hiding it. 

Now that gave a different result, because the menu was a child component of the hamburger menu. So I added a class that would reduce the height and width of the component to 0 on click. This was what worked the best.

---

What I thought would be a simple task turned out to be a little more complicated. But, I was able to learn and get practice with useRef, a hook I was not very familiar with!
Reverse a string using a recursive function
Tags: javascript, algorithms, tutorial, programming
Published: 2023-06-27 03:35:17

Reversing a string without using built-in functions is a common interview question. Let's explore this problem using recursive approach. I will discuss a common approach and an approach similar to the iterative approach using loop.

First, the common solution uses slice operation to remove the last or first character in a string in each recursive call and concatenating those returns to form the reverse string. The base case for this approach is when the string is reduced to an empty string.

```
const reverseString = str => {

  if (str === '') {
    return "" ;
  }

  return reverseString(str.slice(1)) + str[0] ;
}
```
This solution has time complexity of O(n). The function is recursively called n times and every time before a recursive call there is a slice method call which takes O(1) time for strings in the runtimes using v8 engine. (check this discussion for explanation by a v8 developer [Link](https://stackoverflow.com/a/72545403/20981736))
But the time complexity of slice can change the time complexity of this solution to O(n^2) depending on slice's implementation in different languages or browser runtime.

In my second approach we can use an index parameter with default value of 0. Index will be incremented by 1 in each recursive call and the character at that index will be concatenated at the end to get the reversed string. The base case for this approach is index being equal to the string length.

```
const reverseString2 = (str, index = 0) => {

  if (index === str.length) {
    return '';
  }

  return reverseString2(str, index + 1) + str[index];
}
```
This approach has time complexity of O(n). It uses index traversal to concatenate the reversed string similar to the iterative solution using loop. It eliminates the need of slice method used in the previous approach.

(Let me know in the comments if you have any questions or corrections to add.)
Having trouble finding a reliable 🚰 Faucet or Node provider?
Tags: blockchain, web3, developers
Published: 2023-06-27 03:28:22

Then simply use http://BuildBear.io  

🤔 Why BuildBear, you ask? Let's break it down for you with a quick comparison:

🔍 BuildBear vs Local Testnet vs Public Testnet 👇🐻
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83r3ialxa9njf490dkxu.png)
Here I go (again)
Tags: programming, blogging
Published: 2023-06-27 03:28:08

Sometime ago i said i would be starting to write more. Well, that didn't really happen. But today i want to make a promise to start writing programming articles again and consistently. So what i will be doing is documenting things i have been learning on my new journey. 

What's that new journey you may ask? Well the journey into cloud, more specifically AWS. For sometime now I have been working mainly on developing lambda functions, but i find that lose some of what I learn and I think a great thing to do is write about the things that I have been learning, so that not only will I remember and have something to reference in the future, but also I can help others.

So...I will be on the blogging trail again. Look out for the first article tomorrow.

Bye
Se você é um iniciante programação, você tem que ler isso!
Tags: webdev, beginners, programming, learning
Published: 2023-06-27 03:03:04

Fala, Dev! Tudo bem? Se você é um desenvolvedor iniciante assim como eu e está se sentindo um pouco perdido em relação a qual trilha de desenvolvimento seguir, ou até sabe qual trilha seguir, mas não sabe por onde começar, eu recomendo que você dê uma olhadinha no [roadmap.sh](https://roadmap.sh/).

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

O roadmap.sh é uma iniciativa open source criada em 2018 por Kamran Ahmed com o intuito de orientar, educar e fomentar a comunidade de desenvolvedores. Isso fica evidente já que a frase de rodapé do site é:

>roadmap.sh is the 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month. 

No roadmap.sh, você encontrará um guia detalhado para cada trilha, que inclui uma visão geral dos conceitos-chave, tecnologias relevantes, linguagens de programação, frameworks e ferramentas populares. Além disso, o site fornece recursos valiosos, como cursos, livros recomendados e links para tutoriais online, que podem ajudá-lo a aprofundar seus conhecimentos em áreas específicas.

O fato de o roadmap.sh ser um projeto de código aberto demonstra o compromisso da comunidade de desenvolvedores em compartilhar conhecimento e ajudar uns aos outros. Ele é amplamente reconhecido e apreciado pela comunidade, como evidenciado pelo alto número de estrelas no GitHub e pelo grande número de visitantes mensais.

Então, se você está se sentindo perdido ou indeciso sobre qual trilha de desenvolvimento seguir, não deixe de conferir o roadmap.sh. Com suas informações abrangentes e recursos úteis, ele será seu companheiro confiável na jornada de aprendizado e desenvolvimento profissional.

Bom, espero que vocês tenham gostado da dica! Espero que eu tenha instigado vocês a conhecer a ferramenta que eu particulamente gosto muito e baseio meus estudos nela.
How does JWT work?
Tags: development, jwt, security, beginners
Published: 2023-06-27 02:46:47

Simply put, JWT is a Token in json format working in the web.
JWT is composed of three parts: Header, payload, signature. 
The structure of this looks like this `xxxxx.yyyyy.zzzzz`.

```
# Example:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
```

**Header:** Contains information about of algorithm and token type.
```
{
  "alg": "HS256",
  "typ": "JWT"
}
```

**Payload:**Contains the data that you would like send.
```
{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}
```

**Signature:** For last, the signature do create encoding the Header, Payload and the SECRET. The SECRET must be shared between emisor and receptor.

```
HMACSHA256(
  base64UrlEncode(header) + "." + base64UrlEncode(payload),
  secret
)
```

---

## Libraries: firebase/php-jwt

```
composer require firebase/php-jwt
```

```
<?php
require_once 'vendor/autoload.php';  

use \Firebase\JWT\JWT;

// Generate a JWT
$secret= "my_secret";

$payload = array(
    "sub" => "1234567890",
    "name" => "John Doe",
    "admin" => true,
    "iat" => time(),
    "exp" => time() + (60 * 60) // JWT valid for 1 hour
);

$jwt = JWT::encode($payload, $secret);

echo "JWT generated: " . $jwt . "\n\n";

// Verify a JWT
try {
    $decoded = JWT::decode($jwt, $clave_secreta, array('HS256'));
    
    echo "JWT verified:\n";
    print_r($decoded);
} catch (Exception $e) {
    echo "Error verifying el JWT: " . $e->getMessage();
}
?>

```

## Aux Tools:
[https://jwt.io/](https://jwt.io/)
A chrome extension to help you Leetcode 🚀
Tags: leetcode, opensource, extensions, computerscience
Published: 2023-06-27 02:22:01

Are you spending this summer grinding Leetcode problems? Whether you're leetcoding to gear up for job interviews or try to fill that empty void in your soul, you need to try this **free and open-source** extension.

#[Leetcode Explained](https://chrome.google.com/webstore/detail/leetcode-explained/cofoinjfjcpgcjiinjhcpomcjoalijbe?hl=en&authuser=1)

---


## 4 Awesome Features 🔥

### Feature 1️⃣
- Adds the top 5 youtube solution videos into each problem.
- Default solution video is from the channel `Neetcode`.
- Over 900 problems added (4500 videos).
![Watch video solutions inside each problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiu1zgea4047doqmir6z.png)

### Feature 2️⃣
- Adds the top 5 companies that are known to ask each question.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0v8ztnq06aztpsqc39se.png)

---

The next two features require ChatGPT login in your browser.

### Feature 3️⃣
- Reads your code and tells you the time and space complexity.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgps05meic1l1asv4cc2.png)

### Feature 4️⃣
- Reads your code, fixes any bugs, and returns the corrected solution.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv6oedc70e8ib1b92ff3.png)

### Additional
- [Watch the Demo on Youtube](https://www.youtube.com/watch?v=-Ra1ygNkQvU)
- The extension is open source. Check out the [Github repo](https://github.com/zubyj/leetcode-explained) to see the code or contribute.
- If you can, please leave a review in the Chrome Web Store 🙏

`Thanks for reading and happy leetcoding!`
Optimistic UI and the balance between speed and precision
Tags: programming, webdev, design, ux
Published: 2023-06-27 02:12:02

> _Just as in life, always assuming everything will be alright may not be the healthiest, no matter what kitten posters say._

A concept that has been in vogue for a couple of years now is the Optimistic User Interface. It's a design technique that enhances the user experience by showing immediate changes in the interface, before receiving confirmation from the server.

The initial phrase alludes to the fact that in a world where everything goes fast, we want to give our users a sense of speed and fluidity. But sometimes, this can cause us trouble.

One of the risks of using this technique is provoking a _race condition_, which occurs when two or more processes access the same resource at the same time.

How could something like this happen? Imagine a home delivery pizza application, which connects to an API. It allows you to save your ingredient preferences, but today you feel like swapping the cheese for ham; so you save the changes and place the order, and you get the message that in 10 minutes you'll have your pizza at home.

The thing is, the API received the change in preferences and the order at the same time. And the order was made with the previous preferences, before they were updated. Imagine your face when you see your pizza with cheese!

While it's possible this is due to poor architecture, these types of changes are usually harder and more costly to make. A simpler solution would have been to wait for the change in preferences to be confirmed before placing the order.

---

An Optimistic UI can enhance the experience by showing immediate changes. However, it's important to keep in mind the risks and take measures to prevent issues. By balancing speed and accuracy, we can offer an optimal experience.
1Password Hackthon First Steps - Establish an Account
Tags: hackathon, security, javascript, python
Published: 2023-06-27 01:46:22

## What's this for?

Before getting started with the [hackathon](https://dev.to/builditdeploy/why-am-i-posting-to-dev-now-hackathon-1p8h), establish a [1Password account](https://hshno.de/2vBgtSn).

## Sign-up for 1Password Dev Tools:

![account signup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4ds5dlel2m11dffq0l0.jpg)

## 1Password's security is uniquely strong

You will need to create a password for your account. Your device (e.g., laptop and browser) will be used to generate a [Secret Key](https://www.techopedia.com/definition/24865/secret-key).

![enter passcode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy4e2sv7pcfndg3g5qg7.jpg)

> Think of them as two keys to one lock. The password is for everyday unlocking, while the Secret Key is for setting up new devices and authorizing access.

## Set up an account password you can easily remember:

Next step is to establish a password for your account:


![create password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p324fahmbkbohcv3zxb.jpg)

Notice that 1Password cannot help you recover or reset your password. I'll have to see if this will become an issue. 😳

> 1Password cannot reset this password. If you forget it, you might lose access to your account.

## Get your unique Secret Key

Click the Generate Secret Key button.


![generate secret key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7vttk1zy7fqn717ecl1.jpg)

TIP: Make sure to click the Save PDF button to get a copy of your secret key.

## Finally, your 1Password Account is created!

Now that @buildit account is established, it's time to come up with an idea for the [hackathon](https://dev.to/builditdeploy/why-am-i-posting-to-dev-now-hackathon-1p8h). See you in the next article!

----
Article Photo courtesy of <a href="https://unsplash.com/@flyd2069?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">FLY:D</a> on <a href="https://unsplash.com/photos/mT7lXZPjk7U?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Tidbits: Awesome React book
Tags: beginners, react, devjournal
Published: 2023-06-27 01:42:02

This is a short post about a book I just started reading and following along. It's called [React Application Architecture for Production](https://www.packtpub.com/product/react-application-architecture-for-production) by [Alan Alickovic](https://twitter.com/alan_alickovic) from [packtpub.com](https://www.packtpub.com/)

I would highly recommend this book for intermediate web developers who are in the middle of building large-scale applications. It uses [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/docs/), MSW library for mocking endpoints and covers unit testing with Jest, integration testing with Jest and React Testing Library and Cypress for end-to-end testing.

It uses GitHub Actions (which I haven't tried yet) for CI/CD pipeline.

I hope to apply some of the techniques I learn from this book to my portfolio projects which I plan to start real soon.
Learning about DEV Tools
Published: 2023-06-27 01:34:33

#What is DEV Tools:
- DEV Tools (developer tools) are tools built into the browser that help programmers easily access the internals of their web browser and application.
# Ways to open DEV Tools:
- There are three ways to open the Chrome Developer Tools menu:

1. From the `Chrome Menu` > `More Tools` >` Developer Tools`
2. Right-click anywhere on a webpage and select `Inspect`
3. Use the keyboard shortcut `F12` or `CTRL` + `Shift` +` C `

# When open DEV Tools it'll look like this:

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

- The DEV Tools will be on your right; this is where you can edit your web without using VS Code.
Gsap.js
Published: 2023-06-27 01:32:54

hi everybody , am new in gsap.js 
so i wanted load content in my home page when user scrolling , but 
since am reading the documentation , when i include the cdn link , nothing is happen in the page like ( gsap.to(".box", { x:200, backgroundColor: "blue" }) 
please help with great example using gsap.js with cdn in your projet and have all done in the browser !!
Como otimizar sua semana de leitura: dicas práticas e eficazes
Tags: braziliandevs, tutorial, discuss, learning
Published: 2023-06-27 00:58:44

A leitura é uma poderosa ferramenta de aprendizado, eu descobri seu valor em 2019 quando retomei o hábito. Nos últimos 3 anos, **eu li em cerca de 70 livros**, todos eles estão documentados [nesse link](https://codepen.io/klecianny-melo/pen/dyRJqbY). Neste post, compartilharei dicas práticas e eficazes para ajudá-lo a otimizar sua semana de leitura, adaptando-a ao seu contexto.

**O primeiro passo é definir os temas nos quais você deseja se aprofundar**. No meu caso, escolhi cinco temas fundamentais:

1. Desenvolvimento pessoal
2. Negócios
3. Liderança
4. Programação
5. Investimentos

Após determinar seus temas de interesse, é importante **estabelecer a frequência e a duração das suas sessões de leitura**. No meu caso, leio de segunda a sexta-feira, dedicando meia hora diariamente. Como tenho cinco temas, organizei-os em uma rotação semanal, pois descobri que essa abordagem me permite avançar em todos eles simultaneamente, o que é muito mais enriquecedor do que focar em um único livro por vez.

Aqui está **minha rotina de leitura:**

| Dia | Tema |
| :------: | :------: |
| Segunda  | Desenvolvimento pessoal |
| Terça  | Negócios |
| Quarta  | Liderança |
| Quinta  | Programação |
| Sexta  | Investimentos |

**Para acessar os livros**, utilizo o site [Z-library](https://www.youtube.com/watch?v=S_vDGej7m3Y), que oferece uma biblioteca com mais de 10 milhões de livros gratuitos. Faço o download dos livros em formato PDF e leio-os no aplicativo [Adobe Acrobat Reader](https://play.google.com/store/apps/details?id=com.adobe.reader&hl=pt_BR&gl=US&pli=1), um leitor de PDF para dispositivos Android.

**Neste post, aprendemos a organizar uma rotina eficaz de leitura**, _definindo os temas_ nos quais desejamos nos aprofundar, _estabelecendo o tempo_ dedicado à leitura _e descobrindo onde encontrar livros gratuitos_ e acessá-los em dispositivos Android. Agora é hora de decidir qual será sua próxima leitura. Compartilhe suas escolhas nos comentários!