teleren/devto huggingface dataset:
The Art of Camera Use in Remote Meetings
Tags: productivity, remotework, career, pairprogramming
Published: 2023-05-17 19:43:29

In the era of remote work, the camera has become our best friend and worst enemy. At [Opreto](https://www.opreto.com/), we’ve discovered how to tap into its power without succumbing to energy drain. It’s not about being “on” all the time, but rather being “on” when it truly matters. Take, for example, our interactions with clients during standard agile ceremonies or other meetings. In these instances, our commitment to camera time is unwavering – a total 100% engagement. Our promise is to provide a professional, fully present service.

However, things take a different turn internally. A full day with the camera rolling can be like running a marathon, eventually leading to “[Zoom fatigue](https://en.wikipedia.org/wiki/Zoom_fatigue).” Being perpetually “on” can damper our energy levels and productivity. Here, we kick back a bit. Camera use isn’t merely an on-off switch. It’s more of a dial, adjusting with the intensity of the meeting at hand.

Think of a casual discussion around new features or bugs. Seeing our team’s reactions can be valuable. Facial expressions signal agreement or confusion, enhancing our communication and mutual understanding. Visual cues strengthen our communication, helping us understand and respond better.

In these sessions, camera use is encouraged. It supports the ebb and flow of ideas. It keeps us engaged. It helps us read between the lines. However, it’s not an ironclad rule. Need a camera break? Go for it. Just stay tuned in.

Now, imagine a [pairing session](https://en.wikipedia.org/wiki/Pair_programming). Here, our focus is laser-like. We’re deep in code, working with precision. Our primary form of communication? The code itself and the driver-navigator verbal exchanges around it. Visual interaction takes a back seat.

In these sessions, camera use is optional. It’s less about seeing and more about doing. We’re glued to the code, not to each other’s faces. The quality of our work is independent of our camera status. It’s all about our expertise and collaboration.

So, what’s the bottom line? Camera use is a tool, not a rule. It enhances our work, but it’s not always necessary. It depends on the context.

When we’re with clients, we show up fully. We’re on camera, actively participating. It’s about being present and professional. It’s about building rapport and trust.

Internally, we adjust as needed. In discussions, we use the camera for better interaction. In work-intensive sessions, we let the work speak. It’s about being flexible and effective. It’s about balancing our energy and productivity.

In a nutshell, the proper camera use is adaptable. It scales with the meeting’s intensity. It supports our work without draining us. It’s a balance of connection and comfort, professionalism and productivity.

It’s about being “on” when it counts. So, switch on that camera when needed, and switch it off when you need a breather. Stay flexible, stay productive, and keep doing great work. That’s the Opreto way.

**- Alan Laudicina**
Ejercicio Práctico Esteganografía
Published: 2023-05-17 19:34:28

**_Steghide_**.
Steghide es un programa de esteganografía que puede ocultar datos en varios tipos de archivos de imagen y audio. Las frecuencias de muestra de color, respectivamente, no cambian, lo que hace que la incrustación sea resistente a las pruebas estadísticas de primer orden.

**Características**

Compatible con BMP, GIF y JPG
Cifrado AES de datos incrustados
Evitación automática de áreas homogéneas (solo incrustar datos en áreas ruidosas)
Incruste mensajes de texto y múltiples archivos de cualquier tipo
Fácil de usar
Ocultar datos en la imagen usando steghide
**Instalar Steghide**
La instalación es simple en Kali Linux ya que steghide ya está disponible en el repositorio de Kali Linux. Ejecute el siguiente comando y listo.


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

**Ocultar archivo de texto en la imagen.**
Creé una carpeta steghide en la carpeta de inicio raíz y coloqué el archivo picture.jpg y secret.txt allí. picture.jpg es el archivo donde voy a ocultar el archivo secret.txt. Voy a mostrar los comandos aquí.

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

**Visualización de información de datos incrustados.**
Si ha recibido un archivo que contiene datos incrustados y desea obtener información sobre él antes de extraerlo, use el comando:

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

**Instalar stegosuite.**
La instalación es simple en Kali Linux ya que stegosuite ya está disponible en el repositorio de Kali Linux. Ejecute el siguiente comando y listo.

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

**Incrustar archivo de texto en la imagen usando Stegosuite.**
Debe ejecutarlo desde el menú de la aplicación (o simplemente puede buscarlo). Vaya a Archivo > Abrir y abra la imagen que desea usar. Haga clic derecho en la sección del archivo y seleccione agregar archivos y seleccione su archivo secret.txt. Escriba una frase de contraseña y haga clic en incrustar. Unos segundos y creará un nuevo archivo picture_embed.jpg


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

**Extraer archivo de texto de la imagen usando Stegosuite.**
Si desea extraer un archivo de texto o datos de la imagen, simplemente abra la imagen, escriba la frase de contraseña y haga clic en Extraer.
Change CSS by mouseover
Published: 2023-05-17 18:48:25

Hi there,

I hope this is the right place to ask for help?

I have used the function below on my website to add the ccs class "test" to the class "entry-content".

`
document.addEventListener('load', function() {
  document.querySelector('.entry-content').classList.add('test');

});`


It works fine. But now I would like to add a condition:

If the user hovers over an element with the class "hoverme"  the class "test" should be added to the class "entry-content".
("hoverme" is no parent or child of "entry-content")

How could I achieve this?

Thanks! 
Niko
Dicas essenciais para quem está começando no mundo da programação!
Tags: webdev, beginners, programming, tutorial
Published: 2023-05-17 18:46:12

Parabéns! Você decidiu dar seus primeiros passos na programação! Seja para criar seu próprio aplicativo ou site, ou simplesmente para aprender uma nova habilidade, a programação é uma habilidade valiosa e cada vez mais requisitada.

Para ajudá-lo(a) em sua jornada, aqui estão algumas dicas essenciais para iniciantes:

1. **Escolha sua linguagem de programação com sabedoria**: Existem muitas linguagens de programação disponíveis e cada uma tem suas próprias características. Comece escolhendo uma linguagem de programação popular e bem documentada, como Python ou JavaScript, e aprofunde-se nela.
2. **Pratique, pratique e pratique**: A prática leva à perfeição! Certifique-se de colocar em prática o que você aprendeu. Crie projetos simples e, aos poucos, vá aumentando a complexidade deles. Você também pode participar de desafios de programação online para testar suas habilidades.
3. **Aprenda a ler documentação**: A documentação é a sua melhor amiga quando se trata de programação. Ela contém todas as informações necessárias para entender como usar uma linguagem de programação, biblioteca ou ferramenta.
4. **Encontre uma comunidade**: Programar não precisa ser uma atividade solitária. Encontre uma comunidade de programadores online ou presencial e participe de fóruns, grupos de discussão ou eventos. Isso pode ser uma ótima oportunidade para aprender com outras pessoas, compartilhar seus projetos e fazer novos amigos.
5. **Não tenha medo de errar**: A programação é uma atividade que envolve tentativa e erro. É comum errar muitas vezes antes de conseguir fazer algo funcionar. Não se preocupe se você não entender tudo logo de cara, dê tempo ao tempo e seja paciente.
6. **Divirta-se!**: Programar pode ser uma atividade desafiadora, mas também é divertida. Ao criar algo do zero e ver funcionando, você terá uma sensação de realização incrível. Divirta-se com suas criações e sinta-se orgulhoso(a) do seu progresso.

Agora que você tem essas dicas em mente, é hora de começar sua jornada na programação! Lembre-se de que a prática é a chave para o sucesso, e não tenha medo de pedir ajuda quando necessário. Boa sorte e divirta-se! 😁
Make images responsive to light/dark mode on GitHub
Tags: github, markdown, html, readme
Published: 2023-05-17 18:26:06

## Introduction

Hello there, today I'd like to share with you something that I've been using lately on my READMEs to have my images responsive the light or dark modes. It's a very simple feature on GitHub but not many people know about it.

## Demonstration

Here is the result on my new open source project [pr-tracker](https://github.com/mateusabelli/pr-tracker)

![light-preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo2cvgmn26968nyu8igo.PNG)

![dark-preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu76e53oobt8f693vqek.PNG)

## How to use it

To use this feature, you are going to need to have two images or URL pointing at your light and dark image versions. In my example I had the following:

```
.github/
├── demo-dark.png
├── demo-light.png
```

**with Markdown**

If you prefer to add your images with `Markdown` all you need to do is to append `#gh-dark-mode-only` or `#gh-light-mode-only` at the end of the URL. Like this:

```markdown
![Demo-Light](.github/demo-dark.png#gh-dark-mode-only)
![Demo-Dark](.github/demo-light.png#gh-light-mode-only)
```

**with HTML**

Or you can use the `<picture />` tag with the new `media` feature, specifying the value `(prefers-color-scheme: dark)` or `(prefers-color-scheme: light)` like this:

```html
<picture>
  <source
    srcset=".github/demo-dark.png"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset=".github/demo-light.png"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src=".github/demo-light.png" />
</picture>
```

## Sources

I didn't figured this on my own, the first time I learned about this feature was through the [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) project, under the [responsive-card-theme](https://github.com/anuraghazra/github-readme-stats#responsive-card-theme) section, it showed examples that I've used in my profile README and I've been also using on repositories as well.

> The cover image used belongs to the first link below.

**Useful links:**

- https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
- https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/

## Questions

- **Have you ever seen this feature before?**
- **Have you ever used this before?**
- **Do you have plans to apply this feature somewhere?**

---

<table>
  <td>Thanks for reading. Have a nice day!</td>
</table>
"Understanding and Supporting Neurodivergence in Tech": CodeNewbie Podcast S24:E2
Tags: beginners, codenewbie, career
Published: 2023-05-17 18:18:44

In our second episode of Season 24 of the CodeNewbie Podcast, @saronyitbarek talks about neurodivergence and accommodations in the workplace with [Frankie Nicoletti](https://twitter.com/frfrfrankie?lang=en), VP of Engineering at SoLo Funds. 

{% embed https://www.codenewbie.org/podcast %}

Francesca Kerberos Nicoletti (she/they) is an engineer, leader, educator, and polymath, and currently VP of Engineering at SoLo Funds. Previously they were AI Engineering Lead at a martech unicorn, Head of Engineering at a seed stage grocery startup, interim CTO at a big data startup, and an IC at several early-stage startups ranging from ecommerce to social media. They have been a career coach for 7 years. They hold several state records in power lifting as well!

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/codenewbie/id919219256?i=1000613354489)

- [Listen on Spotify](https://open.spotify.com/episode/2dH0yy8DSxed9HTvquqE2E?si=7bc0b4e4a5094f90)

Or, listen wherever you normally get your podcasts!

***

**Make sure to subscribe to the CodeNewbie podcast if you haven't yet!**

Happy coding! We hope you enjoy this season of the CodeNewbie Podcast 💜
Manipulation of string in Javascript, Python and Ruby
Published: 2023-05-17 18:16:50

A string is known as a sequence of characters, and string manipulation is something we programmers do all the time. Here are some of the basic string manipulation operations and how we implement them in Python, Javascript and Ruby.

**To Uppercase:** Converting all the characters in a string into uppercase.

**To Lowercase:** Converting all the characters in a string into lowercase.

**Length of string:** A very midget but crucial function used in most of the code. Is to find the length of a string.

**Finding a character:** Another crucial function to detect a substring inside a string.

**Reverse a string:** Mostly used in the form of a stack, a native function with O(n) time complexity to help out resolving code convolutions.

Below we have a Javascript implementation

```
let my_name = "Abhishek Sharma"
console.log('my_name in toLowerCase', my_name.toLowerCase());
console.log('my_name in toUpperCase', my_name.toUpperCase());
console.log('my_name string length', my_name.length);
console.log('find character in string', my_name.includes("b"), my_name[2]);
console.log('my_name in reverse', my_name.split('').reverse().join(''));

```

Below we have a Python implementation

```
my_name = "Abhishek Sharma"
print('my_name in toLowerCase', my_name.casefold());
print('my_name in toUpperCase', my_name.capitalize());
print('my_name string length', len(my_name));
print('find character in string', my_name.rfind("b"), my_name[2]);
print('my_name in reverse', my_name[::-1]);

```

Below we have a Ruby implementation

```
my_name = "Abhishek Sharma"

puts "my_name in toLowerCase #{my_name.downcase}"
puts "my_name in toUpperCase #{my_name.upcase}"
puts "my_name string length #{my_name.size} #{my_name.length}"
puts "find character in string #{my_name.include? 'b'} #{my_name[1]}"
puts "my_name in reverse #{my_name.reverse}"

```
Announcing scip-clang: a new SCIP indexer for C and C++
Tags: csharp, programming, webdev
Published: 2023-05-17 17:56:23

[scip-clang](https://github.com/sourcegraph/scip-clang) is our new indexer for C and C++ code written from the ground up to natively emit [SCIP](https://github.com/sourcegraph/scip) and especially support the wide range of language features present in C++.

For teams using C and C++, indexing your code with scip-clang can provide a significantly improved code navigation experience in Sourcegraph, similar to editors like VS Code (based on clangd) and CLion. scip-clang's precise code navigation is aware of build configurations, macros, and type information. Some examples of when this is particularly useful:

- Navigating class hierarchies, such as those using virtual functions with overriding, or the Curiously Recurring Template Pattern. In such cases, identically named methods appear in multiple class definitions, leading to false positives with search-based code navigation.

- Different C++ container types often use identical method names like find and contains, which may have multiple overloads. Precise code navigation enables accurately navigating to the correct method overload in the correct type without false positives.

- Understanding whether a definition comes from inside a macro expansion. In such cases, since the definition is not explicitly available in the source, it is not accessible to search-based code navigation. However, precise code navigation can accurately point to the macro expansion.

You can explore precise code navigation powered by scip-clang in the following repositories: [Chromium](https://sourcegraph.com/github.com/chromium/chromium@b21c706/-/blob/base/atomic_ref_count.h?L19:7-19:21#tab=references) (C++), [LLVM](https://sourcegraph.com/github.com/llvm/llvm-project@39a0677/-/blob/llvm/include/llvm/Support/raw_ostream.h?L52:7-52:18#tab=references) (C++), [Postgres](https://sourcegraph.com/github.com/postgres/postgres@63932a6d38e5dfa6df2a51a04b7314ec1e4d3de7/-/blob/src/backend/optimizer/plan/setrefs.c?L289:21-289:32#tab=references) (C).

Continue reading here: https://about.sourcegraph.com/blog/announcing-scip-clang
The Power of Bit Manipulation - Let's smash some bits!
Published: 2023-05-30 08:39:10

---
title: The Power of Bit Manipulation - Let's smash some bits!
published: true
date: 2023-05-17 17:55:43 UTC
tags: 
canonical_url: https://www.anurag629.club/posts/the-power-of-bit-manipulation-how-to-solve-problems-efficiently/
---

In this article, we will learn everything about bit manipulation and how to solve problems efficiently using bit manipulation.
AI's New Frontier: SVG Generation
Tags: svg, ai, vector, development
Published: 2023-05-17 17:50:06

There's something fascinating happening in the intersection of AI and design. AI-powered tools are starting to change the way we create, making processes simpler and freeing up time for more creative tasks.

Have you ever imagined a world where SVG creation could be as simple as providing a text prompt? This idea has been playing on my mind lately and I thought I'd put it out there. Can we use AI to generate SVGs, thereby speeding up the design process and letting us focus on creativity?

This is not just a concept anymore. I've been exploring this idea and have seen some pretty interesting results. While the project is still in its early stages, the potential impact of such a tool is quite exciting, isn't it?

Imagine the possibilities: You could have an AI assistant that helps you with initial designs, which you can then refine in Adobe Illustrator. This could be a game-changer for developers, designers, and hobbyists alike.

Excited to share with you my recent venture, neoSVG, an AI-driven tool that crafts SVGs from simple text prompts. How transformative do you think such a tool could be for our design processes?

Join the waitlist and be a part of this design revolution:

👉 https://neosvg.com 👈

I'm eager to hear your thoughts! What would you love to see from a tool like this?
10 New free Tailwind and Alpine.js blocks added on Windstatic
Tags: tailwindcss, alpine, javascript
Published: 2023-05-17 17:48:41

Exciting news!

I'm thrilled to share that I've just released 10 beautifully designed Hero Sections from my Before & After challenge on Windstatic.

Best of all, they are completely free for you to use!

Grab them here:
⇢ http://windstatic.com/styled-heros

Enjoy!

{% twitter 1658889214463811587 %}
Pokémouille - A modern Pokédex (part 2)
Published: 2023-05-17 17:41:32

Hey there, trainers! Remember Pokémouille, the all-in-one Pokémon encyclopedia web app? Well, I'm back with exciting updates on the project! But before we dive into the details, let me extend a warm invitation to all aspiring contributors and Pokémon enthusiasts. Join me on this incredible journey by visiting the [GitHub repository](https://github.com/Vaalley/pokemouille) under the MIT license.

Now, let's explore the recent advancements in Pokémouille, including new endpoints, a revamped UI for testing, and the ambitious (for me haha) endeavor of implementing Pokémon evolution trees.

## New Endpoints: Abilities, Pokémon, and Moves
One of the key milestones in the evolution of Pokémouille was the addition of new endpoints to provide comprehensive Pokémon information. I'm thrilled to share that we now have endpoints for abilities, individual Pokémon, and moves!

## UI Revamp: Exploring the Possibilities
In the pursuit of a seamless user experience, I decided to revamp the UI for testing purposes. While it's still a work in progress, the new UI provides a glimpse of the possibilities that lie ahead. With cleaner layouts and intuitive navigation.

Although the temporary UI is a stepping stone, it reflects the commitment to creating a visually engaging and user-friendly experience. Your feedback and contributions are invaluable in shaping the final UI design, so don't hesitate to join our team of developers and designers!

## Implementing Pokémon Evolution: An Ambitious Quest
I've embarked on the ambitious quest of implementing the Pokémon evolution feature in Pokémouille. While this feature is still a work in progress, I'm determined to bring the excitement of Pokémon evolution to the web app.

With the evolution feature, trainers will be able to trace the evolutionary paths of their favorite Pokémon, explore branching evolutions, and uncover the secrets behind their transformations.

## Join the Pokémouille Community!
Pokémouille is more than just a web app—it's a community-driven project. I wholeheartedly invite all developers, designers, and Pokémon enthusiasts to contribute their skills, ideas, and passion. Together, we can shape Pokémouille into the ultimate Pokémon resource!

If you're interested in getting involved, head over to the [GitHub repository](https://github.com/Vaalley/pokemouille) and explore the project. Check out the issues, submit pull requests, and share your thoughts on enhancing the UI, implementing features, and refining the overall user experience. Your contributions will make a significant impact on the growth of Pokémouille.

Stay tuned for more updates, and let's embark!
Running React Native iOS Device with Hot Reload and Reactotron
Tags: reactnative, ios, react, mobile
Published: 2023-05-17 17:28:29

> Hey, check my blog too: [Tulio Calil Dev](https://tuliocalil.com)

First, start the develop server on your terminal:

```
yarn start
```

Now, open the `ios` folder on XCode:

```
xed ios
```

Connect your iOS device with a USB cable, and choose then on XCode: 
> You need to enable [Develop mode]
(https://www.delasign.com/blog/how-to-turn-on-developer-mode-on-an-iphone/)


![XCode select device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw6xqer20uao249hxqya.png)


Now, click on your `Scheme` and choose "Edit Scheme":


![Editing Scheme in XCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zunhbh0420sxdel15aoo.png)


In the "Run" option, change the `Build Configuration` to `Debug`:


![Editing scheme in XCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg7mtlnpimiw8fw4hq5m.png)

Now, run the project.

> Maybe you will be asked to unlock your device to install the application.

Now, on your Mac/Hackintosh 😁 go to `Settings` > `Network`.
In "Other services" click on your iOS device and in `Details`.

![Macos Network Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97tqrvwypuq29qj643ph.png)

Uncheck the `Disable unless needed` option and hit `Ok`:

![iOS Device in Network Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw2qxglduignhwv0hkiq.png)

Now go back to the `Network` menu, and choose the device, you will see some like this:

![Macos Network Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqxf0lvl3kzhy5zo42c0.png)

Copy the IP address, go to Reactotron config, and add the `host` option with this IP:

```js
Reactotron
  .configure({host:'172.20.10.2'})
  .connect()
```

When the application is running, shake your device to open the `React Native Debug Menu`

> If you can't shake it, [check this](https://javascript.plainenglish.io/some-better-ways-than-shaking-your-device-to-show-dev-menu-in-react-native-1fd6d051bf90)

On the menu, choose the option `Configure Bundler`, in the first modal input, put the IP, and hit `Apply Changes` (the other inputs will be the default).

The application will load the bundle and all should work now!