teleren/devto huggingface dataset:
Converting .shp files to CSV with GeoPandas
Tags: datascience, python, tutorial, dataengineering
Published: 2024-05-31 17:31:56

Working with geospatial data is really fun! We use this type of data all over the place in data science, and data warehouses have gotten really good at working with it (I'm looking at you, Snowflake!).

However, as you get started down the path of using geospatial data, you will likely run into a speed bump: `.shp` files 

## What is a `.shp` file?
A `.shp` file is a common way of encoding geospatial data in a binary format. This geospatial data will contain geospatial points, polygons (a collection of geospatial points that form an area), and multipolygons (more exotic polygons). 


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


A `.shp` file will be bundled with other files with the same name but different file extensions (e.g., .shx, .dbf, .prj, etc.). In short, you will need all of them.


## What is the problem with `.shp` files?
Unfortunately, most data warehouses don't read `.shp` files natively. If you are looking to load this dataset into your data warehouse, you are going to need to convert it to a compatible format like CSV.

Additionally, a `.shp` file might use a different coordinate system than the latitude / longitude system you are familiar with ([WGS 84](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS_84)).

In this tutorial, we will convert a `.shp` file to CSV and transform a geospatial data to the latitude / longitude coordinate system.
> The latitude / longitude coordinate system we are familiar with is called WGS 84 EPSG:4326.

## Convert a `.shp` file to CSV
In this example, we'll use [GeoPandas](https://geopandas.org/en/stable/) for the conversion.

```python3
import geopandas as gpd

# Import .shp file into a GeoPandas DataFrame
geopandas_df = gpd.read_file('Grid_100m.shp')

# Convert geospatial data to latitude/longitude coordinate system
converted_df = geopandas_df.to_crs('EPSG:4326')

# Write data to CSV
converted_df.to_csv('Grid_100m.csv', index=False)
```

If all goes well, you should now have a well-formatted CSV file that you can inspect with Excel (and load to your data warehouse).

Cheers! 🚀
The Power of Data Science: Revolutionizing Industries.
Tags: datascience
Published: 2024-05-31 17:24:01


Data science is transforming industries by enabling better decision-making through data analysis. It harnesses the power of algorithms, machine learning, and statistical models to uncover insights from large datasets. This leads to more informed business strategies, optimized operations, and innovative solutions. From healthcare to finance, data science drives efficiency, predicts trends, and enhances customer experiences. As data continues to grow exponentially, mastering data science skills is crucial for staying competitive and unlocking new opportunities.

_Embrace the future with data science, and explore its potential to revolutionize your field._
Twilio + webSockets - can't send parameters to webSocket
Tags: twilio, websocket, ws
Published: 2024-05-31 17:13:49

Hello, guys!

I did put a question on Stack Overflow, and i don't know if it's best to only add the link to it here or to add the whole description.

I will put for the moment the link, and some of the description. If anyone has a solution, I would be forever grateful!

https://stackoverflow.com/questions/78560657/twilio-websockets-cant-send-parameters-to-websocket

______________________________________

I am having problems with **Twilio**, while trying to send parameters to a **webSocket** that is being called from a **webhook**. I am using: **node.js, express, ws (JS websocket library)**.

The webhook is not the actual problem, since it only calls an endpoint from my end.

But in that endpoint, I am creating a `VoiceResponse` instance of Twilio, and using it to connect to a webSocket. In the process, I am trying to send it some parameters, because I want to access the user data (or whatever data) in the webSocket. Only that, this is not happening :))
Effective Learning and Record Keeping
Published: 2024-05-31 17:05:27

_Effective Learning:_ Yesterday and today, I tried implementing the 15-minute rule, seeking help if I got stuck for more than 15 minutes. Anyone can be a source of help, including my peers. It's important to be open to communication.

_Record Keeping:_ Yesterday, I was introduced to record keeping using tables. We can separate unique sets of information into separate tables and join the different sets of information using other tables. Storing a large amount of information in tabular format makes it organized, easy to understand, and easy to access.
Balancing Form and Function: What Tiny Glade Teaches Us
Tags: design, uiux
Published: 2024-06-01 14:27:54

---
title: Balancing Form and Function: What Tiny Glade Teaches Us
published: true
date: 2024-05-31 17:02:15 UTC
tags: Design,UIUX
canonical_url: https://blog.snowfrog.dev/form-vs-function/
---

 ![Balancing Form and Function: What Tiny Glade Teaches Us](https://blog.snowfrog.dev/content/images/2024/05/pablo--11-.png)

I just downloaded the demo for a wonderful little game called Tiny Glade. "Game" might not even be the right term to describe this interesting piece of software. Here’s how it introduces itself:

> Tiny Glade is a relaxing game where you doodle whimsical castles, cozy cottages and romantic ruins. There's no management, combat or goals. Just kick back and turn forgotten meadows into lovable dioramas.

![Tiny Glade's welcome screen](https://blog.snowfrog.dev/content/images/2024/05/image.png)

After spending some time with Tiny Glade, I am impressed by the level of care the developers have put into it. The attention to detail is remarkable. Every interaction feels organic and fluid, thanks to numerous subtle features.

At its core, Tiny Glade is a castle-builder sandbox. You construct castles by laying down building blocks that can be translated, rotated, scaled, and joined. Essentially, it's a graphics editor like Blender or Illustrator, but much more enjoyable, especially for first-time users. Why? Because Tiny Glade focuses on form as much as function.

The game’s emphasis on form does not come at the expense of function. It offers great flexibility while maintaining a natural and intuitive feel. Every action has a corresponding visual or sound effect, enhancing the experience without being overwhelming. This level of craftsmanship makes interactions pleasing.

Words can't really do it justice, so here's a gameplay trailer video.

<iframe width="356" height="200" src="https://www.youtube.com/embed/E0pNz9H6aRo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="Tiny Glade - Gameplay Trailer | Wholesome Snack: The Game Awards Edition"></iframe>

This experience made me question why the applications we use daily don’t offer the same level of enjoyment. Many business applications prioritize function over form, resulting in user frustration. Product owners often justify this by citing monetary reasons, implying that investing in form is a waste. But Tiny Glade proves otherwise.

As software developers, we should recognize the intrinsic value in form. People are willing to pay for pleasant interactions with software. While the balance between form and function varies by application, it is clear that focusing solely on function might be costing us more than we realize. I'm confident that [Tiny Glade](https://pouncelight.games/tiny-glade/) will show that enhancing user experience can lead to commercial success.
Database design
Tags: beginners, datastructures, data, database
Published: 2024-05-31 17:02:01

In database design, handling **many-to-many relationships** typically requires **a third table**, often called a **_join table_** or a **_junction table_**. This table records the associations between the two other tables. In contrast, for **one-to-many relationships**, you do not need a third table. Instead, you usually **_add a foreign key column in the table that represents the “many” side_** of the relationship.

## Many-to-Many Relationship Example
Suppose you have `students` and `courses` tables, where each student can enroll in many courses, and each course can have many students. To model this relationship, you would create a third table, often named `enrollments`. This join table would include foreign keys referencing the primary keys of the `students` and `courses` tables.

```ruby
class Student < ActiveRecord::Base
  has_many :enrollments
  has_many :courses, through: :enrollments
end

class Course < ActiveRecord::Base
  has_many :enrollments
  has_many :students, through: :enrollments
end

class Enrollment < ActiveRecord::Base
  belongs_to :student
  belongs_to :course
end
```

## One-to-Many Relationship Example
Suppose you have `authors` and `books` tables, where each author can write many books, but each book is written by only one author. In this case, you would add a foreign key column to the `books` table to reference the `authors` table.

```ruby
class Author < ActiveRecord::Base
  has_many :books
end

class Book < ActiveRecord::Base
  belongs_to :author
end
```

In summary, a third table is necessary for many-to-many relationships but not for one-to-many relationships.
What are some of the latest educational games for kids available ?
Tags: games, gaming, mobilegames, gamedev
Published: 2024-05-31 16:56:36

The[ best game platform,](https://medium.com/@adreeshelk/publishing-on-a-robust-gaming-platform-key-considerations-for-developers-1c8888f80d91?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra) offers a wide variety of educational games for kids that make learning an enjoyable and engaging experience. From classic games like sudoku and chess to exciting titles like Fruit Katana and Wothan the Barbarian, Latest educational games cater to different age groups and interests.
One of the most popular [educational games](https://nostra.gg/articles/how-to-publish-games.html?utm_source=referral&utm_medium=article&utm_campaign=Nostra) is chess, which helps children develop critical thinking, problem-solving, and strategic planning skills. The platform's ""Chess Takes Queen"" game offers a fun and interactive way for kids to learn and practice chess moves, opening strategies, and endgame techniques. With its intuitive interface and adaptive difficulty levels, this game is suitable for both beginners and advanced players.
Another engaging educational game is Fruit Katana, which combines hand-eye coordination training with quick decision-making skills. In this game, players must slice various fruits while avoiding bombs, challenging their reflexes and concentration. As they progress through the levels, kids develop better focus, attention to detail, and spatial awareness.
For children who enjoy word games, Nostra offers a range of exciting titles that help expand vocabulary, improve spelling, and enhance language skills. These word games feature colorful graphics, animated characters, and rewarding gameplay that keep kids engaged and motivated to learn.
In addition to these [educational games,](https://medium.com/@adreeshelk/creating-vivid-ongoing-interaction-encounters-with-nostra-games-d12e7e8593ba?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra) Also provides a platform for users to watch and learn from professional gamers and streamers. Children can observe and comment on the newest games played by their favorite players, such as Bindaas Laila and Snipuu, gaining valuable insights and tips to improve their own gaming skills.
Tables can hold more than dinner.
Published: 2024-05-31 16:48:58

I recently learned about record keeping and databases.

Turns out people have been keeping records of things for a long, long time. Some of the first records kept were by farmers counting up their harvest and tracking the weather. 

We've come a long way since then, 
but the methods have remained the same,
relatively speaking. 

The tools are different now though,
and nearly everything it seems is being kept record of by someone. 
It's all stored in databases.
and those databases need systems to organize them.

But how do we sort out all this data,
it seems nearly endless?

Tables.

Within them,
you can store an almost infinite amount of stuff.
but these tables have rules,
you can't just plug away willy-nilly.

Tables are usually seen on spreadsheets,
and the spreadsheet will have rows and columns that help designate what goes where.

At any point where a row and column meet you'll find a cell. 
Cells have a fundamental law:

ONE VALUE PER CELL!

Should someone stray from this law,
this will get messy real quick.

Another neat thing I learned is that not all tables need to be visible to users. 
Some simply provide support to other tables,
through what is known as One-to-Many and Many-to-Many.
These types of tables will draw info from one table and potential send it to another. 

This is possible with the use of id numbers. 

I'm excited to see how many ways databases are utilized down the line.
Day 1 of 30
Tags: challenge, react, beginners
Published: 2024-05-31 16:17:44

So for today I covered only React and got tired and I am starting to overcome slowly the fear of using React since I have never been a fun of React(frontend dev).

Learnt information with their github links:
>Writing JSX: https://github.com/FrancisNgigi05/react-hooks-jsx-lab

>Props Basics:https://github.com/FrancisNgigi05/react-hooks-props-basics-lab

>Props Destructuring and Default Values: https://github.com/FrancisNgigi05/react-hooks-props-destructuring

>React Components: https://github.com/FrancisNgigi05/react-hooks-components-basics-lab

>Organizing code with import/export: https://github.com/FrancisNgigi05/react-hooks-import-export-lab

Challenges faced today was learning: **Props Destructuring(Destructuring nested objects)**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d91h5w4gxyj0q3odcljp.png)
260. Single Number III
Tags: php, leetcode, algorithms, programming
Published: 2024-05-31 16:04:44

260\. Single Number III

Medium

Given an integer array **nums**, in which exactly two elements appear only once and all the other elements appear exactly twice. Find the two elements that appear only once. You can return the answer in **any order**.

You must write an algorithm that runs in linear runtime complexity and uses only constant extra space.

**Example 1:**

- **Input:** nums = [1,2,1,3,2,5]
- **Output:** [3,5]
- **Explanation:** [5, 3] is also a valid answer. 

**Example 2:**

- **Input:** nums = [-1,0]
- **Output:** [-1,0] 

**Example 3:**

- **Input:** nums = [0,1]
- **Output:** [1,0] 

**Constraints:**

- <code>2 <= nums.length <= 3 * 10<sup>4</sup></code>
- <code>-2<sup>31</sup> <= nums[i] <= 2<sup>31</sup> - 1</code>
- Each integer in **nums** will appear twice, only two integers will appear once.


**Solution:**

```
class Solution {

    /**
     * @param Integer[] $nums
     * @return Integer[]
     */
    function singleNumber($nums) {
        $xors = array_reduce($nums, function($carry, $item) { return $carry ^ $item; }, 0);
        $lowbit = $xors & -$xors;
        $ans = array_fill(0, 2, 0);
        
        foreach ($nums as $num) {
            if ($num & $lowbit) {
                $ans[0] ^= $num;
            } else {
                $ans[1] ^= $num;
            }
        }

        return $ans;

    }
}
```



**Contact Links**

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
Como projetar para várias telas? Aprenda os 4c's
Tags: design, webdev, programming, beginners
Published: 2024-05-31 15:54:45

  Ao projetar um novo produto ou recurso, é importante pensar sobre os diferentes tipos de plataforma em que o design será disponibilizado. Para lembrar, uma plataforma é o meio pelo qual os usuários utilizam seu produto. Algumas plataformas comuns são:

- Computadores desktop
- Laptops
- Celulares
- Tablets
- Portáteis, como relógios inteligentes
- TVs
- Telas inteligentes

  À medida que projeta para vários dispositivos, você precisa considerar o tamanho da tela do dispositivo, a interação entre o dispositivo e o usuário, a forma como o conteúdo será organizado em vários tamanhos de tela, a maneira como os usuários vão interagir com cada dispositivo e muito mais.

Para proporcionar uma ótima experiência de usuário em vários dispositivos, tenha em mente os 4Cs: 

- Consistência: ter um design uniforme para que os usuários sintam familiaridade com todos os dispositivos e produtos.

- Continuidade: proporcionar uma experiência tranquila e ininterrupta aos usuários enquanto eles navegam entre dispositivos.

- Contexto: projetar para as necessidades de um dispositivo específico e a forma como o usuário vai utilizar esse dispositivo em qualquer situação.

- Complementariedade: levar em consideração como o design do produto em cada dispositivo pode melhorar a experiência geral do usuário.

 A plataforma selecionada deve ser aquela que atende melhor às necessidades dos usuários finais. Mais tarde, você pode projetar para outras plataformas. Além de ter uma experiência do usuário consistente entre plataformas, também é importante ter uma identidade de marca consistente.

  Por exemplo, uma Empresa deve ter o mesmo visual e sensação no computador desktop e no celular. E é importante ter em mente que algumas funcionalidades existem apenas em certas plataformas. Pense em um assistente de voz que permite que você faça perguntas ou controle seu celular com a voz. Muito inteligente, não é? No início, apenas celulares tinham assistentes de voz. Se o produto que você projetasse exigisse o uso de um assistente de voz, a única plataforma em que ele funcionaria seria em um celular. Mas, atualmente, assistentes de voz são integrados a muitas outras plataformas, como computadores desktop, TVs e até geladeiras.

Esse foi um papo mais de ux mas que faz sentido para quem desenvolve front tanto web quanto para app. Espero que tenham gostado.

Obrigada 🫰💚
Hanging Man Game
Tags: react, vite, webdev, javascript
Published: 2024-05-31 15:29:28

## Inspiration

Inspired by a cool design I found on [Dribbble](https://dribbble.com/shots/23582257-The-game-Hangman), I decided to create a web version of the classic "Hanging Man" game. My goal was to not only practice my frontend development skills but also to bring a bit of fun and interactivity to my portfolio.

## Demo

![Hanging man game home screen sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ooguq41hcd7brqa6xjq.png)

You can try the live demo of the game here.
[Live Demo](https://hanging-man-sarmittal.netlify.app/)

## Journey
Creating this game was a great learning experience. Here's how I did it:

## Choosing the Tech Stack

I chose React for its component-based architecture, which made it easier to manage the different parts of the game. Vite was used as the build tool for its speed and simplicity, and HTML and CSS were used for the structure and styling of the game.

## Building the UI

I started by replicating the design from Dribbble. This involved creating a visually appealing layout with cacti, a cowboy, and the hanging tree. CSS was crucial for achieving the right look and feel.

## Implementing the Game Logic

The core functionality of the game revolves around guessing letters. Here’s how I implemented it:

- useState(): This hook was used to manage the game state, including the word to guess, the letters guessed, and the number of wrong attempts.
- useEffect(): This hook was used to handle side effects, such as checking if the game is won or lost after each guess.

## Creating the Questions Database

To make the game more interesting, I used ChatGPT to generate a variety of questions and words. This added a unique touch to the game and ensured a diverse set of challenges for the players.

## Challenges and Learning

One of the main challenges was managing the game state efficiently and ensuring the UI updates correctly based on user interactions. Through this process, I gained a deeper understanding of React hooks and state management.

## Future Plans

In the future, I plan to:

- Add more questions and words to the database.
- Implement difficulty levels.
- Enhance the UI with animations and sound effects.

## Conclusion

Working on this project was incredibly rewarding. It not only sharpened my technical skills but also allowed me to create something enjoyable. I hope this blog inspires you to take on similar projects and explore the fun side of web development.

Thank you for reading! Feel free to try the game and let me know your thoughts.
Understanding the Syntax of Vue3 script setup
Tags: vue, vue3
Published: 2024-05-31 15:11:37

## What is vue3 script setup?

It is a new syntactic sugar in Vue 3, compared to the previous approach, the syntax becomes simpler after using it.

The usage is extremely simple, you just need to add the setup keyword to the script tag. For example:

```js
<script setup></script>
```

## Component Registration Automatically

In `script setup`, the imported components can be used directly, You don't need to register them through `components`. Moreover, you don't have to specify the current component's name, it will automatically use the filename as component name, which means you no longer need to write the `name` property. For example:

```html
<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>
```

If you need to define component name, you can add another `script` tag or use defineOptions.

## Usage of Core API

### Usage of props

Define the current props with `defineProps`, and get the props object of the component instance. For example:

```html
<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>
```

### Usage of emits

Use `defineEmit` to define the events that our component can emit, the parent component know when to emit.

```js
<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change', 'delete'])
</script>
```

### slot and attrs

You can get `slots` and `attrs` from the context using `useContext`. However, after the proposal was formally adopted, this syntax was deprecated and split into `useAttrs` and `useSlots`. For example:

```js
// old
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

// new
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>
```

### defineExpose API

In the traditional approach, we can access the content of child components in the parent component through the `ref` instance. However, this method cannot be used in `script setup`. `setup` is a closure, and apart from the internal `template` template, no one can access the internal data and methods.

If you need to expose the data and methods in `setup` externally, you need to use the `defineExpose` API. For example:

```js
<script setup>
  import { defineExpose } from 'vue'
  const a = 1
  const b = 2
  defineExpose({
   a
  })
</script>
```

No need to return properties and methods, use them directly!

This may be one of the major conveniences in setup. In the past, when defining data and methods, they all needed to be returned at the end in order to be used in the template. In `script setup`, the defined properties and methods do not need to be returned, they can be used directly! For example:

```vue
<template>
  <div>
    <p>My name is {{name}}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Sam')
</script>
```