teleren/devto huggingface dataset:
Unlock the Secrets to a Thriving Career in 2024 and Beyond!
Tags: remote, jobs, development, developers
Published: 2023-04-03 20:50:33

In today's rapidly evolving job market, you don't just want to keep up; you want to soar to new heights. So, get ready to dive into the exhilarating world of modern career skills that will set you on an unstoppable trajectory to success.

**Digital Literacy:**
Welcome to the digital era, where tech is king! Embrace the power of technology, from mastering fundamental computer skills to becoming a wizard in the realms of cutting-edge wonders like Artificial Intelligence and blockchain. These are the keys to unlocking the digital kingdom.

**Innovative Ingenuity:**
In a world where automation is taking the stage, creativity and fresh thinking are your shining armor. Stand out by igniting your capacity to spark original ideas and craft ingenious solutions that will make you a standout superstar in your field.

**Emotional Insight:**
In the dynamic and diverse workplaces of today, emotional intelligence isn't just a nice-to-have; it's an absolute necessity. Dive into the world of empathy, understanding, and emotional wisdom, as it's the cornerstone for harmonious and effective collaboration.

**Adaptability:**
Ladies and gentlemen, adaptability isn't just a skill; it's your golden ticket to the future. As the world shifts and changes at breakneck speed, you need to be the master of navigating through uncharted waters, conquering new challenges, and emerging as the hero of tomorrow's workplace.

**Data Analysis:**
In this data-driven age, you don't just analyze data; you harness its immense power. The ability to gather, dissect, and decode information isn't just an asset; it's your superpower! It's a universal key that unlocks the door to success in any industry you choose to conquer.

These aren't just skills; they are your secret weapons to future-proof your career in 2024 and beyond. As you sharpen these talents, you won't merely survive – you'll thrive in the ever-evolving job market, leaving your competition in the dust.

So, as you step into your future job interviews, remember you're not just a job seeker; you're a coding champion, armed with a formidable arsenal of skills to conquer the tech world! Your future is bright, and we wish you the best of luck on your thrilling journey.
***
Thank you for diving into this article with us; it's been a true delight to craft this experience for you. Until our next digital rendezvous, dear readers, keep shining and coding on!

❤️ Enjoyed the article? Your feedback fuels more content.
💬 Share your thoughts in a comment.
🔖 No time to read now? Well, Bookmark for later.
🔗 If it helped, pass it on, dude!
Resolving 'Must use import to load ES Module' error while using Sequelize ORM and ES6 syntax in Node.js"
Tags: node, es6, sequelize
Published: 2023-04-03 20:18:51

Recently, I attempted to set up a Node.js project using the Sequelize ORM and ES6 syntax. While creating migrations, I encountered an error stating "Must use import to load ES Module: /Users/[user_path]/project_name/src/migrations/[migration_name] require() of ES modules is not supported."

The error suggested three solutions:

- Rename the migration file to end with .cjs
- Use the import() function instead of require()
- Remove "type": "module" from the root directory's package.json

However, I was reluctant to use any of these solutions as they would have required extensive changes to my codebase. Instead, I turned to the web for more information and found a simple solution.

The fix involved creating a new package.json file in the migrations folder with the following code:

```javascript
{
  "type": "commonjs"
}
```
This change allowed my code to run successfully. If you have any other suggestions for resolving this issue, please let me know.
Como melhorar a legibilidade do código
Tags: braziliandevs
Published: 2023-04-03 19:53:17

Como desenvolvedores, escrevemos código para expressar nossas ideias e soluções de maneira lógica e clara. No entanto, muitas vezes nos deparamos com o problema de que o nosso código pode ser difícil de ler e entender, tanto para nós mesmos quanto para outros desenvolvedores. Felizmente, há algumas práticas simples que podemos adotar para melhorar a legibilidade do nosso código.
    

- Escolha nomes descritivos para variáveis, funções e classes: Nomes claros e concisos para as coisas que estamos definindo em nosso código tornam muito mais fácil entender o que está acontecendo em cada linha.

- Mantenha uma estrutura consistente: Adotar um padrão consistente para a organização do código (como a indentação, espaçamento e nomenclatura) faz com que o código seja mais fácil de seguir e entender.

- Quebre o código em blocos lógicos: Isso ajuda a dividir o código em partes menores e mais gerenciáveis. Por exemplo, se tivermos uma função grande, podemos dividi-la em várias funções menores para facilitar o entendimento.

- Comente o código: Adicionar comentários explicando o que o código está fazendo (e por que está fazendo isso) pode ser extremamente útil para outras pessoas que podem estar lendo nosso código.

- Simplifique a lógica: Às vezes, podemos nos perder em estruturas complicadas ou condições if/else confusas. Em vez disso, podemos simplificar a lógica tanto quanto possível para tornar o código mais fácil de entender.

- Use espaços em branco: Adicionar espaços em branco entre as linhas e blocos de código pode ajudar a tornar o código mais legível.

- Evite repetição: Usar loops e funções para evitar repetição de código pode tornar o código mais conciso e fácil de entender.

- Mantenha o código atualizado: À medida que o código evolui e muda, é importante manter tudo atualizado e limpo. Isso pode evitar problemas de legibilidade no futuro.

Melhorar a legibilidade do código não só torna a vida dos outros desenvolvedores mais fácil, mas também torna nosso próprio trabalho mais eficiente e menos propenso a erros. Ao seguir essas práticas simples, podemos escrever código que é fácil de ler, entender e manter.
How NLP works under the hood?
Published: 2023-04-03 19:46:29

Natural Language Processing (NLP) is a subfield of artificial intelligence that deals with the interaction between computers and human language. It involves enabling computers to read, understand, and generate human language in a way that is both meaningful and useful.

## 1. Tokenization

Tokenization is the process of breaking down text into individual words os subwords, called tokens. In some NLP models, this tokens can be even minor, they are called "subword units" such as:
- character n-grams
- byte pair encodings

The goal of tokenization is to create a standardized representation of text that can be processed by the model. For example, if you have syllabs in common between a word, they can use the same token.

## 2. Embedding

Once the text is tokenized , the tokens are transformed into numeric vectors called embeddings. This transformation is made with linear algebra operations, like multiplicaton and addition of matrices. These embeddings represent the meaning of the words and subwords.

## 3. Contextualization

In many NLP tasks, it is essential to understand the context in which words are used. Modern NLP models like GPT-4 employ **Transformer architectures** to do this. Transformers use self-attention mechanisms to model the relationships between words in a sentence, allowing the model to capture context-dependent meanings and long-range dependencies.

## 4. Language modelling and fine-tuning

**Language modeling is a fundamental task in NLP, where the objective is to predict the next word in a sequence, given the previous words**. It involves learning the probabilities of word sequences and helps capture the syntax and semantics of a language. Pre-trained language models like GPT-4 are trained on massive amounts of text data using unsupervised learning.

The training process typically involves a masked language modeling objective, where a portion of the input tokens are masked, and the model must predict the masked tokens based on the context provided by the unmasked tokens. **This unsupervised pre-training allows the model to learn general language features and generate meaningful embeddings for tokens in various contexts.**

**Once the pre-training is complete, the model can be fine-tuned for specific tasks, such as machine translation, sentiment analysis, or text classification**, using smaller labeled datasets. During fine-tuning, the model is trained using supervised learning, where the input-output pairs are provided by the labeled dataset. **Fine-tuning allows the model to adapt its pre-trained knowledge to the specific task**.

## 5. Decoding

Decoding is the process of generating an output sequence or making predictions using the trained model. **In the context of NLP, decoding typically involves converting the model's output probabilities into actual words or tokens.**
📺 Video React Hooks
Tags: video, javascript, videojs, react
Published: 2023-04-03 19:22:04

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


Video-react-hooks represents video events in the form of React hooks. By encapsulating the video event logic in hooks. These hooks can then be easily used across the application in components that are affected by the video events. This approach not only simplifies the code but also makes it more readable and maintainable.

Each hook built on the concept of React hooks, and each hook is based on a specific video event. These hooks are executed when the corresponding event occurs during video playback. Under the hood video-react-hooks also used React hooks.

[Check Live Example](https://codesandbox.io/s/video-react-hooks-n9bu3d)

[NPM](https://www.npmjs.com/package/video-react-hooks)

Simple usage 

```javascript
import { useReadyEffect, usePlayingEffect, usePauseEffect } from 'video-react-hooks';

export const VideoComponent = () => {

  useReadyEffect(() => {
    //executed when video is ready
  }, []);

  usePlayingEffect(() => {
    //executed when video is playing
  }, []);

  usePauseEffect(() => {
    //executed when video is paused
  }, []);

  return (//jsx);
}
```
February Code Challenge COMPLETE!
Tags: webdev, challenge, astro, tailwindcss
Published: 2023-04-03 19:13:00

It's already April, but better late than never in updating y'all on the results of my February code challenge!

On February 28th, I had 25 of the 28 websites completed, then finished the last three over the next few days.

This challenge has been one of the best and worst ideas I've ever had. It forced me to quickly generate new websites (some I want to evolve into larger projects, others I can't stand to look at). Near the end, it became very energy-draining, to the point where I had a hard time focusing on other tasks I needed to finish during the day.

After the challenge concluded, I ended up with mild coding PTSD and took a break from programming for a few weeks.

_Note to self for future code challenges:_
- _don't include weekends_
- _don't set challenges that take 2-4 hours every day_

## The 28 Websites

- [Tom Sawyer (PD Books)](https://pdbooks.createfulpurpose.com/)
- [UI Revamp: Embassy University](https://embassyuniversity.vercel.app/)
- [Spy School Website](https://spyschool.vercel.app/) (one of my favorites!)
- [Personal: Favorite Quotes](https://quotes.cathzchen.com)
- [Magic Candy Shop](https://magiccandyshop.vercel.app)
- [UI Revamp: OJ Simpson Trial Hub](https://ojsimpsoncnn.vercel.app)
- [Personal: Catherine's World](https://world.cathzchen.com) (THE favorite!)
- [Fake Profile Generator](https://fakerprofile.vercel.app)
- [UI Revamp: TACO](https://tacorevamp.vercel.app)
- [Happy Fridge](https://happyfridge.vercel.app)
- [Personal: Bucket List](https://bucketlist.cathzchen.com)
- [House](https://house.cathzchen.com) (no idea what this was supposed to be)
- [Painful Website](https://painful.vercel.app/)
- [Template: Severe News](https://severenews.vercel.app)
- [Template: Samira (LoL)](https://template-samira.vercel.app/)
- Catherine's Logs
- [Space Job Board](https://spacejobs.vercel.app)
- [Browser Start Page](https://browser-start-page.vercel.app)
- [Template: Lux (LoL)](https://template-lux.vercel.app)
- [Template: Animal-Themed Website](https://animal-template.vercel.app)
- [Personal: Portfolio](https://portfolio.cathzchen.com)
- [Sleep](https://sleepy.vercel.app) (I was sleepy)
- [Template: Ipsum Blog](https://template-blog-ipsum.vercel.app)
- [Template: Morgana (LoL)](https://template-morgana.vercel.app)
- [Personal: Favorite Songs](https://songs.cathzchen.com)
- [Cat Advent Calendar](https://cat-advent-calendar.vercel.app)
- [Template: Lulu (LoL)](https://template-lulu.vercel.app/)
- [Card Examples](https://card-examples.vercel.app)
Wagmi: React Hooks for Ethereum
Tags: web3, javascript, webdev, blockchain
Published: 2023-04-03 18:49:18

Wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet" display ENS and balance information, sign messages, interact with contracts, and much more - all with caching, request deduplication, and persistence.

## Installation
You can install wagmi.sh with these codes.

```
npm i wagmi ethers
```
or

```
yarn add wagmi ethers
```

## Quick Start
You can start with importing wagmi.sh.

```
import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultProvider } from 'ethers'

const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider(),
})

function App() {
  return (
    <WagmiConfig client={client}>
      <Profile />
    </WagmiConfig>
  )
}
```
Then you can connect wallet with these hook methods. Also more example on website and documantation.

```
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function Profile() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()

  if (isConnected)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}
```

In this example, we create a wagmi `Client` and pass it to the `WagmiConfig` React Context. The client is set up to use the ethers Default Provider and automatically connect to previously connected wallets.
Next, we use the `useConnect` hook to connect an injected wallet (e.g. MetaMask) to the app. Finally, we show the connected account's address with `useAccount` and allow them to disconnect with `useDisconnect`.

## Features
Wagmi supports all these features out-of-the-box:

- 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
- Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
- Caching, request deduplication, multicall, batching, and persistence
- Auto-refresh data on wallet, block, and network changes
- TypeScript ready
- Test suite running against forked Ethereum network

…and a lot more.

## Summary
Wagmi is so easy to use for react. Also it solves a lot of problems and make everything easier for developer. You can read [documantation](https://wagmi.sh/core/getting-started). Also you can check more [examples](https://wagmi.sh/examples/connect-wallet).

See you in next article. Also you can follow me on [LinkedIn](https://www.linkedin.com/in/hasretozkan/).
Self doubt is the killer of dreams
Tags: webdev, beginners
Published: 2023-04-03 18:45:01

In my last post I said I was comfortable working with Web Development basic technologies (HTML, CSS, JavaScript) and that statement is still true but I feel frustrated because my imagination for design isn't the best. If I see a design I can replicate it to the best of my ability and it would turn out just fine. My problem is that I feel like if I didn't come up with the design idea then I didn't create the project. I've completed multiple projects by seeing a design and recreating it with added functionality but I still don't feel like my skills are good enough to land a job. I started learning react and tailwind, so far building component based projects has made my life a lot easier and I have more confidence in my ability to code. I've also learned npm and a bit of git. I am not sure if this is enough to achieve my goal but I guess I will never know unless I try. If you're reading this wish me luck.
Instantly generate GraphQL documentation with doQLize.
Tags: graphql, webdev, devops, saas
Published: 2023-04-03 18:40:33

GraphQL is quickly becoming one of the most popular query languages for APIs due to its flexibility and efficiency. However, documenting GraphQL APIs can be a tedious and time-consuming process. That's where [doQLize](https://www.doqlize.com) comes in.

![doqlize api example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8m1e9pr5alx4ln6qldm.png)

[doQLize](https://www.doqlize.com) is a SaaS tool that instantly generates readable GraphQL documentation. With [doQLize](https://www.doqlize.com), developers can create accurate and up-to-date documentation for their GraphQL APIs without any manual work.

The tool works by analyzing the GraphQL schema and generating detailed documentation that is easy to read and understand. It provides a clear and concise overview of the available queries, mutations, subscriptions, and types. In addition, [doQLize](https://www.doqlize.com) also generates examples of how to use each query, mutation, and subscription, making it easier for developers to integrate their APIs.

One of the biggest advantages of [doQLize](https://www.doqlize.com) is its ability to organize your documentation similar to how a REST API would be documented. Instead of organizing by query, mutation, and subscription, [doQLize](https://www.doqlize.com) organizes by action and categories so that developers can easily understand your API.

Some upcoming features include

- Fully custom domains
- Hide/Show specific graphql sections
- CI/CD pipeline
- Viewing metrics and insights
- Custom branding
- "Search Everything"
- No api size limit

With doQLize, developers can save time and focus on what really matters - building great products.

doQLize is currently in its MVP state and is free to use. We are looking for interest and feedback and hope you give it a try!
No-code Editor for Domain Models
Tags: javascript, webdev, react, opensource
Published: 2023-04-03 18:32:01

[This article](https://surveyjs.io/documentation/no-code-editor-for-domain-models) describes how SurveyJS can help streamline the form creation process in your team. The proposed solution allows you to generate client-side form code based on server-side domain models, and vice versa. Content creators who do not possess coding skills can edit the forms in a visual designer and deliver them to the end users without the need to involve the development team.
*CodeNewbie* Meme Monday
Tags: discuss, codenewbie, beginners, programming
Published: 2023-04-03 18:18:58

_MEME MONDAY ON CODENEWBIE? AGAIN?!_

Hey y'all, happy Monday! As always, this is a humble call for NEWBIE-related memes! Drop your beginner-related, job-related, starting-a-new-career-related memes down below!! We would love to see em, welcome to CodeNewbie!
Common Errors Compiling New Flutter Apps on MacOS Catalina
Tags: flutter, ios, macos
Published: 2023-04-03 18:09:50

If you followed my [previous](flutter-macos-catalina.md) [two](ios-debug-catalina.md) guides, you can now compile Flutter apps on MacOS Catalina (despite Flutter restrictions that require you to upgrade your MacOS version). However, you may still run into a few compilation errors.

## pod not found

Sometimes you will encounter a build error in XCode complaining about pods. You have to go to the `ios` folder in your project and run `pod install` in the terminal.

## Error when reading 'lib/main.dart'

If your flutter entry point is not main.dart (such as using project templates that uses different flavor names), you will need to point to the entry point file in "Build Settings". Under "Build Settings" there is "FLUTTER_TARGET" which should point to your entry point file such as `lib/main_development.dart`.

## Property 'xxx' not found on object of type 'XXX *'

Since XCode 12.4 comes with iOS 14.4 SDK, code written for the newer SDK assuming availability of iOS 15 APIs will fail to compile. The errors look like the following:

```
Semantic Issue (Xcode): Property 'interruptionLevel' not found on object of type 'UNMutableNotificationContent *'
{Source File Path}:{Line Number}
```

If you look into the offending source file, you'll likely see usage of library API introduced in iOS 15. The call should already be wrapped with `if (@available(iOS 15, tvOS 15, *))`, guarding it against runtime errors should the application run on a lower iOS version, but the compilation error still happens if you compile the code with iOS 14 SDK.

Despite my efforts of copying SDK from a new XCode build, I cannot get XCode 12.4 to recognize newer iOS SDK. (If anyone know how, please let me know in the comments)

The workaround is to simply comment out the whole block inside `if (@available(iOS 15...))` block. This means regardless of whether iOS 15 is available, we will not execute code for iOS 15. This should be fine for testing purposes. But I reiterate my recommendation to use a virtual machine to build the app properly for your production builds.
normal video to svg Video, ultimate resolution
Tags: video, web3, programming, opensource
Published: 2023-04-03 18:00:38

I have a idea, we need video of 2k, 4k, 8k. there is always a resolution problem. 
We know, svg image is vector, we can zoom ultimately. and also we know video made with multiple frames. So if we convert specific image to svg image, then make a video out of it. then imagine this video wont get blurry, it can be zoom at it's ultimate. how about this idea. can it be possible?
Dart for backend: pros and cons
Tags: dart, flutter, backend, beginners
Published: 2023-04-03 17:54:58

Dart is an object-oriented, class-based, garbage-collected programming language developed by Google. Initially designed for client-side development, Dart has evolved to become a full-stack language that can run on the backend as well. This short article explores the benefits and drawbacks of using Dart for backend development.

Advantages of using Dart for Backend Development:

- Single Language for Full-Stack Development (specially when using Flutter for front-end)
- Speed and Performance
- Scalability
- Built-in Support for Asynchronous Programming
- Strong Typing

Disadvantages of using Dart for Backend Development:

- Lack of Third-Party Libraries
- Limited Community Support
- Lack of Maturity

Those are very important things to consider, specially if you   're new to Dart and want a fast solution to build and deliver your project as it is likely that you will have to build some third-party libraries yourself.

Dart is a great option for backend development, particularly for developers who already use it for front-end development. Its speed, scalability, and support for asynchronous programming make it an attractive choice. However, it's important to consider the potential drawbacks, such as the limited third-party library support and smaller community. Despite these challenges, Google's continued investment in Dart suggests that it will continue to grow and evolve over time.

It is relatively easy to learn Dart so if time is not against you, then it is definitely worth a try.