teleren/devto huggingface dataset:
Deploying A Static Website with AWS S3
Tags: aws, s3, webdev
Published: 2024-05-29 21:02:29

**Introduction**
Deploying a static website using Amazon S3 is a cost-effective and efficient way to host web content. In this guide, I’ll walk you through the steps to set up and deploy a static website on AWS S3. This process is ideal for hosting simple HTML, CSS, and JavaScript files without the need for server-side processing. 

**Step 1 Create a S3 Bucket**
First I created an S3 bucket that will hold my website files.

**Step 2: Upload Website Files**
Next, you need to upload your website files to the S3 bucket. Select your bucket from the list and click the “Upload” button. Add your HTML, CSS, and JavaScript files. Once you’ve added the files, click “Upload” to add them to your bucket.

**Step 3: Configure the Bucket for Static Website Hosting**
Now, you need to configure the bucket to host your website. Navigate to the bucket’s properties by clicking on the “Properties” tab and scrolling down to the “Static website hosting” section. Enable static website hosting by selecting “Use this bucket to host a website”. Specify the index document (e.g., index.html) and optionally specify an error document (e.g., error.html). Finally, click “Save”.

**Step 4: Access Your Static Website**
Now, your static website is ready to be accessed. Go back to the “Properties” tab and in the “Static website hosting” section, you’ll find the URL of your website. Open this URL in your browser to see your static website live.

Here is the website using Github. [Link](https://ansonly15.github.io/Anson_Ly/)

**Conclusion**
Deploying a static website with AWS S3 is straightforward and offers a scalable, cost-effective solution for hosting web content. By following the steps outlined above, you can have your static site up and running in no time. For enhanced security and performance, consider integrating AWS CloudFront and using a custom domain with Route 53. Happy hosting!
Mysterious /sink route in ui.shadcn.com
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-05-29 20:42:32

I found a mysterious [sink folder](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/%28app%29/sink/layout.tsx) in the shadcn-ui/ui.

![](https://media.licdn.com/dms/image/D4E12AQEpXbt9lcXvTQ/article-inline_image-shrink_1500_2232/0/1716836067303?e=1722470400&v=beta&t=dNl3ijpWP656CMHnZlOFwy98eqVLAh42Sw_aDFfjSvg)

All these folders in the above image are pages that can be navigated to via the header on [https://ui.shadcn.com/](https://ui.shadcn.com/) website. However, I could not find the header link that points to /sink in the header

![](https://media.licdn.com/dms/image/D4E12AQGnN8AytvLQ5A/article-inline_image-shrink_1500_2232/0/1716836067204?e=1722470400&v=beta&t=OJVFuL6PlilalippeUtHIE1KDXN-GsYVjNWGNA_gASQ)

> [Build shadcn-ui/ui from scratch.](https://tthroo.com/)

I tested to see if anything loads when I visit [/sink](https://ui.shadcn.com/sink) and to my surprise, there are some example components loaded.

![](https://media.licdn.com/dms/image/D4E12AQGXLnl3Db5LsQ/article-inline_image-shrink_1000_1488/0/1716836069207?e=1722470400&v=beta&t=UcDiosxuY6hTsE3A_0cEotC7gRWir8ePa-6CUp-niHc)

Let’s find out it’s purpose.

I searched for any existing issues on shadcn-ui/ui Github and found 2 issues and 1 pull request reported:

1.  [https://github.com/shadcn-ui/ui/pull/1446](https://github.com/shadcn-ui/ui/pull/1446)
2.  [https://github.com/shadcn-ui/ui/issues/3533](https://github.com/shadcn-ui/ui/issues/3533)
3.  [https://github.com/shadcn-ui/ui/issues/441](https://github.com/shadcn-ui/ui/issues/441)

I could not get much context from 1, 2 listed above but [#441](https://github.com/shadcn-ui/ui/issues/441) provides some meaningful context.

The purpose of /sink route might be to provide a showcase page with preview for improved usability. You can read more in the [issue reported](https://github.com/shadcn-ui/ui/issues/441)

### Conclusion:

/sink in shadcn-ui/ui is not so mysterious once I found out the existing pull requests around it. It might be a WIP and its purpose is to add a comprehensive component showcase page with preview for improved usability.
AWS Cloud Resume Challenge
Tags: aws, awschallenge, beginners, serverless
Published: 2024-05-29 20:35:36

I came across the Cloud Resume Challenge by my mentor as I am trying to build a career in AWS. I am a recent Masters' graduate majoring in Cloud Computing Systems. Up until this program I don't have much exposure to the cloud since I majored in Psychology for undergrad. [Here is my github](https://ansonly15.github.io/Anson_Ly/)

**How I Did**

**Front-End**

With experience from a full-stack program I coded my resume using basic HTML and CSS. Then I uploaded my file to an S3 Bucket which then connects to a CloudFront.

**Back-End**

I started by deploying my backend services using the AWS Management Console. I began with Amazon DynamoDB, setting up a table with an ID and a value of 1. Then, I created a Lambda function to increment this value each time it was triggered. Initially, I deployed two Lambda functions—one for reading the value and another for writing (incrementing) the value. However, this approach made my architecture unnecessarily complicated and caused multiple issues with API Gateway integration.

**Infrastructure as Code with Terraform**

While the challenge suggested using AWS SAM, I decided to use Terraform because it is more widely used in the industry and has excellent documentation. Coding my entire backend in Terraform presented its own set of challenges, particularly with CORS issues in API Gateway. Unlike the AWS Console, Terraform does not have a simple "Turn on CORS" button, which made this part of the project the most time-consuming. I spent approximately 25-30 hours resolving these issues. Despite the frustration, this was also the most exciting part of the challenge, as it significantly deepened my understanding of infrastructure as code (IaC).

**Implementing CI/CD Pipelines**

I uploaded my front-end and back-end code to separate GitHub repositories and used GitHub Actions to build CI/CD pipelines. This setup ensures that my site updates automatically upon a push from my IDE. I also utilized branches to test new code for compatibility with the main branch. For security, I stored my credentials as GitHub secrets for the front-end and used Terraform Cloud to manage credentials for the back-end.

After more than 100 hours of work, I finally completed the Cloud Resume Challenge.

**Conclusion**

This project has significantly expanded my knowledge of cloud services and enhanced my JavaScript skills. It is now a standout addition to my resume and a compelling example to present during job interviews. Moving forward, I plan to further develop my CI/CD pipelines by integrating Docker, Jenkins, and Kubernetes, and continue refining my project. Additionally, I aim to obtain the AWS Solutions Architect - Associate certification.

I highly recommend this challenge to anyone seeking hands-on experience with cloud technologies. It is particularly beneficial for college students looking to gain practical project experience. Whether you are a novice or a seasoned professional, you will find this challenge both rewarding and educational.
#1404. Number of Steps to Reduce a Number in Binary Representation to One
Published: 2024-05-29 20:14:07

https://leetcode.com/problems/number-of-steps-to-reduce-a-number-in-binary-representation-to-one/description/?envType=daily-question&envId=2024-05-29

```js
var numSteps = function(s) {
   
    let carry = 0
    let steps = 0;

    for (let i = s.length - 1; i > 0; i--) {
        if (s.charAt(i) - '0' + carry == 1) {
            carry = 1
            steps += 2
        } else {
            steps++
        }
    }
    
    return steps + carry
};
```
What is a good UI to use these days.
Tags: javascript, webdev, programming, beginners
Published: 2024-05-29 20:22:55

I am writing simle console apps in C#.  But I would like it if I had a good UI to use.  Since we live in an age where everything is run off the internet or intranet through a web browser, should I use a javascript frame work?  What is a good choice for that?  If I am using the UI to access and upload local files, like excel data files, what would be a good suggestion to use?  Is there a bare-bones javascript suggestion that I can use?

There is a lot of talk online that WPF is not a good choice anymore and is losing popularity and support.  Is it being replaced by something like Blazor?
GPTs that have clearly received a lot of love
Tags: artificialintelligen, softwaredevelopment, ai, chatgpt
Published: 2024-05-30 14:59:18

---
title: GPTs that have clearly received a lot of love
published: true
date: 2024-05-29 20:16:11 UTC
tags: ArtificialIntelligen,SoftwareDevelopment,AI,chatgpt
canonical_url: https://blog.jonathanflower.com/artificial-intelligence/gpts-that-have-clearly-received-a-lot-of-love/
---

I hate wasting my time with AI tools that promise the world and end up being a complete disappointment. I love finding AI tools that actually solve problems better than more conventional tools.

Before we get into these excellent GPTs, even these powerful GPT will fail horribly when given a weak prompt. My favorite guiding principle is to think of the GPT as high school intern. If you do not provide detail, who knows what you are going to get! It helps a lot when you communicate the goal and provide steps to follow whenever possible.

## Great GPTs

### [Grimoire](https://chatgpt.com/g/g-n7Rs0IK86-grimoire)

When starting a new coding project, I typically start here. Grimoire helps me think through architectural decisions and evaluate which technologies will be the best fit. The way Grimoire collaborates with me on the solution is a clear step above generic ChatGPT.

From the creator, Nick Dobos:

> How is Grimoire different from vanilla GPT?  
> -Coding focused system prompts to help you build anything.  
> Combining the best tricks I’ve learned to pull correct & bug free code out from GPT with minimal prompting effort

### [Consensus](https://chatgpt.com/g/g-bo0FiWLY7-consensus)

“search and synthesize information from over 200 million academic papers.” For example, I asked it if intermittent fasting is good for my heart health. I received back a detailed response with links to research papers supporting each point.  

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



### [Universal Primer](https://chatgpt.com/g/g-GbLbctpPz-universal-primer)

I love learning and this GPT is my go to when I want to dive deeper on a concept. I love how it breaks things down concepts into easily digestible chunks and includes plenty of examples.

### What are your favorite GPTs?

This article is part of a series: [Who Cares About GPTs?](https://blog.jonathanflower.com/uncategorized/who-cares-about-custom-gpts/)
YOU ARE GREAT
Published: 2024-05-29 19:49:56


<p><h1>YOU ARE GREAT. I BELIEVE IN YOU, BECAUSE YOU ARE AN INCREDIBLE PERSON. YOU'VE OBVIOUSLY MADE MISTAKES. EVERYONE DOES, IT'S HUMAN. KEEP GOING, AND REMEMBER THAT WHOEVER YOU ARE, SOMEONE BELIEVES IN YOU<br><br>你是伟大的。我相信你，因为你是个了不起的人。你显然犯过错误 每个人都会犯错，这是人之常情。继续前进，记住，无论你是谁，都有人相信你。<br><br>TÚ ERES GRANDE. CREO EN TI, PORQUE ERES UNA PERSONA INCREIBLE. OBVIAMENTE HAS COMETIDO ERRORES. TODO EL MUNDO LOS COMETE, ES HUMANO. SIGUE ADELANTE, Y RECUERDA QUE SEAS QUIEN SEAS, ALGUIEN CREE EN TI.<br><br>TU ES G&Eacute;NIAL. JE CROIS EN TOI, CAR TU ES UNE PERSONNE INCROYABLE. TU AS &Eacute;VIDEMMENT FAIT DES ERREURS. TOUT LE MONDE EN FAIT, C'EST HUMAIN. CONTINUE, ET SOUVIENS TOI QUE QUI QUE TU SOIS QUELQU'UN CROIT EN TOI.</h1></p>
How to conditionally render a component on the same route in Angular.
Tags: angular, development, programming, conditional
Published: 2024-05-29 19:16:57

Have you ever needed to render a component conditionally on the same route and found yourself resorting to convoluted solutions?

Creating a new container component solely to render components conditionally? Or perhaps using a route factory? Or maybe you even considered giving up and using two separate routes instead?

In a previous article about [feature flags in Angular](https://dev.to/jstnjs/feature-flags-in-angular-4kb0), I discussed how to activate a route when a feature flag is enabled. But what if you need to conditionally render a component based on a feature flag **on the same route**?

It turns out that with the new [CanMatchFn](https://angular.dev/api/router/CanMatchFn), we can define the same route with different components multiple times. Let's explore an example where the team introduces a brand new `LoginComponent`.

```typescript
// feature-flag.guard.ts
export const featureFlagGuard = (feature: FeatureFlags): canMatchFn => {
  return (route, segments) => {
    const featureFlagService = inject(FeatureFlagService);
    return featureFlagService.getFeature(feature); 
  };
};

// routes.ts
[
  {
    path: 'login',
    canMatch: [featureFlagGuard('newLogin')],
    loadComponent: () => import('..').then((c) => c.NewLoginComponent),
  },
  {
    path: 'login',
    loadComponent: () => import('..').then((c) => c.OldLoginComponent),
  },
]
```

First, we need to create the `featureFlagGuard`. This guard is a `canMatch` guard that enables or continues on the next route. In the `featureFlagGuard`, we call a service that retrieves all the feature flags from an API. Using the `getFeature` method, we check if the specified feature, provided as an argument, is enabled in the service. If the feature is enabled, the method returns `true`, thereby activating the route.

In the routes file, we define the same route twice. If the feature flag called `newLogin` is enabled, it will display the `NewLoginComponent`. If it doesn't match, Angular will proceed to the next route, which in this case is again the `login` path. Since this is the default, we don't need the `canMatch` guard and can simply load the `OldLoginComponent`.

This approach eliminates the need to create another component to combine them or resort to hacky solutions. It’s straightforward to follow. Cheers!
Creating Killer Kick-Ass Content like the Best GOAT Industry Leaders in DEV?
Tags: contentwriting
Published: 2024-05-29 19:05:14

Whoops, something went wrong: Add a cover image Add another...

Researching about search engine optimization, so-called snake oil gurus prevail. But how can we really start to create killer kick-ass content like the best goat industry leaders in dev?

What do you think about it? Is this really such a thing?
Python Terminal To-Do App 🐍
Tags: python, webdev, beginners, programming
Published: 2024-05-29 19:04:02

Hey everyone,

I'm thrilled to bring to you my latest creation — a complete Python tutorial where we build a fully functional CLI to-do list application! 🎉

For those who might not know me, I'm Amir, a dedicated software developer and educator with a passion for exploring programming languages and empowering others through sharing my knowledge. Over the last few weeks, I've been meticulously crafting this tutorial to help you master Python through a real-world project that not only teaches fundamental programming concepts but also results in a practical, usable application.

Python is a fantastic language known for its simplicity and versatility, making it suitable for everything from web development to data science - despite the hate it receives sometimes!
However, understanding how to apply Python in real projects can sometimes be daunting, which is why I've designed this tutorial to be both accessible and enjoyable.

In this video series, you will learn how to:
- Set up a Python development environment,
- Interact with a database using SQLite,
- Create functions to add, display, complete, and delete tasks,
- Ensure data persists across sessions so you can pick up right where you left off.

Thank you dear readers and fellow Devs for your support of my Rust course last week, I truly appreciate it.

BTW, This tutorial is now on YouTube! 📺

{% youtube RmytMspWBo8 %}

I'm super excited for you to check it out and start building your own to-do list application. 
Please let me know how your app turns out. 
Your feedback is incredibly important to me — it helps me tailor my content to better suit your learning needs.

See you in the tutorial!

Best,
Amir
Temporal Dead Zone In JavaScript
Tags: javascript, webdev, frontend, development
Published: 2024-05-29 18:47:52

During the memory creation phase of the execution context, variables declared with let and const are allocated memory in the block scope, not in the global scope. These variables cannot be accessed before they are initialized. Here Temporal Dead Zone (TDZ) Comes To In Picture.

**👉 Temporal Dead Zone In JavaScript :**
Temporal Dead Zone is a behavior in JavaScript where variables declared with let and const are inaccessible before their initialization.
Temporal Dead Zone (TDZ) is the time period in JavaScript when a variable declared with let or const has memory allocated but has not yet been initialized.


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

**👇 Explanation Of Above Example :**
During the memory creation phase, memory space is allocated for the variable 'a'. However, 'a' is not initialized yet. This marks the beginning of the Temporal Dead Zone (TDZ) for variable 'a'. The Temporal Dead Zone (TDZ) ends when variable 'a' is initialized with the value 1.

Attempting to access 'a' variable in its TDZ will Throw  a _**ReferenceError**_.

Similarly, the TDZ applies to **_const _**variables as well

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

**👇 Explanation Of Above Example :**

Here, a is properly declared and initialized before we attempt to access it, so there is no TDZ violation, and the value of a (which is 1) is successfully printed to the console.


In summary, the TDZ is a period during which let and const variables exist but are not yet accessible. The TDZ ensures that variables are accessed only after they have been properly declared and initialized,
Retail Display Racks and Industrial Storage Racks Manufacturer in Delhi
Published: 2024-05-29 18:55:33

Welcome to Technico Storage System, your premier destination for top-quality [display racks in Delhi](https://www.technicostorage.co.in). As a leading Display Racks Manufacturer in Delhi, we take pride in offering a wide range of retail display solutions that cater to the diverse needs of our clients. With a commitment to excellence and innovation, we strive to elevate your retail space with our premium products.

At Technico Storage System, we understand the importance of creating an attractive and functional display to showcase your merchandise effectively. That's why our team of skilled professionals works tirelessly to design and manufacture display racks that not only enhance the visual appeal of your store but also optimize space and organization.

As your trusted Retail Display Rack Supplier in Delhi, we prioritize customer satisfaction above all else. Whether you're looking for sleek and modern display racks or traditional and rustic designs, we have the perfect solution to meet your needs. Our dedication to quality craftsmanship ensures that each product is built to last, providing you with long-lasting durability and reliability.

With Technico Storage System, you can rest assured that you're getting top-notch display racks that seamlessly blend style and functionality. Transform your retail space into a captivating destination for shoppers and elevate your brand presence with our premium display solutions.

## Why Choose Technico Storage System for Your Display Rack Needs?

**•	Quality Assurance:** We adhere to stringent quality standards to deliver display racks that meet and exceed your expectations.

**•	Customization Options:** We offer customization services to tailor our display racks according to your specific requirements and preferences.

**•	Competitive Pricing:** Enjoy competitive pricing without compromising on quality. Our affordable display racks are perfect for businesses of all sizes.

**•	Timely Delivery:**  We understand the importance of timely delivery. Count on us to deliver your display racks promptly and efficiently.

Whether you're a small boutique or a large retail chain, Technico Storage System has the perfect display rack solution for you. Transform your retail space and captivate your customers with our premium display racks in Delhi.

Choose Technico Storage System for all your display rack needs and experience the difference in quality and service. Get in touch with us today to learn more about our products and how we can help enhance your retail environment.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbvlbxgjb55li3sq5wyl.jpg)
La Luzerne
Tags: frontendchallenge, devchallenge, css
Published: 2024-05-29 18:55:03

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-05-29), CSS Art: June._

## Inspiration
"La Luzerne — Saint-Denis" by Georges Seurat:

![La Luzerne](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6t5dq6h0cxjbopvjgpa.jpg)

This is a great example of pointillism, for which I wanted to create a pure CSS **interpretation**, not a 1:1 replica.

## Demo 
{% codepen https://codepen.io/stoumann/pen/zYQoZjN %}

## Journey 

The CSS for this contains a bunch of custom properties, that are all set with a bit of **randomness** in JavaScript. Thus, you get a fresh, unique version of the painting everytime you refresh!

```css
.luzerne {
  background-color: rgb(243, 221, 44);
  border: clamp(0.375rem, 0.0575rem + 1.5873vw, 1rem) ridge rgb(121, 85, 72, .9);
  container-type: inline-size;
  display: flex;
  filter: url('#grain');
  flex-wrap: wrap;
  margin-inline: auto;
  max-width: 950px;
  gap: 0px;
  overflow: visible;
  b {
    aspect-ratio: 1 / .95;
    background: var(--c, #0000);
    border-radius: var(--a, 0);
    filter: brightness(var(--b, 1)) opacity(var(--o, 1));
    rotate: var(--r, 0deg);
    scale: var(--s, 1);
    width: 2cqi;
  }
}
```

I wrote a small JavaScript to render the random properties:

```js
const colors = [array-of-colors];
const R = (min, max) => Math.random() * (max - min) + min;
app.innerHTML = new Array(1150).fill().map(() => {
  const c = colors[Math.floor(Math.random() * colors.length)];
  const s = R(1, 1.5).toFixed(5);
  const r = R(-10, 10).toFixed(2) + 'deg';
  const a = R(5, 20).toFixed(2) + '%';
  const b = R(1, 1.3).toFixed(2);
  const o = R(0.75, 1).toFixed(2);
  return `<b style="--c:${c};--s:${s};--r:${r};--a:${a};--b:${b};--o:${o}"></b>`;
}).join('');
```

---

## Grainy texture

The old and worn, grainy look, is an `SVG`-filter (see the demo above). The wooden frame is simply a `border-type: ridge`.
Certificate Attestation in Dubai
Tags: travel, visaservices, certificateattestationindubai, certificateattestation
Published: 2024-05-29 18:53:57

[](https://www.allattestations.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68ncsdfgm9rg6vpw6y81.jpg)[](url)