teleren/devto huggingface dataset:
Navigating 2024 with Software Development, Tech Training, and Open Source Aspirations
Published: 2024-01-08 19:51:16

Every new year we rewrite, replan, or recheck our previous year's goals and achievements.

Today 08/01/2024, am writing my Software engineering goals, Coding resolutions, Technology education, Tech skills improvement, and Software development aspirations goals in public.



### My Previous year's Software engineering goals.
2023 I managed to achieve several goals,


**1.** Celebrated a year at [PowerLearnProject](https://powerlearnproject.org), as a web development trainer.
**2.** Started my [journey into data science](https://melbite.com/Evans-Nyamai/unZ6U8LzOUdwUP7iseKm )
**3.** Started a software programming [YouTube channel](https://www.youtube.com/@codewithevans)
**4.** Grew my blogging website - "feel free to blog with me at [melbite.com](https://melbite.com)"
**5.** Started an online software development tutorial platform - check it out here at [progskill](https://progskill.com)
**6.** Above all I managed to do 112 days of code - checkout [my GitHub](https://github.com/Evans-mutuku)

Having achieved several goals in the previous year, it's now time to create new year's Software engineering goals, Coding resolutions, Technology Education, Tech skills improvement, and Software development aspirations goals.



This year 2024, my biggest goal is to create a better version of myself. We all admit software development career is a competitive field, thus to emerge on top we need to do the most, write code as much as we can, and learn various software development skills, tools, and trends.



### My 2024 Coding resolutions, Technology education, and Software development aspirations
Having said that here is a list of my New Year Software development aspirations

**1.** Grow my "[Melbite](https://melbite.com)" blog with over 100,000 users
**2.** Write one or two blog articles weekly
**3.** Grow my [YouTube channel](https://www.youtube.com/@codewithevans) with over 10k subscribers
**4.** Become the best tech trainer/instructor in Africa
**5.** Grow my software development course "[progskill](https://progskill.com)" and impact thousands of software developers across the globe.
**6.** And Finally do 300 days of code, everything documented on my [GitHub profile](https://github.com/Evans-mutuku)


### Conclusion
I'd love to hear about your coding resolutions for the year! Share your goals, challenges, and victories in the comments below. Let's create a supportive community where we can inspire and learn from each other.



Don't forget to subscribe to my [YouTube channel](https://www.youtube.com/@codewithevans) for tutorials, coding tips, and insights. Together, let's make 2024 a year of breakthroughs and continuous improvement. Happy coding, and may your lines always be bug-free! 🚀✨



#### Developer resolutions 2024

HappyNewYear,
CodingResolutions
HappyCoding!
Forget LinkedIn: The Top 10 Remote Work Alternatives for Landing Your Dream Tech Job Remotely
Published: 2024-01-08 19:40:20


Looking to land your dream role as a software developer or explore remote job opportunities in the tech industry? This blog is your go-to guide to make that quest a breeze.

LinkedIn, the default job application platform for many, might not always yield the desired results due to the sheer volume of applicants. Companies often employ Applicant Tracking Systems (ATS) to manage this influx, making it harder for your application to stand out. But fear not, there are alternative portals where you can discover exciting job prospects without feeling disheartened.

Here's a curated list of websites offering a plethora of remote software developer roles, whether you're looking for fully remote, semi-remote, or hybrid positions:

1. SimplyHired: This platform caters to a diverse range of roles, spanning from entry-level to senior positions, with a dedicated section for remote development opportunities.

2. Jobspresso: An intuitive remote jobs website featuring handpicked opportunities from reputable companies. It covers various job categories, offering valuable career advice and resources to aid you in securing your ideal remote job.

3. We Work Remotely: Tailored specifically for remote roles, We Work Remotely boasts a variety of developer positions to suit your expertise.

4. Arc: Leveraging AI, Arc is a global remote jobs marketplace connecting companies with talented software developers.

5. RemoteOk: With new remote jobs posted almost daily, RemoteOk is a user-friendly platform that allows you to search for any type of developer job without the hassle of creating a profile.

6. Stack Overflow Jobs: A reliable resource for software developers, Stack Overflow's job board frequently features remote job listings to match your skill set.

7. Remote OK: This platform dedicates a specific section to remote software development jobs, streamlining your search for relevant opportunities.

8. Dice: Tailored for technology professionals, Dice includes remote job listings for software developers, offering a specialized platform to explore opportunities in the tech industry.

9. Authentic Jobs: While not exclusively focused on remote work, Authentic Jobs features a remote filter, making it easier for you to find remote software development positions within its listings.

10. DevRemote: An additional resource catering specifically to remote software development roles, DevRemote provides another avenue to discover your dream job.

Don't let the vastness of LinkedIn deter you. Explore these specialized platforms to uncover the remote software developer job of your dreams. Happy hunting!
ng-deep is no longer needed
Tags: css, angular, development, designpatterns
Published: 2024-01-08 19:38:55

## External library component

Let’s imagine that we are developing an **Angular library** of UI components for the rest of the teams.

We have a simple component that displays a header and a description

```typescript
    @Component({
     selector: 'lib-external-component',
     standalone: true,
     imports: [],
     template: `
       <h2 class="header">{{header}}</h2>
       <span class="description">{{description}}</span>
     `,
     styleUrl: './external-component.component.scss'
    })
    export class ExternalComponentComponent {
     @Input()
     public header = 'External component header'
    
    
     @Input()
     public description = 'External component description'
    }
```

```css
    :host {
     display: block;
     padding: 8px 12px;
     outline: 1px solid #b7b7b7;
    
    
     .header {
       font-size: 18px;
       font-weight: bold;
       color: red;
     }
    
    
     .description {
       font-size: 14px;
       color: blue;
     }
    }
```


![Сomponent visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb2j8rttt8cqfpscxg1s.png)

Currently, when we change the theme, the component does not pick up our styles and remains unchanged

![Switching themes does not affect the component](https://cdn-images-1.medium.com/max/2000/0*37GxY77_0iP2MeS_)

How can we style .header and .description?

There are three options:

* Customize globally via a generic `styles.scss` file

* Customize the style of the component in the parent component style with `ViewEncapsulation.None`

* Customize the style of the component in the parent component by wrapping that in `::ng-deep`

The first two options may be used depending on the situation and if they do not break the overall styling logic.

But `ng-deep` is a **deprecated** selector, and developers continue to use it as a “*magic pill*” for accessing styles of a child component.

Overriding styles in a parent component with theme support may look like this
```scss
    @each $theme-key in map.keys(variables.$themes) {
     $theme: map.get(variables.$themes, $theme-key);
    
    
     :host-context([data-theme="#{$theme-key}"]){
       ::ng-deep {
         app-external-component {
           .header {
             color: map.get($theme, "primary");
           }
    
    
           .description {
             color: map.get($theme, "secondary");
           }
         }
       }
     }
    }
```
Let’s check the support of our themes for the external component

![Switching themes affects the component via ng-deep](https://cdn-images-1.medium.com/max/2000/0*TtTeeDGs_cSouF2G)

We got the result we wanted but created a lot of complex code to style the component, which inherited all the [styling issues](https://maks-dolgikh.medium.com/67e727cf317b) for generic styling

_Is it possible to simplify all this and even get rid of using `::ng-deep`?_ [read more...](https://medium.com/@maks-dolgikh/css-variables-in-angular-ng-deep-is-no-longer-needed-part-2-3ac60f8a4abc)
LOST OR STOLEN CRYPTO RECOVERY ; WIZARD WEB RECOVERY
Published: 2024-01-08 19:32:58

Hello People, I am othenio from Washington, USA. I highly recommend the service of Wizard Web Recovery to everyone who wishes to recover lost money either bitcoin or other cryptocurrencies, wallet hackers, or if you ever sent bitcoins to the wrong wallet address. I was able to recover my lost bitcoins from online swindlers in less than 24 hours after contacting Wizard web recovery.They are the best professional team of prolific experts, each with their own unique skill set and a shared passion for unraveling the mysteries of lost crypto. They're not just tech wizards; they're blockchain detectives, forensic analysts, and digital strategists, all rolled into one. I’m truly thankful for their help in recovering all I lost. I have encountered numerous challenges and triumphs in my life. However, one of the most daunting experiences I faced was the loss of my hard-earned bitcoins to online swindlers. It was a distressing situation that left me feeling helpless and vulnerable. Fortunately, my encounter with Wizard Web Recovery proved to be a game-changer, as they swiftly and efficiently assisted me in recovering my lost funds. Their exceptional service and professionalism have left an indelible impression on me, prompting me to share my experience and recommend their services to anyone facing similar predicaments.Wizard Web Recovery is a distinguished service that specializes in the recovery of lost cryptocurrencies, addressing wallet hackers, and resolving issues related to incorrect wallet addresses. My personal encounter with this remarkable team of experts was nothing short of impressive. Within or less than 24 hours of reaching out to Wizard Web Recovery, I witnessed the restoration of my lost bitcoins, a feat that seemed unattainable prior to their intervention. Their swift and effective response to my distress call was a testament to their expertise and commitment to helping individuals recover their assets in the complex world of cryptocurrencies.What sets Wizard Web Recovery apart from other similar services is their team of proficient professionals, each equipped with a unique skill set and a shared passion for unraveling the mysteries of lost crypto. They are not just tech wizards; they are blockchain detectives, forensic analysts, and digital strategists, all rolled into one. This multidisciplinary approach to cryptocurrency recovery ensures that clients receive comprehensive and tailored solutions to their specific needs. The depth of their expertise and the diversity of their skill sets make Wizard Web Recovery an invaluable ally for anyone navigating the intricate landscape of cryptocurrency-related challenges. I wholeheartedly recommend their services to anyone in need of assistance in navigating the intricate world of cryptocurrencies. If you find yourself in a similar predicament, Rest assured that Wizard Web Recovery is genuinely ready to assist you in reclaiming your bitcoins. 

INBOX THEM ON EMAIL : WIZARD WEB RECOVERY (AT) PROGRAMMER (.) NET.
Is it possible to reduce CPU configuration in digital ocean?
Tags: beginners, programming, hosting, python
Published: 2024-01-08 19:31:58

Yes, It is possible to reduce the CPU configuration of a droplet (virtual machine) on DigitalOcean. However, keep in mind that decreasing the CPU configuration might impact the performance of your applications or services running on that droplet.

Here's a general guide on how to resize your Droplet's CPU configuration:

**Shut down your Droplet:** Log in to your DigitalOcean account, go to the Droplets section, select the Droplet you want to resize, and power it off.

**Resize the Droplet:** Once the Droplet is powered off, click on the "Resize" button. Choose a new plan with reduced CPU resources. DigitalOcean allows you to scale your Droplet's resources up or down based on your requirements.

**Confirm the resize:** Follow the prompts to confirm the resizing action. This process might involve taking a snapshot of your Droplet in case anything goes wrong during the resize process, ensuring you have a backup.

**Power on the Droplet:** After the resize process completes, power on your Droplet and check if everything is working as expected.

Remember, reducing CPU configuration may impact the performance of applications or services running on your Droplet if they were previously utilizing the higher CPU resources. Be sure to monitor the performance and adjust the resources accordingly to ensure your applications run smoothly.

**Always backup your important data before making any changes to your Droplet's configuration to avoid potential data loss.**


**[What is the Droplets in DigitalOcean?](https://dgihost.com/index.php/2024/01/08/droplets-in-digitalocean-understanding-their-role/)**
Não seja um DEV F#D4 INFLUENCER
Published: 2024-01-08 19:23:45


Em meados de 2019, dei início ao meu trabalho remoto em uma grande empresa de tecnologia no Brasil, mergulhando de cabeça no mundo dos microservices e lidando com altos volumes de requisições. Ao entrar para a equipe, percebi que meus colegas eram fodasticos na produção de conteúdo, mantendo blogs, canais no YouTube e realizando transmissões ao vivo. Ao me comparar, senti a temida síndrome do impostor, questionando minha posição como um desenvolvedor.

Decidi então me tornar um "dev foda", estudando intensivamente não apenas as responsabilidades do meu trabalho (sou backend), mas também áreas fora da minha especialização, como front-end, mobile e infraestrutura. Cheguei até a fazer lives na Twitch, compartilhar posts no LinkedIn e muito mais. No entanto, esse esforço excessivo começou a prejudicar minha saúde mental, pois não estava mais estudando algo significativo nem produzindo algo além do trabalho.

Depois de enfrentar esses desafios, parei para refletir: qual a real necessidade de me tornar um "tech influencer"? Como isso realmente contribuiria para meu dia a dia no trabalho?

Simplifiquei meu foco, dedicando-me a estudar apenas o que era relevante para meu trabalho diário, enfrentando os desafios que surgiam e concentrando-me em melhorar meus serviços.

Então, para você, jovem desenvolvedor, que vê nas redes sociais uma infinidade de "tech influencers", saiba que não é necessário seguir esse caminho para ser um ótimo desenvolvedor e construir uma excelente carreira. Muitos desses influencers são, na verdade, vendedores de cursos. Portanto, mantenha-se firme nos estudos relacionados ao seu trabalho!

Cada pessoa tem sua própria jornada na carreira de tecnologia, e é crucial encontrar um equilíbrio entre o desenvolvimento de habilidades, a aprendizagem contínua e a satisfação pessoal. O caminho para o sucesso pode variar, e o foco no trabalho real e nas habilidades relevantes para a função desempenhada!
High Order Function !== Closure
Tags: javascript, beginners, tutorial, closure
Published: 2024-01-08 19:23:01

## TL;DR
Every closure is a higher-order function, but not every higher-order function is a closure. To be a closure, the inner function has to have access to the parameter of the outer function.
___

Closures and higher-order functions may appear similar, but they have a key differentiation between them (someone I know didn't pass a recent interview for a summer job because he couldn't explain it!). Enough talk, let's get straight to the point:

**What are Closures?!**
Closures are inner functions that can access the parameters of outer functions. In the example below, the `innerFunction` can access and use the `val` parameter from the `outerFunction`.

```javascript
function outerFunction(val) {
  return function innerFunction(anotherValue) {
    return `${val} ${anotherValue}`;
  };
}
```

**What are Higher-Order Functions?**
Similar to closures, higher-order functions are a structure of a function, but they do not necessarily have to be closures.

```javascript
function outerFunction(val) {
  return function innerFunction(anotherValue) {
    return `${anotherValue}`;
  };
}
```

I hope that this may help you! :grin:
Empowering Web Development with WordPress: Unveiling Flexibility and Functionality
Published: 2024-01-08 19:00:41

A well-liked open-source content management system (CMS) for building blogs, e-commerce platforms, and websites is called WordPress. It is developed in PHP and manages and stores material in a MySQL database. WordPress's versatility and user-friendliness are two of its main advantages, since it is used by both novice and seasoned developers.
With the many themes and plugins available on WordPress, users may personalise the appearance and features of their websites. While plugins provide particular features and functions, including SEO optimisation, contact forms, e-commerce capabilities, and more, themes manage the look and feel of a WordPress website.
Working with WordPress as a software developer frequently entails modifying themes and plugins, creating unique functions, maximising performance, and
Diving into C/sea🌊?
Published: 2024-01-08 18:56:12

## <u>Programming Language-C</u>
Did you know that Dennis Ritchie created the programming language C in the 1970s? It's still widely used and considered highly influential in programming. Many developers consider C the "mother language" of all modern programming languages.

- Let us begin with getting familiar with the datatypes that are dealt in C. There are two types of data types in C.

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

- Depending on the declaration of a variable in C, there are two types of variables. They are as follows:

1. Global variable: This variable is assigned outside the main() function of C. 
2. Local variable: This variable is assigned inside the main() function of C. 

```
#include <stdio.h>
int r = 8; // global variable
int main() 
{
 int f =13; //local variable
}
```
N.B: Every C statement ends with a semicolon ;

You can see that I used "include <stdio.h>" in the above code. It's a mandatory header file library that allows us to work with input/output functions like '**printf()**' for displaying our desired output.

```
#include <stdio.h>
int main() {
  printf(" Henlo World");
  return 0;
}
```
Any code inside **main()**'s curly bracket is considered the notebook and it will be executed as per instruction. Here "return 0;" ends the **main()**  function.
Docker ps con formato
Published: 2024-01-08 17:26:37

Cuando tienes varios contenedores corriendo se puede poner complicado a la hora de administrar los puertos disponibles, una forma de ver esto desde un servidor en donde no tenemos interfaz gráfica. Lo podemos hacer de la siguiente manera con el comando docker ps pero la ventaja que tenemos es que tenemos la posibilidad de personalizar la salida por medio de la opción --format. El siguiente comando la salida nos mostrará en formato de tabla el nombre del servicio y el puerto asociado al mismo.


![Docker ps with normal format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvd7swr79svvj9m0j4yh.png)

Una versión un poco mas avanzada es que podamos ver en orden los puertos que están ocupados y así saber de manera más sencilla cuales son los que están disponibles y podamos asignarlo con mucha mas confianza.


![Docker ps with format advance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cf827mi0c3u0kvw4639.png)

Para mas información acerca de formatos puedes consultar directamente la documentación oficial: https://docs.docker.com/config/formatting/
Latest Release: React Image Grid Gallery v2
Published: 2024-01-08 18:48:45

[React Image Grid Gallery](https://www.npmjs.com/package/react-image-grid-gallery) version 2 is out! &#129395;

Let's discuss the highlights.

## Breaking Changes

This release comes with two breaking changes.

- Replace default `import` with named `import`. This change provides better compatibility with Node and Babel-like tools.
- Rename `imgArray` prop to `imagesInfoArray`.

## Other Changes

- Change compiler from Babel to TypeScript.
- Remove Babel dependency.
- Replace `uniqid` dependency with `crypto.randomUUID`.
- Convert all configuration files to TypeScript.
- Replace external CSS with inline styling.

## How to Update the React Image Grid Gallery Package

Here are the steps required to upgrade to the latest version:

### Step 1: Install the latest version

```bash
npm install react-image-grid-gallery@latest
```

Alternatively, you can use Yarn or pnpm like so:

```bash
yarn upgrade react-image-grid-gallery --latest
```

```bash
pnpm update react-image-grid-gallery --latest
```

### Step 2: Update the package's `import` syntax

Replace the package's default `import` statement with the named `import` syntax like so:

```diff
- import ImageGallery from "react-image-grid-gallery";
+ import { ImageGallery } from "react-image-grid-gallery";
```

### Step 3: Update the package's props

Update the required prop's name as follows:

```diff
  <ImageGallery
-    imgArray={imagesArray}
+    imagesInfoArray={imagesArray}
     columnWidth={230}
     gapSize={24}
  />
```

## Note for Docusaurus Users

Wrap the `ImageGallery` component in [`<BrowserOnly>`](https://docusaurus.io/docs/next/advanced/ssg#browseronly) if you get a `ReferenceError: crypto is not defined` error during your build step.

**Example:**

```jsx
import BrowserOnly from "@docusaurus/BrowserOnly";

function YourComponent() {
  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => {
        const ImageGallery = require("react-image-grid-gallery").ImageGallery;
        return (
          <ImageGallery
            imagesInfoArray={imagesArray}
            columnWidth={230}
            gapSize={24}
          />
        );
      }}
    </BrowserOnly>
  );
}
```

The `<BrowserOnly>` component tells Docusaurus to render the `ImageGallery` library only in the browser.

**Note:** This process is essential because the `ImageGallery` package uses the Web Crypto API. Therefore, `BrowserOnly` ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering).

## How to Use the React Image Grid Gallery Package

See the [complete project-based guide](https://codesweetly.com/react-image-grid-gallery) to learn how to add the `ImageGallery` package to your React applications. You can use the library with Vite, NextJS, Remix, or any other React app.