teleren/devto huggingface dataset:
Let's Share, Learn, and Grow Together 👬!
Tags: discuss, webdev, developers, programming
Published: 2024-03-08 19:36:25

Hey there, fantastic community members!

As we wrap up another week filled with coding adventures, challenges, and triumphs, I couldn't be more excited to connect with all of you. First and foremost, I genuinely hope each and every one of you had a wonderful week, filled with progress and positivity. However, I understand that sometimes, despite our best efforts, things don't always go as planned. 


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


If that's the case for you, please know that you're not alone, and we're here to offer our support, strength, and a virtual hug if needed.

Now, let's shift gears to something more uplifting! As we approach the weekend, I'm eager to hear about your plans. What did you work on this week? Any exciting projects or breakthroughs you'd like to share? And most importantly, what are you looking forward to learning or exploring over the weekend?

For me, I've set my sights on delving into React Native navigation and mastering the art of creating captivating splash screens. It's a journey I'm excited to embark on, and I can't wait to dive into the intricacies of these topics. But enough about me—let's make this conversation about us, about our collective growth, and about the wonderful world of coding that unites us all.

Whether you're a seasoned developer or just starting your journey, your insights, questions, and thoughts are invaluable to our community. So, I extend a heartfelt invitation to each and every one of you: let's turn this article into a space for collaboration, support, and shared learning. Don't hesitate to drop a comment, ask a question, or simply share your experiences. Your voice matters, and together, we can create something truly special.

As we look ahead to the weekend, let's approach it with curiosity, enthusiasm, and a commitment to continuous improvement. Whether you're exploring new technologies, refining your skills, or simply taking a well-deserved break, remember that we're all in this together.

So, here's to a weekend filled with learning, laughter, and endless possibilities. Let's make it one to remember 🤗!
Steam - How to link / unlink an Xbox Live account
Tags: wwwmicrosoftcomlink
Published: 2024-03-08 19:35:49

When you boot Sea of Thieves through Steam, you will need to link an Xbox Live account to your Steam profile before you can enter gameplay. Below are the steps which are required to link as well as unlink your Xbox Live account when required.

Please Note - Your game progress is linked to your Xbox Live account. So progress made and items earned using that account on other platforms will also be available through Steam. But also if you unlink that account and use another, you will no longer have access to the original accounts progress or items until you relink back to that account.

Prerequisites

Though you may have a Microsoft account already, your Microsoft account must also be signed up to Xbox Live. You can check that it is and also create an Xbox Live account if required through the Xbox website. 

Linking an Xbox Live account to Steam from within the game

When you boot Sea of Thieves for the first time and progress to the 'Start Game' screen, when you attempt to progress past the screen, a 'Sign in to Xbox Live' login prompt will be shown.

Reference :  [**www.microsoft.com/link**](https://www.microsoft-link.com/)

Once you click 'Sign in', you will then be prompted to then enter your Xbox Live account details. After entering your sign-in details and password you will be shown the following screen.

Pressing 'Let's Play' will then open the Steam Overlay displaying a browser window asking for confirmation that the correct accounts are to be linked and whether you wish to proceed.

Selecting 'Yes, Link Accounts' will confirm that you wish to link your Xbox Live accounts and Steam profile. If the wrong accounts are being linked, click Shift+Tab to close the Steam Overlay then from the Main Menu either click 'Sign Out' from the bottom of the screen or press the X key. Once signed out you will return to the 'Start Game' screen where you can proceed through this process again.

Unlinking an Xbox Live account

This action can be completed when at either the 'Start Game' screen or Main Menu. Simply clicking 'Sign Out' from these screens (or pressing the X key in the main menu) will prompt you whether you wish to sign out of Xbox Live. Clicking Yes will complete the unlinking process and return you to the 'Start Game' screen where you can sign in to another account.

For more visit     [**www.microsoft.com /link**](https://www.microsft-link.com/)

Other ways to link your Xbox Live Account and Steam Profile

You can also link your Xbox Live account and Steam Profile through the Xbox Game bar or Xbox app. To do this please follow the Link your social network accounts to Xbox from Xbox support article and scroll down to the 'Link your Xbox Game Bar, Game App or game purchased on Steam' section.
Create a custom Streamlit component with Alpine.js
Tags: streamlit, alpinejs, python, javascript
Published: 2024-03-08 19:35:00

Who wants to fight with React all day long just to make a simple custom component for Streamlit?  **Not me.**

Instead I made this template using [Alpine.js](https://alpinejs.dev/) to create custom a component : [https://github.com/aaronblondeau/streamlit_alpine](https://github.com/aaronblondeau/streamlit_alpine)

P.S. If you haven't played with [Streamlit](https://streamlit.io/) yet, try it out. It is a fun and extremely capable tool.
2023, a year in images
Tags: 2023, yearinreview, healthydebate, challenge
Published: 2024-03-08 18:36:47

late and lazy, but still here :)

##  Github, Code Search and Code View

Best feature seen so far, quick to load (as opposed to using `.` to launch the visual studio we editor)
Thanks for all he fish [OctoTree](https://www.octotree.io/)!

![github  Code Search and Code View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrplri13i329g1qlk8sg.png)



## Effective Meetings

please, try to aim for effective meetings; provide an agenda, provide a tl;dr for people that could not join, and leave the meeting with following action-items, if any

![effective meeting comic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj6vne63bl35910bwkz0.png)

there are many resources online, but i always tend to end on this [chart in order to understand if a meeting is required, made by attlasian](https://www.atlassian.com/blog/teamwork/how-to-run-effective-meetings)


![chart to know when to do a meeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtvl8pct7x3yhwy528y5.png)

<br/><br/>
## AoC (Advent of code)

I'm staring to be a huge fan of the [Advent of Code](https://adventofcode.com/) challenge every beginning of December.
Everyday puzzle is a great excuse to talk to people of your company that probably you don't interact much otherwise.
And [/r/adventofcode](https://www.reddit.com/r/adventofcode/) subreddit fan-arts and community is fun to follow.
I always entered after completing the daily challenge, otherwise it may be a huge spoil :D

I'm trying to put my new `go` language to use, but still a rookie; not that i advance much 

![my advent of code results 2023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f71fpzaemueftebdm3w.png)

![advent of code meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6v7rzv0ks86wldsry2o.png)

<br/>
## Event Storming

This video is pure gold material for having a lean company

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

![merge people; slipt software](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgbd0r4yean7yd9uembf.png)



<br/><br/>
## Always aim for health 

... if you got your basic needs covered :)

![comic on mental health is more important than money](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhh0qby9b6uk73c5b136.png)
Peacock reps are telling Fire TV users to sideload the app
Tags: peacocktvcomtv, peacockcomtv
Published: 2024-03-08 18:57:18

The good news is that Peacock’s support reps are speaking the truth. You can, in fact, watch Peacock on Fire TV devices through a process called sideloading, which involves installing the Android TV version of the app from outside Amazon’s app store. (This is possible because Amazon’s Fire TV devices also run a version of the Android operating system.)

This process is also easier now than it used to be thanks to the work of Elias Saba over at AFTVNews. Here’s how you can set it up:

1. Install Saba’s free Downloader app on your Fire TV. The easiest way is to use the Alexa button on your remote to say “Downloader.”

2. Before you launch the Downloader app, head to Settings My Fire TV Developer Options Install Unknown Apps, then toggle Downloader to “ON.”

3. Launch the app, then enter the number 81035 into the URL field at the top. (If you didn’t follow step two above, you’ll be prompted to let Downloader install unknown apps first. Follow the prompt to visit Settings, set the toggle to “ON” for Downloader, then go back to the Downloader app and repeat this step.)

4. Be patient and wait until you see a prompt asking if you want to install Peacock. Select “Install,” then select “Open” to run the app. You might need to restart your Fire TV for video to play properly.

At this point, you should be able to use [**Peacocktv.com/tv**](https://www.peacockcom-tv.com/) like normal, with one notable caveat: In the current version, Peacock does not seem to display a home-screen icon, so you’ll only see a gray box with a slashed-out image icon instead. The app itself works fine, though, so just remember that this gray box represents the Peacock app, and consider pinning it to your home screen for faster access.

What if Peacock needs an update?

Having written this kind of tutorial before, I know that when Peacock updates its Android TV app, it can sometimes prevent your older sideloaded version from running. I’ll try to keep this story up to date, but you can also update the app yourself through the following steps:

1. Head to the [**Peacock.com/tv**](https://www.peacockcom-tv.com/) page on APK Mirror, scroll down to “All versions,” and click the option that shows the most recent date.

2. On the next page, right-click (or long-press) the “Download APK” button and copy the link.

3. Head to the AFTVNews URL Shortener, paste your link into the URL box, and hit “Shorten.”

4. In Downloader, use the newly generated numeric code in place of the one seen in the steps above.
Exploring JSX: The Gateway to React’s Powerful UI Construction
Tags: javascript, react, webdev
Published: 2024-03-08 18:51:52

JSX, or JavaScript XML, is a syntax extension for JavaScript that is commonly used with React to describe the UI structure of an application. It allows developers to write HTML-like code in their JavaScript files, which is then transformed into React elements. Here's a deeper look into JSX and some advanced concepts associated with it:

### JSX Syntax and Transpilation
JSX looks similar to HTML but it's actually closer to JavaScript. When a React application is built, JSX expressions are transpiled into JavaScript function calls. For example:

```jsx
const element = <h1>Hello, world!</h1>;
```

This JSX tag syntax is transformed into a `React.createElement()` call:

```javascript
const element = React.createElement('h1', null, 'Hello, world!');
```

### Embedding Expressions in JSX
JSX is an expression too, which means you can embed JavaScript expressions in JSX by wrapping them in curly braces `{}`:

```jsx
const name = 'Copilot';
const greeting = <h1>Hello, {name}!</h1>;
```

### JSX Children and Composition
You can compose complex UIs from simple pieces by nesting JSX tags within each other, similar to HTML:

```jsx
const App = () => (
  <div>
    <header>My App</header>
    <main>
      <p>This is the content of my app.</p>
    </main>
  </div>
);
```

### Advanced Concepts

#### Virtual DOM and Reconciliation
JSX elements become objects representing the virtual DOM. React's reconciliation algorithm efficiently updates the DOM by comparing changes in the virtual DOM with the actual DOM.

#### Fragments
React Fragments allow you to group a list of children without adding extra nodes to the DOM:

```jsx
<>
  <ChildA />
  <ChildB />
  <ChildC />
</>
```

#### Portals
Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

#### Higher-Order Components (HOC)
HOCs are functions that take a component and return a new component, allowing you to reuse component logic.

#### Render Props
Render props are a technique for sharing code between React components using a prop whose value is a function.

#### Context API
The Context API allows you to share state across the entire app without passing props down manually at every level.

#### Hooks
React Hooks, introduced in React 16.8, let you use state and other React features in functional components. For example, `useState` and `useEffect` are hooks that let you add state and side effects to functional components.

These advanced JSX and React concepts enable developers to build powerful and efficient applications. They provide the tools needed to manage state, handle side effects, and optimize performance, all within the expressive and declarative syntax of JSX. For more in-depth information, you can explore resources like the React documentation or community articles.
Eye Tracking Technology
Tags: technology, future, ar, spatialcomputing
Published: 2024-03-08 18:20:59

Eye tracking technology works by using various methods to monitor and record the movements and positions of the eyes. There are different techniques employed to achieve this, but the basic principle involves capturing the position of the pupil and sometimes the corneal reflection to determine where the person is looking.



The latest Apple device, the Apple Vision Pro, comes equipped with an eye-tracking feature that allows users to control their mouse movements.



Here's a general overview of how eye-tracking technology works:

## Hardware Setup
Eye tracking systems typically consist of a camera or multiple cameras placed near the user's eyes. These cameras can be infrared, near-infrared, or even regular cameras depending on the specific technology being used.

## Illumination
Infrared or near-infrared light sources are often used to illuminate the eyes. These light sources are not visible to the human eye but can be detected by the camera sensors. Illumination helps in enhancing the visibility of the eyes for tracking purposes. The infrared cameras are highly sensitive to the specific wavelength used by the LEDs. This allows them to effectively capture the reflected patterns even in low-light environments.

## Image Processing
The eye tracking system captures images or video of the eyes. Advanced algorithms analyze these images to locate features such as the pupil, corneal reflections, and other distinctive markers.

## Gaze Estimation
By tracking the position of the pupil and often the corneal reflection, the system can estimate where the user is looking. This information can be represented as coordinates on a screen or as a heatmap showing areas of interest.

## Data Analysis
Eye tracking data can be further analyzed to derive insights such as fixation durations (how long the eyes remain still on a particular point), saccades (rapid eye movements between fixations), and gaze patterns. 

## Integration
Eye-tracking technology can be integrated into various devices and systems including computers, virtual reality headsets, and wearable devices. This integration allows for real-time tracking and interaction with digital content based on the user's gaze.



I hope you all were able to get a brief understanding of this technology.

🤔What will be the next product to integrate this technology? Comment below
Simple deletes in Fauna Query Language - (FQL)
Tags: typescript, nosql, database, webdev
Published: 2024-03-08 18:13:27

Now that you have [written some data](https://dev.to/nosqlknowhow/simple-write-operations-in-fauna-query-language-fql-v10-3lee) and [updated some data](https://dev.to/nosqlknowhow/simple-update-operations-in-fauna-query-language-fql-v10-2bh6) in Fauna, in this how to let's delete some data!

[In my last post](https://dev.to/nosqlknowhow/simple-update-operations-in-fauna-query-language-fql-v10-2bh6), you saw getting a result set from the byStatus index and using the [`.forEach()`](https://docs.fauna.com/fauna/current/reference/reference/schema_entities/set/foreach?utm_source=dev.to&utm_medium=blog&utm_campaign=awareness) or [`.map()`](https://docs.fauna.com/fauna/current/reference/reference/schema_entities/set/map?utm_source=dev.to&utm_medium=blog&utm_campaign=awareness) functions to iterate through the results, deletes are easy. 

## Deleting data from a Collection in Fauna
To delete, we just call [the `.delete()` function](https://docs.fauna.com/fauna/current/reference/reference/schema_entities/document/delete?utm_source=dev.to&utm_medium=blog&utm_campaign=awareness) inside `.forEach()`, and as it iterates through the documents, it deletes each one of them. Here are two different styles of using forEach to do this. You can choose for deletes or other operations which style you want to use.

```
Order.byStatus("shipped", "20220").forEach(.delete())
Order.byStatus("shipped", "20220").forEach(x => x.delete())
```

This can be done in two different ways, but they are essentially the same. It is a style call.

One side note, I am using the `.forEach()` function as I am deleting documents thus not returning anything. Since the `.delete()` function returns nothing, and `.forEach()` returns no data, this is more efficient.


*********************************

Fauna is a serverless, globally distributed strong consistent database designed for modern application development. It offers the flexibility of NoSQL with the safety and ease of traditional relational databases. It provides seamless scalability, strong consistency, and multi-model access capabilities, making it an ideal choice for developers seeking to build fast, reliable applications without the operational overhead of traditional database management. Fauna's support for ACID transactions, and its temporal database features further enhance its utility, allowing for efficient data retrieval, updates, and historical data analysis.
We_Coded 2024
Tags: wecoded
Published: 2024-03-08 18:13:00

---
title: We_Coded 2024
published: true
description: My thoughts and commitments to fostering equality and inclusion in the tech industry.
tags: wecoded
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvrjkydsk9kc8c2jcn3m.png
published_at: 2024-03-08 18:13 +0000
---

Another year in tech and I (she/her) have so far stuck it out beyond the 3 year drop-off for women. It ain't no thing!

## How can we actively embrace equality in the tech industry?

I was fortunate to be invited to a talk by intersex activist [Valentino Vecchietti](https://www.intersexequalityrights.com/about) (she/they), focusing on intersex inclusion in science and scientific publishing for this years international Women's Day.

This day can be full of cringe to be honest, as people awkwardly try to be inclusive of women and overtly recognise women's gender it's just a bit strange.
Making sure to include trans women and non-binary and intersex people into the fold goes a long way for inclusivity. Be it a pride flag emoji reaction, using your pronouns, or making sure that we talk about women and gender minorities instead of _just_ women or only females... this goes a long way to showing simply that you care about others.

If you'd like to use the global inclusive pride flag it's freely available with usage support at [https://www.globalinclusiveprideflag.com/](globalinclusiveprideflag.com)

## Happy International Women's Day

If you're not sure you're feeling the Women's Day vibes, try wishing your virtual interactive assistant a happy international Women's Day. I'm sure your robot will be ready to tell you about a historical figure worth raising a toast for.
Completed Scrimba JavaScript Course: My Experience
Tags: scrimba, webdev, javascript, beginners
Published: 2024-03-08 17:58:51

### Getting Introduced to the Perfect Course

I was looking for a good JS tutorial/course because I knew HTML and 
CSS to create some 'okay' websites. JS is needed to add all the functionality and stuff, :) plus it's more of a programming language. HTML and CSS is more like writing a book, but JS is what is used to print, publish and correct everything (I don't know, maybe). Somebody on a web development discord server told me to try out Scrimba and holy moly it was so good. The site literally had what I always looked for : Studying but with interactive practicals so you can use the knowledge you have on something rather than spending 10-20hours on YouTube videos and reading random blogs. 

### The process and what I learned

Starting the JS course was bit a scary start! I felt nervous thinking it's going to be the hardest language ever, but the Lecturer was super helpful even tho he was just a recording in a screen. Taking things very slow and explaining everything properly.

What I did while I was learning JS was creating a test site and just use the knowledge I had to test on what this and that functions do. So I know why this stuff exists and why it should be used for.

I sometimes did (well, a lot) of the time do a bit of a cheating by using AI for help, but AI is just really helpful when it comes to explaining you stuff. You can't really ask MDN Docs to explain everything 😅 I used Copilot to explain me terms that I didn't understand.

After learning for a while we had to build something that will be used irl and that was a Chrome extension. Building it helped me learn everything that I thought I knew but in reality I didn't have. The more I tried all the challenges Scrimba the more I needed to learn, and it was really fun to keep learning new and old things each second! 

I don't know what else to say lol, but basically at the end we built a mobile web app and I learned how to use my first database. 
I did do a bit of tweaking and made my own version of the app :)
check it out here : https://riddleshoppinglistapp.netlify.app