teleren/devto huggingface dataset:
Coding vs Programming: Let's Clear the Confusion
Tags: programming, coding
Published: 2023-04-16 18:23:52

Hello Friends! 🙌

Welcome to the exciting world of technology! As newcomers, it's common to wonder about the difference between **coding** and **programming**. 🤔 To help you understand the distinction, we'll use a simple, relatable analogy and provide clear examples.

Picture yourself building a house. In this scenario, *coding* represents the bricklaying process, while *programming* encompasses the overall planning, design, and management of the construction. Intrigued? Let's explore each concept in more detail.

## Coding: Writing the Instructions 🖥️

Coding is like learning a new spoken language such as Hindi, English, or Bengali. You're translating human-readable instructions into a language that computers can understand. This is done by writing code using a specific programming language like Python, Java, or C++.

### A Simple Coding Example 🌟

Imagine you want to add two numbers using Python:

```python
number1 = 5
number2 = 7

sum = number1 + number2

print("The sum of", number1, "and", number2, "is", sum)
```

Here, you write the code to add two numbers using Python's syntax. This is the essence of coding.

## Programming: Solving Problems with Code 🧠

Programming goes beyond simply writing code. It's the process of designing, implementing, and maintaining a software solution to a problem. Programming includes problem-solving, designing algorithms, creating data structures, and understanding the logic behind the code. In short, programming involves coding, testing, debugging, and analyzing.

### A Practical Programming Example 🔧

Picture yourself building an e-commerce website like Amazon or Flipkart. You would need to:

1. Understand the requirements (features, user interface, etc.)
2. Design the database and data structures
3. Develop algorithms for searching, sorting, and filtering products
4. Write the code (coding) in a programming language
5. Test and debug the code
6. Optimize performance
7. Deploy and maintain the website

In this example, programming involves a wide range of tasks, with coding being just one of many steps.

## Wrapping It Up 🎁

Coding and programming are related but distinct concepts. While coding involves writing code in a programming language, programming is the comprehensive process of creating a software solution, including design, implementation, and maintenance. Grasping the difference between the two will not only help you communicate more effectively in the tech world but also allow you to decide which aspect you'd like to concentrate on as you learn and grow in the field.

I hope this article has made the distinction between coding and programming engaging, clear, and easy to understand. If you have any questions or need further clarification, please feel free to comment below, and I'll be happy to help! 😊

Happy learning, and best of luck on your tech journey! 🚀
Feedback requested on nextjs pattern for fetching data between client and server
Tags: discuss, nextjs
Published: 2023-04-16 17:47:51

TLDR at the bottom

## Background
I'm somewhat new to NextJS. I know enough to be able to produce a working site, with understandings of most functionality. 

I tell you this so you understand why I'm looking for discussion on the following pattern I'm using for my current project. 

I could use some feedback to know if either I'm using a proper pattern or if I'm confused and need to go back to reading the manuals. 

## The Project
The project is a page of resources, just some data with a "type" to indicate the type of payload expected. 

On the page, you can select a "type" as well as provide a search query. 

The search query simply takes the existing data and filters it on the client side.

The "type" param is where the story begins. The type is actually passed to the query param on the API call to the backend.

The original data comes from the getServerSideProps function.   

This brought me to the first issue I ran into. I was facing the issue of having the existing data being passed to my component from the getServerSideProps and then not being able to rerun the getServerSideProps function, when the "type" query param changed. 

So here is what I did. 

## The Pattern
I realized that I would need to call the getServerSideProps function to populate the original data on the page, and then call the same data fetching on the client side. 

I abstracted out the data fetching portion to it's own function and now I share it between the server and the client. 

### "Frontend"
```jsx
   const setTypeHandler = async ({target: {value}}: any) => {
        setType(value);

        const response = await getData(document.cookie, value);

        setLocations(response.props.locations);

        router.push(`/resource${value ? `?type=${value}` : ''}`);
    }

```


### "Backend"
```ts
export const getServerSideProps: GetServerSideProps<any> = async (context) => {
    const {query} = context;

    const {type}: QuerySearchType = query;

    const cookie = context.req.headers.cookie;

    if (!cookie) {
        throw new Error('No user found');
    }

    return getData(cookie, type);
};
```

```js
const getData = async (cookie: string, type?: string) => { 
    // sanitize user input
    // process and return data
};
```

I'm aware my code can be improved, this is only partial code for an visual. You're welcome to include things you would add/change/avoid.

Thank you and I look forward to having discussions about this. 


## TL;DR
getServerSideProps populates my resources page, but I need to be able to query the backend anytime the "type" select option is changed on the front end. So I use getServerSideProps for initial page load, then on the client, anytime someone changes the "type" select option, it will then call the same data fetching function that getServerSideProps uses to get the data again. 

I split out the data fetching portion to be shared between getServerSideProps and my ui component. Is this the right way to do it?
blendOS : Not your typical distro
Tags: linux, news, productivity
Published: 2023-04-16 16:38:19


[Read this blog at](https://wallbricks.tech/blog/blendos/)

Have you ever thought, what would happen if we combined pacman with apt ? Well now you can, Thanks to [blendOS](https://blendos.org/).

blendOS is a brand new OS spun by **Rudra Saraswat**. Yes! the same guy known for Ubuntu Unity.

The distro is based on **arch** and **pacman** is the default package manager, but worry not, you can use **apt** and **dnf** as well. Even, blendOS's own package manager `blend` isn't included by default.

> 🚧 The project is still in very early phases and may not be ready for daily usage. 

## How does it achieve to install apt and dnf ?

Well, it uses **Podman** to run containers for apt and dnf. They are created when you use the native package manager for the first time.

![blendOS containers](https://blendos.co/blog-assets/future-of-blendos/blend-settings-containers.png)

## Best things about blendOS

- **Immutable** : The filesystem is read-only, thus it remains unchanged resulting in stable experience and enhanced security.

- **Containers** : You can use any of the hundreds of thousands of apps from any of the distributions supported by blendOS (the creation of containers is managed by distrobox).

- **Support for T2 Macs** : blendOS team has worked with t2linux project to add support for T2 Macs (all Intel Macs made after 2018, as well as the iMac Pro).

## Get blendOS

You can download the ISO from [here](https://github.com/blend-os/blendOS/releases/latest).

You can also read my post at [Wall Bricks](wallbricks.tech)
HOW TO ASSIGN A ROLE AND ALSO REMOVE A ROLE ASSIGNMENT IN MS AZURE
Tags: azure, cloud, tutorial, microsoft
Published: 2023-04-16 17:00:56


**STEP 1**: 
- Create a resource group by clicking on 
  "resource group" then "create".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zifukueevclr4x5r71r2.png)

**STEP 2**: 
- Give it a name then click on "review+create. 
- once validation is complete click on "create.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akrnb8yrjpm3118eos5r.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbz6ny5k5gs5mok2bu7o.png)

**STEP 3**: 
- Go to "Access control".
- Click on "Add" to add a role assignment.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpo8ud9ajp19u5cs5nfd.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rln4ue3qmfi38110bii3.png)

**STEP 4**: 
- Search for the role you want to assign in the search panel e.g virtual machine contributor.
- select the role and click on "next"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ntwmpqxmm7vzzf4a2ek.png)

**STEP 5**: 
- Click on "select members"
- Choose who to assign the role and click on "select"
- Add a description (name of the assigned role) 
- Click on next, click on Review+assign.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfqzcl81vvt3s7ckt5w9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2su825zfn9enwmk6fb8d.png)

**STEP 6**:
- Go to your "activity log" to view your activity so far.
- To remove the assigned role/person, go to "access control", select the role and click on remove.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kfwp7y42p1gh16qd43u.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o5yyuz2kqu1ymt4ff7s.png)

DONE!!!
Server-Driven UI on the web: Examples, what is it and when to use it
Tags: webdev, javascript, jamstack, serverless
Published: 2023-04-16 16:45:00

A server-driven UI architecture determines which UI views need to be rendered on an application screen.

Most web applications today work this way: a client/server (frontend/backend) architecture. The backend sends data to the front end, and the front end decides where and how to present the data.

Well, the server-driven UI (SDUI) approach is similar, with one twist: the backend decides where and how to present the data. Or better say, the backend decides about the user interface.

One of the benefits of this approach is that it enables new features to be deployed on all platforms simultaneously via a backend change without releasing new versions of the native apps.

How Server-Driver UI works?

There are no molded templates anymore; instead, the server defines the list of components. There is a corresponding UI implementation in the app (UI Component) for each component defined at the server.

Why Server-driven UI uses components instead of templates?

Template creation, by default, implies a dependent relationship between the front-end programmer and the content creators. 

How? To fill templates with content, creators must adapt their content to the template. They can only alter or customize the content with a programmer. The same applies to changes made to a page's design or content. When you add new sections or buttons to a website using the traditional method (i.e., the client-side approach), you must create new codes and add new CMS fields. 

Rather than using templates, SDUI concentrates on separate components to solve these problems.

How to build new components with SDUI

JSON! JSON! JSON!


So, an emerging thing with SDUI is the fact that it uses layouts as JSON. Something that you can deliver over an API. So, you build components, and the API can dictate who sees what information in what order. And believe it or not, this simple philosophy could actually solve very complex problems.

Wanna know how this actually works?


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

As you can see in this picture, this imaginary web page is made up of several "components."

So, from the top, we see the page type, a carousel, title, action row, and map row. And then a list of sections; each section consists of a list of components. Each component is rendered based solely on the data contained in JSON.

The server does all the work of deciding which component to use and how to render. The app/client/front end doesn't decide anything.

The most important thing is that the server ultimately decides the order of these components and the content inside of them.

Advantages of the Server-driven user interface


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

To keep reading and finding more about SDUI pros and cons, pls proceed to my blog, where you can find the full text on this subject: [https://thebcms.com/blog/server-driven-ui-on-the-web-examples]
Handling HTML Meta tags in BCMS - quickly and easily
Tags: webdev, javascript, jamstack, serverless
Published: 2023-04-16 16:45:00

Handling HTML Meta tags in BCMS - quickly and easily

Adding meta tags to a web page is a repetitive, manual, time-consuming, and tedious process. But meta tags are a powerful way to let your browser, visitor, and search engine know how to consume and render your website. Using BCMS to manage meta tags is an absolute power-up!

Here is a list of essential meta tags for SEO:

- Meta tags- Drive users’ attention.
- Meta description- Convince the user that the page they're looking at is exactly what they need
- Meta robots tag- Tells search engines what to follow and what not to follow
- Meta Charset-Tells the browser what character encoding to use.
- Meta Viewport-Defines its visible area for different screen sizes.
- Social media meta tags- Enables content adjustment when shared on social networks.

Creating Meta tags with BCMS

After the theoretical part and familiarization with the basic types of meta tags, in the continuation of this text, we will deal with the technical side, i.e. show you how easy it is to create all the necessary meta tags and handle them through BCMS - headless CMS.

How to use BCMS widgets

Requirements

- Running BCMS
- NextJS, NuxtJS, or Gatsby project

How to handle HTML Meta tags in BCMS?

Go through every step thoroughly and you will see that Handling HTML Meta tags in BCMS is quickly and easily. (https://thebcms.com/blog/handling-html-meta-tags-in-bcms-quickly-easily)
Devassist AI - AI developer tools to make you a 10x developer
Published: 2023-04-16 16:30:22

---
title: Devassist AI - AI developer tools to make you a 10x developer
published: true
description: ai,ml,developers
tags:
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-10 18:43 +0000
---

As software development continues to evolve, developers are constantly seeking ways to streamline their workflow and become more productive. Enter [Devassist AI](http://devassist.ai/), a set of developer tools that leverage the power of AI to automate development tasks, making it easier for developers to become 10x developers.

One of the standout features of Devassist AI is its ability to generate a fully fledged documentation website for any GitHub repository. Simply connect your repository, and Devassist AI will use AI to generate documentation from your code and code comments. This is incredibly useful for developers who may not have the time or resources to manually generate documentation.

But Devassist AI doesn't stop there. It can also automatically refactor your entire codebase, making your code more readable, maintainable, and up-to-date with the latest best practices. This is a huge time-saver for developers who may be struggling to keep up with their codebase while juggling other responsibilities. Just look at what we built with for these [React Native UI Library](https://instamobile.io/react-native-tutorials/react-native-ui-libraries/)

Another major benefit of Devassist AI is its ability to automatically generate unit tests for your code. Writing unit tests can be a time-consuming and tedious task, but with Devassist AI, developers can simply connect their GitHub repository and let the tool generate the tests for them. It will even commit the tests back into the repository, making it easier to keep track of changes and updates.

Overall, Devassist AI is a game-changer for developers looking to become more productive and efficient. By automating tasks like documentation generation, code refactoring, and unit testing, Devassist AI frees up developers to focus on more important tasks and ultimately become 10x developers.
Deepfakes
Published: 2023-04-16 16:03:57

Name: Sagarneil Ghosh
College : RCCIIT
University : MAKAUT

Introduction:
Deepfakes are a form of synthetic media created by using artificial intelligence (AI) to manipulate or superimpose existing images or videos. They are typically created by using machine learning algorithms that can learn to mimic the speech, facial expressions, and movements of a person in a video. Deepfakes have gained significant attention in recent years, particularly in the context of politics and misinformation campaigns. This report provides an overview of deep fake images and videos, their techniques, and their impact on society.




Techniques of Deepfake Generation:
Deepfake images and videos are generated using machine learning techniques, such as deep neural networks. The techniques used in deepfake generation include:

Face Swapping:
This technique involves swapping the face of one person onto another person's body in a video or image. The algorithm learns to map the facial features of one person onto another person's face, creating a realistic-looking face swap.

Lip Syncing:
This technique involves using machine learning algorithms to generate accurate lip movements for a person in a video. The algorithm analyzes the audio track of the video and maps it onto the mouth movements of a person, creating a realistic-looking lip sync.

Puppeteering:
This technique involves creating a digital puppet that can be controlled using a person's movements in a video. The algorithm maps a person's movements onto the puppet's movements, creating a realistic-looking digital puppet.

Impact of Deepfake Images and Videos:
The impact of deepfake images and videos can be significant and far-reaching. Some of the ways that deepfakes can impact society include:

Misinformation:
Deepfakes can be used to spread false information, particularly in the context of politics. They can be used to create fake news or manipulate public opinion, leading to widespread confusion and distrust.

Cyberbullying:
Deepfakes can be used to create fake images and videos of people, leading to online harassment and cyberbullying.

Privacy:
Deepfakes can be used to violate people's privacy by creating fake images and videos of them. This can be particularly damaging to public figures, as it can lead to reputational damage and loss of credibility.

Conclusion:
Deepfake images and videos are a significant and growing concern, particularly in the context of politics and misinformation campaigns. While the technology used to create deepfakes is still in its early stages, it is clear that the impact of deepfakes can be significant and far-reaching. It is essential for policymakers and technology companies to work together to mitigate the potential harms of deepfakes and to develop solutions to detect and combat deepfakes
Angular: Como o framework evoluiu para atender às demandas do desenvolvimento web
Tags: angular, webdev
Published: 2023-04-16 14:02:27

## Evolução, desempenho e funcionalidades para conquistar o futuro

Desde sua primeira versão em 2010, o Angular da Google conquistou muitos corações de desenvolvedores web. Mas, como em toda evolução tecnológica, a transição do AngularJS para o Angular 2 não foi fácil e houve controvérsias. No entanto, a reescrita completa do framework e as introduções de novos conceitos, como componentes, módulos e serviços, provaram-se necessárias para atender às novas demandas do ecossistema da web.

Com o lançamento do Angular 15 em abril de 2023, o framework continua evoluindo e trazendo melhorias significativas de desempenho, tornando mais fácil a escrita de aplicativos com código mais eficiente. Algumas das novas funcionalidades e melhorias incluem compilação mais rápida, melhor "tree shaking", injeção de dependência simplificada, tratamento de erros aprimorado, novos comandos CLI e suporte a internacionalização. 

Naturalmente, tais transições foram difíceis e trouxeram impactos, causando controvérsia entre os desenvolvedores. Para aqueles que viveram essa transição certamente se lembram que nem todos os colegas desenvolvedores foram convencidos pelas mudanças.

### Funcionalidades e melhorias no Angular

O Angular 9 introduziu o mecanismo de renderização Ivy, entregando melhorias significativas de desempenho e tornando mais fácil a escrita de aplicativos, com código menor e mais eficiente.

É possível afirmar que o Angular é amplamente utilizado e continua sendo uma escolha popular para o desenvolvimento web. O framework continuou a evoluir e melhorar com a versão mais recente, Angular 15, lançado em abril de 2023. 

As novas funcionalidades e melhorias no Angular (v15) incluem:

- Desempenho: O Angular 15 inclui várias melhorias de desempenho, como compilação mais rápida e melhor "tree shaking".
- Injeção de dependência simplificada: O novo decorador @Injectable permite uma injeção de dependência mais simples e eficiente.
- Melhoria no tratamento de erros: O Angular 15 inclui um tratamento de erros aprimorado, com mensagens de erro mais detalhadas.
- Novos comandos CLI: O CLI do Angular inclui vários novos comandos para um desenvolvimento mais fácil e eficiente, como ng run e ng lint.
- Suporte para internacionalização: O Angular 15 inclui várias melhorias no suporte à internacionalização, como melhor localização de datas e horários.
- Dependências atualizadas: O Angular 15 inclui atualizações em várias dependências principais, incluindo RxJS e a biblioteca de interface do usuário Angular Material.

### Olhando para o futuro

o Angular continuará evoluindo e caminha para ser uma escolha cada vez mais popular para o desenvolvimento web. O Google está comprometido em apoiar o framework e também há uma forte comunidade de desenvolvedores que contribuem ativamente para o seu desenvolvimento e manutenção.
Age Installation Guide for Windows.
Published: 2023-04-16 15:36:08

Having Installed PostgreSQL, let's Install AGE. This post is a continuation of my previous post about [Postgres](https://dev.to/chidera/step-by-step-guide-on-installing-wsl-and-postgresql-from-source-code-on-windows-5c84) installation from source code.

- 
Enter into the directory where Postgres was installed.
```
cd postgres-age
git clone https://github.com/apache/age.git
```

- 
If you want a different branch of AGE, let's say version 1.3.0,you can view all available branches and then switch to the new branch. 

```
git branch -r
git switch release/PG13/1.3.0

```

- 
From the directory where PostgreSQL was installed, find the path to your pg_config by running this command. Copy this path.

```
cd postgres
cd postgresql-11.18
find / -name pg_config
```
The is how my path looks like.

```
/home/chidera/postgres-age/postgres/postgresql-11.18/bin/pg_config
```
- 
Now go back to the AGE directory and set the environment variable called "PG_CONFIG" to this path you copied and then install. 
 
```
cd ..
cd ..
cd age
sudo make PG_CONFIG=/home/chidera/postgres-age/postgres/postgresql-11.18/bin/pg_config install
```

- 
Check the installation.

```
sudo make PG_CONFIG=/home/chidera/postgres-age/postgres/postgresql-11.18/bin/pg_config installcheck
```
And so AGE has been successfully installed. Further Installation guides can be seen in the READme of the GitHub repository.


**Contribute to Apache AGE**

https://age.apache.org/
https://github.com/apache/age