teleren/devto huggingface dataset:
Using Panic's Nova.app for Elixir and Phoenix Development
Tags: elixir, phoenix, nova, development
Published: 2023-01-22 11:48:56

## Hello everyone,

a few weeks a go i started to learn [Elixir](https://elixir-lang.org) and [Phoenix Framework](https://phoenixframework.org).

At that time i was also experimenting with Panic's [Nova.app](https://nova.app) and thought, "well, let's give this a try, even this Techstack is sadly not handled as a first citizen".

I am still using _The native Mac code editor
that's fast and amazing_ but your dev life is better with some extensions.

### You want to use at least those two Elixir extensions

- [Nova Elixir](https://extensions.panic.com/extensions/rustypatchedsoftware/rustypatchedsoftware.Elixir/)

![The Nova Elixir extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teumjl7c4k016iz81y8g.png)

- [Elixir LS](https://extensions.panic.com/extensions/raulchedrese/raulchedrese.elixir-ls/)

![The Nova Elixir Language Server extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyzmfpx6z3lbnzo5bpp4.png)

You can install these extensions via the Extension menu, or via the Shortcut `Shift+Apple+2` and use the Searchbar to find the extension.

### One last tip!

If you work with `.heex` templates, change the syntax to `HTML (HEEx)` for proper syntax highlighting. And you also get TailwindCSS support as bonus, if you have the Extension installed.


![Choose `.heex` for syntax highlighting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/142jqeqo1276fkuqmwkh.png)

Thanks for reading!
Postgres and Redis container services for e2e tests in GitHub actions
Tags: githubactions, postgres, redis
Published: 2023-01-22 11:46:10

---
title: Postgres and Redis container services for e2e tests in GitHub actions
published: true
tags: ['githubactions', 'postgres', 'redis']
canonical_url: https://sevic.dev/notes/postgres-redis-github-actions/
---

End-to-end tests should use a real database connection, and provisioning container service for the Postgres database can be automated using [GitHub actions](https://sevic.dev/notes/github-actions-101/). The environment variable for the connection string for the newly created database can be set in the step for running e2e tests. The same goes for the Redis instance.

```yml
# ...
jobs:
  build:
    # Container must run in Linux-based operating systems
    runs-on: ubuntu-latest
    # Image from Docker hub
    container: node:20.9.0-alpine3.17
    # ...
    strategy:
      matrix:
        # ...
        database-name:
          - e2e-testing-db
        database-user:
          - username
        database-password:
          - password
        database-host:
          - postgres
        database-port:
          - 5432
        redis-host:
          - redis
        redis-port:
          - 6379

    services:
      postgres:
        image: postgres:latest
        env:
          POSTGRES_DB: ${{ matrix.database-name }}
          POSTGRES_USER: ${{ matrix.database-user }}
          POSTGRES_PASSWORD: ${{ matrix.database-password }}
        ports:
          - ${{ matrix.database-port }}:${{ matrix.database-port }}
        # Set health checks to wait until postgres has started
        options: --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

      redis:
        image: redis
        # Set health checks to wait until redis has started
        options: >-
          --health-cmd "redis-cli ping"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      # ...
      - run: npm run test:e2e
        env:
          DATABASE_URL: postgres://${{ matrix.database-user }}:${{ matrix.database-password }}@${{ matrix.database-host }}:${{ matrix.database-port }}/${{ matrix.database-name }}
          REDIS_URL: redis://${{ matrix.redis-host }}:${{ matrix.redis-port }}
      # ...
```

### Further learning

- [GitHub actions 101](https://sevic.dev/notes/github-actions-101/)
Got a personal a11y-related site? Want to join a webring?
Tags: a11y
Published: 2023-01-22 11:30:47

---
title: Got a personal a11y-related site? Want to join a webring?
published: true
description: 
tags: a11y
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-22 11:22 +0000
---
You might not be old enough to remember webrings. If you do, great! If you don't, great! Now's your chance to learn some history that might be making a tiny bit of a comeback.

Anyhoo.

I stumbled on an accessibility-focussed webring that might interest some people here.

> [The] webring is focused on people.
> [It] is not interested in listing accessibility companies and professional organizations.
> [...]
> It provides a way for people to discover and learn from each other following the fracturing of Twitter. 

[a11y-webring](https://a11y-webring.club/)
01: Build Tech For A Startup
Published: 2023-01-22 11:20:01

Not a real one though. For my first project of 2023, I will imagine a fake startup that builds a certain product, and build their whole infra from the ground up.

I'll start with a micro-service backend and deploy everything to K8S clusters, in addition to supporting services such as build systems, databases, security, metrics, logging, tracing and alerting.

My primary tools will be Github, Spring and AWS. I'll update with more as I progress.
Best tips to have productive coding day
Tags: programming, webdev, productivity, career
Published: 2023-01-22 11:05:46

Having a productive coding day can be a challenging task, especially when you're dealing with tight deadlines and complex projects. However, by following a few simple tips and using the right tools, you can boost your productivity and get more done in less time.

One of the most important things you can do to have a productive coding day is to set clear goals. Before you start coding, decide what you want to accomplish and make a list of the tasks you need to complete. This will help you stay focused and avoid wasting time on tasks that aren't a priority. Having a clear understanding of what you need to accomplish will also help you measure your progress and stay motivated throughout the day.

Using an integrated development environment (IDE) can also be a big help when it comes to boosting your productivity. An IDE is a software application that provides a range of tools for coding, debugging, and testing. Using an IDE can help you write code more efficiently, catch errors before they become problems, and navigate your code more easily. Some popular IDEs include Visual Studio, Eclipse, and PyCharm.

Another important tip for having a productive coding day is to take breaks. It's easy to get caught up in your work and lose track of time, but it's important to step away from your computer and rest your eyes and mind. Taking breaks every hour or so to stretch, get some fresh air, or grab a snack can help you recharge and come back to your work with renewed energy.

Staying organized is also crucial for having a productive coding day. Use a version control system (e.g., Git) to keep track of your code, and use comments and clear naming conventions to make your code easy to understand. Some of my favorite Visual studio code (VSCODE) tools /extensions to boost your productivity are ( Tab nine , Auto Rename Tag , live server ,prettier , etc.). This will help you avoid confusion and make it easier to come back to your code later.

Finally, collaborating with others can also help you be more productive. If you're working on a team, it can be helpful to discuss ideas and share code with your coworkers. This can help you solve problems more quickly and improve the overall quality of your work.

In conclusion, having a productive coding day requires a combination of planning, focus, and the use of the right tools. By setting clear goals you can boost your productivity and get more done in less time.
Set up Multi-language with vue-i18n vue.js Package using Laravel Localization
Tags: vue, laravel, language, package
Published: 2023-01-22 10:28:43

Vue-i18n is a popular internationalization (i18n) library for Vue.js that can be used in a Laravel project to handle localization. Here are the basic steps to set up localization with vue-i18n in a Laravel project:

**1. Install the vue-i18n package using npm or yarn:**

> NPM
`npm install vue-i18n@8`

> Yarn
`yarn add vue-i18n@8`

**2. When using with a module system, you must explicitly install the vue-i18n via Vue.use():**

> Add your this to your main app.js file
 
`import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
  en: enMessages,
  bd: bdMessages,
};`

`const i18n = new VueI18n({
  locale: "en", // set locale
  messages, // set locale messages
});`

`import { enMessages } from "./constants/en";
import { bdMessages } from "./constants/bd";`

`const app = new Vue({
  i18n, // add this in you code
});`

**3. create a folder in resources/js folder and name it "constants" and make a file in this constant folder en.js and bd.js**

**write your keyword for english in en.js file**

`export const enMessages = {
    Language: "Language",
    Candidate_Information: "Candidate Information",
    message: {
        hello: 'hello world'
    }
}`

**Write your keyword for Bangla or another language keyword in bd.js file**

`export const bdMessages = {
    Language: "ভাষা",
    Candidate_Information: "আবেদনকারীর তথ্য",
    message: {
        hello: 'হ্যালো পৃথিবী'
    }
}`

**4. Make a toogle switch for change language.
First of all we need to install toggle-button.**

> install step 1:

`npm install vue-js-toggle-button --save`

> Import plugin

`import { ToggleButton } from 'vue-js-toggle-button'`
`Vue.component('ToggleButton', ToggleButton)`

> Create toogle button

`<toggle-button
:width="75"
:height="25"
:color="{unchecked: '#198754', checked: 'rgb(10,88,202)'}"
:font-size="12"
:show-labels="true"
:rounded="true"
@change="changeLanguage"
:labels="{checked: 'বাংলা', unchecked: 'English'}"
/>`

**5. Create a method for change the language**

`changeLanguage();
{
  if (this.$i18n.locale === "en") {
    localStorage.setItem("locale", "bd");
    this.$i18n.locale = "bd";
  } else {
    localStorage.setItem("locale", "en");
    this.$i18n.locale = "en";
  }
}`


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ycpxl09yn80k83g3n3i.png)
Effective way to solve Promise Concurrency in Javascript
Tags: javascript, promise, errors, allsettled
Published: 2023-01-22 10:28:24

---
title: Effective way to solve Promise Concurrency in Javascript
published: true
description: Introducing Promise.allSettled()
tags: javascript, promise, errorhandling, allsettled
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnm56y9w7y8y8dhu7jfm.jpg
# published_at: 2023-01-22 02:37 +0000
---

As a web developer, sometimes I ran into situations where I need to make concurrent API calls and my go to solution was [Promise.all()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)

yes, It solves the problem. But most of the developers do not know(or don't care?) about the problem it comes with.. "Error handling"

**Okay, What's the Problem?**

`Promise.all()` takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises fulfill, with an array of the fulfillment values. It rejects when any of the input's promises rejects, with this first rejection reason.

Here's an example code
```
const user = await fetchUser();
const posts = await fetchPosts();
```

above two API's are independent to each other. And to optimize the performance, we can call them concurrently

```
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
```

Awesome. It looks good now. The next step we need to take care of while working with Asynchronous code is "Error Handling"

let's catch the errors..

```
try {
    const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
} catch (e) {
    // Handle the error
    console.log(`Something went wrong: ${e}`)
}
```

even though it looks good, there's a big problem here. The returned promise rejects when any of the input's promises rejects.. meaning If both the API calls fail,  we can only be able to catch the first rejection reason here..

how to fix this? 🤔

The answer is [Promise.allSettled()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)

The Promise.allSettled() takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises settle, with an array of objects that describe the outcome of each promise.

```
const [user, posts] = await Promise.allSettled([fetchUser(), fetchPosts()]);

if(user.status === "rejected") {
    // handle user error
}

if(posts.status === "rejected") {
    // handle posts error
}
```

Bang!🎉 It perfectly serves our needs.

Here are the key takeways 📝:
- `Promise.all()` will reject as soon as one of the Promises in the array rejects.
- `Promise.allSettled()` will resolve once all Promises in the array have either resolved or rejected.



If you found this useful, don't forget to follow me for more JS stuff. Cheers! 🥂
All About AWS AI & ML Scholarship Program
Tags: aws, ai, datascience
Published: 2023-01-22 10:21:01

Ever wanted a well-structured course where you can learn about Machine Learning and Artificial Intelligence from scratch to an advance level?

Your search is over because AWS is providing such an opportunity for students where they can learn about machine learning foundations. After successfully completing the foundation course on the AWS DeepRacer website you can have access to the Udacity Nanodegree "AI Programming with Python" where you can learn the following concepts in detail:

1. Python 
2. NumPy
3. Pandas
4. Matplotlib
5. PyTorch
6. Linear Algebra
7. Calculus Essentials 
8. Foundations for building your own neural network



## How To Avail This Opportunity?

It consists of following steps:

**Step 1:** 
Sign up for [AWS DeepRacer Student](https://aws.amazon.com/deepracer/student/)

**Step 2:** 
Opt into the AWS AI & ML Scholarship program by starting learning. You will find two learning resources on Introduction to Machine Learning and Reinforcement Learning. You have to complete both.

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

**Step 3:** 
After completing the 20 hours of free learning take the quiz. You need to Obtain a score of 80% or higher on all quizzes related to AWS DeepRacer Student while gaining knowledge of the basic concepts of machine learning.

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

**Step 4:** 
Once you passed the quiz, you will get a one-time code to apply for **[AI programming With Python](https://www.udacity.com/course/ai-programming-python-nanodegree--nd089)** Nanodegree

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

**Step 5:** 
Submit your application which is starting from February 1, 2023 on Udacity using a unique code you’ll get once you complete the prerequisites.

## What's Next?
Once you completed all the steps, you will receive a notification of the selection decision via email on June 12, 2023. Scholarship recipients will have full access to the entirety of their Nanodegree content on June 14, 2023.

**What If Get a Scholarship?**
If you are one of the lucky folks who will get the scholarship, it is time to get prepare for the onboarding. In the email, all the necessary information will be shared with you.

You will have access to a dedicated Slack Channel where you will find yourself among mentors and like-minded students who are always there to help and support you. There will be a connected session every week where the instructor will teach all the concepts in the nanodegree live. So that if you have any confusion about the content or topic of Nanodegree you can ask it from your instructor in the virtual connect session.

---
Get Data From Store For RTK Queries
Tags: redux, webdev, react, reactnative
Published: 2023-01-22 10:11:12

Redux at the beginning was a lot to phantom, at least for me. I hated Redux to be honest. All the folder structuring and whatnot.
I always hoped not to have to use it, until, the emergence of the redux toolkit, coupled with the RTK Query for making endpoint call.

Things have become more easier and productivity has increased.

Working with the RTK Query to make CRUD request is one of the best things to ever happen since invention of pizza😅.

Well one thing that turns out to be a blocker for most people I've met is accessing the redux state while making queries or mutation.

It can be tricky though as the documentation doesn't really do justice to it. So quickly I'll show you how to access let's say a stored access token from the redux state when accessing a protected API route.

**1. Creating A Token Slice**

```
import {createSlice} from '@reduxjs/toolkit'; 
 const initialState = { 
   auth: <any>{},
}; 
 const authSlice = createSlice({ 
   name: 'auth', 
   initialState, 
   reducers: { 
     setAuth: (state, action) => { 
       return {...state, auth: action.payload}; 
     }, 
     clearAuth: () => { 
       return {auth: {}}; 
     },
  }, 
 }); 
  
 const {reducer, actions} = authSlice; 
 export const { 
   setAuth, 
   clearAuth,} = actions; 
 export default reducer;
```

Here now we've created a slice that we can dispatch to store the response of a log in action by the user.

We can then proceed to - 
**2.  access it in our createApi query.**

```
  baseQuery: fetchBaseQuery({ 
     baseUrl, 
     prepareHeaders: (headers, {getState}) => { 
       const token = (getState() as RootState)?.auth?.auth?.token; 
       if (token) { 
         headers.set('Authorization', `Bearer ${token}`); 
       } 
       return headers; 
     },
```

Above we are using the prepareHeader parameter to access the redux state i.e. **getState** and we follow the chain till we hit our access token.

Adding this in the prepareHeader prop of rtk's createApi gives all our queries and mutations access to the token.

This method works, other than the regular use selector because our query or mutation logic is not going to be a component and this limits the use of React Hooks.

Let me know if this helps you.
Object-Oriented Programming: Unlocking the Power of Structured Code
Tags: programming, computerscience
Published: 2023-01-22 10:00:00

Object-oriented programming (OOP) is a programming paradigm that is used to structure and organize code in a way that makes it easier to understand, maintain, and scale. It is a popular programming approach that is used in a wide range of programming languages, including Java, C++, and Python. Understanding OOP is essential for any computer programmer or software developer.

---

## Why is this important?

Object-oriented programming is important because it allows for the creation of reusable and modular code. With OOP, code is organized into objects, which are self-contained units that have their own properties and methods. These objects can be reused and combined in different ways to create new programs, making it easier to maintain and scale code over time.

## How does this affect other computer science fields?

OOP also plays a key role in other computer science fields such as software engineering, artificial intelligence, and game development. In software engineering, OOP provides a structured approach for creating and maintaining large-scale software systems. In artificial intelligence, OOP is used to create intelligent agents that can interact with the environment. In game development, OOP is used to create reusable game objects and to organize game logic.

## What is it?

Object-oriented programming is a programming paradigm that is based on the concept of objects. An object is a self-contained unit that has its own properties and methods. These properties and methods are used to represent the characteristics and behavior of a real-world object. For example, in a game, a player object could have properties such as name, health, and score, and methods such as move and jump.

OOP also emphasizes on encapsulation, inheritance, and polymorphism which are the three main concepts of OOP. Encapsulation refers to the process of hiding the internal details of an object and exposing only the necessary information to the outside world. Inheritance refers to the ability of an object to inherit the properties and methods of a parent object. Polymorphism refers to the ability of an object to take on multiple forms, through inheritance or interfaces.

---

In conclusion, Object-oriented programming is a powerful and widely used programming paradigm that allows for the creation of reusable and modular code. Understanding OOP is essential for any computer programmer or software developer, as it provides a structured approach for creating and maintaining large-scale software systems. It also plays a crucial role in other computer science fields such as software engineering, artificial intelligence, and game development. OOP not only makes code easy to understand, maintain and scale, but also, it can be quite inspiring and motivating to know how to create complex systems with simple, modular, and reusable code.
Bfinject
Tags: bfinject, ios, apps, tools
Published: 2023-01-22 09:27:47

Bfinject is a programme that can be used to inject payloads into built executables on Windows and Linux. Not just iOS. However, iOS has a very distinct architectural and security approach. It is not a technology that would generally be utilised on that platform. 

To read about bfinject visit 
https://hecodesit.com/bfinject/
Git & GitHub Common Error
Tags: github, git, beginners, programming
Published: 2023-01-22 09:16:38

## GitHub ERROR SOLVE - GES


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



GES stands for GitHub Error Solve. This is an Open Source project dedicated to resolving any errors or issues that may arise while using GitHub. Our primary objective is to empower individuals to feel comfortable and confident using the platform by providing comprehensive solutions to common problems.


This website was created to help newbie users who want to use GitHub and git with joy but don't want to face the same error or issues. Here I added all the common errors you may face while using Git and GitHub. Feel free to check it out. Hope this website will help.


Tech Stack:

React, Vite, Tailwind


If you want to work on this project, you are very welcome.


Find your problem here by typing the error:

Live: https://github-error-solve.vercel.app
Repo: https://github.com/devvsakib/github-error-solve
I used to read social cues. Now I need to guess them.
Tags: writing, remotework, productivity, career
Published: 2023-01-22 09:04:53

I recently moved from working in an office to working remotely. And I did lots of mistakes.

Here are [the 14 dos and don'ts of remote work I learned the hard way.](https://unimind.team/remote-work-etiquette-14-dos-and-donts-you-absolutely-need-to-know-in-2023/)