teleren/devto huggingface dataset:
Introducing an Open-Source Admin Dashboard Template Based on Tailwind CSS
Published: 2023-05-23 15:46:10

In today's digital landscape, web developers often face the challenge of building efficient and visually appealing admin dashboards. These dashboards serve as a crucial tool for managing and monitoring various aspects of a website or application. However, building an admin dashboard from scratch can be time-consuming and challenging too. To simplify this process, I have come up with an open source solution—an admin dashboard template built on HTML, CSS, Vanilla JavaScript, Tailwind CSS, and Vite.

**AdminToolkit** - is a modern admin dashboard template that comes with a variety of useful features and functionalities. It is built using TailwindCSS, a popular CSS framework that provides a simple and intuitive approach to building responsive UIs. The template includes over 50 pre-built pages, each designed with a focus on usability and user experience. These pages cover a wide range of use cases, including dashboards, analytics, products management, user management, invoice management and more.

**Live Demo:** https://www.getadmintoolkit.com/
**Source Code:** https://github.com/mostafizurhimself/admintoolkit-html

## 📌 Features
- Based on Tailwindcss 3.x+
- Light & Dark theme support
- Auto-detect theme from user device preference
- Pre-built UI components
- Pre-built apps layout
- 50+ Pages
- Responsive layout
- Easily Customizable
- Developer friendly
- Organized codebase

If you like this project, star this project on [Github](https://github.com/mostafizurhimself/admintoolkit-html). By starring the repository, you demonstrate your interest in the project and contribute to its visibility within the GitHub community. Your star helps us to gauge the level of interest and encourages others to discover and explore the template. Additionally, starring the project allows you to receive notifications about updates, new releases, and important announcements.
Simplify Your Typescript Code with Optional Chaining and Nullish Coalescing
Tags: typescript, javascript
Published: 2023-05-23 15:45:17

TypeScript offers powerful features that make code more concise and efficient. Two such features, optional chaining and nullish coalescing, play a vital role in data effectively. In this article, we'll explore these features within the context of the NBA, showcasing their ability to simplify code and easily handle data. So, let's dive into the world of TypeScript and the NBA!

## Optional Chaining: Safely Navigating NBA Player Data

Imagine you're working on an NBA statistics app and need to access player information. However, not all players have complete data available. To ensure smooth data handling, let's consider the example of accessing a player's team name using optional chaining:

```typescript
const player = getPlayer();
```
Here, the getPlayer() function fetches player data from your data source. To access the player's team name, you might initially write code like this:

```typescript
if (player !== undefined) {
  const team = player.team;
  if (team !== undefined) {
    const teamName = team.name;
  }
}
```
This approach is cautious but verbose. Thankfully, TypeScript offers a concise alternative with optional chaining:

```typescript
const teamName = player?.team?.name;
```
The use of the question mark after each property ensures that the subsequent property is accessed only if its parent property exists. Optional chaining simplifies the code and saves you from writing multiple if statements, reducing the chances of encountering null or undefined errors.

## Nullish Coalescing: Providing Default Values in NBA Data

Our NBA app encounters scenarios where certain player information may be missing. To handle these cases gracefully and provide default values, let's focus on accessing a player's jersey number using nullish coalescing:

```typescript
const jerseyNumber = player.jerseyNumber !== undefined ? player.jerseyNumber : 0;
```
Here, we check if the jerseyNumber property exists in the player object. If it does, we use its value; otherwise, we provide a default value of 0. However, this can be simplified using nullish coalescing:

```typescript
const jerseyNumber = player.jerseyNumber ?? 0;
```
The double question mark (??) checks if the left-hand side value is nullish (null or undefined) and provides the right-hand side value as the default if needed. Nullish coalescing ensures that we always have a valid jersey number, even if it's missing in the player data.

## Conclusion:
Optional chaining and nullish coalescing are powerful features in TypeScript that greatly enhance data handling in NBA-related projects. By safely navigating data with optional chaining and providing default values using nullish coalescing, you can easily streamline your code, reduce errors, and create robust Typescript applications. 

Happy coding!


Photo by engin akyurt on Unsplash
ossjobs.dev 👋 land your next job in open source
Tags: opensource, jobs, career, news
Published: 2023-05-23 15:24:40



We at [crowd.dev](https://www.crowd.dev/) are excited to share something we’ve been working on in the background for our community: [ossjobs.dev](https://www.ossjobs.dev/). 🚀 

ossjobs.dev is a job board to help passionate individuals find their next career opportunity, specifically in the open-source space. 

The idea for the job board came to us when we were busy hiring at crowd.dev last month. During the process, two things stuck out to us:

1. An ever-growing number of talented professionals (not just developers!) are passionate and highly motivated to work in the open-source sector.

2. Current open-source job boards tend to focus solely on developer roles or require companies to pay hefty fees to post job listings.

Noticing this gap in the market, our Growth Engineer, Igor Kotua, went out and built ossjobs.dev over a weekend.

The platform already includes 30+ job openings in various open-source startups, covering roles in engineering, marketing, and people management. We've tried to make it super simple to find a suitable role, and you can filter by remote work possibilities, salary range, category, and company.


[![screenshot form ossjobs.dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2g9fnt7iohb4by2l11v.png)](ossjobs.dev)

And the best part for open source companies? It's 100% free to post your job openings.

If you are currently eyeing up your next career move, we encourage you to try out ossjobs.dev or [share it with anyone you know on the hunt for an opportunity](https://twitter.com/jonathimer/status/1661007788007620612) with one of many thriving open-source startups. 

On the flip side, if you are part of an open-source company searching for open-source enthusiasts to fill your vacant roles, make sure to [upload your listing on the platform](https://airtable.com/shrDIuokYAsveoe6a). 

Our goal with ossjobs.dev is to help make the process of finding and filling these roles a simpler and more targeted experience for all involved.

In today's hiring market, we genuinely hope that ossjobs.dev can help someone find a great new gig. So join us in spreading the word and happy job hunting! ❤️

--

_If you like ossjobs.dev and you want to support our work, please feel free to [leave a GitHub star for crowd.dev](https://go.crowd.dev/devto-stars-ossjobs-announcement) (the company sponsoring this project). ⭐️_


[![GitHub star?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aqfigx6x0i2nnvtzx4a.jpeg)](https://go.crowd.dev/devto-stars-ossjobs-announcement)
100 Days Coding Challenge - Day 4: FreeCodeCamp Web Design
Tags: webdev, programming, 100daysofcode, css
Published: 2023-05-23 14:51:56

## Day 4

Today I finish the magazine, let me show you

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

and I'm starting to the four project to gain the certification


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

I will show the result or process tomorrow
project won't compile
Tags: developer, cpp
Published: 2023-05-23 14:32:26

I am currently working with an older c algorithms book. I installed all the related .c and .h files into the project, but the compiler complains about "netinet/in.h " not being found even though it is included in the book code.  The include line is #include <netinet/in.h> and because of the <> brackets I was led to believe that this file is part of the installed library.  I'm developing in a windows environment so I am a little bit confused about where this library file, if it even exist for windows, exists at all.  If there is an alternative header file for windows where would I even go to download it?
sydney
Host Resume with just 15 lines of code 🌐✨
Tags: resume, beginners, tutorial, github
Published: 2023-05-23 14:26:34

In today's competitive job market, having an online presence is crucial for tech professionals. Hosting your resume online not only showcases your skills to potential employers but also makes it easy for recruiters to find and review your qualifications. In this blog post, we will show you how to host your resume online with just 15 lines of code using GitHub Pages.

GitHub Pages is a free service provided by GitHub that allows you to host static websites directly from your GitHub repository. Here's how you can host your resume on GitHub Pages:

For this you should have uploaded your resume pdf to google drive and then proceed to the following steps.

1. Open your resume on the google drive and click on the 3 dots to open the options menu and click on "Embed item..." and then select the iframe code snippet.


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



2. Create a new GitHub repository, keep a simple name such as resume or something simple as this will be included in your URL link.

3. Next, create an index.html file in your repository. This file will serve as the main page for your resume website. You can use the following basic HTML template as a starting point

```
<!DOCTYPE html>
<html>
	<head>
		<title>Resume</title>
	</head>
	<body>
		<iframe
			src="PUT YOUR SOURCE URL HERE"
			width="100%"
			height="1080"
			allow="autoplay"
		></iframe>
	</body>
</html>
```

4. Replace `src="PUT YOUR SOURCE URL HERE"` form the google drive link you obtained in step 1. You can also add any additional HTML, CSS, or JavaScript to customize the appearance and functionality of your resume

5. Go to the repo settings, click on pages and then select the main branch to deploy the page.

That's it! With just 15 lines of code, you have successfully hosted your resume online using GitHub Pages. You can now share the URL with potential employers and recruiters. This not only demonstrates your technical skills but also helps you stand out from the competition in the job market.

Checkout my personal repo [here](https://github.com/jeetvora331/resume)
Arch install Arcris
Tags: arch, linux
Published: 2023-05-23 14:09:36

---
title: Arch install Arcris
published: true
description: 
tags: arch, linux
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-23 14:07 +0000
---

```bash
loadkeys es
pacman -Sy wget --noconfirm
wget is.gd/arcris
sh arcris 
```
How to interpret a sequence diagram
Tags: productivity, webdev, tutorial, sequencediagram
Published: 2023-05-23 14:03:56

Follow along on this tour of a sequence diagram, covering the following concepts:

1. **Lifeline**: A vertical line that represents an object or component in the system. The lifeline shows the lifetime of the object/component and its existence over time.
2. **Object header**: The rectangular box attached to the top of the lifeline that contains the name of the component (package, class, etc.) that the lifeline represents.
3. **Activation bar**: A horizontal line that represents the duration of time when an object is performing an action or processing a message. It is shown as a solid line on top of the lifeline.
4. **Message**: A horizontal arrow that represents the communication between objects or components. It is shown as a line with an arrowhead pointing from the sender to the receiver. Messages can be synchronous, asynchronous, or self-referential.
5. **Return message**: A horizontal arrow with a dashed line that represents the return message from the receiver to the sender.
6. **Self-message**: A message that is sent by an object to itself.
7. **Combined fragment**: A diagram fragment representing a specific flow of control. It is shown as a box with a label that indicates the condition under which it is executed.
Listing Organisation Contributors
Tags: githubhack23
Published: 2023-05-23 13:53:30

## What I built 

GitHub Action for easily generating a markdown file that lists all organisation contributors. The file can be linked e.g. to GitHub organisation profile page.

### Category Submission

Maintainer Must-Haves

### App Link

https://github.com/lauravuo/fetch-contributors-action

### Screenshots 

#### Result markdown file

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

#### The contributors file can be linked to organisation profile


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

#### Scheduled action updates the data regularly

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

### Description 

The action utilizes GitHub API for fetching the contributor data for all organisation repositories. It then generates a markdown file for the data and stores the result file to the repository.

The organisation maintainers can integrate this action to organisation's `.github`-repository so that the contributors data can be linked or even listed directly in the organisation's profile page.

### Link to Source Code 

https://github.com/lauravuo/fetch-contributors-action

### Permissive License 

Apache 2.0

## Background

I have wanted to learn more about GitHub API for a while. In one open-source project, there became a need to list the organization's contributors to determine who has been making code contributions. The contributors can differ from the organization members, so the organization member listing does not give this information directly. This need was a perfect excuse to learn about the GitHub API more.


### How I built it

I built a Javascript GitHub Action and learned a lot about crafting GitHub Actions using Typescript, and how to test them. I also know now more about the GitHub API in general.
Annotations - an overhead in serverless world
Tags: serverless, aws, java, guice
Published: 2023-05-23 13:53:16

We are building APIs as a FAAS (Function as a Service) to keep it highly scalable and easier to deploy. We use Step Functions to orchestrate the events and use lambdas to do specific processing. While building this approach, we tried using several annotation frameworks and everything comes at a cost. Our flow processing goes up to 21 seconds during the initialization while it runs less than 2 seconds without any use of automation. We could use coldstart and snapstart to keep this to minimum but is annotation an overhead?
Open a URL when a worker accepts a call
Tags: twilio, help
Published: 2023-05-23 13:49:48

I have a use case where I have to create an IVR in Twilio and pass a call to a worker based on their defined skills, the moment the worker answers a call a URL page will open in a new tab. The thing am having trouble figuring out is I have tried functions but the function is not triggering when the worker answers the call, I couldn't even find the right code to achieve this.
How to Order Spatie Translatable Columns in Laravel
Tags: php, laravel, webdev
Published: 2023-05-23 13:43:27

Spatie utilizes the JSON column type to store localized texts, which poses a challenge when attempting to order the column using the "ORDER BY" clause in MySQL. However, there is an approach to overcome this limitation. By leveraging the JSON_EXTRACT function in MySQL, it is possible to order the JSON column effectively. In the case of using the Laravel framework, a custom scope can be implemented to achieve this functionality. The scope should accept the column name, sort direction, and optionally, the locale, providing flexibility in the ordering process. The following code snippet demonstrates the implementation of such a scope in Laravel:

```php
public function scopeOrderByTranslatable(Builder $query, string $column, string $sortDirection = 'asc', string $locale = null)
{
    $locale = $locale ?? App::currentLocale();

    return $query->orderBy(DB::raw("JSON_EXTRACT($column, '$.$locale')"), $sortDirection);
}
```

In cases where the locale parameter is not provided, the scope automatically retrieves the current locale using the App::currentLocale() function.
Run additional script when starting a Postgres container
Tags: postgres, docker, dx, devops
Published: 2023-05-23 13:17:20

Today, I've just explored a feature when you start a postgres instance on Docker which allows you to set up initial data like CREATE ROLE or GRANT <PRIVILEGE>.

You may learn more details [here](https://github.com/docker-library/docs/tree/master/postgres#initialization-scripts)

We create *.sql or *.sh script to run SQL statement or bash script to prepare initial data. Postgres container will run any *.sql and *.sh found in the directory (which containing docker-compose.yml) to do further initialization before starting the service.

NOTE: scripts in /docker-entrypoint-initdb.d are only run if you start the container with a data directory that is empty; any pre-existing database will be left untouched on container startup.

And visit my example code at [my gist](https://gist.github.com/hoangquochung1110/5486440c7e2b43f98135ff7803750b5f)
We have to talk about Arrow Functions...
Tags: webdev, javascript, beginners, programming
Published: 2023-05-23 13:08:34

Oh yes, isn't it beautiful? A TypeScript CodeBase, well maintained.... and then this. Somebody starts to use only named arrow functions in classes. Because it is "the new way". What a colossal bullshit. Of course arrow functions are cool. They offer a wide range of possible uses in the most diverse cases.

```TypeScript
() => {

// some code

}
```

Such a call can be perfectly used to describe return functions without overhead. 
It can be perfectly adapted for various use cases without making the code confusing.
However, what makes absolutely no sense and creates confusion is the following:

```TypeScript
public functionName = () => {

// some code

}
```

Such a case is syntactically correct, but it is absolutely confusing and unpleasant, if it can be done this way, too:

```TypeScript
public functionName() {

// some code

}
```

Unfortunately, I see this kind of buck crap more and more often in the wild. I hope to reach and save at least a few lost souls with this little rant.

Kind regards,
Yours, Josun
Mastering Collections in Go: A Comprehensive Guide to Arrays, Slices, and Maps
Tags: beginners, programming, tutorial, go
Published: 2023-05-23 13:03:24


Go, a statically-typed and compiled programming language created at Google, is known for its simplicity, efficiency, and strong support for concurrent programming. In this blog, we will explore three built-in data structures in Go that allow you to store and manage collections of values: arrays, slices, and maps.

1. Arrays:
An array is a fixed-size, ordered collection of elements of the same type. To declare an array, you need to specify the element type and the size of the array.

Syntax:

```go

var array_name [size]element_type

```

Example:

```go

var numbers [5]int // Declares an array of integers with a fixed size of 5

var numbers [5]int = [5]int{1, 2, 3, 4, 5} // Initializes an array of integers with a fixed size of 5
                                 (or)

numbers := [5]int{1, 2, 3, 4, 5} // Declares and initializes an array 
```

To access and modify elements in an array, use the array index. Indices start at 0.

```go

fmt.Println(numbers[0]) // Output: 1

```

2. Slices:
Slices are more flexible and powerful than arrays. A slice is a dynamically-sized, ordered collection of elements of the same type. It is built on top of an array but provides a dynamic size and additional built-in functions.

Declaring a slice:

```go

var slice_name []element_type

```

Example:

```go

var names []string // Declares a slice of strings with no initial size

```

To create a slice with initial elements, use the slice literal syntax:

```go

fruits := []string{"apple", "banana", "orange"}

```

Slices can be manipulated using built-in functions like **`make`**, **`len`**, **`cap`**, and **`append`**.

3. Maps:
Maps are unordered collections of key-value pairs, where each key is unique. They can be thought of as hash tables or dictionaries in other languages.

Declaring a map:

```go

var map_name map[key_type]value_type

```

Example:

```go

var grades map[string]int // Declares a map with string keys and integer values

```

To create a map with initial elements, use the map literal syntax:

```go

ages := map[string]int{
	"Alice": 30,
	"Bob":   25,
}

```

4. Manipulating maps:

- Adding a key-value pair: **`map_name[key] = value`**
- Accessing a value: **`value := map_name[key]`**
- Deleting a key-value pair: **`delete(map_name, key)`**

Go provides powerful built-in data structures to work with collections of values. Arrays offer fixed-size collections, while slices provide a more flexible and dynamic alternative. Maps are unordered key-value pairs that are useful for organizing data. By understanding the basics of these data structures, you can effectively store, manage, and manipulate data in your Go programs.