teleren/devto huggingface dataset:
7-Minute Figma Speed Art: Delivery Landing Page UI Design
Tags: ui, uiweekly, ux, uidesign
Published: 2023-09-24 09:45:12

{% youtube yoDQ-1pYS_E %}
Welcome to our 6-Minute Figma Speed Art video, where we dive into the exciting world of UI design! In this fast-paced tutorial, we'll take you on a creative journey as we craft a stunning Delivery Landing Page UI Design using Figma, the industry-leading design tool.

Watch as our expert designer demonstrates their skills and expertise, showcasing the entire design process in just six minutes. Whether you're a seasoned designer looking to enhance your UI skills or a beginner eager to learn the ropes, this video is perfect for you.

With search engine optimization (SEO) in mind, we've carefully crafted this video to provide valuable insights and practical tips that will help you optimize your UX skills. From color palette selection to typography choices, we'll walk you through every step, explaining the reasoning behind each design decision.

By the end of this tutorial, you'll have a solid understanding of how to create a captivating Delivery Landing Page UI Design that grabs users' attention and enhances their overall experience. Our goal is to equip you with the knowledge and confidence to design high-converting landing pages that drive engagement and conversions for your projects.

Don't miss out on this opportunity to level up your UI design skills in just six minutes! Hit the play button now and embark on an exciting journey towards becoming a masterful UI designer with Figma.

Subscribe to our channel for more inspiring content and stay tuned for future speed art videos that will empower you to create remarkable user experiences. Start your journey today and let your creativity soar!

#FigmaSpeedArt #UIDesignTutorial #DeliveryLandingPage #UXSkills
🎬 Video - Dynamic header tutorial on CodeBehind framework
Tags: csharp, html, css, dotnet
Published: 2023-09-24 09:27:52

Elanat framework new video on YouTube channel.

YouTube channel link:
[https://www.youtube.com/@elanatframework](https://www.youtube.com/@elanatframework)

In this video, we have taught how to create dynamic header using the CodeBehind framework.

The audio on the video is the English text read by google translate and allows you to access a quality subtitle in all languages of the world.

Note: The size of the video is very small; watch in 1080 quality (11 minutes in only 85 MB).

{% embed https://www.youtube.com/watch?v=2kLgI0Uf8sU %}

CodeBehind in NuGet:
[https://www.nuget.org/packages/CodeBehind](https://www.nuget.org/packages/CodeBehind)

CodeBehind repository link:
[https://github.com/elanatframework/Code_behind](https://github.com/elanatframework/Code_behind)

CodeBehind page in Elanat website:
[https://elanat.net/page_content/code_behind](https://elanat.net/page_content/code_behind)
8 Months and Counting.
Tags: programming, git, relagit
Published: 2023-09-24 09:25:16


Brought over from [Rela](https://rela.dev/blog/8-months-counting).

In tech, the hardest commodity to keep is motivation.  Sure, if you're sponsored by a massive company or salaried at a FAANG, you can keep going as long as you like. But for an independent, developing things on the side, it's a lot harder.

I made that my last blog post in the honeymoon phase of the project. 
I was excited, I was motivated, and I was ready to go. 
I had a plan, I had a vision, and I had a goal. 
I was going to make something that I could be proud of, and that people would love to use.

And then I started *really* working on it.

Turns out, building a git client from the ground up is *hard*. There are countless features to implement and using something with such a temperamental API is a nightmare. So, I lost my motivation... for about 4 months.

### The 4 Month Hiatus

After a while of doing other things, tinkering with some fun ideas (à la [pyotr](https://github.com/TheCommieAxolotl/pyotr)), I had some thoughts about Rela(Git) again. I started by implementing [a simple CLI tool for the commit standard](https://npmjs.com/package/@relagit/commits), and then I started working on the client again.

### What's with the new look?

During the Hiatus, I came up with a design system that I call Illyrica *(ih-lyr-i-cah)*, after a technologically advanced planet in a certain Sci-Fi series.
Quickly, I ported RelaGit to use this new design system, and I'm really happy with the results.

Head over to the [main blog post](https://rela.dev/blog/8-months-counting#whats-with-the-new-look) to see the difference.

### What's really next?

I know I said this last time, but I'm going to try and keep this blog updated more often, as well as posting to [here].

But for now, cya!
useState in React JS
Tags: webdev, javascript, css, node
Published: 2023-09-24 09:23:01

Introduction

React is a popular JavaScript library for building user interfaces, and it provides several hooks that make it easier to manage state in functional components. One of the most fundamental hooks for state management is useState. In this blog post, we will explore what useState is, how to use it, and why it's essential for building dynamic and interactive React applications.

What is useState?

useState is a built-in React hook that allows functional components to manage state. Prior to the introduction of hooks in React 16.8, state management was primarily the domain of class components. Hooks were introduced to simplify state management in functional components, making it easier to share and manipulate stateful data.

In a nutshell, useState allows you to declare state variables in your functional components, and it returns an array with two elements: the current state value and a function to update it.
Guess the JavaScript Output: Level impossible!
Tags: javascript, programming, productivity, career
Published: 2023-09-24 09:12:33

This post is part of a series called [Guess the JavaScript Output](https://dev.to/sadeedpv/series/24754)
If you like to read **Part 1** of the series, see [here](https://dev.to/sadeedpv/you-wont-be-able-to-answer-this-javascript-question-235i)

So, without any ado, let's get to it:

Today's question(Super tricky):

**What does `console.log((! + [] + [] + ![]).length)` output in JavaScript?**

Big Mike solved this in 2 minutes. Can you beat big Mike on this one? _Even ChatGPT got this one wrong!!_

> And Yes, JavaScript is officially crazy!
Coding Beyond Opinions: A Tale of Two Scripts
Tags: watercooler, javascript, typescript, webdev
Published: 2023-09-24 09:06:24

In a realm of ones and zeroes, I stand,
Between JavaScript's wild land,
And TypeScript's structured hand,
Social media rants, like shifting sands.

They say, "JavaScript's free, it's grand!"
Others claim, "TypeScript's the promised land!"
But in my heart, a simple demand,
To write code that's clear and stands.

Scrolling through tweets, a never-ending band,
Of devs who argue, take a stand,
But in my quiet corner, my plan,
Is to get the work done, no matter the brand.

For tools are tools, in every hand,
It's the craftsman's skill, not the brand so grand,
Whether JS or TS, across this land,
I'll code my way, and make my stand.

So let them rant, let them disband,
I'll choose my path, with my own hand,
For in the end, it's not about the strand,
But the magic we create, when code meets land.

---

🐦 Follow me on Twitter: [@CSTayyab](https://twitter.com/CSTayyab) 
🔗 Check out my projects on GitHub: [@CSTayyab](https://github.com/CSTayyab) 
🌐 Visit my personal website: [cstayyab.com](https://cstayyab.com)

Stay connected and let's build something amazing together! 🚀

---

🖼️ Cover Image by [愚木混株 cdd20](https://unsplash.com/@cdd20?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/zwBPjicUKPc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Linux Boot Log - Location
Published: 2023-09-24 08:59:27

> _**Boot Log Locations**_

```
journalctl --list-boots
journalctl -b 0
journalctl -b -1
/var/log/messages
/var/log/auth.log
/var/log/dmesg
who -b
journalctl | grep shutdown

```

[ 0 , -1 , -2 etc ] --> Index , it will reduce each reboot logs.

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

---

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

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

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

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

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

---

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

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpvdradufer14fsc930h.png)
ReactPy = React + Python ?
Tags: webdev, javascript, programming, react
Published: 2023-09-24 08:53:28

## Ever heard of writing a React App in Python, this is what ReactPy is all about.

> ReactPy is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components that look and behave similar to those found in ReactJS. Designed with simplicity in mind, ReactPy can be used by those without web development experience while also being powerful enough to grow with your ambitions.

--------------------------

### Let's start by installing ReactPy :-

> To start using ReactPy, you'll first need to install it. Depending on your choice of backend, you can install ReactPy along with the corresponding backend implementation. Here's how you can do it:

**Installing with Starlette Backend**

```
pip install "reactpy[starlette]"
```

> You can substitute `starlette` with any other backend as you want, example: `FastAPI` , `Flask` , `Django` , etc


**Installing a Pure Version of ReactPy**

> If you prefer a "pure" version of ReactPy without a specific backend, you can install it without any extras :

```
pip install reactpy
```

This option is useful if you plan to use a custom backend or if you want to manually manage dependencies for your chosen backend.

------------------------------

## "Hello, World!"

Let's get started by creating the first App using ReactPy
> To get started, setup your coding environment as you want such as an IDE, preferrably use VScode or Replit's ReactPy.

**Configuring Your ReactPy Application**

>To run ReactPy in production, you'll need to configure your chosen backend with a ReactPy view. The following steps demonstrate how to set up and run ReactPy with a sample backend. Remember that the process may vary depending on your chosen backend, but the basic structure remains consistent.

- **Import Necessary Modules**: Import the required modules from your chosen backend and ReactPy.

```
from reactpy import component, html
from reactpy.backend.my_chosen_backend import configure
```

- **Define Your React Component**: Create a React component using ReactPy. This component will be the core of your web application. In this example, we create a simple "Hello, world!" component.

```
@component
def HelloWorld():
    return html.h1("Hello, world!")

run(HelloWorld)
```
-----------------------------------

### Suppose you're using Flask Framework 

```
from reactpy import component, html
from reactpy.backend.flask import configure
from flask import Flask

@component
def HelloWorld():
    return html.h1("Hello, World!")

app = Flask(__name__)
configure(app, HelloWorld)
```

You can run the program here :

{% embed https://replit.com/@AniketMahajan5/HelloWorld#main.py %}

-----------------------------------


Connect me on [LinkedIn](https://www.linkedin.com/in/aniket-mahajan-275305243/)

**Follow and like for more .**
[每次突破0.1] ES2023中数组的复制更改方法
Tags: javascript
Published: 2023-09-24 08:03:32

过去，JS数组(Array)的方法都是对原数组内容做更改的，其中包过 `splice()`, `sort()` 和 `reverse()`
比如：
```js
const arr = [5, 6, 2, 7];
arr.sort();

console.log(arr); // [2, 5, 6, 7]
```

这对一些纯函数编程环境有点不友好，比方说`React`。

现在`ES2023`加入了几个通过复制来更改数组的方法，分别是：
- `toSorted(comporeFn)` : 返回一个新的已排序数组
- `toReversed()`：返回一个新的逆序数组
- `toSplice(start, count, ...items)`：在给定的索引处删除和/或替换了一些元素，返回一个新的数组
- `with(index, value)`：在指定索引处替换上新的值，返回一个新的数组

上面这4个新的方法都是不会对原数组做更改的，而是先进行复制在给予操作再返回已复制的新数组。
```js
const arr = [5, 6, 2, 7];
const sortedArr = arr.toSorted();

console.log(arr); // [5, 6, 2, 7]
console.log(sortedArr); // [2, 5, 6, 7]
```

这推广函数式编程(Functional Programing)原则并增强代码可预测性。
Weekly reading digest #6
Tags: php, backend, softwareengineering, symfony
Published: 2023-09-24 08:00:00

**2023/09/18-2023/09/24**

[Tuto Symfony, 15 minutes pour mettre en place des tests automatiques qui vont vérifier toutes les routes de votre projet](https://medium.com/@fredericleaux/tuto-symfony-15-minutes-pour-mettre-en-place-des-tests-automatiques-qui-vont-vérifier-toutes-les-c753019cc877)

[Elevate Your Symfony Projects: Implementing DDD, CQRS, and Hexagonal Architecture](https://medium.com/@skowron.dev/elevate-your-symfony-projects-implementing-ddd-cqrs-and-hexagonal-architecture-606c81cfd287)

[Finding a POP chain on a common Symfony bundle: part 1](https://www.synacktiv.com/en/publications/finding-a-pop-chain-on-a-common-symfony-bundle-part-1)

[Unorthodox Eloquent](https://muhammedsari.me/unorthodox-eloquent)

[I scream, you scream, we all scream for @](https://www.exakat.io/en/i-scream-you-scream-we-all-scream-for/)

[PHP Internals Book: Memory management](https://www.phpinternalsbook.com/php7/zvals/memory_management.html)
Product Hunt launch
Tags: tailwindcss, webdev, javascript, programming
Published: 2023-09-24 07:30:36

Well, after almost 3k customers and six months,  here I am, launching Lexington Themes for second time on Product Hunt.

I also want to thank every single one of you who supports me in every kind of way, I really appreciate it.

It would mean the world if you join me today!

https://www.producthunt.com/posts/lexington-themes-2
Docker Installation
Tags: devops, ubuntu, docker
Published: 2023-09-24 07:25:50

## What is Docker?
Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications. 

## What is Docker Container
A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application.
Containers are an abstraction at the app layer that packages code and dependencies together. Multiple containers can run on the same machine and share the OS kernel with other containers, each running as isolated processes in user space.

**Lets start the Docker Installation on Ubuntu**
**Step 1:**Update and install the system dependencies before install docker

```
sudo apt-get update
```

```
sudo apt-get install ca-certificates curl gnupg -y
```
**Step 2:** Add GPG (GNU Privacy Guard) key is used to ensure the authenticity of the packages that are being downloaded from Docker

```
sudo install -m 0755 -d /etc/apt/keyrings
```

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
```

```
echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
**Step 3:** Now we start install Docker & Docker plugins

```
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

- InstallDocker-Compose Plugins

```
curl -L "https://github.com/docker/compose/releases/download/v2.21.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```

```
ls -lsh /usr/local/bin/docker-compose
```

```
chmod +x /usr/local/bin/docker-compose
```

```
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

- Verify the Docker & Docker compose version

```
 docker version && docker-compose version
```

- Restart,enable the Docker service

```
sudo systemctl restart docker 
sudo systemctl enable docker 
```

- Check the status of Docker service
```
sudo systemctl status docker
```
**Step 4:** Create a Docker Group and add user to the group

```
sudo groupadd docker
```

```
sudo usermod -aG docker $USER
```

```
newgrp docker
```
Finally Docker Engine Installation was successfully completed
EventBridge Emoji Event Patterns
Tags: aws, serverless, eventbridge, emoji
Published: 2023-09-24 20:32:13

---
title: EventBridge Emoji Event Patterns
published: true
date: 2023-09-24 07:12:03 UTC
tags: AWS, Serverless, EventBridge, Emoji
canonical_url: https://danielleheberling.xyz/blog/eventbridge-emoji/
---

[![emoji](https://danielleheberling.xyz/static/0ae218a37edcec59c50af00306dc297c/1c72d/emoji.jpg)](/static/0ae218a37edcec59c50af00306dc297c/418a7/emoji.jpg)

> Photo by [Denis Cherkashin](https://unsplash.com/@denic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/qIKSsOMIhpM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

## Background

The other day, I was answering some questions a coworker had about EventBridge. He then jokingly said “I wonder if I can use emojis for an event pattern because they are UTF-8.”

After that conversation, I couldn’t stop thinking about it. So I threw together a quick CDK stack and it works!

[![Lambda Cloudwatch logs](https://danielleheberling.xyz/static/a1df4574b0c20f0503ba744c50bae35f/fcda8/cw-log.png)](/static/a1df4574b0c20f0503ba744c50bae35f/236d7/cw-log.png)

## Try it yourself

I’ve made my quick CDK stack public [on Github](https://github.com/deeheber/eventbridge-emoji). You’re welcome to test with mine.

**This stack contains**

- A rule with emojis only in the Event Pattern on the `default` event bus
- A Lambda as the target of the rule that will be invoked and logs the event

### Steps

1. Clone the repo
2. Configure your AWS credentials locally if you have not yet
3. `npm i && npm run cdk deploy` to deploy the stack
4. Put events on the default event bus with either the [CLI](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/events/put-events.html), and AWS SDK, or in the AWS console. The event pattern is `detailType: ['💩']` and `source: ['🐶']`.
5. Check the Lambda’s CloudWatch logs to see that it has been invoked

## Closing

You can also update the code to contain other emojis as well. From my testing, I found having multiple emojis in a single event pattern works as well.

Not 100% practical in all cases, but thought I would share these findings publicly. Now go forth and update your EventBridge event patterns. 🎉
Is AI the Biggest Threat to Programming Jobs?
Tags: codenewbie, beginners, discuss, ai
Published: 2023-09-24 07:00:00

🎤🔊 _Hey all tech enthusiasts, it's time to rumble in the digital jungle! In one corner, we've got bold and controversial tech statements, ready to assert their dominance. And in the other corner, we've got you, the fearless challengers, set to prove 'em wrong! Get ready to rumble as we dive into debates, challenge the status quo, and wrestle with some of the biggest questions in tech!_

> Prove me wrong: In the future, AI will replace most programming jobs.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Mastering Data Import and Export with Apache AGE: A Comprehensive Guide
Tags: opensource, database, postgres, postgressql
Published: 2023-09-24 06:45:53

Apache AGE, a dynamic graph database that integrates seamlessly with PostgreSQL, has revolutionized data management by enabling both relational and graph data processing within the same database system. In this article, we will explore essential data import and export techniques with Apache AGE, equipping you with the skills needed to manage graph data effectively.

## Introduction to Apache AGE

Apache AGE harnesses the robust capabilities of PostgreSQL while incorporating the Apache TinkerPop Gremlin graph model and traversal language. It extends PostgreSQL's SQL syntax to facilitate graph pattern-matching queries, bridging the gap between relational and graph data processing.

## Data Import in Apache AGE

Let's dive into data import with Apache AGE, assuming you have AGE already installed and configured.

**AGE Graph Creation
**
Our first step is to create a graph within AGE using SQL. Here's an example SQL query to create a node labeled "Person" with name and age properties:

```sql
SELECT * FROM cypher('CREATE (n:Person {name: $name, age: $age}) RETURN n', 
'{ "name" : "John", "age" : 30 }') AS (n agtype);
```

This query establishes a "Person" node with specified properties.

**Importing Data**

Data import is typically done using the COPY FROM SQL statement, with CSV files being a common format. Assuming you have a CSV file named "persons.csv" with the following data:

```
name,age
John,30
Jane,25
Bob,20
```

You can import this data into your AGE graph using the following command:

```sql
COPY Person(name, age) FROM '/path/to/persons.csv' DELIMITER ',' CSV HEADER;
```

This command imports the CSV data into the "Person" table in your AGE graph.

**Data Export in Apache AGE**
Exporting data from Apache AGE is equally straightforward. You can use the COPY TO SQL command to export data to a CSV file. Here's an example of exporting data from the "Person" table to a CSV file:

```sql
COPY (SELECT * FROM Person) TO '/path/to/export.csv' WITH CSV HEADER;
```

This command exports all data from the "Person" table to a CSV file located at the specified path.

## Conclusion

Apache AGE's ability to handle both relational and graph data processing offers remarkable flexibility in data management. This article provided a comprehensive overview of how to import and export data using Apache AGE, laying the foundation for your journey in managing complex graph data structures with the ease of SQL.

Remember the importance of handling data with care and ensuring accurate import and export processes to maintain data integrity.

In our next exploration, we will delve deeper into advanced graph querying techniques with Apache AGE. Until then, continue your journey of exploration and learning!