teleren/devto huggingface dataset:
Things I will follow if I hire any Front End Developer in 2024
Tags: javascript, react, node, nextjs
Published: 2024-02-16 18:09:33

## If I hire for my company or any of my known person or his team this year, then the following requirements must be followed:

### 1. Design-Driven, Deeply Technical Talent:

I seek individuals who demonstrate genuine enthusiasm for web design and possess a robust understanding of front-end frameworks. Superficiality doesn't suffice; I value those who grasp the internal workings of browsers and their interactions with front-end development.

### 2. Beyond Boot Camps: Experience Matters:

While bootcamps can offer a starting point, I emphasize real-world experience and mastery over short-term training. I prioritize candidates who exhibit a solid understanding of JavaScript's core functionalities and principles.

### 3. Mastering React's Core and Hooks:

In-depth knowledge of React's core concepts and hooks is essential. While encyclopedic knowledge isn't necessary, I seek developers who demonstrate a profound understanding of these crucial elements.

### 4. Building Reusable Components and Library Awareness:

The ability to design reusable components and proficiency in contemporary JavaScript-based component libraries are highly desirable. This skill showcases foresight and an understanding of efficient development practices.

### 5. Client-Server Differentiation:

A clear understanding of the distinction between client-side and server-side development is crucial for effective collaboration and problem-solving within web applications.

### 6. Staying Ahead of the Curve: React Rendering Optimization:

Knowledge of React's re-rendering behavior and strategies for optimization showcases a commitment to best practices and performance improvement.

## Beyond the Basics: Advanced Skills and Future-Proof Development:

### 1. Progressive Web Apps: A Valuable Plus:

While not mandatory, expertise in Progressive Web Apps is a sought-after skill. In today's mobile-first environment, it gives us the flexibility to deliver enhanced user experiences across platforms.

### 2. React Native Mastery for Mobile Expansion:

Given the significant role React Native plays in contemporary mobile development, proficiency in this framework would be a major advantage. It signifies adaptability and expertise in building cross-platform mobile applications.


Follow For Next Part: 
[Dev.to](https://dev.to/a4arpon)
[Facebook](https://www.facebook.com/a4arpon)
[X @a4arpon](https://twitter.com/a4arpon)
Hardware Recommendations for Software Developers
Published: 2024-02-16 17:48:48

**Hello Everyone,**
I want to upgrade my hardware setup as a software developer, and I'm seeking some advice from the developer community. As we all know, having the right tools can significantly impact our productivity and overall workflow efficiency.
I'm particularly interested in hearing about your recommendations for:

1. Mac mini or Mac Studio 

2. Min required RAM and Min space
A place for professionnels to join and pitch projects
Tags: discuss, gamedev, collaboration, projects
Published: 2024-02-16 17:40:46

The problem 

So, I've been sitting on some  online "collab" groups looking for a project for a couple of months. I've noticed that this places  has a huge problem, and to be specific, a couple of them. 

I feel that most of the people there have a minimal understanding of making a game and the amount of effort that goes into making one. Most of the posts are like this: "I don't know how to program or make art, I don't have any portfolio, I'm a 'writer,' and I have this loosely defined idea. I need 5 programmers and 3 artists." Then, a couple of beginners join, and after a week, everyone vanishes.  


I cannot recall even one of them that didn't have some major red flags, like nobody on the team has ever made a game before or programmers not even knowing the engine they are supposed to work in. People just join these projects, pretend to do something for a week, and leave. 

I also love people that won't post ANY info about their project because "others would steal it." I mean, YOU are the one looking for people to join, so it's your job to get as many people interested in it as possible. You can't expect people to be like, "Oh mighty game developer, please let me into your team so that I'll be able to work for free for you" when they don't know even a single thing about what they're even getting into 

So, what goes wrong each time? Well, 

\- Unexperienced team members, for the most part. As I said earlier, most of the people that are joining all of these projects don't even have a single piece of portfolio. 

\- Project structure: I feel like 90% of the people there have no idea what do they even want. They just say, "I want to make a game that is like Mortal Kombat and Celeste." Their entire GDD has 2 pages, they have no roadmap, no deadlines, no budget, no goal, and no idea what it takes to actually make a game. 

The solution 
iwas looking for alternatives and didn't find any good so I developed this site to bring experienced and serious professionals together . See how it works looking forward for your feedbacks 👌
[craftit.site](https://www.craftit.site/)
relevant backlinks
Published: 2024-02-16 17:33:13

Relevant backlinks are like gold stars on your website's report card. They're links from other sites that actually relate to what you're offering. Think of them as endorsements from trustworthy sources, boosting your credibility and visibility online. It's like having the right people vouch for you in a crowded room.
Visit Here : https://www.spideroutreach.com/
Crafting my Code Chronicles Blog
Tags: webdev, beginners, ruby, discuss
Published: 2024-02-16 17:26:43

Creating my blog was an amazing learning experience, highlighting the importance of thoughtful planning and incorporating valuable resources. Previously, my approach lacked a Minimum Viable Product (MVP), resulting in a chaotic blog. However, with insights from senior engineers and resources from Chris at GoRails, I embarked on a journey to reconstruct and document the technical process.

**Database Structure:**

![Descriptive DB Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro7p2iz6kott76y8xmw2.png)

**Scopes for Dynamic Content Sorting**

```
  def draft?
    published_at.nil?
  end 

  def published?
    published_at? && published_at <= Time.current
  end 

  def scheduled?
    published_at? && published_at > Time.current
  end
```

I then used ActiveRecord to query these methods:

```
  scope :sorted, -> { order(arel_table[:published_at].desc.nulls_first).order(updated_at: :desc) }
  scope :draft, -> { where(published_at: nil)}
  scope :published, -> { where("published_at <= ?", Time.current)}
  scope :scheduled, -> { where("published_at > ?", Time.current)}
```

Utilizing these scopes in my model facilitated seamless handling of different scenarios based on the user's sign-in status.

```
  def index 
    if user_signed_in?
      @blog_posts = BlogPost.all.sorted
      @pagy, @blog_posts = pagy(@blog_posts)
    else
      @blog_posts = BlogPost.published.sorted
      @pagy, @blog_posts = pagy(@blog_posts)
    end 
  end
```

**Design**

The design phase, powered by Tailwind CSS, was a thrilling endeavor. Investing time in envisioning the blog's appearance through sketches laid the groundwork for a visually appealing and user-friendly interface. One thing I noticed with Tailwind CSS is that the code seems packed and congested which may cause confusion when wanting to change it. For now, it's a tool that is really handy till I master Javascript and the frameworks that power it.


![Tailwind CSS snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xku6zw8e5t0nekbus770.png)

**Project Organization**

GitHub Projects emerged as a pivotal tool for orchestrating tasks. This approach, inspired by agile methodologies, involved breaking down the project into phases and manageable tickets. From noting scenarios and creating user stories to task breakdowns within sprints, the agile workflow streamlined the development process.

**Languages and Framework**

- Ruby - 3.2.2
- Rails - 7.0.4.3

**Database**

- PostgreSQL

**Gems**

- Tailwind CSS
- Devise for Authentication and Authorization
- Pagy for Pagination
- RSpec for Testing
- Launchy
- Orderly

In summary, my blog transformation journey encompassed a robust database structure, elegant design with Tailwind CSS, and an organized project management approach via GitHub Projects.

As I update this blog with more features, I'll dive deeply into  techniques I use and my overall experiences as a developer.

Here is the site: [Karan's Blog](https://karans-blog.onrender.com/) -- Feedback is always welcome, please shoot me an e-mail at: karanm645@gmail.com
🕵 What You Didn't Know About AI Integration for Laravel Applications
Tags: laravel, openai, ai, php
Published: 2024-02-16 17:26:29

🚨 Great news for Laravel developers! 

We're working on a package called GptSdk that allows you to build AI features in Laravel applications in minutes.

What we know about AI features? In general, it should be a prompt and something that transforms prompt output into user-friendly results. That's all. But for every successful project, there are huge backend tasks: continuous updates of business logic, new requirements, and adapting to new market trends. Hard-coded prompts can quickly become a pain. 💩

If you've encountered this problem or have decided to embark on your AI journey, consider trying the GptSdk package, available at https://github.com/growthapps/gptsdk. 

All you need to add AI features to your app today is to:

- Install the library.
- Create a free GptSdk account at https://gpt-sdk.com.
- Define your prompt.
- Add a small snippet to your codebase:
```
$gptSdkClient = new GptSdkApiClient(
    HttpClient::create(),
    '<your api key here>'
);
$promptRun = $gptSdkClient->runPrompt(
    new PromptRun(
        vendorKey: VendorEnum::OPENAI,
        promptMessages: new ArrayCollection(
            [
                new PromptMessage(
                    role: 'User',
                    content: 'Hello gpt! How are you? Reply in [[tone]] tone.'
                )
            ]
        ),
        promptKey: 'hello_prompt',
        params: new ArrayCollection(
            [
                new PromptParam(
                    type: Type::STRING,
                    key: 'tone',
                    value: 'angry'
                )
            ]
        ),
    )
);
```

That's all! The next step is to enjoy AI integration and move forward in building great applications. 🦄
How to optmize PostgreSQL query performance tuning effective_cache_size ?
Tags: postgres, sql, dba
Published: 2024-02-16 17:25:08

Optimizing PostgreSQL query performance by tuning the `effective_cache_size` parameter involves several steps:

1. **Understand `effective_cache_size`**: This parameter is a hint to the PostgreSQL query planner about how much memory is available for disk caching by the operating system and within the database itself. It doesn't allocate any actual memory, but influences the planner's choice of execution plans. A higher value encourages the planner to use plans that rely on cached data.
2. **Assess Your System's Memory Usage**: Before setting `effective_cache_size`, you need to understand your system's total memory and how it's being used. This includes memory used by PostgreSQL (`shared_buffers`), the operating system, and any other applications running on the server.
3. **Determine an Appropriate Value**: A common recommendation is to set `effective_cache_size` to about 50-75% of the total memory available on your server, assuming that PostgreSQL is the primary application. If you have other memory-intensive applications running, you should adjust this value accordingly.
4. **Monitor and Adjust**: After setting `effective_cache_size`, monitor the performance of your queries. Look for improvements or any negative impacts. Use tools like `EXPLAIN ANALYZE` to understand how queries are being executed and how the execution plans might have changed.
5. **Iterative Tuning**: Query performance tuning is an iterative process. If you notice that the performance hasn't improved or has degraded, adjust the `effective_cache_size` value incrementally and monitor the effects.
6. **Consider Other Configurations**: `effective_cache_size` is just one of many configuration parameters that can affect query performance. Ensure other settings like `work_mem`, `shared_buffers`, `maintenance_work_mem`, and `wal_buffers` are also optimally configured.
7. **Query Optimization**: In addition to server tuning, optimize the queries themselves. Use indexes effectively, rewrite queries for efficiency, and regularly analyze and vacuum your database.
8. **Regular Maintenance**: Regular database maintenance, like vacuuming and analyzing tables, helps in keeping the statistics up to date and improves query planning.
9. **Use Latest PostgreSQL Version**: Always use the latest stable version of PostgreSQL, as each version brings performance improvements and better optimization capabilities.
10. **Consult PostgreSQL Logs**: Check PostgreSQL logs for any slow queries and try to optimize them. Slow queries can often be a bottleneck for overall performance.

Remember, the optimal setting for `effective_cache_size` can vary significantly depending on the specific workload and hardware configuration. It's important to test and monitor the impact of any changes you make.

[PostgreSQL Performance Troublehsooting](https://www.linkedin.com/pulse/implementing-sharding-postgresql-plproxy-step-by-step-shiv-iyer-0wfkc%3FtrackingId=5GzAXSk6sGck4qJ1ApXn3Q%253D%253D/?trackingId=5GzAXSk6sGck4qJ1ApXn3Q%3D%3D)
"reactStrictMode" no Next.js
Published: 2024-02-16 17:20:37

Fala pessoal,

Você provavelmente já deve ter passado por **requests diplicados**, ou seja, chamando a sua requisição duas vezes sem saber o motivo real.


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


Pois bem, você pode retirar essa chamada duplicadas com a seguinte configuração abaixo: 

**reactStrictMode**

**É bom saber**: desde o Next.js 13.4, o modo estrito é **true** o padrão da aplicação, portanto, a configuração só é necessária para o pages. Você ainda pode desativar o Modo Estrito configurando reactStrictMode: false no seu arquivo **next.config.ts**, exemplo:


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


**Após essa configuração acima:**

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

**Sugestão da própria documentação**: sugerimos fortemente que você habilite o Modo Estrito em seu aplicativo Next.js para prepará-lo melhor para o futuro do **React**.

**Mais sobre a documentação:**

https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode
Navigating Flask-SQLAlchemy: Simplifying Mock Data Generation with seed.py
Published: 2024-02-16 17:03:35

Part 1: Embracing Flask-SQLAlchemy's Core Principles

My journey with Python included learning Flask-SQLAlchemy, a powerful fusion of Flask and SQLAlchemy that streamlines database management. As I delved into its core principles, I found that Flask-SQLAlchemy excels in simplifying database interactions through its declarative syntax and robust migration support. By defining database models as Python classes and leveraging tools like Flask-Migrate for schema changes, Flask-SQLAlchemy offers a user-friendly approach to building database-backed applications.

Part 2: My Experience with seed.py for Mock Data Generation

While building my phase 4 project, I chose to use seed.py for my tables data. As I grappled with different methods for data population, I found seed.py to be a breath of fresh air. Unlike the cumbersome nature of using curl commands, seed.py allowed me to define Python scripts directly within my Flask application, making the process seamless and intuitive.

What struck me most about seed.py was its flexibility and efficiency. With just a few lines of Python code, I could easily generate mock data tailored to my specific testing scenarios. Whether I needed to create complex relationships between entities or incorporate unique constraints, seed.py empowered me to do so with ease. This level of customization not only saved me time but also ensured that my mock data accurately reflected real-world scenarios.

Moreover, seed.py's emphasis on reproducibility was a game-changer for my development workflow. Once I had defined the data seeding logic, I could effortlessly recreate the same dataset whenever necessary. This consistency proved invaluable for running repeatable tests and ensuring the reliability of my application across different environments.

As I continued to use seed.py in my projects, I also appreciated its role in promoting code maintainability and collaboration within my team. By encapsulating the data seeding logic within Python scripts, seed.py made it easy for my colleagues to understand, modify, and extend as needed. This transparency fostered collaboration and ensured that everyone was on the same page when it came to managing mock data.

In conclusion, my experience with Flask-SQLAlchemy and seed.py has been transformative. By embracing these tools, I've been able to streamline my development process, enhance the reliability of my applications, and focus more on building robust solutions that meet the needs of end-users.
Daily Code 71 | Tooltips (🟥 HTML & 🟦 CSS Course 13)
Tags: beginners, daily, css, html
Published: 2024-02-16 17:02:16

It’s HTML & CSS course day 13 and the second-to-last lesson! https://www.youtube.com/watch?v=G3e-cpL7ofc

# My Code

I can select specific elements only inside certain other elements (with a class) by using syntax like this selector below. That’s really cool and useful to avoid having to giving every single element its own class!

```html
.sidebar-link img {
  height: 24px;
}
```

Here is some more interesting CSS that I learned about to make the tooltips. It’s a nice trick to use the opacity to hide and show them. they are actually always there, it’s just that they are hidden unles there is the mouseover over the object.

```html
.search-button,
.voice-search-button,
.upload-icon-conatainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.search-button .tooltip,
.voice-search-button .tooltip,
.upload-icon-conatainer .tooltip {
  font-family: Roboto, Arial;
  position: absolute;
  background-color: gray;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
  bottom: -30px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
}

.search-button:hover .tooltip,
.voice-search-button:hover .tooltip,
.upload-icon-conatainer:hover .tooltip {
  opacity: 1;
}
```

I realize that these exercises and my takeaways got a bit borin over the last few days, so good that there is only one more left after this. Time to tackle something new the coming days!
What's New With Lagoon: UI Improvements
Tags: ui, ux
Published: 2024-02-16 16:59:49

We’re always working to improve our UI, so we thought we’d highlight some new updates and changes!

## Create Environment Button
You can now create an environment from the UI! On the project dashboard, you’ll see the new button.

<figure>
 <figcaption>The environment button is visible on the dashboard. </figcaption><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiyyt1owp9nxypq0o83l.jpeg">
</figure>
<figure>
<figcaption>You’ll be led through the steps to create an environment.</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r23mdo89i7gwfc2hg4k0.png">
</figure>

## Manage Variables in the UI

A totally new feature in Lagoon is the ability to manage [variables](https://docs.lagoon.sh/concepts-advanced/environment-variables/) through the UI! 

From the project dashboard, you’ll see the Variables tab, which will display the variables you’ve set, if any. The UI allows you to view or hide the value of the variables. You can also add, modify, and delete variables here. 
<figure>
  <figcaption>View of the Variables dashboard.</figcaption><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54fj2nnu8pyn1fxq6ihn.png">
</figure>
<figure><figcaption>Adding a new variable.</figcaption><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt8x52ya6ar156i5bfwa.png">
</figure>
<figure><figcaption>Adding a new variable.</figcaption><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gxj1fzuse8zzikqyarf.png">
</figure>

## Logs
You may have already seen this one as we rolled it out a little while back, but we’ve also improved the viewing experience for logs in the UI. Logs are now split into sections, making them much easier to review. 
<figure>
<figcaption>An example of the new logs.</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veha8js5l3zwdis9rh1k.png">
</figure>
<figure>
<figcaption>Expanding the log section.</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztdto3pru5f6cafs02xb.png">
</figure>

## Dark Mode

You can now switch between dark and light mode in the Lagoon UI via a handy icon on the top toolbar! We know what a highly requested feature this is.
<figure>
<figcaption>In light mode, toggle the moon icon to switch to dark mode.</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkqyq41emznta9ynbck3.png">
</figure>
<figure>
<figcaption>In dark mode, toggle the sun icon to switch to light mode. 
</figcaption><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89u4796e6603g9gzt99q.png">
</figure>


That’s all for now, but stay tuned for more updates about Lagoon! You didn’t hear it from us, but rumor has it that the Lagoon UI v2 is officially in the works. Want to give us feedback or help out? Join the Lagoon community on [Discord](https://discord.gg/te5hHe95JE) and say hello!

And don’t forget [our 2024 Community Survey](https://dev.to/uselagoon/2024-community-hours-survey-50m5)! Let us know how we can best serve the Lagoon community.
how to make photos look like paintings
Tags: python, programming
Published: 2024-02-16 16:59:11

Hi,
🎨 Discover how easy it is to transform your own phots into beautiful paintings
🖼️ This is a cool effect based on Stylized Neural Painting library. Simple to use , and the outcome is impressive,

You can find instructions here : https://github.com/feitgemel/Python-Code-Cool-Stuff/tree/master/How%20to%20make%20photos%20look%20like%20paintings

The link for the tutorial video :  https://youtu.be/m1QhxOWeeRc


Enjoy
Eran
#convertphototodigitalart #makephotolooklikepainting #makephotoslooklikepaintings #makepicturelooklikepainting #convertphotointopainting #howtoturnphotosintopaintings