teleren/devto huggingface dataset:
Recording 'From Vanilla JS to Solid.js' Video Series
Tags: pwa, solidjs, firebase, youtube
Published: 2024-01-04 01:07:21

I had always wanted to have a Youtube channel where I could share my video tutorials, but had never been brave enough to start... until recently.

Meet my brand-new [personal Youtube channel](https://www.youtube.com/@kkomelin).

The [first video series](https://www.youtube.com/watch?v=Xv-2qg0nQPY&list=PL8y_ITxCUCl02UvoPsct6lL0hWu0ueqTv) is about porting a small vanilla JS web app to Solid.js and implementing push notifications for it through Firebase.

It's not because I'm a pro in Solid.js, Firebase or Youtube. In fact, I'm not. I'm still learning all this stuff while recording. It's rather about building something in public, sharing my approaches and collecting feedback from the community.

I see it as something like Video Open Source. Just the next step for my Open Source activities and blogging.

Watch [my progress](https://www.youtube.com/@kkomelin). Who knows where it can lead me in a few years.
Python 🐍 challenge_33⚔️
Tags: python, beginners, challenge, tutorial
Published: 2024-01-04 00:56:23

## Credit Card Mask 💳

- Usually when you buy something, you're asked whether your credit card number,
- phone number or answer to your most secret question is still correct. 
- However, since someone could look over your shoulder, 
- you don't want that shown on your screen. Instead, we mask it.

- Your task is to write a function maskify, 
- which changes all but the last four characters into '#'.

Examples:

```
"4556364607935616"      -->  "############5616"
"64607935616"           -->      "#######5616"
"1"                     -->                "1"
""                      -->                 ""

"What was the name of your first pet?"

"Skippy"                                    --> "##ippy"
"Nananananananananananananananana Batman!"  --> "####################################man!"
```

Task URL: https://www.codewars.com/kata/5412509bd436bd33920011bc/python


## My Solution:

```
def maskify(cc):
    """
    Masks the credit card number by replacing 
        all but the last four characters with '#'
    Args:
        cc (str): The credit card number as a string
    Returns:
        str: The masked credit card number
    """
    credit_card = str(cc)

    if len(credit_card) == 1 or len(credit_card) == 4:
        return credit_card
    if credit_card == "":
        return ""

    start = credit_card[0:-4]
    end = credit_card[-4:]
    hash = len(start) * '#'
    hash_credit_card = "".join([hash, end])

    return hash_credit_card

```


### Code Snapshot:


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

### Learn Python

######  Python top free courses from Coursera🐍💯🚀

🎥 {% youtube 2VRXU2H4q0c%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Drupal: Disable Password Reset
Tags: drupal, php
Published: 2024-01-03 22:52:41

In one particular site, we chose to block the user registration and user password reset options. The site is using SSO login anyway, so this would really only impact our development team's superuser admin account (user 1) that is typically blocked outside of an emergency, so this seals up a possible attack vector with no user impact.

User registration can also be blocked with site configuration, so I wouldn't have bothered with custom code for only that part. But since I was doing it for the password reset anyway, I decided to go ahead with the extra layer of protection on the registration route as well.

I achieved this with a simple custom module which you can view in full [in my GitHub](https://github.com/ryan-l-robinson/Drupal-disable-password-reset). Here's the key part, blocking access to the routes:

```php
  protected function alterRoutes(RouteCollection $collection) {
    // Always deny access to unwanted routes.
    $disallow_routes = [
      'user.register',
      'user.pass',
    ];
    foreach ($disallow_routes as $disallow_route) {
      if ($route = $collection->get($disallow_route)) {
        $route->setRequirement('_access', 'FALSE');
      }
    }
  }
```
Fetching and Parsing Meta Tags from URLs in Node.js
Tags: webdev, node, javascript
Published: 2024-01-04 00:36:51

Fetching and parsing meta tags from web pages is a common task in web development, particularly useful for SEO analysis, content summaries, or social media integration. JavaScript, with Node.js, provides a powerful and efficient way to accomplish this. In this post, Ill guide you through creating a simple Node.js script to fetch and extract meta tags from any URL.

## Prerequisites

Before diving into the code, ensure you have Node.js installed on your machine. Youll also need two npm packages: Axios for making HTTP requests and Cheerio for parsing HTML content.

## Step 1: Installing Dependencies

First, install Axios and Cheerio by running the following command in your terminal:

```
npm install axios cheerio
```

## Step 2: Writing the Script

Our script will consist of a function `fetchMetaTags` that takes a URL, sends a GET request, and parses the HTML to extract meta tags.

```
const axios = require('axios');
const cheerio = require('cheerio');

async function fetchMetaTags(url) {
    try {
        const { data } = await axios.get(url);
        const $ = cheerio.load(data);
        const metaTags = {};

        $('meta').each((i, element) => {
            const name = $(element).attr('name') || $(element).attr('property');
            if (name) {
                metaTags[name] = $(element).attr('content');
            }
        });

        return metaTags;
    } catch (error) {
        return { error: error.message };
    }
}

// Example usage
fetchMetaTags('https://www.google.ca').then(metaTags => console.log(metaTags));

```

## Step 3: Understanding the Code

- Axios: Makes the HTTP GET request to the URL.

- Cheerio: Parses the HTML content and provides a jQuery-like syntax for traversing and manipulating the HTML elements.

- Meta Tags Extraction: Iterates over each `meta` tag and stores their `name` (or `property`) and `content` in an object.

## Conclusion

With this simple script, you can start fetching meta tags from any web page using Node.js. This method is particularly useful for SEO purposes, content discovery, and more.

Remember to use web scraping responsibly and always comply with the terms of service of the websites you scrape.

## Next Steps

- Expand the script to handle different types of meta tags more specifically.

- Integrate this functionality into larger web applications or SEO tools.
A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more
Tags: nextjs
Published: 2024-01-08 07:31:50

---
title: A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more
published: true
date: 2024-01-04 00:23:00 UTC
tags: Nextjs
canonical_url: https://reactjsexample.com/a-monorepo-app-built-with-turborepo-next-js-14-shadcn-ui-stripe-and-more/
---

[![A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more](https://camo.githubusercontent.com/db42459211f4058d7553d3ab2b7ea90c6fe7250070a815ffd33a6385960615bf/68747470733a2f2f747572626f636861726765722e63632f696d616765732f6c6f676f2e706e67)](https://github.com/mehdibha/turbocharger) ![A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more](https://reactjsexample.com/content/images/2023/12/Code_2023-12_22-18-10.jpg)

# Turbocharger

Turbocharge your project with this monorepo starter. It comes with Next.js, Tailwind CSS, Shadcn-ui, Server components, and more.

## About The Project
#Screenshot

![A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more](https://camo.githubusercontent.com/6fda0df0008d3e25bbe572e2f2f99d27006a005e9a5f3a150735ae37b5012517/68747470733a2f2f747572626f636861726765722e63632f696d616765732f6f672d696d6167652e706e67)

### Features

- Monorepo with Turborepo
- Responsive marketing site
- SEO friendly
- blog using MDX
- Server and Client Components
- Authentication using NextAuth.js
- UI components built using shadcn-ui
- Dark and light mode
- ORM using Prisma
- Subscriptions using Stripe
- Responsive dashboard
- Validations using Zod
- Written in TypeScript

### Built with

- Next.js (v14 with app dir) and React
- Typescript
- Tailwind CSS
- Shadcn-ui as starter components

## Getting Started

If you want to clone the project and use turbocharger as your starter project

### Configuratuion

- Star the repo
- Fork this project
- config env variable (see .env.exemple)

## Roadmap

- Init project
- Linting tools
- Home page
- Pricing page
- Blog
- App layout
- Subscriptions using stripe
- Add Vercel deploy button

## Sites using turbocharger

We will be happy to mention you here, just make a pull request and we will add you

## Contributing

See the [contribution guide](https://github.com/mehdibha/turbocharger/blob/main/CONTRIBUTING.md) and join our amazing list of [contributors](https://github.com/mehdibha/turbocharger/graphs/contributors)!

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Contributors

| [![A monorepo app built with Turborepo, Next.js 14, shadcn-ui, stripe, and more](https://avatars.githubusercontent.com/u/12223900?v=4)<sub><b>Mehdi BHA</b></sub>](https://github.com/mehdibha) |

## GitHub

[View Github](https://github.com/mehdibha/turbocharger?ref=reactjsexample.com)
How to allow or prevent VSCode from removing the file extension in imports
Tags: vscode
Published: 2024-01-04 00:05:43

There is a setting called `Import Module Specifier Ending` that you can tweak:


![VSCode setting for Import Module Specifier Ending](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sj4j8w010ibh04pg5nis.png)
AI Impact on Jobs: Evolution of Programming Roles?
Tags: discuss, codenewbie, beginner
Published: 2024-01-04 00:00:00

---
published_at : 2024-01-04 00:00 +0000
---
What do you think of the incrasingly common assertion (assumption) that there will be no programmers in 5 years due to AI? How do you see the role of programmers evolving, and what skills will become more critical?
<br>
Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
How Did One Moment Alter Your Path?
Tags: devresolutions2024, discuss
Published: 2024-01-04 00:00:00

---
published_at : 2024-01-04 00:00 +0000
---
Identify a coding or career-related turning point in 2023. What insight did you gain, and how did it alter your perspective or path?
<br>
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
dating sims are the new zombies
Tags: gamedev, writing
Published: 2024-02-25 21:27:18

---
title: dating sims are the new zombies
published: true
date: 2024-01-04 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20240104-922-dating-sims-are-the-new-zombies/
---

Today I woke up with the sad feeling that all narrative games fell into two categories: mystery + detective or dating sim.

So I sat down to analyze the [first results on Steam](https://store.steampowered.com/search/?sort_by=_ASC&tags=31275%2C1742&supportedlang=english) to see if this feeling was real or not.

To my surprise, not only was it not real, but I found some games with interesting proposals, obviously this from the marketing on the Steam page (I didn't even consider the reviews); I haven't played them yet, but I wanted to mention them here in case someone has played them and has any comments.

The first one is [Needy Streamer Overlord](https://store.steampowered.com/app/1451940/NEEDY_STREAMER_OVERLOAD/), although I'm clearly not the target audience for this game, I found it interesting to use the need for approval from viewers as the main conflict of a game. Maybe I'll play it, maybe I'll watch it on YouTube, who knows.

[Suzerain](https://store.steampowered.com/app/1207650/Suzerain/) is a game about diplomacy and politics. Basically, the premise is: You are the president. It could be incredibly interesting or incredibly boring. I'll have to try it out.

[Milk inside a bag of milk inside a bag of milk](https://store.steampowered.com/app/1392820/Milk_inside_a_bag_of_milk_inside_a_bag_of_milk/) was a hit in 2020. It's a short story about how difficult things are in everyday life. I can relate.

[Hira Hira Hihiru](https://store.steampowered.com/app/2314820/Hira_Hira_Hihiru/) is a visual novel about a disease that brings the dead back to life. I'm not sure if it falls into the "mystery" category or not, but apparently it doesn't.

[MINDHACK](https://store.steampowered.com/app/1727210/MINDHACK/) has a very interesting premise: hacking the brains of the bad guys and turning them into happy people.

In addition to these games that I found interesting, there were 2 mystery games, 6 dating sims, and 3 RPGs on the list.

Yes, 6 dating sims 🤦. Evidently, Steam likes to flirt.
Supercharging your Astro website with easy deployment and analytics on Vercel
Tags: vercel, astro, hosting, webdev
Published: 2024-03-16 08:10:17

---
title: Supercharging your Astro website with easy deployment and analytics on Vercel
published: true
date: 2024-01-04 00:00:00 UTC
tags: ['vercel', 'astro', 'hosting', 'webdev']
canonical_url: https://nicdun.dev/posts/Supercharge_your_astro_blog_with_vercel/
---

Do you like an easy to setup astro blog deployment environment with github integration and free web traffic analytics? Vercel is the platform of your choice! It provides you everything out of the box with seemless integration and documentation. The main focus of this blog article is enabling web analytics on your astro website.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4vv54tbipb2pq6l9ctx.png)
## Activate web analytics on Vercel

Go to [vercel.com](https://vercel.com) and select your website's project. Navigate to the **Analytics** tab and activate web analytics for that specific project. Regarding of your account tier, there is a different function scope regarding to web analytics. For personal website, I would recommend to use the hobby tier and upgrade to pro if needed.
After that, we need to connect the website with vercel analytics. 

## Install web analytics in your astro project

Install their analytics package with the package manager of your choice.
```bash
npm i @vercel/analytics
```

## Integrate web analytics in your astro project

You only need to edit the `astro.config.mjs` file by inserting the Vercel specific configuration. With that, your website automatically loads the needed javascript file at runtime to intergrate Vercel web analytics.

```ts
import { defineConfig } from 'astro/config';
import vercelStatic from '@astrojs/vercel/static';

export default defineConfig({
	output: 'static',
	adapter: vercelStatic({
		webAnalytics: {
			enabled: true
		},
	})
});
```

## Conclusion
With this easy setup, you have access to information about your website visitors backed up by the same pfatform where you host your astro website. Furthermore, you do not need to integrate different analytic tools or combine that with user unfriendly cookie banners.
Setup CloudFront for Client App
Tags: webdev, javascript, aws, devops
Published: 2024-01-04 00:00:00

In the previous section, we uploaded our client's static files to S3. However, we still cannot access them because we set our bucket to be private. In this section, we will create CloudFront as a CDN and connect it to our static site. To do so, let’s follow these steps:

# Create CloudFront

- Open the CloudFront dashboard and click on the `Create distribution` button.


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



- Select the static site bucket in the `Origin domain`.


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



- In the `Origin access` section, select `Legacy access identities` and then click on `Create new OAI`.


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



- Enter the OAI name and click `Create` button


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



- Next, select the `Yes, update the bucket policy` option to automatically add a new bucket policy inside our S3 bucket.


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



- In the `Viewer` section, select the `Redirect HTTP to HTTPS` option.


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



- Finally, select `Do not enable security protections` in the WAF section and click the create button at the bottom of the page.


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



- The deployment will take several minutes; you can visit the client app here.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qo1w734xpb0vhx7rb5p.png)
Hello All!!!
Tags: welcome, javascript, fullstack, node
Published: 2024-01-03 23:38:38

Good Evening and Happy New Year Dev Community!
I am a newly graduated Supra Coder from the Galvanize Full Stack Development Course. I am currently an active-duty Space Force Guardian looking to grow my knowledge to help my team and my development. If anyone has any insight into growing into a better Developer, I am all ears. Looking forward to learning and future conversations!
Top 10 advanced Python concepts that every developer should know - Part 1
Tags: python
Published: 2024-01-03 23:27:01

Astro Code Craft's 'Top 10 Advanced Python Concepts Every Developer Should Know - Part 1' is a must-read for Python enthusiasts aiming to enhance their skills. This insightful article delves into complex Python topics, providing a deeper understanding of advanced programming techniques. It's an excellent resource for developers looking to elevate their coding expertise and stay ahead in the dynamic world of Python programming.

For more detailed insights, you can read the full article [here](https://astrocodecraft.substack.com/p/top-10-advanced-python-concepts-that).
Composer: Options for a Submodule
Tags: drupal, composer, php
Published: 2024-01-03 23:00:39

Suppose you want to tie in another private git package, such as something that is not listed on the Drupal directory - as part of your standard build process. Here are two approaches to do that:

## Composer

Drupal packages are managed with a composer file. Composer files can pull from many sources. Most commonly in the case of a Drupal project, that means pulling in modules and themes from the Drupal directory. But it also includes the ability to pull in projects as zip files or a git project hosted elsewhere, even a private one.

Here's how:

Create the module that you want to pull in and give it a composer.json file. Here's an example of that file:

```json
{
  "name": "ryan-robinson/demo-module",
  "type": "drupal-module",
  "description": "Demo module",
  "keywords": [
    "Drupal",
    "module"
  ],
  "license": "GPL-2.0+",
  "require": {
    "drupal/core": "^9.0 || ^10"
  },
  "config": {
    "platform": {
      "php": "8.1"
    }
  }
}
```

Add two things to the composer.json of your Drupal project:

One, you need to define the source for where to get the project:

```json
    "repositories": [
        {
            "type": "vcs",
            "url": "git@gitlab.com:ryan-robinson/demo-module.git",
            "branch": "main"
        },
    ]
```

Second, you need to add it to the requirements list to pull in:

```json
    "require": {
      "ryan-robinson/demo-module": "dev-main"
    }
```

If the repository is private, you'll also need an auth.json file with your personal access token. Here's an example that would work for a GitLab project:

```json
{
    "gitlab-token": {
        "gitlab.com": "token value"
    }
}
```

## Git Submodule

The other approach is to make it a git submodule.

The advantage of the submodule approach is if you want to be able to continue to contribute to that. You can work on the parent project and the submodule at the same time, committing them both separately. Of course that only matters I'd you have permission to do so.

The context I've found myself using this: when I'm developing a custom Drupal module, I need a Docker devcontainer environment to work within for testing. That's one git repository. I also need a repository for the module itself, so that it will be ready to share with other Drupal projects (often using the composer technique above). This allows me to load the devcontainer, work on the module, and commit back to the module.

This can be done by running the `git submodule add` command, e.g.:

```bash
git submodule add [URL to module]
```

This generates a .gitmodules file at the project root that looks something like this:

```gitmodule
[submodule "web/modules/custom/demo-module"]
	path = web/modules/custom/demo-module
	url = [URL to module]
```
Day 887 : Move It On
Tags: hiphop, code, coding, lifelongdev
Published: 2024-01-03 22:59:43

_liner notes_:
- Professional : Pretty productive day. Had a couple of meetings. In one, I got to demo what I made so far for an upcoming project I would like to do in a couple of months. Everyone seemed interested in making it happen. Responded to some community questions. I like to do that because it really tests if I know something and I go to the docs where I think it is, find it and then be able to show the person asking the question and help explain it to them. It helps to reinforce what I know about the product and lets me know what may not be super clear for a person. Got a lot done with my POC for a project that I started yesterday. Just a couple of more features and I'll be able to move it on to the next step of turning it into a Web Component. Maybe next week.

- Personal : Went through some tracks for the radio show. I think I made a breakthrough with the carousel thing I want for my side project. I was trying to get the focus of a card just by using HTML and CSS. Got really close, but tabbing was not centering the cards on the page but applying the focus correctly. Now I have the opposite issue with pressing left and right on the keyboard. It will center the cards, but doesn't apply the focus. Will work on that later tonight. Also, watched an episode of "Zom 100".

![Photo of the top of clouds over Cartago, Costa Rica with the sky going from a blue to an orange color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5gkhu1krvwvn73vh06p.jpg)

Going to get the left, right keyboard and focus issue for my side project worked out Go through some tracks for the radio show. Maybe pick up some tracks off Bandcamp and get my social media posts ready a day early. Also want to watch another episode of "Zom 100".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube soFDmBcB9k0 %}