teleren/devto huggingface dataset:
JS code optimizer Next.js app
Published: 2024-03-29 21:21:19

For a while I have used ChatGPT to swiftly provide code suggestions. However, copying and pasting into my workflow was a bit of a hassle. So, I decided to take matters into my own hands and built a neat little Next.js application. 🚀 Now, I can input code snippets and have them optimized in a snap!

While developing this, I dived into the world of server components in Next.js. Coming from using Node.js API routes in Remix, I found server components to be the next level 😎.  It's amazing stuff! Although, I must admit, having to include 'use client' when dealing with components with hooks felt a bit cumbersome at first. Ahh well, that's a small price to pay for such convenient functionality.

Next I'm eagerly waiting to dive into GitHub Copilot 🤖 and experiment with it.

Overall, whether it's leveraging ChatGPT or exploring server components in Next.js I had a fun day building cool stuff!

(Just cleaning up the repo before posting my code optimizer Next.js application... watch this space!)
Pure CSS prime calculation
Tags: css, webdev, programming, learning
Published: 2024-03-29 21:16:16

## Use CSS selector power to calculate Primes

You probably didn't know that pure CSS can be used to calculate prime numbers. Prime numbers are such a numbers that divided only by 1 and itself. 

Normaly we can compute primes by [Sieve of Eratosthenes](https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes). It's a clever algorytm invented by Greeks 3rd cent BCE. You starts with list of all numbers. In HTML we can create list of all numbers with help of CSS counters and `i` element.

```html
<div class="container">
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
</div>
```
 

```css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  align-content: flex-start;
  counter-reset: i_counter; 
}

.container i {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: 
    width 2s ease-out,
    background-color 0.2s ease-out;
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 5px;
  border: 1px solid hsl(45 0% 90%);
  box-shadow: 4px 4px 8px -4px rgba(66, 68, 90, 1);
  overflow: hidden;
  font-style: normal;
}

.container i:before {
  counter-increment: i_counter;
  content: counter(i_counter);
}
```

Step two is to remove all composite numbers. We can use CSS selectors `:nth-child` to remove all multiplication of a given number. But we must keep 0th element of a series. We can do it with  `:is` and `:not` selectors. 

```css
.container :is(
i:nth-child(0n+1),
i:nth-child(2n):is(:not(i:nth-child(0n+2))),
i:nth-child(3n):is(:not(i:nth-child(0n+3))),
i:nth-child(4n):is(:not(i:nth-child(0n+4))),
i:nth-child(5n):is(:not(i:nth-child(0n+5))),
i:nth-child(6n):is(:not(i:nth-child(0n+6))),
i:nth-child(7n):is(:not(i:nth-child(0n+7))),
i:nth-child(8n):is(:not(i:nth-child(0n+8))),
i:nth-child(9n):is(:not(i:nth-child(0n+9))),
i:nth-child(10n):is(:not(i:nth-child(0n+10))),
)
{
  width: 10px;
  background-color: hsl(0 60% 90%);
  /*display: none;*/
  font-size: 0.5rem;
}
```
For finding all primes up to 100 it is sufficient to remove all multiplicative of a numbers from 1 to 10.

[Full solution - on Codepen](https://codepen.io/owcakw/pen/WNWZXgJ)
ATT - Router: Arris NVG589 Port Forwarding
Tags: att, router, port, arris
Published: 2024-03-29 21:09:15

Navigate to Firewall (tab) and -> NAT/Gaming (subtab)

Navigate to Manage Custom Services

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

Click on Custom Services button




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


Add the Service name (any), Update Port# you to forward  in Global Port Range (both fields),Base Host Port 


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


Now go to Application hosting entries, select the service , IP Address of the device where your website you are planning to expose to internet. Then click Add button.


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

Now you should see all the Hosted Applications list.

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


Upcoming post... Next: using noip for your DNS Host.
Is React a Framework or a Library?
Tags: webdev, react, javascript, beginners
Published: 2024-03-29 20:36:46

Ever dabbled in web development? If so, you've likely come across terms like "libraries" and "frameworks." Both are tools that developers use, but they serve different purposes. Let's break it down before diving into React!

**Libraries:** Imagine a toolbox filled with specialized tools for specific tasks. That's essentially what a library is. It provides a collection of pre-written code snippets (functions, classes) that developers can integrate into their projects to achieve particular functionalities. They offer flexibility and allow developers to choose the tools they need.

**Example: Lodash (JavaScript Library)**

```javascript
// Shuffle an array using Lodash
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = _.shuffle(numbers);
console.log(shuffledNumbers); // Output: [..., shuffled order of numbers]
```

**Frameworks:** Think of a framework as a pre-built structure, like a house frame. It provides a foundation and core functionalities that developers can build upon. Frameworks often dictate a specific way of doing things, offering a more structured approach to development.

**Example: Django (Python Framework)**

```python
# Create a basic view function in Django
def hello_world(request):
  return render(request, 'hello.html', {'message': 'Hello, World!'})
```

**Now, the star of the show: React!**

React is a **library**, not a framework. It focuses on building user interfaces (UI) with reusable components. These components are like building blocks that developers can combine to create complex interfaces. React offers a declarative way of describing what the UI should look like, leaving the "how" to React itself.

This flexibility allows developers to choose other libraries for routing, state management, and other functionalities, creating a custom development stack.

**Reasons React is a Library:**

* Focuses on a specific aspect (UI)
* Offers flexibility in choosing other tools
* Requires developers to make more decisions

**Test Your Knowledge!**

1. Which of the following best describes a library?
     a) Provides a complete structure for development
     b) Offers pre-written code for specific tasks

2. True or False: Frameworks offer more flexibility than libraries.

**Remember**, understanding the distinction between libraries and frameworks can help you choose the right tools for your projects. Keep coding and exploring new technologies to enhance your skills!

whether you're using a library or a framework, the key to great work is passion and dedication. Happy coding! 🧑‍💻

**Motivational Quote:**
"Every great developer you know got there by solving problems they were unqualified to solve until they actually did it." → _Patrick McKenzie_
Fetch API: One Byte Explainer
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-29 20:35:03

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->
The fetch API allows simplified access to HTTP protocol methods, enabling client-server communication. The fetch API can be called with just one argument (path) to use the GET method, but it also supports other methods like POST, PUT, DELETE.

## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

For more information you can visit the: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
Cup Cake
Tags: frontendchallenge, devchallenge, css, html
Published: 2024-03-29 20:28:57

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

## What I Built
I created a stylish cupcake design using HTML and CSS, aiming to achieve a visually appealing and dynamic representation of a cupcake. The design features detailed elements such as frosting, cherry, and sprinkle effects, enhanced with animations and shadow effects to create a lifelike and charming presentation.

## Demo
https://codepen.io/ecces4/pen/QWPqmpa

## Journey
I enjoyed crafting a visually dynamic cupcake design with HTML and CSS, learning new techniques and enhancing my skills.
Scalability Analysis of Microservices Architectures
Published: 2024-03-29 20:28:45

**What are Microservices?**

Microservices are a software development architecture that organizes an application as a collection of loosely coupled services. Each service is self-contained and performs a specific task. Microservices communicate with each other through APIs.

For example, the user authentication microservice can provide an API that allows the product catalog microservice to verify the identity of a user before returning product information.

**Importance of Scalability**

Scalability is paramount in microservices architectures due to their distributed nature. The ability to handle increasing loads efficiently ensures that applications can meet user demands without compromising performance or reliability. Scalability also plays a significant role in cost-effectiveness, as it allows for optimal resource utilization.

**How to Scale Microservices**
Thera are two ways to scale microservices

1. **Horizontal**
This involves adding more microservice instances to handle the increased load. It’s the most common type of scaling for microservices. You can add new containers or virtual machines to distribute the load across multiple instances.

2. **Vertical** 
This involves increasing the resources (CPU, memory, etc.) of an existing microservice instance to handle additional load. While it can provide a short-term performance boost, it has limits. In the long term, it’s more cost-effective to use horizontal scaling.


**Performance Testing**

I have conducted some performance tests on scaled and unscaled service. The service is a really simple one, so we will not go in depth into it. It is written using Flask snd tested using Locust, and here are the results:


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

# Requests: 124465
# Fails: 18154
Median (ms): 11000
95%ile (ms): 28000
99%ile (ms): 35000
Average (ms): 12237.01
Min (ms): 1
Max (ms): 40469

This is the unscaled server results, it was tested by sending 1000 requests every second. So was the scaled version:


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

# Requests:112234
# Fails: 689
Median (ms): 2
95%ile (ms): 3500
99%ile (ms): 6700
Average (ms): 364.78
Min (ms): 1
Max (ms): 19605

I used 3 instances for scaling, and on the graph we can clearly see where one of the instances crashed and others had to work overtime because of it, but because of this "teamwork" the amount of fails decreased drastically.

**Summary**

Scaling microservices is important because it allows your application to handle increased demand and traffic efficiently. By scaling microservices, you can ensure that your application remains responsive, reliable, and performs well under varying load conditions. This scalability enables your application to meet user demands, maintain high availability, and support business growth without sacrificing performance or user experience.
stdint.h et al
Tags: c, codequality, beginners
Published: 2024-03-29 20:21:20

One of the first things to realise about C is that a lot of important things are left as implementation details. The C standard doesn't actually define the size of an `int`, or a `float` or even a `char` for that matter. Add to the fact that the notion of a simple boolean value doesn't really exist as part of its core data-types.

So, a header file called `stdint.h` was introduced in C99 to allow programmers to write code with typedefs for common data-types that specified their underlying sizes.

This allowed for programmers to write code with data-types independent of the architecture of their target machines. This is especially useful for a language like C that is designed to run on the smallest of embedded systems all the way to the fastest of supercomputers.

An integer on any modern 64-bit machine takes up 32-bits by default. So, for consistency's sake, instead of using `int`, use `int32_t` or, instead of `char`, use `uint8_t` which, as the name hints, refers to an unsigned 8-bit integer, which is sufficient to store any possible ASCII character.

```C
#include <stddef.h>
#include <stdint.h>

int main(void) {
    int number_1 = 5;  // ambiguous size (depends on platform)
    int32_t number_2 = 10;  // fixed 32-bit size on all platforms

    char character_1 = 'a';  // mostly 8-bits (but on some embedded architecture, you never know!)
    uint8_t character_2 = 'b';  // fixed 8-bit size on all platforms

    size_t length = 5;
    int32_t* array = malloc(sizeof(int32_t) * length);

    for (size_t i = 0; i < length; i++) {
        array[i] = i;  // No fear that i can ever go out of bounds.
                       // Also note the implicit type-cast from size_t to int32_t.
    }

    free(array);

    return 0;
}
```

This also extends to using `size_t` and `bool` from 'stddef.h' and 'stdbool.h' respectively. The latter, as is obvious is just a typedef over `0` for `false` and `1` for `true` to make it more clear whether something is a boolean and to disallow any other value on accident if using something less restrictive, like an `int`.

`size_t` is where things get more interesting. Officially defined as an unsigned integer of a size that is at least 16-bits, it is used to define the size of objects. That doesn't seem very platform independent, does it? Well, it's not supposed to be.

`size_t`is great at holding object sizes and of particular note is its use in representing array lengths, and therefore, array indices. Instead of using an `int` which may either be negative, or either too big, or too small, `size_t` remains the perfect data-type to use in such scenarios.

Another nice use of `size_t` is that it is meant to represent the size of any data-type by design. So, the `sizeof` operator must return a value compatible with `size_t`.
Seeking Power Apps Developer
Tags: hiring, powerplatform, powerapps
Published: 2024-03-29 20:19:43

Amazing company, great benefits. We need a developer to grow our team.[](https://www.glassdoor.com/job-listing/power-platform-developer-informxl-inc-JV_KO0,24_KE25,37.htm?jl=1009181297419)

informXL is seeking a Power Platform Developer to join our team. This role will be a part of the Content Development team, with a close working relationship with our Database Development and Services departments.
Duties & Responsibilities:
Develop Power Platform solutions using Power Automate/Flow, PowerApps, Power BI to automate business processes both internally and for customers
Represent development team while working with Design and CX to ensure viability of proposed solutions
Peer review other developer applications
Bring ideas for app/process improvement
Help create and adhere to best practice
Track and document development efforts in Azure DevOps
Participate in occasional client feedback meetings and user groups
Qualifications:
2+ years of Power Platform development experience
Proficiency in developing Power App and Power Automate solutions
Proficiency in developing dashboards and apps in Power BI
Proficiency in working with data sources such as SharePoint, SQL databases, Excel, O365, etc.
Strong problem-solving and troubleshooting skills
Strong written and verbal communication skills
Ability to work in highly collaborative environment
Preferred Experience:
Power Platform certification
Homebuilding industry experience a plus
Azure DevOps
Preference for applicants located in Phoenix, AZ that are open to a hybrid work schedule, though we will consider remote applicants elsewhere.
At this time, we are unable to offer sponsership.
Job Type: Full-time
Pay: $85,000.00 - $95,000.00 per year
Benefits:
401(k)
Dental insurance
Disability insurance
Flexible schedule
Health insurance
Life insurance
Paid holidays
Paid sick time
Paid time off
Work from home
Compensation package:
Quarterly bonus
Yearly pay
Schedule:
Monday to Friday
Experience:
Power Platform: 2 years (Required)
T-SQL: 1 year (Required)
Excel: 1 year (Required)
Work Location: Remote
CONSULT A COMPETENT CRYPTO RECOVERY SPECIALIST - MUYERN TRUST HACKER
Published: 2024-03-29 19:52:18

Like losing a winning lottery ticket, lost Bitcoin can be both deeply upsetting and incredibly annoying. When one learns that their digital treasure has vanished, anyone would sweat from the descending feeling in their stomach. After an emotion of frustration settles in, you begin to chase your misplaced cryptocurrency. It grows a race against uncertainty and time to retrieve your Bitcoin, from tracking your digital footprint to searching through countless online forums for answers. In a sea of shady schemes and dubious promises, finding a reliable Bitcoin recovery service feels like stumbling upon a rare gem. The search for a trusted ally in this digital battlefield becomes paramount to salvaging what's rightfully yours. In the jumble of internet advice and horror stories, MUYERN TRUST HACKER stands out as an embodiment of brightness. In an opaque market, their reputation for recovering misplaced cryptocurrencies and reconciling their owners with them makes them stand out. With sweaty palms and bated breath, you reach out to MUYERN TRUST HACKER, hoping against hope for a chance to recover what was once lost. The anticipation of their response becomes a constant companion in your digital journey toward redemption. Verifying your ownership of the lost Bitcoin becomes a task akin to solving a digital puzzle. Sharing detailed information and proof of your rightful claim becomes the key to unlocking the doors to your cryptocurrency kingdom once more. As the email notification from MUYERN TRUST HACKER lights up your screen, a wave of relief washes over you. The words confirming the successful recovery of your lost Bitcoin feel like a digital hug, warming your heart and lifting the weight off your shoulders. In hindsight, the rollercoaster ride of losing and recovering your Bitcoin becomes a bittersweet memory. The lessons learned and the gratitude felt towards MUYERN TRUST HACKER for their expertise and assistance turn a tale of despair into a story of triumph and appreciation. To avoid future losses, it's essential to take preventative steps. This can involve educating yourself on best security practices, using reputable wallets and exchanges, and being cautious of phishing attempts. You can minimize the risk of experiencing another loss by staying proactive and vigilant. Professional recovery services like MUYERN TRUST HACKER can be a saving grace for those who have experienced losses. Their expertise and resources can help navigate the complexities of recovering lost assets, providing much-needed relief and peace of mind. signal +1/5/8/5/2/2/8/8/6/0/5  
Greetings.
Document Object Model (DOM) : One Byte Explainer
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-29 19:47:21

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->
A **Tree** represents a structure with *branches, nodes and leaves* manipulated by *Nature* to change its layout every season. Similarly, **DOM** represents a web page structure where elements, attributes and text are manipulated by a *Developer*'s genius.

## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

> To access and manipulate the DOM content, _JavaScript_ is fundamentally used. _React_ framework with JSX (_JavaScript XML_) abstracts DOM access through a virtual DOM. Finally, _TypeScript_ provides static typing for advanced capabilities.

---
Apologies, if the post seems inappropriate in any sense :disappointed_relieved: . This is my first post and my first challenge in the process of becoming part of a Developer community.
This is the summary of what I have learnt from [MDN Documentation](https://developer.mozilla.org/en-US/docs/Glossary/DOM) and [discussions with Chat GPT](https://chat.openai.com/share/932ee054-8024-4317-adf7-ef1f8c8d40c7).

Thank you for this wonderful challenge ! :heart_eyes:
<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
How to filter on number or date custom fields in ActionNetwork targeting
Tags: todayilearned, actionnetwork
Published: 2024-03-29 19:45:00

---
title: How to filter on number or date custom fields in ActionNetwork targeting
published: true
description: 
tags: TIL, ActionNetwork
published_at: 2024-03-29 19:45 +0000
---

This week I learned how to filter (using less than/great than) on a number custom field in ActionNetwork targeting. Because we focus on young progressives at Run for Something, you can imagine we target folks based on their age, when available.

The [ActionNetwork docs](https://help.actionnetwork.org/hc/en-us/articles/203113109-Creating-and-targeting-reports) allude to using `<<` and `>>` to filter on custom number/date fields but this was not working for our `age` custom field. The issue was that - in addition to ages - this field contained data like the string "n/a" and "prefer not to answer" (largely from old data sources that were not validated). So, to filter on a number or date field in ActionNetwork, as their docs suggest, you must **ensure the custom field has a consistent data type** and that there aren't strings mixed in with date or number values (null values are fine).

![ActionNetwork Custom Field Filtering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eef7sk1v35p86f89a5mr.png)

One way to ensure this is the case is to add some field validation. This is the closest analog to designating a field _type_ that ActionNetwork has.