teleren/devto huggingface dataset:
Many popular frontends are low-key open-source
Tags: webdev, javascript, typescript, frontend
Published: 2023-09-04 13:36:43

Ever wondered how your favorite frontend is built (for example, maybe it has an awesome component that you can't find replicated anywhere)? It might have:
* No GitHub
* No GitLab
* No source maps in Chrome DevTools.

But you may still be able to find the original sources.

I made a tool to extract them: https://github.com/llllvvuu/dl-webapp-sources

To summarize from the README:
* You can get a list of all JS files loaded by a page using:
```javascript
performance
  .getEntriesByType("resource")
  .map(resource => resource.name)
  .filter(name => name.endsWith(".js"))
  .map(name => `"${name}"`)
  .join(" ")
```
* You can pass this into the CLI:
```sh
dl-webapp-sources ${JS_URLS} -o ${OUTPUT_DIRECTORY}
```

Often this will give you a full React app. It will be missing the build files like `package.json`, `webpack.config.js`, and `tsconfig.json`, but you may be able to reverse engineer these - look for strings like `react-router`, `next`, etc and then plug in the appropriate build system and tweak the config.

Try it on your favorite apps... you might be surprised! There are some interesting codebases to study and learn from.
The Power of Single Source of Truth in Enhancing Code Quality
Tags: article, ssot, learning
Published: 2023-09-04 13:36:14

Introduction: 
The Power of Single Source of Truth in Enhancing Code Quality

What is Single Source of Truth(SSOT):
Single source of truth (SSOT) is a guiding philosophy for collecting data from many systems within an organization and aggregating it to a single location. It is not a system, tool or strategy but a state of being where information is stored via a single reference point and is considered to be the authoritative source for that piece of data. 

Why Adopt Single Source of Truth: 
Understanding the significance of SSOT is fundamental to appreciating its transformative impact on code quality. In the following sections, we will delve into the various ways in which adopting SSOT practice gives improvement to code quality: 
Elimination of Duplication: Duplication of data in multiple parts of code can lead to inconsistency. SSOT minimizes the need for duplicate code resulting in cleaner and maintainable codebases. 
Consistency: By maintaining SSOT, it reduces the chances of errors and contradictions that arise when different parts of code access different versions of the same data. It ensures that the information is consistent.
Easier Debugging: Debugging is easier when there’s only one place to source for a particular piece of information. 
Enhanced Collaboration: With an authoritative source for information, it allows collaboration among developers smoother fostering effective teamwork. 
Seamless Scalability: As projects grow, maintaining a single source of truth becomes increasingly valuable. It ensures that as new features are added and the codebase expands, the core data and logic remain consistent and reliable. 

Cases of Single Source of Truth: 
This section highlights practical applications of SSOT for improving code quality:
Configuration Management: Consider a web application that interacts with an external API. The API endpoint URL is used in multiple places across the codebase. Without a single source of truth, this URL might be duplicated in different parts of the code, making updates error-prone. By centralizing the URL in a configuration file, all references point to this single source. When the API endpoint changes, developers only need to update the URL in one place, guaranteeing consistency and reducing the risk of errors.
UI Components: In a front-end application, UI components such as buttons, forms, and navigation elements can be standardized and centralized. This ensures a consistent user experience, reduces UI-related bugs, and simplifies design changes.
Error handling and Logging: Defining error handling and logging behavior in a central location ensures that all parts of the application follow the same guidelines. This leads to better error reporting and logging consistency.
Conclusion:
In summary, the key takeaway is that a single source of truth contributes to higher quality code and a more efficient development process. The consolidation of data not only ensures reliability and maintainability but also underpins the production of consistent and superior software.
Common Cypress Interview Questions
Tags: webdev, javascript, testing, interview
Published: 2023-09-04 13:35:02

Here's a quick overview at some of the common Cypress Interview questions you might face. 

### What is Cypress? 
Cypress is a user-friendly, end-to-end testing framework that uses JavaScript language. It works directly in the browser, making tests faster and more accurate as they mimic real user interactions.

### How Would You Differentiate Cypress from Selenium? 
While both are popular tools for web application testing, Cypress stands out due to its browser-based architecture and exclusive use of JavaScript, offering a more direct and real-time feedback experience than Selenium.

### Key Features of Cypress? 
Cypress has some key unique features such as automatic waiting, real-time reloads, and simple debugging capabilities. It also offers visual testing and network traffic control which makes testing easier.

### What Are the Steps to Install and Configure Cypress? 
To [setup Cypress](https://sdetunicorns.com/blog/cypress-installation-setup/), you just need few npm commands to install and start the Cypress Test Runner. And, then you can begin writing your tests

### How Is a Basic Test Case Created in Cypress? 
Writing a basic test case is easy and straightforward - 

```
describe('Basic Test Case', () => {
  it('should visit SDET Unicorns website and verify its title', () => {
    cy.visit('https://sdetunicorns.com')
    cy.title().should('eq', 'Master Software Testing & Automation Online | SDET Unicorns')
  })
})
```

### How Does Cypress Manage Asynchronous Operations? 
Cypress has a unique approach to handling asynchronous operations. It uses its own commands that automatically manage the sequence of operations, removing the need for explicit waits in your tests.

### Can You Mention Some Common Commands Used in Cypress? 
Cypress offers a variety of [commands](https://sdetunicorns.com/blog/cypress-commands-get-click-find/) that help you interact with the DOM and make assertions. Some commonly used commands include `cy.visit(url)`, `cy.get(selector)`, and `cy.click()`, to name a few.

### Ready to Dive Deeper?
If you're keen to diving deeper and explore more detailed interview questions, check out the full blog here - [Top Cypress Interview Questions and Answers](https://sdetunicorns.com/blog/cypress-interview-questions-and-answers/)
Professionalizing my Personal Web App - alsiam.com
Tags: webdev, portfolio, nextjs, javascript
Published: 2023-09-04 13:30:18

Hey there, I'm currently in the process of updating my personal web app, https://alsiam.com/ and I'm looking for some advice on which features to update or add to make it even better and more professional. Your insights are greatly appreciated, and I'd like to present my thoughts and ideas in a structured manner.
What is Test-Driven Development.
Tags: beginners, testing, tdd
Published: 2023-09-04 13:17:55

TDD is a programming paradigm where tests are written to drive the development of the application.

It is mainly aimed at writing clean code that works.

## **The Red-Green-Refactor Principle**

This principle is a practical approach on how to implement TDD.


![TDD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2euu2adwu7kgwnd70hyg.jpeg)

The diagram illustrates the three principles of **TDD**:

1. Write a test and see it fail.
2. Write just enough code to make the test pass.
3. Refactor the code if any code smells are detected.

This principle is easy to follow at first but the downside with it is that it does not help a beginner understand how to get started writing tests.



## **Types of TDD**

TDD is a mixed concept with different variations and approaches.

1. Unit Test Driven-Development(UTDD)
2. Behavior-Driven Development (BDD)
3. Acceptance Test-Driven Development(ATDD)

## **ATDD**

ATDD describes the behavior of a software from a user's point of view by focusing on the business value of the application and not the implementation details.

ATDD and UTDD can always be combined in one diagram as indicated below.

![ATDD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dfxnhjn793du7k3eto6.jpeg)

The diagram above describes the following steps followed during ATDD:

1. Write an acceptance test and see it fail.
2. Write a unit test and see it fail.
3. Write code to make the unit test pass.
4. Refactor the code.
5. Repeat steps 2 - 4 unit all the acceptance tests passes.

## **BDD**

Behavior-Driven Development is an agile practice that encourages collaboration among different roles, developers, quality engineers, business analysts, or even other interested parties in a software project.

Although **BDD** is to some extent a general idea about how software development should be managed by both business interests and technical insight, the practice of **BDD** involves some specialized tools. 

For example, domain-specific language (**DSL**) is used to write tests in natural language that can be easily understood by nontechnical people and can be interpreted by code and executed behind the scenes.

## **Prerequisites of TDD**

One major prerequisite for a developer who is getting into TDD is the **ability to detect code smells and how to refactor them into a good design**.
Matplotlib Tutorial #3: Plot Without Line
Tags: datascience, python, beginners, tutorial
Published: 2023-09-04 13:13:19

{% embed https://youtu.be/WNRqUDyltwI %}

In the last blog we already created a plot, but perhaps you only want the figure to show points not with lines, how can you do that? In this blog, I will show you how to do just that.

---

## Plot Without Line
In the Matplotlib `plot`, you can create a plot without the line. Let me show you how to do it. 

First, let us create a normal plot with a line
```python
import matplotlib.pyplot as plt
import numpy as np

xpoints = np.array([0, 6])
ypoints = np.array([0, 250])

plt.plot(xpoints, ypoints)
plt.show()
```
In order to make a plot without the line, you just need to pass `o` as the third argument to the `plot` method
```python
import matplotlib.pyplot as plt
import numpy as np

xpoints = np.array([0, 6])
ypoints = np.array([0, 250])

plt.plot(xpoints, ypoints, 'o')
plt.show()
```
If you run the above code, you will get the following output result

![Matplotlib plot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt2kxe7ncfxp92hxqji8.png)

---

That is it! that is how you can create a plot without the line. Thank you for reading this blog and have a nice day!
repost mon sep 4 302 pm
Tags: repost, youtube, thestartup
Published: 2023-09-04 13:10:14

---
title: repost mon sep 4 302 pm
published: true
description: repost
tags: repost, youtube, thestartup
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-04 13:02 +0000
---

[video](https://www.youtube.com/watch?v=TNsQKb1xf1A)
[arrto](https://www.youtube.com/@ThePrimeTimeagen)
[bibex](https://vercel.com/blog/how-turborepo-is-porting-from-go-to-rust)

Themes
-

- protobuf for uniform serialization
- uuid for global universal unique identification
- go and rust interoperability
- alpine distribution with available dev kits
Music Monday — What are you listening to? (Heavy Edition)
Tags: watercooler, music, discuss
Published: 2023-09-04 13:00:00

_cover image source: [Giphy](\https://giphy.com/gifs/mad-max-fury-road-qKZNDWOdFPmQU)_

**We're back with another one! This time around, I wanna hear y'all's choice heavy music. Whether your mind goes straight to your favorite metal riffs or if you're more into other flavors of heavy, I wanna hear what you listen to when you wanna get hyped up. Maybe your into thumping electronic beats or like rap that's raw and in-you-face. Whatever heavy music you're into, share it below!** 🤘


![A clip from The Prodigy's "Firestarter" music video... the lead singer, Keith Flint, is contorting his body in weird ways and looking like a sinister sideshow character with his reverse mohawk.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nsvf9juniv2uy0vbtyp.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions. You can follow the suggested genre if you'd like, but don't feel confined to it; you're free to suggest whatever you wanna. 🙌  

If you're interested in having other discussions about music, consider following the aptly named [#music discussions](https://dev.to/music-discussions) organization.

{% embed https://dev.to/music-discussions %}  

***

Let's get heavy! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Looking forward to listening to y'all's suggestions! 🎶
Caption This! 🤔💭
Tags: watercooler
Published: 2023-09-04 13:00:00

Alright captioneers, let's see what you got! Check out the image below and drop your ideas for a caption in the comments section.

![Photograph of a young Bill Gates sitting on the floor and leaning against a computer running Microsoft. He is smiling smuggly and looking directly into the camera.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j27nwrlhf16ibh1662ig.jpeg)

---

Follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Enhance Agile Processes With DevDynamics
Published: 2023-09-04 12:56:02

Did you know? Approximately 50% of software development teams count on JIRA for top-notch project management. 

Enhance your agile process and team velocity by integrating JIRA with DevDynamics. Explore deeper insights today with our free trial: https://devdynamics.ai/signup 

#SoftwareManagement #AgileInsights
Send Hanko auth emails from your domain via Resend
Published: 2023-09-04 12:37:45

[Hanko](https://www.hanko.io/) has made it incredibly simple to add authentication to your application and get started quickly. However, you may have noticed, currently, all emails are sent from `mail@hankocloud.com`


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


While this works perfectly initially, as your product grows, you might wanna send emails through your custom domain to enhance brand visibility and have full control over your emails. Hanko makes it super easy for you to do that through your custom SMTP server.

We'll be using the SMTP server provided by [Resend](https://resend.com/) for this purpose. Resend is a modern tool that makes it super easy to send and manage transactional emails. Additionally, it will enable you to monitor all your Hanko authentication emails and verify if they were actually sent.

So, let's get started.

Head over to Resend and create an account if you haven't yet. Navigate to [Domains section](https://resend.com/domains) in the right sidebar, click on 'Add domain', and add your domain and region.


![Add domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euhqw913pxch1bhy0lpu.png)


Now you'll need to create an API key. Go to the [API Keys section](https://resend.com/api-keys), click on 'Create API Key', and fill in the required details.


![Get api key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjsubsdf4xz0kg5mdef8.png)


Navigate to resend SMTP page, you'll see all the details of your SMTP server here. You'll need to copy-paste these to Hanko.


![Get smtp details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fk8i3b80bdxwquv84yc.png)



Next, go to your Hanko project and navigate to 'Settings' in the sidebar. Click on 'SMTP' there and fill in the details.

Copy the host, port, and username from resend. Next, in the 'Password' section, enter the API key you got from Resend. In the 'Sender email address' section, put the email address you'll be sending emails from, and then hit 'Save'.


![Add details to hanko](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh3aa7pgk39o08tnk369.png)


And there you go! Your emails are now ready to be sent from your custom domain 🎉


![Email from custom domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obe114kpo6sxqg9wv1gd.png)



Check the [Resend docs](https://resend.com/docs/introduction) to know more about it.
RESTful API Summary
Tags: webdev
Published: 2023-09-04 12:27:20

## 📘REST의 뜻
- 웹 상에서 두 컴퓨터가 통신하기 위한 일련의 규칙들의 집합
- **Representational State Transfer의 줄임말**
- server가 리소스를 나타내는 정보(representation of resource),그리고 리소스의 state를 변화시킬 수 있는 링크를 보낸다는 점에서 REST로 불렀다. 다만 대다수의 웹서비스에 적용된 RESTful API들은 링크를 보내지는 않는다.
- REST의 규칙을 준수하는 WEB API를 **RESTful API**라 부른다.
- 주로 HTTP를 기반으로 하는 Web App에 사용된다.

---
## RESTful API가 되기 위한 조건


### Uniform Interface

- URI(URL)을 통하여 리소스를 표현한다.
- 리소스 수정/삭제 요청시 충분한 메타데이터가 포함되어야 한다.
- HATEOAS: 서버로부터 제공되는 링크를 통해 클라이언트는 필요한 리소스를 모두 접근할 수 있어야 한다.
- 메시지는 해당 메시지를 어떻게 처리할지에 대한 충분한 설명을 제공해야 한다.

### Client-Server Architecture

클라이언트가 UI/UX를 담당하고, 서버가 데이터를 담당한다.

### Statelessness

서버는 클라이언트를 위해 요청 사이에 추가적인 정보(상태)를 유지하고 있으면 안 된다.

### Cacheability

클라이언트가 보내는 요청에 safe method가 사용이 된다면 서버는reverse proxy를 배치하여 캐싱이 가능하다.

### Layered System

클라이언트와 종단 서버 사이의 통신에 프록시, 로드밸런서, 암호화를 위한 중간자 서버가 개입하면 안 된다.

### Code on demand(optional)

서버는 상황에 따라 클라이언트에게 executable codes를 보낼 수 있다.

---
## Idempotence


- idempotent method는 아무리 여러번 호출되더라도 동일한 결과를 가진다.
- 동일한 결과는 resource representation이 동일하다는 뜻이다.
- GET, PUT, DELETE는 모두 idempotent methods이다.

---

## 🆕 Versioning RESTful API


가장 대표적인 방법은 version number를 url에 포함시키는 것이다.

---

## ❌ Accept-Language/Accept Header


HTTP request의 accept-language에 명시된 대로 resource를 보낼 수 없다면, status code 406를 반환해야한다. 

---

참고문헌:

[https://restcookbook.com](https://restcookbook.com/HTTP%20Headers/acceptlanguage/)

https://en.wikipedia.org/wiki/Representational_state_transfer
Introduction to Bash Scripting
Published: 2023-09-04 12:14:13

Bash scripts are computer programs consisting of a series of commands that may be used in the command-line environment. They are commonly used for automating repetitive tasks in Linux systems. 

## Variable Assignment

- The syntax below is used when assigning values to variables in Bash.
```bash
variable=value
echo $variable
```
- The variable can be accessed in the code by prefixing the variable name with a '$' e.g. $variable as illustrated above.

## Types of Variables

- There are two types of variables in Bash.
- Global variables: accessible anywhere in the script, regardless of scope, by default, every variable we create in Bash is global.
- Local variables: confined to the section of code or function in which they are declared, they are created using the local keyword.

## Difference between global and local variables.
```bash
#!/usr/bin/env bash
GLOBAL_VAR="This is a global variable"
function example {
      echo $GLOBAL_VAR
}
test # outputs: This is a global variable
```
```bash
#!usr/bin/env bash
function test {
local LOCAL_VAR="This is a local variable"
     echo $LOCAL_VAR
}
test # outputs: This is a local variable
echo $LOCAL_VAR # outputs nothing
```

## Looping in Bash
There are three types of loops used in Bash: for loop, while loop and until loop. These loops have varying syntax but can carry out similar tasks when implemented in a Bash script.

## for loop

- Allows for specification of a list of values.
```bash
for NAME [in LIST ]; do COMMANDS; done
```
- NAME represents the variable name; often denoted as ‘i’, LIST can be a list of words, strings, numbers etc, and COMMANDS represent any operating system commands, program or shell statement.
- The loop will terminate once the NAME has taken on every value from LIST and no items are left in LIST.

```bash
#!/usr/bin/env bash
for i in {1..5};
do
echo $i
done
```

## while loop

- Allows for repetitive execution of a list of commands, as long as the command controlling the while loop is true.
```bash
while CONTROL-COMMAND; do CONSEQUENT-COMMANDS;done
```

- CONTROL-COMMAND can represent any commands that will exit on success or failure.
- The CONSEQUENT-COMMANDS can be any program or script.
- When the CONTROL-COMMAND fails, i.e., is no longer true the loop exits and the done statement is executed.

```bash
#!/usr/bin/env bash
i=1
while [[ $i -le 10 ]];
do
	echo "While loop"
	(( i += 1))
done
```

## until loop

- Allows for repetitive execution of a list of commands as long as the TEST-COMMAND is false, once it succeeds, the loop terminates.
```bash
until TEST-COMMAND; do CONSEQUENT-COMMANDS; done
```
- TEST-COMMAND can be any command that can exit on success or failure, CONSEQUENT-COMMANDS can represent any script or Linux command.
```bash
#!/usr/bin/env bash
i=0
until [ $i -eq 10 ];
do
	echo "Bash Scripting"
	(( i += 1))
done
```

## References
https://tldp.org/LDP/Bash-Beginners-Guide/html/sect_09_01.html
Basic Sql Commands⏹️
Tags: sql, tutorial, beginners
Published: 2023-09-04 12:06:52

```
--SQL Script for Data Retrieval
SELECT column1, column2
FROM table_name
WHERE condition;
```


```
-- SQL Script for Data Manipulation
INSERT INTO table_name (column1, column2)
VALUES (value1, value2);

UPDATE table_name
SET column1 = new_value
WHERE condition;

DELETE FROM table_name
WHERE condition;
```

```
-- SQL Script for Table Management
CREATE TABLE table_name (
    column1 datatype,
    column2 datatype
);

ALTER TABLE table_name
ADD column_name datatype;

DROP TABLE table_name;
```

```
-- SQL Script for Database Management
CREATE DATABASE database_name;

USE database_name;
```

```
-- SQL Script for Indexing
CREATE INDEX index_name
ON table_name (column1, column2);

DROP INDEX index_name
ON table_name;
```

```
-- SQL Script for Transaction Control
BEGIN TRANSACTION;
```

```
-- SQL statements within the transaction
COMMIT;
```

```
-- SQL Script for Views
CREATE VIEW view_name AS
SELECT column1, column2
FROM table_name
WHERE condition;
```

```
-- SQL Script for Constraints
ALTER TABLE table_name
ADD CONSTRAINT constraint_name
CHECK (condition);
```

```
-- SQL Script for Functions
SELECT COUNT(column) AS count
FROM table_name;
```

```
-- SQL Script for User Management
CREATE USER username IDENTIFIED BY 'password';
```
No Code: Dify's Open Source App Building Revolution
Tags: ai, aiops, llms, llmops
Published: 2023-09-04 12:04:18

[Dify](https://dify.ai/) is an open-source LLMOps (Large Language Model Operations) platform that is designed to make it easy for developers and non-developers to create AI-native applications. It offers a user-friendly interface with visual orchestration for various types of applications. Dify provides ready-to-use applications and can also serve as a Backend-as-a-Service (BaaS) API. It simplifies the development process by offering a unified API for integrating plugins and datasets, as well as a single interface for prompt engineering, visual analytics, and continuous improvement of AI applications.

Key features and applications of Dify include:

Out-of-the-box websites that support both form mode and chat conversation mode.

A versatile API that encompasses plugin capabilities, context enhancement, and more, reducing the need for extensive backend coding.

Visual data analysis tools, log review capabilities, and annotation features for enhancing AI applications.

Dify not only supports established large language models like ChatGPT and Claude but also offers support for open-source LLMs such as Llama2 from Hugging Face and Replicate. This open-source platform allows users to create personalized applications tailored to their specific needs, making AI development more accessible and efficient.