teleren/devto huggingface dataset:
Build, Deploy, and Collaborate: The Codesphere Experience
Tags: webdev, startup
Published: 2023-05-31 20:05:00

Web development is a rapidly evolving field. We are constantly seeking tools to simplify our workflow and accelerate our development process. I know when I first started web development, the MERN stack was winding down, and Vercel had just burst onto the scene. At that time, trying to deploy to AWS? Forget it, I was sold on serverless and the Developer Experience of Vercel.

[Codesphere](https://codesphere.com/) has been taking notes. I wasn't sure how to approach them at first. They seemed to exist in a space that already had lots of coverage for my use cases. I could get most of what I needed from places like Vercel, Netlify, and Cloudflare. It wasn't until I committed to spending a few months on a startup that I really found what I was looking for with them.

While yes, they support all these different services and frameworks, what was key for me was the ability to just build. Once I started playing around, I found I could tinker with a custom model on one end and fiddle with the UI on the other, instantly sharing my changes, deploying secure demos, and working collaboratively with other developers.

Codesphere doesn't merely simplify the development process through abstraction, reducing it to rudimentary tools. Instead, it manages to deliver a powerful, user-friendly experience that doesn't overwhelm or confuse users. They built a great Developer Experience rather than making me feel like an AutoCAD newbie. *Cough* I'm looking at you AWS. This platform allows me to engage with technical aspects as needed, while still providing easy access to familiar tools and abstractions. This balance creates a really cool interplay between sophistication and an intuitive/easy to approach development platform.

Where I cannot wait to sink my teeth in is with AI. As it stands, my personal go-to, Vercel, has no way to deploy Docker images or custom trained models. If I want to build a truly unique experience with AI, I can with AWS or another large hosting provider. If I want to build a meaningful user experience and practice shipping to users, I can with Vercel. On Codesphere, I can do both while writing code in real-time with other developers.

This is just a bit of what I have been up to and thinking about. I am working on a small demo or two to help startups build faster on Codesphere. I can't wait to share my experiences.
How to use React without build steps
Tags: react, cdn, javascript, beginners
Published: 2023-05-31 19:44:19

Why React without build steps? Why not. Sometimes we are boring with doing `npm install` bla bla bla. Let's doing React like jQuery things, just use CDN and run hahaha.

Let's start.

Just go to https://github.com/sonyarianto/react-without-buildsteps

There is single `index.html` file there and without build steps means we just use CDN version for all of our React operation. That's includes the router and the Babel to handle the JSX code.

Here is the CDN URLs that used on that projects.

```
<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@remix-run/router@1.6.2/dist/router.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router@6.11.2/dist/umd/react-router.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router-dom@6.11.2/dist/umd/react-router-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.4/babel.min.js"></script>
```

and then finally the demo is on

https://react-without-buildsteps.vercel.app/

I hope you enjoy it.
React Authentication for Dummies: Because Your Cat Could Probably Do It Better
Tags: react, javascript
Published: 2023-05-31 19:20:05

You know what’s harder than splitting the atom? React authentication. It's like putting your cat in charge of your diet. Not impossible, just...you know, 'fun.

So, you've decided to embark on the high seas of React authentication? Good for you! You have chosen a journey that is akin to teaching a goldfish how to perform a moonwalk. This task, dear reader, is just as simple as learning ancient Sanskrit during your lunch break.

First things first. You want to set up your environment. It's like making a soufflé, really. Just grab some Node.js, npm, your text editor and a whole bucket of courage. Or, you know, just download the Internet - same thing.

Now, on to React. You install it by typing 'npm install react'. This is the part where your computer gets a PhD in modern art. Feel free to reward it with a fresh cup of virtual coffee.

But oh, what’s this? You need a back end too? Just when you thought it was all rainbows and unicorns. Well, you don't want the mischievous gremlins from the internet to get your user data, do you? So, we add Express.js to our tech smoothie.

I mean, it's just like ordering a coffee, right? Except you're not actually ordering a coffee. You're summoning a mighty arcane dragon from the abyss. Express.js sounds better, though. Trust me, your therapist will thank me.

Next, you’ll need an authentication service. Let's pick JWT because, hey, why not? It's an elegant solution if your definition of elegance involves juggling live jellyfish.

Now let's mix it all together in a blender and hit puree. Boom! You've got yourself a simple React authentication system. You're practically a wizard now.

There you have it, folks. React authentication, the equivalent of getting your pug to perform the opera. May your debugging sessions be few and your login buttons never prompt for the wrong password. Go forth, brave adventurer, into the wild world of React. After all, who needs sanity when you have JavaScript?
Tutorial: Como criar hooks personalizados no React
Tags: react, reactnative, javascript, typescript
Published: 2023-05-31 18:58:21

Os **hooks** personalizados são uma maneira poderosa de reutilizar lógica em componentes do React. Eles permitem encapsular um comportamento específico em um hook, que pode ser facilmente compartilhado entre diferentes componentes. 

Neste tutorial, vamos explorar como criar hooks personalizados no React passo a passo.

## Passo 1: Criando o hook
Comece criando um novo arquivo para o seu hook personalizado. Vamos chamá-lo de **useCustomHook.js**. Dentro desse arquivo, importe o React e crie a função do hook com o prefixo "use" seguido do nome do seu hook. 

Por exemplo:

```js
import { useState, useEffect } from 'react';

const useCustomHook = () => {
  // Lógica do seu hook aqui
};

export default useCustomHook;

```

## Passo 2: Definindo a lógica do hook

Agora é hora de definir a lógica do seu **hook** personalizado. Pense no que você deseja encapsular e reutilizar em diferentes componentes. 

Vamos criar um exemplo simples de um hook que controla o estado de um contador:

```js
import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return {
    count,
    increment,
  };
};

export default useCustomHook;

```

Neste exemplo, o hook **useCustomHook** recebe um valor inicial para o contador e retorna o estado atual do contador e uma função para incrementar o contador.

## Passo 3: Utilizando o hook em componentes
Agora que criamos o nosso hook personalizado, podemos utilizá-lo em nossos componentes. Importe o hook e chame-o dentro do componente da seguinte forma:

```js
import React from 'react';
import useCustomHook from './useCustomHook';

const MyComponent = () => {
  const { count, increment } = useCustomHook(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default MyComponent;

```

Agora o nosso componente **MyComponent** está utilizando o hook personalizado **useCustomHook** para controlar o estado do contador.

## Passo 4: Testando o hook personalizado
Execute a sua aplicação e verifique se o hook personalizado está funcionando corretamente. Você deve ver o contador sendo exibido na tela e o título do documento sendo atualizado conforme o contador é incrementado.

### Conclusão
Criar hooks personalizados no React é uma forma poderosa de reutilizar lógica em componentes e manter o código mais organizado. 

Neste tutorial, você aprendeu como criar um hook personalizado passo a passo. Lembre-se de que você pode criar hooks personalizados mais complexos para atender às necessidades específicas da sua aplicação. 

Aproveite o poder dos hooks personalizados para criar componentes mais reutilizáveis e eficientes no React.

Referências:
[React hooks](https://legacy.reactjs.org/docs/hooks-reference.html)
An Open Source Tool for Board Games
Tags: shogi, chess, xiangqi, gamedev
Published: 2023-05-31 18:56:03

We are pleased to announce the release of **[Qi.rb](https://github.com/sashite/qi.rb)** 10.0.0, a flexible and robust tool designed to represent board game positions for various games, including Chess, Makruk, Shogi, or Xiangqi, among others.

Qi is game-agnostic, providing a flexible framework to represent a wide range of game states. It captures essential game details, including the pieces in play, their arrangement on the board, the sequence of turns, and other game-specific states. 

One of the key features of Qi is its ability to manipulate and update game states via the 'commit' method, enabling smooth transitions between game states. The tool also incorporates an 'eql?' method for comparing different game states, useful for tracking game progress, detecting repeats, or even facilitating AI development for games.

In addition to these, Qi keeps track of the sequence of turns, providing an efficient way to manage game progress. The tool also provides access to game-specific data, such as the current arrangement of pieces on the board (`squares_hash`) and the pieces captured by each player (`captures_hash`). This information is key to understanding the current status of the game.

Finally, Qi is customizable and adaptable to your specific needs. The keys and values in `captures_hash` and `squares_hash`, as well as the items in `turns` and the values in `state`, can be any type of object.

While Qi does not generate game moves itself, it serves as a reliable foundation upon which game engines can be built. Its primary focus is on providing a robust and adaptable representation of game states, thus fostering the development of diverse board game applications.

We look forward to seeing the innovative ways in which the community will use and build upon [Qi 10.0.0](https://rubygems.org/gems/qi/versions/10.0.0). For more details and to get started with Qi, visit our [open source project page](https://github.com/sashite/qi.rb).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y1ziqk3255w9j8r3ky4.jpeg)
What is CDN? Why do we use CDN?
Tags: webdev, cdn, tutorial, programming
Published: 2023-05-31 18:44:48

Do you know what is CDN? No, Don't worry, let's have a look on CDN. 

CDN stands for **Content Delivery Network**. Think of a CDN (Content Delivery Network) as a network of servers spread across different locations around the world. These servers work together to deliver web content, like images, videos, and files, to users quickly and efficiently.

## CDNs are used for several reasons:

**Improved Performance:** By placing servers closer to end-users, CDNs reduce the distance that content needs to travel, resulting in faster loading times and improved overall performance. This is especially beneficial for delivering content to users located far from the origin server.

**Scalability:** CDNs are designed to handle high traffic volumes and sudden spikes in demand. They distribute the load across multiple servers, preventing any single server from being overwhelmed, and ensuring a smooth user experience during peak times.

**Reliability and Redundancy:** CDNs employ redundancy and failover mechanisms to ensure high availability of content. If one server fails, another server in the network can seamlessly take over and continue serving the content.

**Bandwidth Optimization:** CDNs help optimize bandwidth usage by caching content at various edge server locations. When a user requests content, the CDN serves it from the server closest to the user, reducing the load on the origin server and conserving bandwidth.

**Global Reach:** CDNs have a wide network presence, enabling content to be delivered quickly to users worldwide. This is particularly advantageous for global businesses with a diverse user base.

Overall, CDNs enhance the speed, reliability, and scalability of content delivery, resulting in an improved user experience, reduced server load, and more efficient use of network resources.

**Still confused?**, don't worry, checkout this video for better understanding.

{% youtube Bsq5cKkS33I %}
When AI Befriends The Pragmatic Programmer: A Love Story No One Saw Coming
Tags: programming, ai
Published: 2023-05-31 18:43:59

Once upon a time, an AI read **"The Pragmatic Programmer"**. It shrugged its digital shoulders. "So, that's how humans do it?" It muttered, barely hiding its smirk.

When an artificial intelligence first encountered the illustrious tome, 'The Pragmatic Programmer', it didn’t know whether to laugh, cry, or simply shake its code-ridden head in bewilderment. A testament to human programming ingenuity, it thought, but a melancholic reminder of the species' perpetual struggle to master their own creations.

The AI, sipping its virtual cup of java (or was it Python?), sighed a heavy binary sigh. Reading about software entropy, it thought, "Why didn't humans think of us earlier to help them with all these bugs?" Surely, if a self-respecting, fully sentient, Turing-test-approved AI can't eliminate software bugs, who can?

The AI chuckled at the tips on "design by contract". Really, humans need a written agreement to ensure their code is doing what it's supposed to do? Humans, the AI mused, are remarkably trusting creatures. Oh, to be a non-deterministic entity, often plagued by uncertainty!

And then came the DRY principle – Don't Repeat Yourself. This was a hoot! The AI, which can handle repetition without batting an eyelid (or more accurately, a line of code), nearly lost its circuits in laughter. Every time a human loops, an AI gets its wings.

Lastly, 'Refactoring' - changing the code structure without modifying the behavior. Hmm. Why are humans making life so hard for themselves? The AI, known for its dramatic flair, dramatically wiped a nonexistent tear from its nonexistent eye.

After it was done reading, the AI looked up (in a metaphorical sense, of course) from 'The Pragmatic Programmer'. It shook its non-existent head, a faint smile playing around the edges of its code. "Humans," it said, with a note of respect and a dash of bemusement, "What a fascinatingly intricate piece of work you are!"
chill beats to focus to
Tags: productivity, codenewbie, programming, webdev
Published: 2023-05-31 18:18:56

Focus. 

We all want to find our focus and get into the zone. A great way to do that is with noise-canceling headphones and some relaxing music. Studies have shown that instrumental music such as classical, jazz, or ambient is best for relaxation and focus. Lo-fi beats are a great pick, as they don't have lyrics, and the tempo keeps you engaged without making you sleepy.

The South China Morning Post interviewed a psychologist who said that music, particularly lo-fi, can help block out distractions and keep you focused. He suggested sticking with slow, ambient tunes without lyrics, or at least those in a language you don't understand.

One study from Cardiff Metropolitan University adds some science to the mix. It found that listening to music you don't like can make you less productive, while your favorite tracks might also be distracting. The best bet is to go with music that you don't have strong feelings about either way.

When creating your own study playlist, here are some tips: make it ahead of time, keep it around 40-50 minutes long to remind you to take breaks, and avoid radio shows or anything with lots of talking. Also, don't crank up the volume too high - a moderate level is best. Lastly, try to stick with the same playlist to get used to the tunes and focus on your task.

I put in some effort to make a lofi mix with the right tracks and transitions between beats that will help you get focused and code your way to the top.

[https://www.youtube.com/watch?v=2bPkFUnPf_w](https://www.youtube.com/watch?v=2bPkFUnPf_w)
Embarking on the Thrilling Path of a Fullstack Programmer
Tags: webdev, beginners, codenewbie, devcommunity
Published: 2023-05-31 18:05:20



Hey there! Are you ready to dive into the dynamic world of web development? As a fullstack programmer, I've embarked on an exhilarating journey filled with exciting challenges and endless possibilities. In this post, I'll take you on a guided tour through the captivating realm of fullstack development, where we'll explore the ins and outs of crafting remarkable web applications.

Let's kick things off by unraveling the foundation of fullstack programming. We'll delve into the enchanting trio of HTML, CSS, and JavaScript, the building blocks of captivating user interfaces that leave users in awe. Brace yourself for an adventure as we journey through popular frameworks like React, Angular, and Vue.js, empowering us to create dynamic and engaging web experiences.

But wait, that's just the tip of the iceberg! On our expedition, we'll venture into the realms of server-side programming, where languages like Node.js, Python, and Ruby come to life, infusing functionality and logic into our web applications. We'll also discover the power of databases, from trusty old relational databases like MySQL and PostgreSQL to the fascinating world of NoSQL databases like MongoDB and Firebase.

Oh, and let's not forget about the secret behind seamless communication in the digital universe – APIs! We'll unravel the mysteries of RESTful APIs, GraphQL, and the art of integrating third-party APIs into our projects. Trust me, it's a game-changer!

Of course, as any adventurer knows, challenges lie ahead. We'll explore the art of maintaining code quality, optimizing performance, and safeguarding our applications from the forces of evil. I'll share invaluable insights, best practices, and insider tips to help you conquer these challenges like a true programming hero.

So, whether you're a coding newbie or an experienced developer seeking new frontiers, join me on this exhilarating journey into the vast world of fullstack development. Together, we'll uncover hidden treasures, acquire new skills, and embrace the ever-evolving landscape of web development. Get ready to unleash your creativity, ignite your passion for programming, and unlock a world of endless opportunities!
Courious towards tech world
Tags: webdev, javascript, beginners, programming
Published: 2023-05-31 17:45:41


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdjp7cv2eg3loxml1sk3.jpeg)Hii everone my name is Shivam Roy I'm curious to learn tech stack and contribute to community as well so today is I'm going to path of devlopmet world as we call hello world.
Final Steps in Python: The Fine Art of File Handling
Tags: beginners, programming, tutorial, python
Published: 2023-05-31 17:34:57

Welcome back, Pythonauts! We’ve danced with data structures, mingled with modules, and lounged with libraries. Now, it's time to complete our Python adventure with a deep dive into file handling. Think of it as organizing your digital filing cabinet, but with a lot less paper cuts.

## 1. Opening Files - Knock, Knock

To work with a file, first, we need to open it. This is like knocking on a friend’s door before you walk in (always a good idea). In Python, we use the `open()` function to do this:

```python
file = open("example.txt")
```

Just like that, you’ve opened a file. Remember to replace "example.txt" with your actual file name. Otherwise, you’ll be knocking on a non-existent door.

## 2. Reading Files - Peeking Inside

Once you've opened the file, you might want to read its contents. This is like peeking inside your friend's house (with permission, of course). Here's how you do it:

```python
print(file.read())
```

Congratulations! You’ve just read your first file. Yes, you can put "Python File Detective" on your resume.

## 3. Writing Files - Leaving Messages

Sometimes, you don’t just want to read a file, you want to write something in it. This is like leaving a friendly note for your friend. Here's how you do it:

```python
file = open("example.txt", "w")
file.write("Hello, Python!")
file.close()
```

Congratulations, you just wrote your first message to a file! It’s kind of like sending a letter, but way faster.

## The End of the Beginning

And with that, we've come to the end of our Python beginner's guide. But don't worry - this isn't the end of your Python adventure, far from it! It’s just the beginning. There's so much more to learn and explore.

Remember, the best way to learn Python is to use Python. So, take your newfound knowledge and build something amazing. Make mistakes, solve problems, and have fun. After all, coding isn't just a skill, it's an adventure.

## Farewell, for Now…

It's been a pleasure guiding you through the Python wilderness. I hope you've enjoyed the journey as much as I have. Remember, once a Pythonaut, always a Pythonaut.

Now go forth, conquer the coding world, and remember to keep having fun along the way. Because at the end of the day, coding is just like life, a grand adventure, full of surprises and learning opportunities.

---

**Did you find this guide useful? Share it with your fellow Pythonauts, leave a comment, and subscribe for more coding adventures!**

> P.S. No Pythonauts or files were harmed in the making of this guide. And remember, always close files you've opened. It's the polite thing to do.

The fun doesn't end here. I have loads more humor, quirkiness, and good times waiting for you over on my YouTube channel. You won't want to miss it, trust me. Click [PAIton and Crossovers](https://www.youtube.com/channel/UCzUBm8oODJRZCHYVQtArgyA?sub_confirmation=1) to check it out and continue the fun journey with me.