teleren/devto huggingface dataset:
7 steps that can help you stand out when applying for a remote job
Tags: devjournal, programming, beginners, career
Published: 2023-02-22 02:35:00

Finding a remote job is quite challenging. 

It took me 1.5 years to land my first remote job interview. So be persistent and keep making consistent efforts.

7 steps that can help you stand out when applying for a remote job:

## 1. Write a good and customized cover letter:
Many job applicants apply using a generic cover letter. Crafting a unique cover letter for each job takes time, but it can help you stand out among the crowd.

## 2. Have a tailored resume.
Taking steps to customize your resume for each opening is still the best way to stand out in eyes of a recruiter.  Make sure you are highlighting points that the recruiter cares about in the job application.

## 3. Bookmark all the remote job portals and companies' job sites that you wish to join:
Remote job portals should be equivalent to your daily newsletter. Subscribe to them and be on the constant lookout.

## 4. Engage with people working in those companies:
Build relationships with employees who are working in the companies you wish to join.  Showcase you are good at your work and a nice person to hang out with.

## 5. Ask for a referral:
Whenever there's a job opening, ask for a referral from the people who you were engaging with. Be humane about it. Don't ask anything without showcasing your skills. Make sure they are aware of your skill level so that they can vouch for you in the role.

## 6. Passively keep applying for jobs on bookmarked sites:
Don't look for a job only when you need it. Keep applying passively. The best time to find a remote job is when you don't need it.

## 7. Learn in public:
Understand what employers are looking for in the candidate for the job, and keep sharing whatever you are learning publicly so that recruiters are aware of what you are good at.

I hope these steps will help you land yours sooner.

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


Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more in DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
AppDev Week 8
Published: 2023-02-22 02:22:02

AppDev Week 8

N+1 problem - frequent requests to the database where you also call at the associates 

eager loading - pull database once to work with 

includes() method in the each do loop to note what to load

queries are where most of hte time improvements can be made 

bullet gem can give a warning for N+1 problems 

cache-ing - precomputing to save and show later 

<% cache “hello” do %>

<% end %>

need to be enabled by rails dev:cache

middle term in the cache statement is the cache key 
every time the key is changed, rails will update the cached 

in hte belong_to, you can update touch:true to use the parent object as the cache key

kaminari gem used for pagnetnation 

API Stuff

jbuilder 


json.set!(:hello, “Hello World!”)

or json.hello(“world”)


nested hashes 

json.hell(“world”) do

end
 React-native demo

View is like div 


yarn start --tunnel to start apps on expo
Unleashing the Power of Typescript's Mapped Types
Tags: typescript, programming, webdev
Published: 2023-02-22 01:19:46

As developers, we all love the power and flexibility that Typescript brings to our code. But did you know that Typescript's mapped types allow you to create dynamic types that change based on the values of your variables? In this post, I'm going to dive into this lesser-known Typescript feature and show you how it can help you write even more powerful and flexible code.

Mapped types allow you to create new types by transforming properties of an existing type. In essence, they're like a map function, but for types. For example, say you have an interface like this:

```typescript
interface MyInterface {
  foo: string;
  bar: number;
  baz: boolean;
}
```

You can use a mapped type to create a new type that transforms all the property types to `string`:

```typescript
type MyStringInterface = {
  [K in keyof MyInterface]: string;
}
```

This creates a new type called `MyStringInterface` that has the same properties as `MyInterface`, but with all the property types set to `string`. So if you have a variable of type `MyInterface`, you can assign it to a variable of type `MyStringInterface`:

```typescript
const myInterface: MyInterface = {
  foo: "hello",
  bar: 42,
  baz: true
};

const myStringInterface: MyStringInterface = myInterface;
```

This is a powerful feature that can save you a lot of time and effort. But what if you want to create a type that only transforms some of the properties, based on their values? That's where things get really interesting.

Say you have a list of properties that you want to transform to `string`:

```typescript
const propertiesToTransform = ["foo", "baz"] as const;
```

You can use a conditional type to create a new type that transforms only the properties in the list to `string`:

```typescript
type MyConditionalStringInterface = {
  [K in keyof MyInterface]: K extends typeof propertiesToTransform[number] ? string : MyInterface[K];
}
```

This creates a new type called `MyConditionalStringInterface` that has the same properties as `MyInterface`, but with only the properties in `propertiesToTransform` set to `string`.

```typescript
const myConditionalStringInterface: MyConditionalStringInterface = {
  foo: "hello",
  bar: 42,
  baz: true
};
```

This is just scratching the surface of what you can do with mapped types. You can use them to create types that depend on the values of your variables, types that filter out certain properties, and much more. With a little creativity, you can unleash the full power of Typescript's type system and write even more robust and flexible code.

So the next time you're working with Typescript, keep mapped types in mind. They might just be the key to unlocking the next level of your code.
Progressive Web Apps (PWAs)
Published: 2023-02-22 02:19:24

Progressive Web Apps (PWAs)은 웹사이트를 앱으로 전환하는 인기 있는 방법입니다. PWA는 최신 웹 기술을 사용하여 오프라인 기능, 푸시 알림, 사용자 홈 화면에 앱을 추가하는 기능 등 사용자에게 앱과 유사한 경험을 제공합니다. PWA를 사용하면 플랫폼별로 별도의 앱을 만들 필요 없이 데스크톱과 모바일 디바이스 모두에서 작동하는 단일 앱을 만들 수 있습니다. Angular framework and the Workbox library 등 PWA를 구축하는 데 사용할 수 있는 프레임워크와 도구가 많이 있습니다.

#### 1. 웹페이지의 루트 디렉터리에 다음 내용으로 manifest.json 파일을 생성합니다

```json
{
  "name": "My PWA",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "display": "standalone"
}
```
  * 이 파일에는 이름, 아이콘, 시작 URL, 배경 및 테마 색상, 표시 모드 등 PWA에 대한 메타데이터가 포함되어 있습니다.

#### 2. 웹페이지의 루트 디렉터리에 다음 내용으로 service-worker.js 파일을 만듭니다:
```javascript
const cacheName = 'my-pwa-cache';
const filesToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/icon.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
```
* 이 파일에는 앱의 asset을 캐싱하고 네트워크 요청을 처리하는 로직이 포함되어 있습니다. 사용자가 PWA를 설치하면 서비스 워커가 앱의 에셋을 캐시하여 오프라인에서 사용할 수 있도록 합니다.

#### 3. 웹페이지의 헤드 섹션에 다음 코드를 추가하여 manifest.json 파일을 로드하고 서비스 워커를 등록합니다:
```html
<link rel="manifest" href="/manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  }
</script>
```
* 이 코드는 브라우저에 manifest.json 파일을 로드하고 서비스 워커를 등록하도록 지시합니다.

#### 4. 웹페이지에 '홈 화면에 추가' 버튼을 추가하여 사용자에게 PWA를 설치하라는 메시지를 표시합니다:
```html
<button onclick="addToHomeScreen()">Add to Home screen</button>

<script>
function addToHomeScreen() {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(function(choiceResult) {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
  }
}
</script>
```
* 이 코드를 클릭하면 사용자에게 PWA를 설치하라는 메시지가 표시되는 버튼이 표시됩니다. 사용자가 메시지를 수락하면 PWA가 홈 화면에 추가됩니다.

여기까지입니다! 이 단계를 통해 웹페이지를 오프라인에서 설치하여 사용할 수 있는 PWA로 전환했습니다.

> 해당 내용은 ChatGPT와 DeepL을 이용해 작성된 글 입니다.
openGauss Glossary III
Published: 2023-02-22 02:18:54

K – O

KMC

Acronym for key management component.

KMS

Acronym for key management service.

KSF

Acronym for key store file.

logical replication

Data synchronization mode between primary and standby database nodes or between two databases. Different from physical replication which replays physical logs, logical replication transfers logical logs between two databases or synchronizes data through SQL statements in logical logs.

logical log

Logs recording database changes made through SQL statements. Generally, the changes are logged at the row level. Logical logs are different from physical logs that record changes of physical pages.

logical decoding

Logic decoding is a process of extracting all permanent changes in database tables into a clear and easy-to-understand format by decoding Xlogs.

logical replication slot

In a logical replication process, logic replication slots are used to prevent Xlogs from being reclaimed by the system or VACCUM. A logical replication slot in openGauss is an object that records logical decoding positions. It can be created, deleted, read, and pushed by invoking SQL functions.

MVCC

Acronym for multi-version concurrency control. It is a protocol that allows a tuple to have multiple versions, on which different query operations can be performed. One advantage is that read and write operations do not conflict.

NameNode

NameNode is the centerpiece of an HDFS, managing the namespace of the file system and client access to files.

OM

Acronym for operations management. It provides management interfaces and tools for routine maintenance and configuration management of the database.

client

A program that corresponds to a server and provides local services.

free space management

A mechanism for managing free space in a table. This mechanism enables the database system to record free space in each table and establish an easy-to-find data structure, accelerating operations (such as INSERT) performed on the free space.

junk tuple

A tuple that is deleted using the DELETE and UPDATE statements. When deleting a tuple, openGauss only marks the tuples that are to be cleared. The VACUUM thread will then periodically clear these junk tuples.

column

An equivalent concept of field. A database table consists of one or more columns.

logical node

Multiple logical nodes can be installed on the same physical node. A logical node is a database instance.

schema

Collection of database objects, including logical structures, such as tables, views, sequences, stored procedures, synonyms, indexes, and database links.

schema file

An SQL file that determines the database structure.
Social media for lead generation still does wonders!
Tags: webdev, beginners, programming, react
Published: 2023-02-22 02:13:41

Decided to commit to social media lead generation for just 2 days and spend $0 on ads. 🤩 This is what happens when you go all out on Facebook, Reddit, Twitter, etc. and then get 1000+ views and 70 signups! 🎉

https://codesmashapp.com

The trick is to talk to the right groups of people about the things they’re interested in.
For example, I’m building a No Code platform. This could be interesting to many people, but for different reasons, so you have to tailor your approach based on the group you’re talking to. In my case, developers will react positively to approach where I mention the tech I used to build the project. Bloggers on the other hand will be interested if I present my app as something that lets them start a custom blog in seconds rather than days.

In SEO and digital marketing circles, you go and mention how’s your experience with getting customers. Next most important thing is to find these interest groups. For example if you don’t have millions of friends on Facebook, don’t even bother posting on your wall feed. Rather find groups which have users who are interested in certain topics, tailor your approach based on that group’s interest and post there.

Also, make sure to choose as many hashtags as possible and Google which tags are most popular for the topic that you’re writing about. Then just include those in your posts. For example on Instagram, almost all of my traffic is from hashtags.

That pretty much sums it up.
Suggestion for DEV:
Tags: watercooler, dev, suggestion
Published: 2023-02-22 01:59:40

[Discussion on GitHub](https://github.com/forem/forem/discussions/19165)

&zwnj;<br/>

## Suggestion
Comments on [DEV](https://dev.to) should no longer be indexed (including already posted ones).
This would make it so if you looked up something on Google you wouldn't find something irrelevant or in the middle of a conversation.

## Rationale
My reasoning for making this suggestion is because recently I [looked up my name, "Calin Baenen", using Google](https://www.google.com/search?q=calin+baenen) and the second result was [a random comment replying to me](https://dev.to/baenencalin/comment/215k4):
![Image of Google's search results for "Calin Baenen".](https://user-images.githubusercontent.com/50878485/220498658-65dd11a2-f472-47cd-bef1-9855f95df699.png)
![Image of the comment replying to me.](https://user-images.githubusercontent.com/50878485/220498832-f518283f-6174-4562-bb7a-ed12865802b9.png)

In addition, I don't believe it's standard for sites to index comments; the only site I've seen do this is [Twitter](https://twitter.com).
Frequencia
Tags: frontend, css, html, beginners
Published: 2023-02-22 01:59:00

Nossa, tenho até badges!🤩
Quando tempo que não posto nada aqui kkkk
Esse ano pretendo estudar o bastante pra ter segurança no que vou fazer fora do Brasil com Frontend.💪💪💪
Quero compartilhar algo aqui assim que puder!
É isso
abraço
React hooks: How to convert useState to useReducer
Tags: webdev, react, tutorial, programming
Published: 2023-02-22 01:43:03

`useState` and `useReducer` are both React hooks that allow you to manage state in your components. `useState` is a simpler hook that allows you to manage a single piece of state, while `useReducer` is more powerful and allows you to manage more complex state that may have multiple values and require more sophisticated updates.

To convert from `useState` to `useReducer`, you can follow these general steps:

1. Define an initial state and an action type.
2. Replace the `useState` hook with the `useReducer` hook.
3. Create a reducer function that takes a state and an action and returns a new state.
4. Update the component to use the new state and dispatch functions returned by the `useReducer` hook, which should have the reducer and initial state passed in.

Here is a basic example of how to convert a component that uses `useState` to manage a single piece of state. Start with a Counter component:

```jsx
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

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

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

export default Counter;
```

To convert this to use `useReducer`, we can follow the steps outlined above:

##### 1. Define an initial state and an action type:
```jsx
const initialState = { count: 0 };
const INCREMENT = 'increment';
```

##### 2. Replace the `useState` hook with a `useReducer` hook:
```jsx
import React, { useReducer } from 'react';

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // ...
}
```

##### 3. Create a reducer function that takes a state and an action and returns a new state:
```jsx
const reducer = (state, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}
```

##### 4. Update the component to use the new state and dispatch functions returned by the `useReducer` hook, which should have the reducer and initial state passed in:
```jsx
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: INCREMENT });
  };

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

In step 4, the dispatch function is used to send an action to the reducer function. The reducer function then returns a new state based on the action type. The component is also updated to use `state.count` instead of the `count` variable previously returned by `useState`.

In this simple example, `useReducer` doesn't bring many benefits over `useState`. But in general, as your components grow in complexity, `useReducer` provides a more powerful and flexible way to manage state - especially when you have more complex state that require multiple values and more sophisticated updates.
Tea CLI tea.xyz
Tags: webdev, javascript, beginners, podcast
Published: 2023-02-22 01:03:11


Original: https://codingcat.dev/podcast/3-3-Tea-CLI

{% youtube https://youtu.be/i-j3sf5uYf0 %}

## Podcast Questions

1. Can you tell us more about yourself?
2. How did you become a developer, what was it like working at Apple?
3. Are you still maintaining brew in anyway?
4. How does a unified packaging infrastructure differ from a package manager?
5. What type of developer would use [tea.xyz](http://tea.xyz) for their stack?
6. White paper on Tea [https://tea.xyz/white-paper/](https://tea.xyz/white-paper/)

## Tea CLI

Are you tired of constantly switching between multiple tools to manage your projects, packages, and configurations? Do you wish there was a single, unified tool that could handle all of your development needs? Look no further than [Tea CLI](https://tea.xyz/tea-cli/) from [tea.xyz](https://tea.xyz/).

Tea CLI is a powerful command-line interface that helps developers manage all aspects of their projects. From creating a new project to deploying it, Tea CLI has got you covered. Let's take a closer look at some of the key features of Tea CLI and how to use them with Bash commands.

To get started with Tea CLI, you'll first need to install it on your system. Here's how you can do that using Bash:

```bash
curl -sL https://cli.tea.xyz/install.sh | bash

```

Once you have Tea CLI installed, you can create a new project using the **`create`** command. This command will generate a new project template with all the necessary files and dependencies.

```bash
tea create my-project

```

Tea CLI also comes with a built-in package manager called **`teapm`**. With **`teapm`**, you can easily install, update, and remove packages from your project. Here's how you can use **`teapm`** to install the **`lodash`** package:

```bash
tea teapm install lodash

```

To run your project, you can use the **`run`** command:

```bash
tea run

```

And to deploy your project, you can use the **`deploy`** command:

```bash
tea deploy

```

Tea CLI also provides a variety of configuration options to help you customize your project. You can view and modify the current configuration with the **`config`** command:

```bash
tea config

```

And you can set a specific configuration value using the **`set`** command:

```bash
tea config set key value

```

These are just a few examples of what you can do with [Tea CLI](https://github.com/teaxyz/cli). With its powerful features and easy-to-use interface, Tea CLI is a must-have tool for any developer. So why not give it a try and see how it can streamline your workflow and make your life easier?
Beginner API project with Node.js
Tags: javascript, node, beginners, showdev
Published: 2023-02-22 00:46:20

We are excited to share a really interesting Node.js project! We have built an API with the **Express Framework** that randomizes **fun facts about cats and dogs**.

![API response example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/526dvwinfxxhqi2asadh.PNG)

This project is not only interesting for **beginners in Node.js**, but it might come in handy if you are building a front-end project and you want to fetch async some test data from a simple API.

Likewise, keep in mind that the entire development process was recorded and is available on my YouTube channel. The [video](https://youtu.be/6jnx2ZCRRrg) covers the **project setup**, all the way to pushing it live on [Cyclic](cyclic.sh). Check it out!

You can also check the repository [here](https://github.com/blueycode/cat-and-dog-facts-api).

As always, any feedback is appreciated.
Performance enhancement, Rails style: Eager Loading and Caching
Published: 2023-02-22 00:15:31

When we use a basic-written Rails app to paint a page, it draws from each associated table multiple times (this is known as the "n+1 problem"). This causes the page to load relatively slowly, and can become a problem for complex or large query requests.

For example, when painting comments, it will go to the user table for the main user, then the photo table for each photo, then the comment table for every comment, then the user table for every comment (to find the author).

You can use the gem `bullet` to find spots in your application that have the n+1 problem, and then use "eager loading" to grab all the information that you need in one shot, instead of making multiple, sequential requests to the database.

To do this, use the `includes()` method, as below:

```
<% @user.feeds.includes(:owner, { :comments => [:author] }).each %>
```

Another trick to page performance is to use "caching."  This technique essentially lets the browser pre-load everything it _expects_ you to want to see, and then render it somewhat instantaneously.
Check out the [Rails Guide](https://guides.rubyonrails.org/caching_with_rails.html) for a great breakdown of how to do it.