teleren/devto huggingface dataset:
AI Runner deck
Tags: ai, python, opensource, llm
Published: 2024-03-28 00:43:33

---
title: AI Runner deck
published: true
description: AI Runner - what it is, what it solves
tags: ai,python,opensource,llm
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztdcqfe2g2uog2pwd49u.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-28 00:39 +0000
---


![Slide 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztdcqfe2g2uog2pwd49u.png)


![Slide 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8plokeisn56ofhsvr5r8.png)


![Slide 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62djro91ozwsbakws3be.png)


![Slide 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otx57zj4r3o5yt2z8cmw.png)


![Slide 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yonbnrfm3aexzx4wys8t.png)


![Slide 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuebwqlhohflltevqf4a.png)


![Slide 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn7gjjv1j7fav4dami5g.png)


![Slide 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjtk377hypgzhh9k5aot.png)
Functional Programming in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2024-03-28 00:29:19

## Introduction

Functional Programming (FP) is a programming paradigm that focuses on writing code in a declarative, rather than imperative, style. While JavaScript is largely known as an object-oriented language, it also has functional programming capabilities that are gaining popularity amongst developers. In this article, we will discuss the advantages, disadvantages, and features of functional programming in JavaScript.

## Advantages of Functional Programming in JavaScript

1. **Immutable Data:** FP promotes the use of immutable data structures, which means the data cannot be changed once created. This reduces the risk of accidental data manipulation and results in more predictable and stable code.

2. **Higher Order Functions:** Functions can be passed as arguments to other functions, allowing for greater flexibility and modularity in code.

3. **No Side Effects:** One of the key principles of FP is the avoidance of side effects, meaning that functions do not change anything outside of their scope. This results in code that is easier to test and debug.

## Disadvantages of Functional Programming in JavaScript

1. **Steep Learning Curve:** For developers used to object-oriented programming, learning FP can be challenging due to its different approach to problem-solving.

2. **Limited Browser Support:** Some older browsers do not support all of the features of FP, making it less practical for certain projects.

## Features of Functional Programming in JavaScript

1. **First-Class Functions:** In JavaScript, functions are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

2. **Recursion:** FP encourages the use of recursion to solve problems, which can lead to more elegant and efficient code.

### Example of Higher Order Functions and Immutable Data

```javascript
const numbers = [1, 2, 3, 4, 5];

// Example of a higher order function
const doubled = numbers.map(number => number * 2);

// `numbers` array remains unchanged, demonstrating immutability
console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(doubled); // Output: [2, 4, 6, 8, 10]
```

### Example of Recursion

```javascript
// A simple recursion example to calculate factorial
function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120
```

## Conclusion

Functional programming in JavaScript offers numerous advantages such as immutable data and higher order functions, but it also has its challenges. While it may not be suitable for every project, incorporating FP principles and techniques can lead to more maintainable and scalable code. With the rise of frameworks like React and Redux, which heavily rely on FP concepts, it is clear that functional programming is here to stay in the world of JavaScript.
CSS Art: Grape
Tags: frontendchallenge, devchallenge, css, cssart
Published: 2024-03-28 00:29:05

## Inspiration 
As a frontend engineer, you seldom encounter artistic CSS, so participating in this challenge was a rare treat. It also made me hungry for grapes, haha! 

## Demo
{% codepen https://codepen.io/balzzac/pen/OJGjNON %}

## Journey
I want to admit that I cheated a little bit with the stem using a realistic-looking svg. My first draft utilized the `clip-path` property. However, its effect was quite cartoonish, so I dumped it.

The submission utilizes the following CSS properties: 

1. `display: grid` was quite handy in creating the distribution of berries.
2. Gradients, shadows, and filters to create a somewhat photorealistic grape.
3. CSS variables.
4. `:nth-child` selector to introduce a little variety for the berries' shapes and sizes.
5. CSS animation so you could "squeeze" those berries.
6. Units - `vh` and `%` - to create responsiveness.
Copy & Paste React Components for Dashboards
Tags: dashboard
Published: 2024-04-08 02:44:52

---
title: Copy & Paste React Components for Dashboards
published: true
date: 2024-03-28 00:17:00 UTC
tags: Dashboard
canonical_url: https://reactjsexample.com/copy-paste-react-components-for-dashboards/
---

## tremor-raw
 ![Copy & Paste React Components for Dashboards](https://reactjsexample.com/content/images/2024/03/Code_2024-03_12-12-05.jpg)

Tremor Raw offers customizable, accessible React components to build dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.

![Copy & Paste React Components for Dashboards](https://reactjsexample.com/content/images/2024/03/tremor_raw_banner_11.png)

[View Demo](https://raw.tremor.so/)[View Github](https://github.com/tremorlabs/tremor-raw)
OCR - The most impressive feature in ChatGPT-4
Tags: ai, chatgpt, ocr, software
Published: 2024-03-28 00:13:17

One of the features I’m most impressed with in ChatGPT-4 is its OCR capabilities ⬇️

I inputted a picture of a Pokemon card, and it was able to:

⚫ read blurry text description
⚫ assess the quality of the card
⚫ recognize the Pokemon depicted
⚫ correctly count and interpret symbols
⚫ extract text and numbers regardless of its position

I’m surprised this isn’t talked about more because it makes many OCR API’s obsolete.

For example using Amazon Textract to achieve this same objective would require extra logic to scan for text above, left, right, and below a key. 

It also doesn't handle symbols, synonyms, and abbreviations well. 

What was many lines of code and error prone before is now replaced with just a few lines of code using OpenAI’s API.

---
If you're interested in building on these API's, I've linked to the GPT-4 Vision docs here:

https://platform.openai.com/docs/guides/vision

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fbqklgnqwiuvn7jhb01.jpeg)
How to use OpenMP from Perl with SPVM.
Tags: perl, openmp, spvm
Published: 2024-03-28 00:10:25

How to use <a href="https://en.wikipedia.org/wiki/OpenMP">OpenMP</a> from Perl with <a href="https://metacpan.org/pod/SPVM">SPVM</a>.

See <a href="https://github.com/yuki-kimoto/SPVM/tree/master/examples/native/openmp">an example to bind OpenMP to SPVM</a>

SPVM provides a way to bind C language libraries and call them from Perl.

When binding C libraries to Perl, you typically write XS, but SPVM offers an alternative approach.

MyOpenMP.spvm

```
class MyOpenMP {
  
  native static method sum_vec_int : int[] ($nums1 : int[], $nums2 : int[]);
  
  static method test : void () {
    my $nums1 = [1, 2, 3];
    my $nums2 = [5, 6, 7];
    
    my $nums3 = &sum_vec_int($nums1, $nums2);
    
    for (my $i = 0; $i < @$nums3; $i++) {
      say $nums3->[$i];
    }
  }
}

```

MyOpenMP.c

``` C
#include "spvm_native.h"

#include <string.h>

static const char* FILE_NAME = "SPVM/MyOpenMP.c";

int32_t SPVM__MyOpenMP__sum_vec_int(SPVM_ENV* env, SPVM_VALUE* stack) {
  
  void* obj_nums1 = stack[0].oval;
  if (obj_nums1 == NULL) {
    return env->die(env, stack, "$nums1 must be defined.", __func__, FILE_NAME, __LINE__);
  }
  int32_t* nums1 = env->get_elems_int(env, stack, obj_nums1);
  
  void* obj_nums2 = stack[1].oval;
  if(obj_nums2 == NULL) {
    return env->die(env, stack, "$nums2 must be defined.", __func__, FILE_NAME, __LINE__);
  }
  int32_t* nums2 = env->get_elems_int(env, stack, obj_nums2);
  
  int32_t length = env->length(env, stack, obj_nums1);
  
  void* obj_nums3 = env->new_int_array(env, stack, length);
  int32_t* nums3 = env->get_elems_int(env, stack, obj_nums3);
  
  int32_t i;
#pragma omp parallel for
  for (i = 0; i < length; i++) {
    nums3[i] = nums1[i] + nums2[i];
  }
  
  stack[0].oval = obj_nums3;
  
  return 0;
}
```

MyOpenMP.config

```
use strict;
use warnings;

use SPVM::Builder::Config;

my $config = SPVM::Builder::Config->new_gnu99(file => __FILE__);

# Compiler options
$config->add_ccflag('-fopenmp');

# Linker option
$config->add_ldflag('-fopenmp');
$config->add_lib('gomp');

$config;
```

openmp.pl

```
use strict;
use warnings;

use FindBin;
use lib "$FindBin::Bin/lib";

use SPVM 'MyOpenMP';

SPVM::MyOpenMP->test;
```

This program outputs values calculated by OpenMP.

```
6
8
10
```
Adding Environment Variables to Your Webpack Project
Tags: webpack, webdev, environment
Published: 2024-03-29 14:22:11

---
title: Adding Environment Variables to Your Webpack Project
published: true
date: 2024-03-28 00:00:00 UTC
tags: webpack, webdev, environment
cover_image: https://www.jakehayes.net/blog-images/tech/2024/environment.jpg
canonical_url: https://www.jakehayes.net/blog/engineering/2024/env-vars/
---

Adding environment variables to your Webpack project is simple and easy. All you need to do is add `dotenv-webpack` into the dev dependencies in your `package.json`

```
pnpm i -D dotenv-webpack

```

Then in the `webpack.config.js`, add this to the plugins:

```
{
 plugins: [
   new Dotenv({
  path: `./.env.${process.env.NODE_ENV}`,
   }),
 ],
};

```

With this setup, it will be easiest to set the `NODE_ENV` as part of your `scripts` in your `package.json`

```
{
 "scripts": {
  "dev": "NODE_ENV=local ...",
  "build": "NODE_ENV=release ...",
  // ...
 },
 // ...
}

```

Then you can create files based on the path provided `./.env.local` and `./.env.release` (you'll need to match yours up with whatever path and file name you specify in Webpack). Then the .env files are formatted the same as you would in any other project:

```
KEY=VALUE

```

Then in javascript all you need to access the value is to look at the `process.env` object like this:

```
const value = process.env.KEY;

```
Gitlab upgrade signature invalid EXPKEYSIG 3F01618A51312F3F
Published: 2024-03-27 23:47:56

This blog post explains the Gitlab Upgrade Error "The following signatures were invalid: EXPKEYSIG 3F01618A51312F3F" and how to fix it: [www.blunix.com/blog/gitlab-upgrade-error-the-following-signatures-were-invalid-EXPKEYSIG-3F01618A51312F3F.html](https://www.blunix.com/blog/gitlab-upgrade-error-the-following-signatures-were-invalid-EXPKEYSIG-3F01618A51312F3F.html)
CSS Styling (Next.js)
Tags: webdev, nextjs, css
Published: 2024-03-27 23:29:46

You can visit my [GitHub repo](https://github.com/Samuel-Lubliner/nextjs-dashboard/commits/main/) to follow along with me.

`git commit -m "`[Add global styles](
https://github.com/Samuel-Lubliner/nextjs-dashboard/commit/20927abe9151e96f26c5a6f282b827a10d625427)`"`

You can use `/app/ui folder/global.css` to add CSS rules to all the routes in your application.

You can import `global.css` in any component in your application, but it's usually good practice to add it to your top-level component. This is the root layout.

Add global styles to your application by importing `global.css` in `/app/layout.tsx`:

`import '@/app/ui/global.css';`

## Tailwind CSS

[Tailwind](https://tailwindcss.com/) is a CSS framework that helps you to quickly write [utility classes](https://tailwindcss.com/docs/utility-first) directly in your TSX markup.

Inside `global.css`, there are some @tailwind directives:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

When you use `create-next-app`, Next.js will ask if you want to use Tailwind and automatically install the necessary packages and configure Tailwind in your application.

For traditional CSS rules or keeping your styles separate from your JSX - [CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support) are an alternative.

## Using the clsx library to toggle class names

There may be cases where you may need to conditionally style an element based on state or some other condition. [clsx](https://www.npmjs.com/package/clsx) is a library that lets you toggle class names easily.

## Other style alternatives

- Sass which allows you to import .css and .scss files.
- CSS-in-JS libraries such as styled-jsx, styled-components, and emotion

CSS [documentation](https://nextjs.org/docs/app/building-your-application/styling)
Ruby dry-monads
Tags: ruby
Published: 2024-03-27 23:24:56

- :thinking: What is the use case for dry-monads?
- :grinning: return either Success or Failure from some operation

From the `dry-monads` [doc](https://dry-rb.org/gems/dry-monads/1.6/):
> Monads provide an elegant way of handling errors, exceptions and chaining functions so that the code is much more understandable and has all the error handling without all the `if`s and `else`s



```
user = User.find_by(id: params[:id])

if user
  address = user.address
end

if address
  city = address.city
end

if city
  state = city.state
end

if state
  state_name = state.name
end

user_state = state_name || "No state"
```
After using dry-monads :sparkles:
```
def find_user(user_id)
  user = User.find_by(id: user_id)

  if user
    Success(user)
  else
    Failure(:user_not_found)
  end
end

def find_address(address_id)
  address = Address.find_by(id: address_id)

  if address
    Success(address)
  else
    Failure(:address_not_found)
  end
end
```

This style of programming is called :railway_car: Oriented Programming ( Railway Oriented Programming) - More info [here](https://fsharpforfunandprofit.com/rop/)!
Next.js App Router Course
Tags: webdev, tutorial, nextjs
Published: 2024-03-27 22:51:59

## [Getting Started](https://nextjs.org/learn/dashboard-app/getting-started)

Here I am documenting the official Next.js App Router [course](https://nextjs.org/learn/dashboard-app) covering the main features of Next.js by building a full-stack web application.

You can visit my GitHub repo [here](https://github.com/Samuel-Lubliner/nextjs-dashboard/commits/main/) to follow along with me.

I am building a dashboard app that has:

- A public home page.
- A login page.
- Dashboard pages that are protected by authentication.
- The ability for users to add, edit, and delete invoices.
- An accompanying database

### Project requirements:

- Node.js 18.17.0 or later [installed](https://nodejs.org/en)
- Vercel [Account](https://vercel.com/signup)

Create a new Next.js app by running this command in the terminal:

`npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"`

This command uses `create-next-app`, a Command Line Interface tool that sets up a Next.js application.

### Breakdown of the folder strucutre:

`/app` Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.

`/app/lib` Contains functions used in your application, such as reusable utility functions and data fetching functions.

`/app/ui` Contains all the UI components for your application, such as cards, tables, and forms.

`/public` Contains all the static assets for your application, such as images.

`/scripts` Contains a seeding script.

Config Files: Most of these files are created and pre-configured with `create-next-app`.

This project uses TypeScript to help pass the correct data to components and database.

In this project I am manually declaring the data types. For better type-safety, use [Prisma](https://www.prisma.io/), which automatically generates types based on your database schema.

Next.js automatically installs the necessary TypeScript packages and configuration Next.js also comes with a TypeScript [plugin](https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin) for your code editor, to help with auto-completion and type-safety.

### Development server

Run `npm i` to install the project's packages.

Followed by `npm run dev` to start the development server.

This starts your Next.js development server on port 3000 at http://localhost:3000 in the browser.

Up next: [CSS Styling](https://nextjs.org/learn/dashboard-app/css-styling)
Let vs. Const: Choosing the Right Tool for the Job in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2024-03-27 22:48:02

Today we're diving into the world of variable declarations, specifically focusing on `const` and `let`. These keywords might seem similar, but understanding the subtle differences between them is crucial for writing clean, maintainable, and bug-free code.

**Const: The Unchanging Guardian**

The `const` keyword declares a variable with a fixed value. Once assigned, this value cannot be reassigned later in your code. Think of it as a constant – a fundamental truth that remains unwavering throughout your program. Here are some ideal use cases for `const`:

* **Constants:** When dealing with values that shouldn't change, like mathematical constants (e.g., `const PI = 3.14159;`) or configuration settings.
* **Array and Object References:** While you can't reassign the variable itself using `const`, you can still modify the contents of arrays and objects referenced by the variable. This allows you to create an array or object and then manipulate its elements without accidentally overwriting the entire reference.

**Example:**

```javascript
const colors = ["red", "green", "blue"];
colors.push("yellow"); // This is allowed - modifying the array elements

console.log(colors); // Output: ["red", "green", "blue", "yellow"]

// This would cause an error:
// colors = ["purple", "orange"];
```

**Let: The Flexible Friend**

The `let` keyword is your go-to for variables whose values might change within the scope they're declared. It offers more flexibility than `const` while still preventing accidental reassignments from outer scopes. Use `let` for:

* **Loop Counters:** In `for` loops, you typically need to update a counter variable. `let` allows you to do this without creating issues.
* **Conditional Assignments:** When a variable's value might change based on certain conditions within its scope.

**Example:**

```javascript
let age = 25;
if (age >= 18) {
  age = "adult"; // Reassigning within the same scope using let
}

console.log(age); // Output: "adult"
```

**Test Your Understanding!**

Here's a scenario to check if you've grasped the concepts:

```javascript
const name = "Alice";
let age = 30;

function updateAge() {
  age++; // Can we modify age here? (Why or why not?)
}

updateAge();
console.log(age); // What will be the output?
```

Can you explain why `age` can be modified inside the function and what the final output will be? If so, you're well on your way to mastering `const` and `let` in your JavaScript coding adventures!

**Remember:** By adopting a `const`-by-default approach and only using `let` when necessary, you'll enhance your code's clarity, prevent accidental modifications, and make it easier for yourself and others to understand your logic. Happy coding!
Day 936 : All Night
Tags: hiphop, code, coding, lifelongdev
Published: 2024-03-27 22:33:37

_liner notes_:
- Professional : Pretty good day. Spoke with my manager to talk about some things coming up. Followed up on some community questions. Worked on some new Web Components. I updated some frameworks and things seem to be working with no issue.

- Personal : Last night, I was able to get a sample project deployed to the host. It went pretty smoothly. I also created some graphics for my side project and tested them out. Also went through some tracks for the radio show. Ended the night watching some "Extraordinary" episodes.

![The photo shows a mountain landscape with a lake in the foreground. The mountains are covered in snow. The trees in the foreground are green, orange, and yellow. The water in the lake is blue and green. The sky is blue and there are some clouds. The photo was taken from a high angle. The location is Cerulean Lake, BC, Canada.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25xjiuf6m8cibk0txr0h.jpg)

So, after work, I headed to an Orlando Developers group event. I think I may be streaming it unless they got an opportunity to set up the application I made. There's another event that I may go to after this one. We'll see how I feel. Not really trying to stay out all night. Don't think I'll get much coding in tonight. Good thing I made some pretty good progress earlier in the week.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 2aH6q4bMrr4 %}
Better wrapper scripts
Tags: packaging, script
Published: 2024-03-27 22:29:54

There are many programming languages that don't by default produce native executables. Among them are Python, Java, Ruby, Perl, Raku, ... The list goes on. When creating an application in any of those languages one will at one point typically hit the issue that the application can only be started by calling a the language interpreter and passing a few arguments. The usual solution is to write a small wrapper shell script on *nix and a bat file on Windows. That's a quick solution. But getting such wrapper scripts really right is not trivial. Typical pitfalls are:

- making the script independent of the current working directory
- having it working in all *nix environments (i.e. make it work in POSIX shell instead of say bash)
- On Windows passing command line arguments on (it's actually impossible to do correctly in batch files)
- On Windows not losing the connection to the terminal (there is no `exec` on Windows)

A few years ago I started working on a tool to help generating robust wrappers for this use case. I've finally pushed it over the finish line.

Executable Runner Generator
---------------------------

So here it is, the [Executable Runner Generator](https://raku.land/zef:patrickb/Devel::ExecRunnerGenerator). The name could have been chosen better, but I guess we'll have to live with it now. It's written in the [Raku](https://raku.org/) language, but the generated wrappers are independent of the language. Currently it can generate wrappers that work on Windows x86_64 and all sorts of POSIX systems.

In general the task of the wrapper is to put together a command line (and runtime environment like CWD and env vars) and execute the program. How exactly that happens is configured via a set of options. The wrapper has the ability to:

- Convert paths to absolute or relative to the wrappers file system location
- Change path separators on Windows
- Change the current working directory
- Specify the command line arguments to pass to the program
- Forward the arguments passed to the wrapper
- Add and remove environment variables


A webservice
------------

As not everyone is keen to install Raku on their system just to generate a wrapper, I've set up a small website that exposes the functionality as a website:

[https://boekernet.de/erg](https://boekernet.de/erg)


Call for help
-------------

On Windows the generator relies on a native executable written in C to do it's magic. There is no `exec` syscall on Windows. The program works around this by staying alive, letting the child process inherit it's file descriptors and once the child finishes, returns with it's exit code. I'm pretty sure this "exec emulation" isn't perfect. But as I'm not a Windows low level expert I don't even know what I'm missing. Signals? Security contexts? I don't know.
So: If you are knowledgeable of the lower Windows APIs, I'd love to get feedback on the [implementation](https://git.sr.ht/~patrickb/Devel-ExecRunnerGenerator/tree/main/item/runner-src/runner.c) or maybe even a patch.