teleren/devto huggingface dataset:
Rails helpers tips for writing better view
Tags: ruby, rails
Published: 2023-05-15 15:19:06

---
title: Rails helpers tips for writing better view
published: true
description: 
tags: ruby, rails
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-15 15:13 +0000
---

## 1. DOM id convention with `dom_id`
The `dom_id` helper takes a string or any object as an argument that can be converted to a dom_id. And it helps us convert an object into a unique id like this:

``` ruby
post = Post.find(10)
dom_id(post)               # => "post_10"
dom_id(post, new_comment)  # => "new_comment_post_10"
```
`dom_id` helper is introduced a long time and is become more valuable when working with Hotwire concept like Turbo Frame or Turbo Stream.  

**Turbo Frames and the dom_id helper**

Because `turbo_frame_tag` uses the `dom_id` helper [under the hood](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb#L27), so when we write
``` ruby
post = Post.find(1)
turbo_frame_tag(post)
```
It will return
``` erb
<turbo-frame id="post_1"></turbo_frame>
```
One of the most common use cases of Turbo Frame is in-line editing.
For example, inline editing comment
- Render comment with edit comment link:
``` erb
<%= turbo_frame_tag comment do %>
  <div>
    <%= comment.body %>
    <%= link_to "Edit", edit_comment_path(comment) %>
  </div>
<% end %>
```
- When the user clicks on the edit comment link, the frame will replace by: 
``` erb
<%= turbo_frame_tag @comment do %>
  <%= form_with(model: @comment) do |form| %>
  <% end %>
<% end %>
```

## 2. Conditionally class name with `class_names`
`class_names` helper is supported from Rails 6.1, make easier to conditionally apply class names in views.
- Tag builder with `class_names` helper method
``` erb
<%= tag.div class: class_names("hidden my-2", "flex": current_user == @post.author) do %>
  <%= link_to "Edit", edit_post_path(@post), class: "btn btn-primary" %>
<% end %>
```
- The tag helper method automatically uses `class_names` , so we can write like this:
``` erb
<%= tag.div class: ["hidden my-2", "flex": current_user == @post.author ] do %>
   <%= link_to "Edit", edit_post_path(@post), class: "btn btn-primary" %>
<% end %>
```
- In case we need different styles for different user roles:
``` erb
<%= tag.span class: ["p-2 radius-2", "bg-indigo-2": current_user.admin?, "bg-indigo-4": @post.author?] do %>
  <%= @post.category %>
<% end %>
```
Step by step tutorial to add Interactive map and visualize geographic data to web application
Tags: csp, python, javascript, tutorial
Published: 2023-05-15 15:12:30

Hi Community,  
  
In this article I will demonstrate below steps to add Interactive map and visualize geographic data to web application:

  * Step1 : Install Application
  * Step2 : Create CSP Page
  * Step3 : Extend dc.IrisGeoMap.Folium class
  * Step4 : Invoke DrawGeoDetails() Method

So Let us start.  
 

## Step1 : Install Application

First of all we need to install <a href="https://openexchange.intersystems.com/package/iris-geo-map" rel="nofollow"><strong>iris-geo-map</strong></a><span> application by using <a href="https://openexchange.intersystems.com/package/InterSystems-Package-Manager-1" rel="nofollow"> <strong>ZPM</strong></a></span>

```
zpm "install iris-geo-map"
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9w76gi7ryuag6gjo0ys.png)
 
Step2 : Create CSP Page

```
<html>
<head>
<!-- Put your page Title here -->
<title>	Iris-Geo_Map app </title>
</head>
<body>
        <!-- Put your page code here -->
        My page body
</body>
</html>
```

  
Step3 : Extend dc.IrisGeoMap.Folium class

```
<html>
<head>
<title> Iris-Geo_Map app </title>
</head>
<body >
<csp:class encoded=1 super="%CSP.Page,dc.IrisGeoMap.Folium">
   <!-- Put your page code here -->
        My page body
</body>
</html>
```

##  
Step4 : Invoke DrawGeoDetails() Method  
 

in the final step we have to invoke DrawGeoDetails() method of dc.IrisGeoMapc.Foium class  
In the below example we are passing the locations as a string seperated by ","

```
<html>
<head>
<title> Iris-Geo_Map app </title>
</head>
<body >
<csp:class encoded=1 super="%CSP.Page,dc.IrisGeoMap.Folium">
<h1>How to add Interactive Maps to CSP application by using Iris-Geo_Map app </h1>
<!--  Invoke DrawGeoDetails function and Pass location string seperated by "," -->
<div>
#(..DrawGeoDetails("3555 S Ocean Dr Hollywood FL 33019,Boston,NY,Las Vegas,University park Dallas,Denver,Chicago"))#
</div>
</body>
</html>
```

### **We can pass address by :**

  * ### Proper address like "3555 S Ocean Dr Hollywood FL 33019"

  * ### **Part of the address**

  * ### Place Name

  * ### City Name

**NOTE : <span style="color:#c0392b;">System will get latitude and longitude values and mark the location on the map</span>**  
  
Below is the final output

  *
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x01c87i9thns00cnxwf.png) 
  *  
  * Thanks
Unlocking the Power of Listening: Navigating the Three Levels of Active Listening
Tags: meetings, leadership, coaching, mentorship
Published: 2023-05-27 10:49:07

---
title: Unlocking the Power of Listening: Navigating the Three Levels of Active Listening
published: true
date: 2023-05-15 14:54:36 UTC
tags: meetings,leadership,coaching,mentorship
canonical_url: https://fvst.dev/blog/power-of-listening
---

![](https://cdn-images-1.medium.com/max/1024/1*LREW_BpU6tWS87M2yKmhZg.png)

Listening is one of the most complex skills for a leader, as we are intrinsically trained to be solution providers. We like to look after people and often take ownership of issues. Sometimes we must sit quietly and ensure the other person is heard.

It is one thing to listen to a person attentively. However, the art of hearing someone, understanding what they are saying, what they mean, and responding to that is an advanced art form.

There are three levels of listening. When used at the correct time and in the right way, each level allows us to get the most out of our conversations.

### **Level 1: Internal Listening (Focused on Self)**

At this level, you focus on yourself and your reactions to the other person's words.

You could be thinking about how you've had a similar experience to what this person is talking about or that you disagree with what they are saying.

You are reacting to what they say, which is excellent in a mentorship situation but not helpful in a coaching environment.

You might miss crucial information and rush into sharing your thoughts, leaving the person unheard.

### Level 2: Focused Listening (Focused on Other)

You are unattached from yourself, your thoughts, agenda, and opinions at this level. You are instead focused on the person, what they are saying, and taking all of that in.

This might seem natural in certain situations, e.g., listening to someone significant to us, but in other scenarios, it may be something we need to make a conscious effort to do. To practice level 2 listening, take a few deep breaths before conversing. Let go of anything that happened prior, or that will happen after.

At this level, it's normal to fall back to level one — e.g., you might start thinking about what is an excellent question to ask next. When you catch yourself in this situation, take a breath and refocus on the conversation.

### Level 3: Global Listening (Focused on context and what isn't being said)

At this level, you are tuned to the person. You not only listen to the words but the tone, the pauses in conversation, and their body language.

To reach this level, you must learn to pick up on the non-verbal parts of communication. Things like

1. Facial expressions
2. Gestures
3. Paralinguistics (such as loudness or tone of voice)
4. Body language
5. Proxemics or personal space
6. Eye gaze, haptics (touch)
7. Appearance

Once you master this level, you can go to any conversation; the other part will feel like you are truly listening to them!

* * *
Introduction to Flex and Bison in PostgreSQL
Published: 2023-05-15 14:50:58

##Introduction:
Flex and Bison are powerful tools used for creating lexical analyzers (scanners) and parsers, respectively. These tools provide developers with the ability to implement custom languages, query languages, and data manipulation languages. In the context of PostgreSQL, Flex and Bison can be utilized to extend the functionality of the database system by defining new features and syntax. In this article, we will explore the basics of Flex and Bison and their application in PostgreSQL.

##Flex - The Fast Lexical Analyzer Generator:
Flex (Fast Lexical Analyzer) is a tool for generating scanners based on regular expressions. It is commonly used to scan and tokenize input text, breaking it into meaningful units called tokens. Flex provides a flexible and efficient way to define the lexical structure of a language or a specific syntax within PostgreSQL.

##Bison - The General-Purpose Parser Generator:
Bison is a general-purpose parser generator that complements Flex. It takes the tokenized input from Flex and constructs a parser, which performs a syntactic analysis of the input based on a specified grammar. Bison-generated parsers can handle complex grammars and produce parse trees that represent the structure of the input.

##Integration with PostgreSQL:
Flex and Bison can be integrated with PostgreSQL to extend its capabilities by defining new SQL commands, data types, or even complete languages. By leveraging Flex and Bison, developers can create custom syntax and logic that seamlessly integrates with PostgreSQL's query processing and execution.

##Creating a New Feature with Flex and Bison:
To illustrate the usage of Flex and Bison in PostgreSQL, let's consider an example of adding a new feature called "FULLTEXTSEARCH" to enhance text searching capabilities. We'll define a new SQL command, syntax, and associated logic using Flex and Bison.

- Defining the Syntax:
- Using Flex, we define the lexical structure of the new feature, specifying keywords, operators, and identifiers relevant to "FULLTEXTSEARCH."
- Parsing the Syntax:
- Bison takes the tokenized input from Flex and constructs a parser using a specified grammar. We define the grammar rules for the "FULLTEXTSEARCH" feature, allowing PostgreSQL to understand and interpret the new command.
- Implementing the Feature:
- Once the parser is generated, we implement the logic associated with the "FULLTEXTSEARCH" feature. This may involve indexing techniques, search algorithms, or any other functionality required for the feature to work correctly.
-  Building and Testing:
- After implementing the feature, we build and test the modified PostgreSQL server to ensure that the new functionality works as expected. We can create test cases to validate the behavior of the "FULLTEXTSEARCH" feature and ensure it integrates seamlessly with existing PostgreSQL functionality.
Running Apache AGE Driver Tests: A Step-by-Step Guide
Published: 2023-05-15 14:44:27

Here are simplified steps to follow in order to test Apache AGE drivers using GitHub Workflows:

- Fork the Apache AGE repository to your GitHub account. This creates a copy of the repository under your account.
- Make any desired changes to the code and push them to a separate branch in your forked repository. This branch will contain the changes you want to test.
- Navigate to the .github/workflows folder in your forked repository. This folder contains YAML files that control the GitHub Workflows.

Edit the .yml files in the .github/workflows folder. Each file typically includes the following code snippet:



```
on:
 push:
 branches: ["master", "PG11"]
 pull_request:
 branches: ["master", "PG11"]
```


- Remove the line that mentions "PG11" from both the push and pull_request sections. This modification ensures that the workflows run for all branches, not just the "master" and "PG11" branches.
- Submit a pull request from your branch to the master branch of your forked repository. This allows the original Apache AGE repository to review and merge your changes.
- Once the pull request is created, you can run all the tests by visiting the "Checks" tab in your GitHub repository. The workflows will be triggered automatically, and you can monitor the progress and results of the tests from there.

By following these steps, you can streamline the testing process for Apache AGE drivers using GitHub Workflows, making it easier to ensure that your code changes do not introduce errors.
Les conflits et les développeurs, Une histoire d'amour ? 😥
Tags: programming, works, conflict, webdev
Published: 2023-05-15 14:39:47

Hello Devs !

Si vous êtes développeur, vous avez probablement déjà rencontré des conflits dans votre code. Que ce soit un conflit de fusion Git, un conflit de dépendances ou tout simplement un conflit dans votre architecture, les conflits peuvent être une source de stress et d'anxiété pour de nombreux développeurs 😪 .

Imaginez un développeur en train de travailler sur un projet complexe. Tout à coup, il rencontre un conflit dans son code et il commence à paniquer 😧 . Il se met à suer, à trembler et à chercher frénétiquement une solution. Il est tellement stressé qu'il se dit que ce conflit pourrait bien être la fin de sa carrière de développeur 😔 !

C'est alors que soudainement, une idée lui vient à l'esprit. Il se rappelle de son expérience précédente où il a réussi à résoudre un conflit similaire en utilisant une approche différente. Il respire un grand coup, se calme et commence à travailler sur une solution 🤒 .

Finalement, après quelques heures de travail acharné, il parvient à résoudre le conflit et son code est maintenant prêt à être déployé. Il se sent tellement soulagé que la peur des conflits s'évapore presque instantanément 😇 .

Même si les conflits peuvent être stressants, ils sont aussi une opportunité pour les développeurs de se surpasser, d'apprendre de nouvelles choses et de devenir des experts dans leur domaine. Alors, la prochaine fois que vous rencontrez un conflit, n'ayez pas peur, respirez un grand coup et trouvez la solution qui convient le mieux à votre situation 😊 .

Et qui sait, vous pourriez même finir par apprécier les conflits ! 😆

Donc dis moi, t'as une fois transpiré à cause d'un conflit 😀 ?
Triangle Judgement | LeetCode | MSSQL
Tags: leetcode, beginners, codenewbie, mssql
Published: 2023-05-15 14:31:50

## The Problem

Consider a table named `Triangle` with the following structure:

| Column Name | Type |
|-------------|------|
| x           | int  |
| y           | int  |
| z           | int  |

The primary key for this table is `(x, y, z)`, each row of which represents the lengths of three line segments. Your task is to create an SQL query that can determine for each row if the three line segments can form a triangle.

Here's an example for better understanding:

### Example

#### Input

Triangle table:

| x  | y  | z  |
|----|----|----|
| 13 | 15 | 30 |
| 10 | 20 | 15 |

#### Output

Result table:

| x  | y  | z  | triangle |
|----|----|----|----------|
| 13 | 15 | 30 | No       |
| 10 | 20 | 15 | Yes      |

In the example above, the first row cannot form a triangle because the sum of any two sides of a triangle should be greater than the third side, i.e., `x + y > z`, `x + z > y`, and `y + z > x`. However, `13 + 15` is not greater than `30`, hence the 'No' in the 'triangle' column. In contrast, the lengths in the second row can form a triangle since `10 + 20 > 15`, `10 + 15 > 20`, and `20 + 15 > 10`.

## The Solution

Here's a simple yet effective SQL query that leverages the concept of conditional logic (`CASE...WHEN...THEN...ELSE`) to determine if three lengths can form a triangle:

```sql
SELECT 
    x,
    y,
    z,
    CASE
        WHEN x + y > z AND x + z > y AND y + z > x THEN 'Yes'
        ELSE 'No'
    END AS 'triangle'
FROM
    Triangle
```

This query will output 'Yes' if the lengths can form a triangle, and 'No' otherwise. The beauty of this query lies in its simplicity and directness. It directly applies the triangle inequality theorem, which states that the sum of the lengths of any two sides of a triangle is greater than the length of the remaining side.

Interestingly, the same query had different execution times on two different submissions:

- First submission: runtime 624ms, beating 18.82% of other SQL submissions. ![first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay3hrw7po2f1wak2y1l3.png)
- Second submission: runtime 396ms, beating 83.20% of other SQL submissions. ![second](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvv0a0suyoaejfl5rvsa.png)

This difference can be attributed to several factors including server load and performance at the time of query execution.

You can find the original problem at [LeetCode](https://leetcode.com/problems/triangle-judgement/description/).

Want to see more insightful solutions and tech-related content? Feel free to connect with me on my [Beacons page](https://beacons.ai/ranggakd).

{% embed https://beacons.ai/ranggakd %}
End to end data engineering project with Spark, Mongodb, Minio, postgres and Metabase
Tags: spark, postgres, metabase, mongodb
Published: 2023-05-15 14:25:20

### Utilizing of open source technologies for the implementation of a data pipeline

## Architecture

![](https://cdn-images-1.medium.com/max/2708/1*9e6xb4j1RO9SPpPKdPea4w.png)

## Source Code

All the source code demonstrated in this post is open-source and available on [GitHub]([https://github.com/Stefen-Taime/projet_data](https://github.com/Stefen-Taime/projet_data)).

git clone [https://github.com/Stefen-Taime/projet_data.git](https://github.com/Stefen-Taime/projet_data.git)

## Prerequisites

As a prerequisite for this post, you will need to create the following resources:

1. (1) Linux Machine;

2. (1) Docker ;

3. (1) Docker Compose;

4. (1) Virtualenv;

### Setup

    git clone https://github.com/Stefen-Taime/projet_data.git
    cd projet_data/extractor
    
    pip install -r requirements.txt
    python main.py
    
    or
    
    docker build --tag=extractor .
    docker-compose up run
    
    #This folder contains code used to create a downlaods folder, iteratively download files from a list of uris, unzip them and delete zip files.

At this point you should have in the extractor directory with a new folder Dowloads with 2 csv files

### then

    cd ..
    cd docker
    
    docker-compose -f docker-compose-nosql.yml up -d  #for mongodb
    docker-compose -f docker-compose-sql.yml up -d    #for postgres and adminer port 8085, metabase port 3000
    docker-compose -f docker-compose-s3.yml up -d     #for minio port 9000
    docker-compose -f docker-compose-spark.yml up -d  #for spark master and jupyter notebook port 8888
    
    
    cd ..
    cd loader
    pip install -r requirements.txt
    
    # ! modify the path DATA and DATA_FOR_MONGODB variables in .env
    
    python loader.py mongodb  #upload data in mongodb database (if you have an error, manually create an auto-mpg database and enter an auto collection and try again)
    python loader.py minio    #upload data in minio(if you have an error, manually create a landing compartment and try again)

He must have now an auto-mpg database and inside an auto collection with data in it for mongodb and also data in minio

![](https://cdn-images-1.medium.com/max/3520/1*j00Z9SvxjH62D21N2KLF7w.png)

![](https://cdn-images-1.medium.com/max/3784/1*MgnNor5dNPvEibVgEP77XQ.png)

### then

go to localhost 8888 and the password is “stefen”.once in jupyter notebook run all cells

go to localhost 8085

![](https://cdn-images-1.medium.com/max/3784/1*JoNepCQpLl6nS2MYoBsDWQ.png)

go to localhost 3000

![](https://cdn-images-1.medium.com/max/3754/1*pJ3ARMpJJ68j8hdpPK49IQ.png)

## Cleaning Up

https://medium.com/@stefentaime_10958/end-to-end-data-engineering-project-with-spark-mongodb-minio-postgres-and-metabase-2c400672b50d
Few tricky Linq Interview Questions & Answers
Published: 2023-05-15 14:19:32

## What is deferred execution in LINQ?
Deferred execution is a key feature of [LINQ](https://beetechnical.com/interview-questions/linq-interview-questions/)that allows queries to be evaluated lazily, or only when their results are actually needed. Instead of executing the query immediately when it is defined, a LINQ query is only executed when it is enumerated, usually by calling a method such as ToList(), ToArray(), or FirstOrDefault().


![Example of deferred execution ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30cl5nzmws9hjpp486pk.png)

## What is the difference between IQueryable and IEnumerable?
IQueryable and IEnumerable are two interfaces in LINQ that represent collections of data. The main difference between them is that IQueryable is designed for querying remote data sources (such as databases), while IEnumerable is designed for querying local in-memory data (such as collections).
**IEnumerable **
IEnumerable is the simpler of the two interfaces, and provides a basic set of methods for iterating over a collection of objects. It is used for in-memory collections such as arrays, lists, and dictionaries.

![Example of IEnumerable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsh1pm2k8swr4rq8e3tf.png)
**IQueryable**
IQueryable, on the other hand, is used for querying remote data sources such as databases or web services. It extends IEnumerable and adds additional functionality for querying data in a way that is optimized for the specific data source.

![Example Of IQueryable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lol3tbw1jrvp72q8nvk0.png)

## What is the difference between Single() and First() in LINQ?

Both Single() and First() are LINQ extension methods used to retrieve a single element from a sequence. However, there are some key differences between them.

First() returns the first element in a sequence that satisfies a specified condition, or the first element in the sequence if no condition is specified. If the sequence is empty, First() throws an exception.
Single(), on the other hand, returns the only element in a sequence that satisfies a specified condition, or throws an exception if there is more than one element in the sequence that satisfies the condition. If no element satisfies the condition or the sequence is empty, Single() also throws an exception.


Read Complete Article
[Crack Interview With 30 C# Linq Interview Questions & Answers](https://beetechnical.com/interview-questions/linq-interview-questions/)
React 基礎 Part 00 -- 環境構築
Tags: react
Published: 2023-05-15 14:01:34


## プロジェクト作成

```
npx create-react-app toast --template typescript
```

CRA で作成する。
Create Next App にしなかった理由は、Router 周りの変化が激しかったから。

自動的に create-react-app のライブラリもインストールされて起動する。
やはりシンプルな React が一番楽。Next より。

コードと動作画面は以下。

---

### index.tsx

```ts
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

---

### App.tsx

```ts
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

---

### 画面


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