teleren/devto huggingface dataset:
The State of User Interfaces: A Frontend Developer's Perspective
Tags: frontend, ui, ux, design
Published: 2023-04-09 10:53:10

User interfaces (UIs) are the means through which humans interact with digital products, and as such, they must be designed to cater to human input. However, the current state of UIs is far from ideal, and it's only getting worse with the advent of artificial intelligence (AI). In this post, we'll explore some of the issues plaguing UIs and how they can be improved.

## The Problem with UI Design

The problem with UI design is that it's often done by experts who don't bother to ask users what they want. As a result, we get UIs that are difficult to use, buried in menus and lacking in accessibility. Furthermore, the current trend towards minimalism has only made things worse, with excessive negative space and a love of circular design elements.

Take Facebook, for example. The social media giant has iteratively "simplified" its interface, resulting in buried options and an overly simplified newsfeed. Moreover, the font size is so large that it's reminiscent of a kindergarten classroom, and everything is bubbly and rounded to avoid sharp edges. Instagram, on the other hand, is stuck in the 90s tables logic, with tiny pictures and no zoom function.

## The Problem with Front-end Development

Front-end development has expanded in recent years, but it hasn't solved any problems. Instead, it has added more skills to the required learning stack. While HTML/CSS and front-end frameworks have steadily advanced over the years, UIs have not kept up. Instead of building UIs that are better, more accessible, and more usable, we get "lowest common denominator" UIs that aim for simplicity but achieve only frustration.

## The Problem with Mobile Apps

Mobile apps are another problem area, with numerous clicks required to do even the simplest of tasks. This is a consequence of bad design and lazy development. Many mobile apps are simply repackaged web interfaces, resulting in poor performance and frustrated users.

## The Need for Human Input

AI can only guess what users want, but UIs are designed for humans, and therefore must be tested on humans. We need to move away from the current trend of expert-driven UI design and towards a more user-centered approach. UI designers must be willing to ask users what they want and then design UIs that cater to those desires.

## Conclusion

In conclusion, the current state of UIs is a sorry one. UIs are buried in menus, lacking in accessibility, and frustrating to use. Front-end development hasn't solved any problems, and mobile apps are often poorly designed and frustrating for users. We need to move away from the current trend of expert-driven UI design and towards a more user-centered approach. Only then can we hope to build UIs that are better, more accessible, and more usable.
Deferred Promise Queue
Tags: promise, async, javascript, deferred
Published: 2023-04-09 10:29:16

## Motivation
I recently published a simple npm package to defer the execution of collection of promise based asynchronous calls. 

If you ever had to do multiple async calls returning a promise object, but the service or client machine was not able to handle all calls concurrently, there are chances that something like this was used.

An obvious use case would be getting data from the remote API page by page and it is not uncommon that it could be hundreds if not thousands pages long (which was by the way the initial motivation to create the library at first place).

## Deferred pattern
At the core of the implementation is something which could be described as deferred Promise. We can work with an array of Promises hundreds or thousands items long, but we can't trigger them at the same time. So the the async function calls need to be deferred until the system is able to process them. How to do that I explained in this article about [Deferred Promise](https://dev.to/webduvet/deferred-promise-pattern-2j59)

## Publish - subscribe
The second piece in the puzzle is to implement ability to throttle the calls. 
Under the hood this is done by implementing publish-subscribe pattern and schedule-task pattern.
The entire flow is triggered by calling start method which in turn emits event that the queue is available to take a call. (Fig.1). Promise Queue is scheduling the individual async function calls periodically (Fig.2) until the buffer is filled. Buffer here is the limit on currently pending promises. Once this limit is reached the scheduler postpones the next task until at least one pending promise is converted to settled (Fig.3).

## Flow Chart
*Fig.1, Initial call*![Fig.1, Initial call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpc3zrg0q7ra6z1pfcpk.png)

*Fig.2, periodic loop*![Fig.2, periodic loop, check buffer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb3ghli77u9eij2cxt29.png)

*Fig.3, coming back from blocked queue*![Fig.3, unblock queue flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7xj774nsuvaroi7fm4a.png)

Notice that all the parts (apart beginning) starts and end with emitting an event. This allows to add multiple consumers e.g. for logging or debugging.

## Wrap up
If anybody find this useful I wrapped all of the above in the platform agnostic `npm package`, which can be installed by
```sh
$ npm install prmsq
```
The basic usage example:
```javascript
// fetchPage(pageNumber) is http call returning promise
const workload = range(1, 1000)
    .map((pageNo) => () => fetchPage(pageNo));

const delayBetweenCalls = 100;
const concurentLimit = 10
const pq = new PrmsQ(workload, delayBetweenCalls, concurentLimit )

Promise.allSettled(pq.promises)
.then(doWhenAllSettled)
.catch(handleProblem)

pq.start();
```

It also can be found on [github.com/webduvet/prsmq](https://github.com/webduvet/prmsq)
with the example in `/src/example/`
Learning CSS In Depth
Published: 2023-04-09 09:30:54

CSS rendered up to buttom. If I assign a variable in line 5 and then again reassign it in line 10. Then the assignment of line 10 is the updated. This is also the case of CSS. 

```
// This is the oldest StyleSheet
<link rel="stylesheet" href="styles.css">
<title>Document</title>

//This the semi modern stylesheet
<style>
  p {
    color: purple;
  }
</style>

<body>
 <h1 styel="color:gray;">I'am writing a blog post</h1>

```
Most Updated Style Rule will be applied.
Hạt dinh dưỡng – Ngũ cốc ăn kiêng – Hạt Điều Kaori
Published: 2023-04-09 09:29:39

https://hatdinhduongkaori.com/ Kaori chuyên phân phói hạt dinh dưỡng – ngũ cốc ăn kiêng – hạt Điều hạt Hạnh Nhân✔️ có giấy phép an toàn thực phẩm, giao hàng toàn quốc✔️✔️✔️
0933 675 393
fmosjc@gmail.com
52A TL44, Phường Thạnh Lộc, Quận 12, Thành Phố Hồ Chí Minh
https://app.bountysource.com/people/115641-h-t-dinh-d-ng-kaori
https://penzu.com/p/87d6d912
https://peatix.com/user/16784577
https://matters.news/@hatkaori
https://hatdinhduongkaori.amebaownd.com/
Social Media Network Analysis using Apache AGE Graph Database
Tags: apacheage
Published: 2023-04-09 09:15:23

### Introduction:

The popularity of social media has led to an enormous amount of data being generated daily. Social media platforms like Twitter, Facebook, and Instagram contain a wealth of information on people's interests, opinions, and behavior. Analyzing this data can provide valuable insights into customer preferences, market trends, and brand perception.

Apache AGE is a graph database that is designed to handle large amounts of complex data. It is based on Apache TinkerPop, a popular graph computing framework. In this project, we will use Apache AGE to perform social media network analysis.

### Project Overview:

The goal of this project is to analyze the social media interactions of a group of users and identify key influencers and trends. We will use Apache AGE to build a graph database that represents the social media network. The nodes in the graph will represent users, and the edges will represent social media interactions (such as likes, comments, and shares).

### Project Steps:

- `Data Collection` : The first step is to collect social media data from the chosen platform. We will need to extract data such as user profiles, posts, and interactions (likes, comments, shares, etc.). There are various tools available for extracting data from social media platforms such as Twitter API, Facebook Graph API, and Instagram API.

- `Data Preparation` : The data collected needs to be preprocessed and cleaned to remove any irrelevant information and format the data into a graph structure that can be loaded into the database. We will create a CSV file containing user profiles, post information, and interaction information.

- `Graph Database Creation` : We will create an Apache AGE graph database using the CSV file containing social media data. The database will contain nodes representing users and edges representing interactions between users.

- `Social Media Network Analysis` : Once the graph database is created, we can perform social media network analysis to identify key influencers and trends. We can use graph algorithms such as PageRank, Betweenness Centrality, and Community Detection to identify important nodes and clusters within the network.

- `Visualization` : We will use a visualization tool to display the social media network and the results of the analysis. We can use tools such as Gephi or D3.js to create interactive visualizations that allow us to explore the network and identify important nodes and clusters.

### Conclusion:

Social media network analysis using Apache AGE graph database can provide valuable insights into customer preferences, market trends, and brand perception. By analyzing the social media interactions of a group of users, we can identify key influencers and trends, which can be used to inform marketing and advertising strategies. Apache AGE provides a powerful and scalable platform for social media network analysis, allowing us to handle large amounts of complex data and perform sophisticated analysis.
Fraud Detection: How you can implement using Apache Age Graph Database
Tags: apacheage
Published: 2023-04-09 09:09:13

Fraud detection is a critical problem faced by many organizations across industries. Detecting fraudulent activities requires analyzing large amounts of data and identifying patterns and relationships that indicate fraudulent behavior. Graph databases are an ideal tool for fraud detection as they can efficiently store and query large amounts of interconnected data. In this project, we will use Apache Age, an open-source graph database, to develop a fraud detection system.

## Project Plan

### Data Collection and Preprocessing: 
Collect data from various sources such as transaction logs, user profiles, and device information. Preprocess the data to remove any inconsistencies and errors.

### Data Modeling: 
Use Apache Age to create a graph data model that captures the relationships between users, devices, and transactions. Define appropriate node and edge types to represent different entities and relationships in the data.

## Data Loading: 
Load the preprocessed data into Apache Age graph database using the Cypher query language. Create indexes and constraints to optimize query performance.

### Fraud Detection Algorithms
Develop fraud detection algorithms that use graph-based analysis techniques such as anomaly detection, link analysis, and clustering. Use Apache Age's built-in graph algorithms or develop custom algorithms using Cypher.

### Graph Visualization
Visualize the graph data using Apache Age's built-in graph visualization tools. Explore the graph data to identify patterns and relationships that indicate fraudulent behavior.

### Model Evaluation and Tuning
Evaluate the performance of the fraud detection system using metrics such as precision, recall, and F1-score. Tune the system parameters to optimize the performance.

### Deployment
Deploy the fraud detection system in a production environment. Integrate the system with other applications and tools to automate fraud detection and alerting.

## Expected Outcomes

A scalable and efficient fraud detection system that uses Apache Age graph database.
Improved accuracy in detecting fraudulent activities compared to traditional approaches.
A better understanding of the relationship between users, devices, and transactions, which can help organizations improve their security and risk management practices.
Most useful 10 shortcuts for Flutter in Visual Studio Code:
Tags: flutter, mobile, develope, flutterdevel
Published: 2023-04-09 08:56:02



1. stless- Create a new stateless widget
2. Ctrl + .- Quick Fix
3. Ctrl + /- Comment out code
4. Ctrl + Shift + /- Uncomment code
5. Ctrl + Shift + P- Show Command Palette
6. Ctrl + Shift + F- Search across files
7. Ctrl + Shift + O- Go to symbol
8. Ctrl + Shift + I- Format document
9. Alt + Up/Down Arrow- Move line up/down
10. Alt + Left/Right Arrow- Move cursor left/right
Python If Else shorthand with examples
Tags: python
Published: 2023-04-09 08:20:57

Have you ever wondered if you can write if else statements in the same line like a ternary operator: `x=a>10?"greater":"not greater"` in Python?

In this article, we will see how to write Shorthands for if else statements in Python.

## Simple if condition

We can write a simple if condition in Python as shown below:

```py
x = 10
if x > 5:
  print("greater than 5")
```

There are no shorthands for simple if statements.

## If else statements

Consider the following if else statement:

```py
x = 10
if x%2 == 0:
  print("Even")
else:
  print("Odd")
```

We can shorten it as shown below:

```py
x = 10
print("Even") if x%2 == 0 else print("Odd")
```

The syntax here is

`action_if_true if condition else action_if_false`

You can assign the result to a variable as well:

```py
age = 20
status = "adult" if age >= 18 else "minor"
print(status)
```

## Else if ladder

In Python you can write an else-if ladder as shown below:

```py
x = 10
if x > 5:
  print("greater than 5")
elif x==5:
  print("equal to 5")
else:
  print("less than 5")

```

The shorthand for the else-if ladder would be:

```py
x=4
print("greater than 5") if x > 5 else  print("equal to 5") if x==5 else print("less than 5")
```

## Using tuples as a ternary operator

Python has the following syntax to assign the boolean value of the result. However, this is a confusing syntax and is not used widely.

```py
x = 5
is_five = (False, True)[x == 5]
print(is_five)
```
How to render array of components in React
Tags: react
Published: 2023-04-09 08:19:52

You might often encounter scenarios to render a list of components. In this article, we will see how to do the same.

## Project setup

Create a react app using the following command:

```bash
npx create-react-app react-components-array
```

Now install the [react-icons](https://react-icons.github.io/react-icons/) package:

```bash
npm install react-icons
```

This is required since we will be displaying a list of icons.

## Creating an array of components

Consider the following component:

```jsx
const Item = ({ value }) => {
  return <li>{value}</li>
}
```

We can create a list of items as shown below:

```jsx
const items = [<Item key={1} value={1} />, <Item key={2} value={2} />]
```

## Rendering the component array

Rendering an array of components is as easy as rendering variables in React:

```jsx
import React from "react"

const Item = ({ value }) => {
  return <li>{value}</li>
}

const App = () => {
  const items = [<Item key={1} value={1} />, <Item key={2} value={2} />]

  return <ul>{items}</ul>
}

export default App
```

All you need to do is add the array within the flower brackets `{items}`.

You can [dynamically create the array](https://www.codingdeft.com/posts/javascript-array-fill/) of components as shown below:

```jsx
import React from "react"

const Item = ({ value }) => {
  return <li>{value}</li>
}

const App = () => {
  const items = Array.from({ length: 10 }).map((_, index) => (
    <Item key={index} value={index + 1} />
  ))

  return <ul>{items}</ul>
}

export default App
```

## Storing components in an Array of objects and rendering them

Consider the following array:

```jsx
import {
  MdOutlinePhone,
  MdOutlineFavorite,
  MdOutlineContactPhone,
} from "react-icons/md"

const menu = [
  {
    name: "Recents",
    icon: MdOutlinePhone,
  },
  {
    name: "Favorites",
    icon: MdOutlineFavorite,
  },
  {
    name: "Contacts",
    icon: MdOutlineContactPhone,
  },
]
```

If you want to render the icons stored inside the array, you can do so by using the following code:

```jsx
return menu.map(item => {
  return (
    <li key={item.name}>
      <item.icon /> {item.name}
    </li>
  )
})
```

The complete code would be:

```jsx
import React from "react"
import {
  MdOutlinePhone,
  MdOutlineFavorite,
  MdOutlineContactPhone,
} from "react-icons/md"

const menu = [
  {
    name: "Recents",
    icon: MdOutlinePhone,
  },
  {
    name: "Favorites",
    icon: MdOutlineFavorite,
  },
  {
    name: "Contacts",
    icon: MdOutlineContactPhone,
  },
]

const App = () => {
  return menu.map(item => {
    return (
      <li key={item.name}>
        <item.icon /> {item.name}
      </li>
    )
  })
}

export default App
```

If you run the app now, you will see the following output:

![list of icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3obl3k4bkxsrvxumdix.png)
How to earn money as fresher Frontend Developer
Tags: webdev, frontend, money, beginners
Published: 2023-04-09 08:18:49

As a fresher in frontend development, it can be challenging to find ways to make money while building up your experience and portfolio. However, there are several opportunities available for frontend developers to earn money and gain valuable experience. In this blog post, we will discuss some ways in which you can make money as a fresher in frontend development.

Freelancing: Freelancing is a great way for a frontend developer to earn money and build their portfolio. Many businesses and organizations require frontend developers to work on their websites, web applications, and other online platforms. As a freelancer, you can work on various projects for clients across different industries and gain experience in different domains. Freelancing platforms like Upwork, Fiverr, and Freelancer are excellent places to start looking for freelance frontend development projects.

Building websites for small businesses: Many small businesses require a website to establish an online presence and reach potential customers. As a frontend developer, you can help small businesses build and design their websites. You can advertise your services on social media or local business listings, and network with small business owners in your community.

Creating website templates: If you have a good grasp of web design and user experience principles, you can create website templates and sell them online. Many website builders like Wix, WordPress, and Squarespace allow users to purchase templates to customize their websites. You can sell your templates on marketplaces like ThemeForest, Creative Market, or Etsy.

Creating mobile apps: With the increasing usage of mobile devices, mobile app development is in high demand. If you have experience in developing mobile apps using frameworks like React Native, Ionic, or Xamarin, you can create mobile apps for businesses and individuals. You can advertise your services on social media and freelancer platforms.

Teaching frontend development: As a frontend developer, you can also share your knowledge and skills by teaching others. You can create online courses, tutorials, or YouTube videos on frontend development, design principles, or specific frontend frameworks. You can monetize your content through ad revenue, affiliate marketing, or selling courses or ebooks.

In conclusion, there are various opportunities available for frontend developers to make money as a fresher. With the right skills, attitude, and marketing, you can build a successful career in frontend development and achieve financial stability.
How to use media queries in styled components
Tags: react, css
Published: 2023-04-09 08:18:34


In this article, we will see how to use media queries in styled components.

## Project setup

Create a react application using the following command:

```bash
npx create-react-app styled-components-media-queries
```

Install the [styled-components](https://www.npmjs.com/package/styled-components) package:

```bash
npm i styled-components
```

Add the following code in `App.js`

```jsx
import React from "react"
import styled from "styled-components"
import { devices } from "./constants"

const Items = styled.p`
  margin: 10px;
  display: flex;
  gap: 10px;
  flex-direction: column;
`
const Item = styled.p`
  padding: 10px;
  flex: 1;
  border: 1px solid;
`
const App = () => {
  return (
    <div>
      <Items>
        <Item>1</Item>
        <Item>2</Item>
      </Items>
    </div>
  )
}

export default App
```

Here we have 2 blocks of items that are aligned vertically. If we need to align them horizontally next to each other on large screens, then we need to apply [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).

## Creating breakpoints

Before applying media queries, let's create breakpoints that can be reused.

```js
const breakpoints = {
  xs: "320px",
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
}

export const devices = {
  xs: `(min-width: ${breakpoints.xs})`,
  sm: `(min-width: ${breakpoints.sm})`,
  md: `(min-width: ${breakpoints.md})`,
  lg: `(min-width: ${breakpoints.lg})`,
  xl: `(min-width: ${breakpoints.xl})`,
  "2xl": `(min-width: ${breakpoints["2xl"]})`,
}
```

## Applying media query

We can apply media query in styled components in the same way we apply media queries in CSS:

```jsx
import React from "react"
import styled from "styled-components"
import { devices } from "./constants"

const Items = styled.p`
  margin: 10px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  @media only screen and ${devices.md} {
    flex-direction: row;
  }
`
const Item = styled.p`
  padding: 10px;
  flex: 1;
  border: 1px solid;
`
const App = () => {
  return (
    <div>
      <Items>
        <Item>1</Item>
        <Item>2</Item>
      </Items>
    </div>
  )
}

export default App
```

Now i=on larger screens, the items will be aligned next to each other.
Achieve streaming output like the ChatGPT mainframe
Tags: webdev, chatgpt, javascript
Published: 2023-04-09 08:15:05

In this example, we use Langchain, but perhaps the original API alone can be used.

[Welcome to LangChain | 🦜️🔗 Langchain](https://js.langchain.com/docs/)


First, the server side.

```typescript
import { ChatOpenAI } from "langchain/chat_models"
import { HumanChatMessage } from "langchain/schema"
import { CallbackManager } from "langchain/callbacks"

const api = (req, res, ctx) => {
  if (req.method !== "POST") return
  const input = req.body.input

  const chat = new ChatOpenAI({
    openAIApiKey: OPENAI_API_KEY,
    streaming: true
    callbackManager: CallbackManager.fromHandlers({
      async handleLLMNewToken(token: string) {
        res.write(token)
      },
    }),
  })

  await chat.call([new HumanChatMessage(input)])

  res.end()
})
```

The point is to enable streaming with `streaming: true` and [`write()`](https://nodejs.org/api/stream.html#writable-streams). This is called Writable streams in Node.js and is enabled for files and responses.

When all the Langchain processing is done, we terminate it with `end()`.

Next is the client side.

```typescript
const reply = async (input) => {
  const decoder = new TextDecoder()

  const res = await fetch(ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      input,
    }),
  })
  const reader = res?.body?.getReader()

  let output = ""

  while (true) {
    if (reader) {
      const { value, done } = await reader.read()
      if (done) break
      output += decoder.decode(value)
    }
  }
}
```

The point is [`getReader()`](https://developer.mozilla.org/ja/docs/Web/API/ReadableStream/getReader). Also, we need to decode it, so we put that process in.