teleren/devto huggingface dataset:
👨‍💻 How I created my portfolio using Sveltekit and Tailwind
Published: 2023-07-23 21:58:20

A [portfolio](http://www.alvgonzx.site) is a vital tool for web developers to showcase their skills, projects, and experiences to potential clients or employers. 
In this article, I will share my journey of building my portfolio using the powerful combination of SvelteKit and Tailwind CSS.

## Why Sveltekit + Tailwind?

You might wonder why I chose SvelteKit for a simple project like a portfolio. I primarily chose SvelteKit for its scalability and stability. For instance, if in the future I wanted to include another application within my portfolio, such as an interactive chat feature, I could easily build it using SvelteKit using a backend service.

I also chose Tailwind because I primarily focus on backend development and wanted a straightforward way to build my portfolio without getting too deep into CSS. However, I took on the challenge of designing the layout myself using Figma, just like a professional web designer! 😛

## 1. Creating my Sveltekit project
This is the first project I did with Sveltekit, and I really liked it. I didn't have experience with any other JS framework (I'm focused on backend) and the experience of building an app without vanilla JS was really interesting. For creating my project, first I learned a little bit about Svelte/kit in the [interactive tutorial](https://learn.svelte.dev) and then followed the [Sveltekit documentation](https://kit.svelte.dev/docs/introduction) for building the app. I can summarize it in the following steps:
1. Create the scaffold app
```
npm create svelte@latest my-app
```
2. Install dependencies
```
npm install
```
3. Run the development enviroment
```
npm run dev
```
## 2. Designing the layout
Since I'm using Svelte, I used components to make the code easier. Here is the final component structure:

```
lib/components/
  |- about-me/
    |- AboutMe.svelte
    |- GetToKnowMe.svelte
    |- Skills.svelte
    |- Titles.svelte
  |- hero/
    |- Code.svelte
    |- Hero.svelte
    |- Titles.svelte
  |- projects/
    |- Card.svelte
    |- Cards.svelte
    |- Projects.svelte
    |- Titles.svelte
  |- Footer.svelte
  |- Header.svelte
```
## 3. Deploying it to Github Pages
For deployment, I've chosen Github Pages because I find it to be a very straightforward solution. While there are many other options available, such as Vercel or Netlify, I personally find Github Pages to be the best one.

And that's it! That's how you can easily create a modern portfolio using modern technologies!
Placeholder title
Tags: refinehackathon
Published: 2023-07-23 21:10:40

## What I built 

### Category Submission: 

### App Link

### Screenshots 

### Description 

### Link to Source Code 

### Permissive License 

## Background (What made you decide to build this particular app? What inspired you?) 

### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?) 

### Additional Resources/Info
Rendering Lists in React
Published: 2023-07-23 21:05:38



Rendering lists is one of the most important and common tasks in developing React applications. In most applications, there is a need to display lists of objects and data to the user. For example, let's consider an online pizza ordering application where we want to show a list of different pizza types to the user.
Rendering a list means that we have an array of items and we want to create and display a component for each element of the array. With the use of React techniques, we can easily render lists with different data.

One of the methods for rendering lists in React is using the `map()` function. This function allows us to loop through each element of the array and create and display a component based on that element.

When using the `map()` function to render lists, each created element requires a unique property known as a "key." This key is an internal attribute for React that improves performance. The key must be unique and specific to each rendered element. In other words, a unique value is used as the key for each rendered element. To achieve this, the `key` attribute is often used within the `map()` function.

To ensure proper rendering of lists and to prevent issues like data loss and unintended component re-rendering, we must make sure that the `key` values are correctly assigned to the components and that these values are unique and distinct.

Now, let's better understand how to render lists using `map()` and assign keys with a simple example:

```jsx
import React from 'react';

const PizzaList = () => {
  // Assume that the data related to the pizza list is as follows:
  const pizzas = [
    { id: 1, name: 'Pepperoni' },
    { id: 2, name: 'Mixed' },
    { id: 3, name: 'Vegetarian' },
    { id: 4, name: 'Margherita' },
  ];

  return (
    <div>
      <h2>Pizza List:</h2>
      <ul>
        {/* Creating the pizza list using the map function */}
        {pizzas.map((pizza) => (
          // Assigning a unique key as the identifier for each pizza
          <li key={pizza.id}>{pizza.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default PizzaList;
```

In this example, we used the `map()` function to render the list of pizzas. Each element of the `pizzas` array is rendered as an `<li>` component inside the `<ul>` element. Additionally, we assigned a unique key to each `<li>` element using the `key` attribute, and this key is the unique identifier for each pizza (e.g., the `id` number). This practice ensures better performance and avoids issues related to rendering lists.

Of course! I'd be delighted to hear your feedback and any other comments. If you have any suggestions or points that could help improve the article, please feel free to share them. Enhancing the content is made possible through valuable feedback from you, and it will also contribute to a better understanding of the topic for you. I'm looking forward to your valuable input!
Tips and tricks for debugging Javascript code
Tags: javascript, beginners, programming, productivity
Published: 2023-07-23 20:24:29

Debugging JavaScript code is an essential skill for any developer. In this article, we'll discuss some tips and tricks for debugging JavaScript code.

## 1. Use the Console

The console is one of the most powerful tools for debugging JavaScript code. You can log messages, inspect objects, and even run commands directly in the console. Use `console.log()` to output values to the console and `console.dir()` to inspect objects.

```javascript
console.log("Value of x:", x);
console.dir(myObject);
```

## 2. Breakpoints

Breakpoints allow you to pause the execution of your code at a specific line and inspect the values of variables and objects. Set breakpoints in the Sources tab of your browser's developer tools by clicking on the line number.

```javascript
function foo() {
  debugger;
  // code to inspect
}
```

## 3. Step Through Code

Stepping through code allows you to execute your code line by line and inspect the values of variables and objects at each step. Use the step into, step over, and step out buttons in the Sources tab of your browser's developer tools to control the execution of your code.

## 4. Check for Errors in the Console

JavaScript errors will often show up in the console. Look for error messages in the console and use them to help identify the source of the error.

```javascript
Uncaught ReferenceError: myFunction is not defined
```

## 5. Use the Debugger Statement

The `debugger` statement can be used to pause the execution of your code and allow you to step through it using the developer tools.

```javascript
function foo() {
  // code to inspect
  debugger;
}
```

## 6. Use a Linter

Linters can help identify common errors and potential issues with your code before you even run it. Use a linter like ESLint or JSLint to catch errors and improve the quality of your code.

## Conclusion

Debugging JavaScript code can be challenging, but with these tips and tricks, you can improve your skills and become a more effective developer. Remember to use the console, breakpoints, and step through code to inspect the values of variables and objects. Look for errors in the console and use the `debugger` statement to pause the execution of your code. Use a linter to catch errors and improve the quality of your code. With these techniques, you can quickly identify and fix issues in your JavaScript code.
Dockerized postgres for local development
Tags: docker, postgres, postgressql, prisma
Published: 2023-07-23 20:10:08

This post describes a quick setup which allows one to develop a postgres sql backed application locally. (This is taken from this [eggheadio video](https://egghead.io/lessons/prisma-install-and-set-up-prisma-for-a-new-project).)

Create a `docker-compose.yml` file as follows.

```
version: "3.8"
services:
  db:
    image: "postgres:12"
    ports:
      - "54320:5432"
    volumes:
      - ./pgdata:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=alice
      - POSTGRES_PASSWORD=wonderland
      - POSTGRES_DB=myawesomedb

```

Create a local folder which will persist data and start the service.
```
mkdir pgdata
docker-compose up -d
```

Once it is up and running, verify you can log into postgres shell.

```
docker-compose run db bash
```

Inside the docker container run the following and enter password `wonderland` defined above.

```
psql --host=db --username=alice --dbname=myawesomedb
```

You should see psql shell. You can exit by pressing Ctrl+D twice.

At this point most likely you already have `prisma` setup locally by some variation of the following commands.

```
npx prisma init
npx prisma generate
```

Now you can run the following command to create and *apply* migrations.
```
npx prisma migrate dev --name init
```
Quo vadis, web development?
Tags: webdev, react, discuss, javascript
Published: 2023-07-23 18:41:02

Hey fellow developers,

I have a question to discuss that has been bothering me for some time now, at the latest since the new official React documentation (which is great by the way). In the official docs they are mentioning that the best way to start a new React project is to use a framework like NextJS, so NextJS seems to be a little bit the state of the art now.
Although I think it's an awesome framework, I think that I observe a trend that feels like going some steps backwards to me. 
They seem to take big effort in their server-side stuff, which could be useful for pages with a big spot on SEO. Also Remix seems to get big attention these days, where I also can see similar ways of thinking.

But for me it feels like going back to those Symfony days, where I have a monolithic app structure. The decoupling between backend and frontend felt like a game changer to me. I can deploy my frontend to static site hosting for example and can concentrate to have a robust backend which is scaling. After some time I need an app? No problem! More resources for the backend and a separate app, no monolithic structure. Or I want to provide my backend api for partner apps? No problem, just a little more scaling or a microservice.

Do you get my point? It feels great to have a fast and clean React frontend with Vite and a backend with NestJS which is scaling as a combination. But is it still up to date? Are we really going back to more monolithic patterns, or are they monolithic at all? Is it really going back or even going forward?

What do you guys think? I don't want to become that old man who is telling everyone that SPAs are the hottest stuff while everybody is doing modern stuff.
AGE PG15/16 New updates
Tags: database, graphs, apacheage
Published: 2023-07-23 18:20:01

## Holaa!

This post aims to keep the state of the project up to date with the participant and the other interns on the pg15-16 team. 

## Split up
Currently the team has split up to perform the following tasks
- Keep working on pg16
- Merging PG14 to dev/PG15 by hands (I've joined to)
- Solving issues from AGE 

## Merging
Our mission is to merge the code that is currently on the branch of the PL PG14 starting from that into the dev/PG15 so that we create a new more robust release of PG15 

### What's wrong with the current on?
The current one has been started from an alpha branch not the actual PG14 branch so that it misses some parts and features that is not included during the merging phase so that we are asked for making new merging

### How to accomplish that
- Standard merging using git (will not allow the collaborative spiting the project between the team members)

- Standard files merging and getting the difference between each of them using diff command, it is suggested by the PL


### How can we split the project
I have create a simple suggestions that to be on the level of directories and each one will be responsible for some part of the code and then we all merge it together on a branch of one of us and then make another PR to the main dev/PG15 branch 


### Proposed split
- regression will be only the same as dev/PG15 [complete replace without merge]
- Non src directories (tools, .github, docker-entrypoint-initdb.d)  
- Top level files (configurations and any file exits on /age parent directory
- drivers directory
- src/ (catalog, commands) & /include related files
- src/executor  & /include related files
- src/nodes and src/optimizer  & /include related files
- src/parser  & /include related files
- src/utils/cache & src/utils/load  & /include related files
- src/utils/adt (large directory)  & /include related files

That is only a suggestions I am going to discuss with the team and the PL.

I have created a GitHub project for it:
https://github.com/users/rrrokhtar/projects/3/views/1

## Resources
- https://age.apache.org/
- https://github.com/users/rrrokhtar/projects/3/views/1
- https://github.com/apache/age
How To Add Firebase To Flutter For Android, iOS, Web And Mac | Setup Firebase in Flutter App
Published: 2023-07-23 18:12:25

In this Video, I show you How to Add Firebase To Flutter For Android, iOS, Web And Mac.


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


Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the Tutorial, Please leave me a comment and I’ll do my best to answer it.
How to remove a pattern from patterns panel in Godot 4.1
Published: 2023-07-23 17:27:46

Hello,
I am a noob at Godot and am currently using Godot 4.1. I made a bunch of patterns for my map and have extras that I either don't want or have modified and don't want the base version. I can't seem to find a way to delete the unwanted ones from the patterns panel on the tileset/tilemap tabs in the GUI. Is there a way to remove the patterns I don't want? I have tried googling and can't find anything and can't find it in the documentation. Thanks in advance for any input on this issue.
Pythonic Python: Best Code Practices
Tags: python, programming
Published: 2023-07-23 17:27:41

Who doesn't love Python? It's easy to write code in Python and it does a lot of the work for you. However, there are several practices that we should follow to improve code readability and performance. 

## 1. Pythonic conditions

Python provides a lot of ease in writing conditions. We are often used to other languages that require long conditions, so we end up doing it here. 
Consider the following lines of code.

```
# Non-Pythonic
if condition:
    x = 10
else:
    x = 5

# Pythonic
x = 10 if condition else 5

```
This improves the appearance of your code and makes full use of Python's capabilities.

## 2. Use zip()

The zip function in Python combines multiple iterables (e.g., lists, tuples, or strings) element-wise into a new iterable of tuples. Each tuple contains the corresponding elements from all the input iterables. 
It stops when the shortest iterable is exhausted. Here's an example!

```
items = ['milk', 'banana', 'yoghurt']
quantities = [1, 12, 2]
prices = [1.5, 0.8, 1.8]

combined = zip(items, quantities, prices)
print(list(combined))
```

```
[('milk', 1, 1.5), ('banana', 12, 0.8), ('yogurt', 2, 1.8)]
```

## 3. Look for built-in functions

You'll be surprised that there's built-in functionality for almost everything in Python. Whether it's to find min, max, or to reverse and sort an iterable, you don't need to write nested loops! Just do a quick Google search to see if an easy way out exists. 

## 4. Use default and keyword arguments

You can define default values for function parameters, so if a user doesn't provide a value for that parameter, the default will be used.
Here's an example.

```
def greet(name, greeting="Hello"):
    print(f"{greeting}, {name}!")

greet("Alice")      
greet("Bob", "Hi")  

```
Similarly, for keyword arguments, instead of relying on their order, you can pass arguments by their names, making the function call more explicit and easier to understand.

```
def calculate_interest(principal, rate, time):
    return principal * rate * time / 100

# Calling the function using positional arguments
interest1 = calculate_interest(1000, 5, 3)

# Calling the function using keyword arguments
interest2 = calculate_interest(principal=1000, rate=5, time=3)

```

## 5. Use PEP 8

Last but not least, follow pep-8 conventions. PEP 8 is the official style guide for Python programming, offering recommendations and best practices for well-structured Python code. 
Key aspects covered by PEP 8 include guidelines on indentation, line length, variable and function naming conventions, import statements, and more.
You can read more about it [here](https://peps.python.org/pep-0008/)
Certain libraries can help you follow these conventions. Some famous ones are:
1. isort (sorts imports in required order)
2. pylint (checks for errors and suggest good practices)
Introduction to Jinja Template
Tags: webdev, django, html
Published: 2023-07-23 17:22:26

## Introduction
Jinja template is the most popular template engine for Flask and Django frameworks. It is used to make the templates in these frameworks dynamic and separate the backend from the frontend layer. 

## Installation

```
pip install jinja2
```

## Variables
In case of showing the value of a variable in the HTML code, we can use the following format.

```
<h1>Hello, {{ name }}!</h1>
```

## Expressions
Expressions can be evaluated in the HTML code and displayed using the following approach.

```
<p>{{ 2 + 2 }}</p>
<p>{{ 'Hello ' + 'World' }}</p>
<p>{{ 10 > 5 }}</p>
```

## Conditional Statements

You can add conditional statements and use them to display HTML code based on conditions being true or false.

```
{% if user %}
  <p>Hello, {{ user }}!</p>
{% else %}
  <p>Hello, Guest!</p>
{% endif %}
```

## Loops 
Loops can be used in Jinja template to iterate through collections/lists of values and dynamically generate the elements as many times as required.

```
<ul>
  {% for fruit in fruits %}
    <li>{{ fruit }}</li>
  {% endfor %}
</ul>
```

## Inheritance

It is also possible to inherit the code from other templates and add additional code to it removing redundancy.

The following is a code which is base HTML code which can be inherited by all the files. We have created two blocks title and content and these will be replaced by HTML code of the files inheriting this base HTML.

```
# Base Template: templates/base.html
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <main>
    {% block content %}{% endblock %}
  </main>
</body>
</html>

```
In the following code, the title block gets text Home Page and the content block gets an HTML code.

```
{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
  <h1>Welcome to our website!</h1>
  <p>Content goes here...</p>
{% endblock %}
```
TIL: Dynamic Paths
Tags: webdev, ruby, html
Published: 2023-07-23 17:21:33

## Introduction

I was working on a simple rock, paper, scissors app in Ruby. The first exercise was to create it and to create an individual route for each user option.

```ruby
get("/rock"){...}
get("/paper"){...}
get("/scissors"){...}
```

I knew there had to be a simpler way to do this without declaring that many static routes considering my views file was a singular file.

I learned that to declare a dynamic path segment all that needs to happen is to add a semi-colon `/:path` in front of whatever part of the path you'd like to make dynamic, and it will accept any input to store in a params hash.

I was then able to declare a dynamic route to accept any input to be extracted.

```ruby
get(/:user_input){
@user_input = params.fetch("user_input").to_s
@computer_input = #Logic for random RPS selection

##conditionals
}
```
Would anyone be interested in a simple Lists App?
Tags: webdev, javascript, react
Published: 2023-07-23 17:15:52

Hey guys, I'm looking to build a few applications around my full-stack Framework "React Server". 

It's a new Framework which allows you to rapidly prototype reactive full-stack applications by using TSX and hooks on the backend fostering a component driven approach (just like React on the Frontend). 

It's easy to use for anyone familiar with React. If you're interested about writing your own web applications which require server side state or logic, check it out at https://state-less.cloud, it's fun!

While thinking about ways to provide more content around React Server, a simple idea I had was a web-app for organizing lists and tasks. 

It's simple enough to serve as tutorial and entrypoint for beginners, yet sophisticated enough to demonstrate the capabilities of React Server. 

I have been using it to organize my own tasks into lists for a while now and a friend suggested gamifying the concept so you get rewarded when completing tasks. I think this is a good idea and I'm looking for other ideas because I think this could be a useful application for a lot of people.

It's still in a early stage, but feel free to check out the prototype at https://state-less.cloud/lists?fs