teleren/devto huggingface dataset:
New Tech Talks in Warsaw – a DevOps meetup by Andersen & Amazon Web Services 🔥
Published: 2024-03-11 19:03:41

New Tech Talks in Warsaw – a DevOps meetup by Andersen & Amazon Web Services 🔥  
Are you ready? 

Register here: https://forms.gle/RasCnJYJgjwbuykDA
(the number of seats is limited).

Speakers:
🎤 Viktor Vedmich (Senior Developer Advocate)
re:Cap of re:Invent 2023 – or What's New on AWS
– an in-depth overview of AWS re:Invent 2023 (announcements and innovations), the latest advances in cloud infrastructures, Machine Learning, AI, and serverless technologies.

🎤 Artsem Maliutsin (DevSecOps Engineer)
Kubernetes Security: Best Practices at Andersen
– a high-quality set of strategies to improve the security and efficiency of Kubernetes deployments; analysis of Andersen’s best practices that played a decisive role in the success of our projects.

🎤 Monika Nowakowska (AWS Associate Solution Architect) and Krzysztof Wilczynski (AWS Professional Services DevOps Consultant)
Scaling on AWS for Your First 10 Million Users
– infrastructure scaling for rapid user growth without compromising performance; scaling to millions of users; deployment automation, scaling, and cost reduction; overview of best practices for scalable apps (using the example of AWS).

Tech Talk details:
🔥 March 21
🔥 18:00 CET
🔥 Offline
Andersen’s Office in Warsaw 
the address will be sent to the email you specify in the registration form
🔥 Language: English

See you!
Secure Upload URLs Buckets with Nitric in Python
Tags: tutorial, cloudcomputing, productivity, python
Published: 2024-03-11 18:54:15

Creating a secure method for users to upload files directly to an S3 bucket is a common requirement in modern web applications. 

By using pre-signed URLs, you can allow a client to upload a file directly to S3 without exposing your AWS credentials, they also provide a secure mechanism to upload files directly to S3 from a client, avoiding the need to pass the file data through your server.

In this tutorial, we will leverage the Nitric SDK in Python to generate secure upload URLs for an S3 bucket, which can then be used from your front-end application.

> If you haven't used the [Nitric SDK](https://nitric.io) before, then start with this [tutorial](https://dev.to/rsiv/your-first-nitric-api-using-python-m8p).

### Step 1: Initialize Nitric Bucket Instance

Inside the `main` function, initialize a new Nitric bucket instance with the name of your S3 bucket.

```python
from nitric.resources import api, bucket
from nitric.application import Nitric
from nitric.context import HttpContext

main_api = api('main')
images = bucket('images').allow('reading')
```

### Step 2: Generate a Secure Upload URL

Now, generate a secure upload URL for a specific file. In this example, we are creating a URL for uploading a file named `cat.png`. We also specify a time-to-live (TTL) for the URL of 300 seconds (5 minutes).

```go
from nitric.resources import bucket
from nitric.application import Nitric

assets = bucket('assets').allow('reading')

logo = assets.file('images/logo.png')

logo_url = await logo.download_url(expiry=300)

Nitric.run()
```

Now, you have a secure upload URL for your `cat.png` file. You can use this URL in your front-end application to securely upload the `cat.png` file to your S3 bucket. The URL will expire after 1 hour, ensuring that the upload URL cannot be misused after a reasonable amount of time.

This setup abstracts much of the boilerplate and complexity involved in generating pre-signed URLs for S3, allowing developers to focus more on building their applications. 

In the case that you want to get an image url for rendering, then simply redirect the URL with a 303 status and a location.

```python
from nitric.resources import api, bucket
from nitric.application import Nitric
from nitric.context import HttpContext

main_api = api('main')
images = bucket('images').allow('reading')

@main_api.get('/images/:id')
async def get_image(ctx: HttpContext):
  id = ctx.req.params['id']
  url = await images.file(id).download_url()
  ctx.res.status = 303
  ctx.res.headers['Location'] = [url]

Nitric.run()
```

The [Nitric SDK](https://nitric.io/docs/guides/getting-started/concepts) offers a streamlined approach to interacting with AWS S3, among other cloud services, in a cloud-agnostic manner.
Tips for working on DPI projects
Published: 2024-03-11 18:44:10

1. Fork the project.
2. Load the project by clicking "code", then "create codespace on main" 
3. Once in your project, view the app by entering "rackup" in the terminal and click on the pop-up or click on the web icon in the port. Use link to preview.
4. Unsaved changes in the project are green! So, remember to click on the Source Control to commit changes (add a note about the change) and then sync changes. Each of these have popups appear, so click "ok" to both.
5. Open a fresh bash to get graded by entering "rack grade", then enter, then provide the code for the assignment, then enter. Use link to see grade.
404, Nginx, Frontend, Angular
Tags: angular, 404, nginx, frontend
Published: 2024-03-11 18:30:12

## Solving 404 Errors with Hash-Based Routing in Angular Applications

> This title emphasizes the issue of 404 errors encountered on the server side and how hash-based routing in Angular can effectively address this problem. It sets the stage for the reader to understand the significance of hash-based routing as a solution for managing client-side routing and preventing server-side errors.

**How Hash-Based Routing Works**
Hash-based routing structures URLs in the following format :

```
http://example.com/#/path/to/route
```
The # symbol separates the base URL from the fragment identifier, which typically represents the application's route or state. When a user navigates to a URL with a hash-based route, the browser internally updates the document's location without sending a request to the server for the portion of the URL after the # symbol.

**Implementing Hash-Based Routing in Angular**
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // Define your application routes here
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true }) // Configure to use hash-based routing
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```
Angular 17

```
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes,withHashLocation()),provideHttpClient()]
};
```
**Benefits of Hash-Based Routing**

- Simplified Server Configuration : 
Hash-based routing eliminates the need for server-side route configuration or URL rewriting rules, as the server always serves the main HTML file regardless of the route specified in the fragment identifier.

- Consistent Client-Side Behavior : 
Hash-based routing ensures consistent client-side routing behavior across different server environments, preventing 404 errors for routes handled by the client-side router.

**Drawbacks of Hash-Based Routing**

- Less Clean URLs : 
Hash-based URLs are less aesthetically pleasing and not as SEO-friendly as traditional URLs.

- Limited Use Cases : 
Hash-based routing may not be suitable for applications requiring clean, semantic URLs or specific SEO requirements.
Empowering My IT Project Management Skills: A Deep Dive into ServiceNow's Forms Module
Tags: servicenow, leaning
Published: 2024-03-11 18:19:01

As I navigate the ever-evolving landscape of IT project management, continuous learning emerges as a choice and necessity. My latest endeavour to enhance my technical repertoire has led me to ServiceNow's on-demand courses, an engaging blend of theory, practical exercises, and real-life application.

### A Journey Through ServiceNow's Forms Module

My current learning phase revolves around the "Welcome to ServiceNow" on-demand course. What makes this course exceptionally captivating is its structure—concisely segmented into digestible modules, each coupled with exercises and examples that lead to a hands-on lab instance. This practical approach allows learners like me to grasp the theoretical concepts and implement them in a developer-like ServiceNow instance.

Approximately 45% through the course, I've embarked on an insightful module—the Forms Module. This section demystifies the nuances of ServiceNow's forms, from understanding the variety of fields to mastering the customization and saving of these forms. It's a crucial skill set for anyone keen on tailoring the ServiceNow environment to fit specific project management needs.

### Real-Life Application: The Developer Instance

I've secured a full developer instance that is available for ten days in parallel with the course. This limited-time access encourages an immersive learning experience, pushing me to explore, experiment, and test real-life configurations and scenarios. The ticking clock of this 10-day window only adds to the excitement, offering a taste of the dynamic IT project management environment where deadlines are ever-present.

### Forward Looking: What's Next?

My journey continues beyond the Forms Module. With an eager mind and a clear goal, I'm set to delve into subsequent modules: tasks, reporting, knowledge management, and Service Catalog. Each step is a building block towards a comprehensive understanding of ServiceNow, aiming to harness its full potential in IT project management.

### Sharing My Journey

As I tread this learning path, I've decided to document and share my experiences and insights on my dev.to account. It's not just about tracking progress; it's about creating a resource for fellow learners and enthusiasts in the IT project management and ServiceNow community.

This blog post is but a snapshot of my ongoing journey. I invite you to join me as I explore the depths of ServiceNow, from its fundamental forms module to the intricate realms of tasks, reporting, and beyond. Together, let's navigate the complexities of IT project management, empowered by the tools and technologies that shape our digital world.
Improving Angular App Performance
Tags: angular, performance, optimization, treeshaking
Published: 2024-03-11 18:18:48

**Improving Angular App Performance: Profiling and Code Optimization Strategies**

A blazing-fast Angular application is the backbone of a great user experience. But as features grow, performance bottlenecks can creep in.

**1. Profiling:**

**Embrace the Angular Profiler:** This built-in tool helps pinpoint sluggish components and exposes the change detection cycle for scrutiny.

**Chrome DevTools to the Rescue:** Dive deeper with Chrome DevTools. Analyze network requests, JavaScript execution times, and identify performance drains.

https://angular.io/guide/devtools#profile-your-application

**2. Change Detection Optimization:**

**OnPush for Efficiency:** Implement the OnPush change detection strategy in components with minimal updates. This minimizes unnecessary checks, boosting performance.

**trackBy for ngFor Finesse:** When using ngFor for lists, leverage the trackBy function. This optimizes how Angular tracks list items, preventing needless re-renders.

https://angular.io/guide/change-detection

**3. Bundle Size Reduction:**

**AOT Compilation for the Win:** Enable Ahead-of-Time (AOT) compilation. This generates smaller, optimized JavaScript bundles, leading to faster loading times.

**Tree-Shaking Magic:** Utilize tree-shaking, a process that intelligently removes unused code from your final build. This keeps your app lean and mean.

https://medium.com/front-end-weekly/optimize-angular-bundle-size-f5392f0ae947

https://angularindepth.com/posts/1217/how-to-reuse-common-layouts-in-angular-using-router

#angular #performance #optimization #webdev #softwareengineering #js
Online IT Jobs For All
Tags: webdev, javascript, beginners, programming
Published: 2024-03-11 18:11:44

Apply Now For Online IT Jobs..

Click Here
https://infokara.blogspot.com/2024/03/apply-for-it-jobs-worldwide.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qmvbiw7t66f60rl1t5r.jpg)
Running a scheduled task with Nitric in Python
Tags: cloudcomputing, python, tutorial, productivity
Published: 2024-03-11 18:09:32

Setting up a scheduled job is a common requirement for many modern applications. 

With the Nitric SDK, this task is simplified, and you can even test your scheduled jobs offline without needing Terraform. 

In this tutorial, we'll walk through setting up a scheduled job that aggregates data every three days using the Nitric SDK in Python.

> If you haven't used the [Nitric SDK](https://nitric.io) before, then start with this [tutorial](https://dev.to/rsiv/your-first-nitric-api-using-python-m8p).

## Step 1: Import Necessary Libraries

Start by importing the necessary libraries.

```python
from nitric.resources import schedule
from nitric.application import Nitric
from nitric.context import IntervalContext
```

## Step 2: Define Your Scheduled Job
Next, define a function for your scheduled job. In this example, we're creating a new scheduled job named "aggregate-data" that will run every three days. 

Inside the function, we've added a simple print statement "aggregating data" to demonstrate the job's activity.

```python
from nitric.resources import schedule
from nitric.application import Nitric
from nitric.context import IntervalContext

report_schedule = schedule('run-a-report')

@report_schedule.every('1 days')
async def process_transactions(ctx: IntervalContext):
  # do some processing
  fmt.Println("aggregating data")

Nitric.run()
```

## Test Your Scheduled Job Offline

```bash
nitric start
```

One of the advantages of using the Nitric SDK is the ability to test your scheduled jobs offline. This is particularly useful for debugging and ensuring your jobs are working as expected before deploying them to the cloud.

![Testing schedules offline with the Nitric Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoj1bpzcc5mv0yemi331.png)

In just a few steps, you've now created a scheduled job that aggregates data every three days, here are a few more examples showing you how to set up other frequencies.

| description      | example schedule                       |
| ---------------- | -------------------------------------- |
| Every day        | @schedule("work").every("day")         |
| Every 14 hours   | @schedule("work").every("14 hours")    |
| Every 30 minutes | @schedule("work").every("30 minutes")  |
| Every day (cron) | @schedule("work").cron("0 0 \* \* \*") |
如何做串流影音 episode thumbnail
Tags: usercaseshare
Published: 2024-03-10 14:40:42

今天聽了自己一個朋友的 podcast 被啟發到，決定要開啟一個單元，分享目前在工作上遇到不錯的專案，再不透露資安的情況分享技術優點，以及我覺得可以做更好的地方。

從到職做了兩年，大大小小的功能都做了一輪，小到執行腳本修 bug，大到系統架構設計。自己最喜歡的還是剛入職第一個做的功能：episode thumbnail
這個功能我一直以為我們公司早做了，因為不論是 Netflix, Disney 其他主流串流影音都早行之有年，這才發現我們竟然沒做...公司說大不大說小也不小..
但也因為如此，我才有機會接觸這個最不像後端在做的功能，而且當時確實做的非常開心。

![net](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j7pujiaraeo9o85tauv.png)

![lt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wtnse2fmy2yx5nqg3sw.png)

# Architecture
架構使用非常簡單的 lambda 搭配 aws 包辦的 message queue（SQS）。因為畢竟他只是一個 function 執行。並且每分鐘都會檢查內部的 working message queue，如果有人送工作事項進來就會來執行。
每一次產生圖片約執行 5 ~ 15 mins，看那部戲劇的內容複雜程度。
也因為會執行很久，所以使用 message queue 來非同步處理產生 thumbnail。
![a1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqs37dstt7z6h111z2ap.png)
 
這邊有一個比較特別的是 lambda timeout 時間上線是 15min，因為這個 lambda 涉及圖片分析，所以運算時間偏久，因此需要設定一個上限值，避免無止盡的不斷運算下去。
Message queue 使用了 FIFO queue，確保順序，因為 AWS SQS 預設是沒有 FIFO 的。另外為了避免重複的訊息送進來，使用 content-based deduplication 避免 retry 導致的重複 message。

# Use Case
這部分也是琢磨很久才想出怎樣的圖片才可以代表這一集。我認為 Netflix 應該是由人工的智慧挑選ＸＤ。不然怎麼可能每一集截圖都是一張剛好很精彩的畫面？
但我們沒有這個人力，最後討論出幾個方式判斷出一張可以代表這一集的圖片。
1. 從快轉縮圖群集中篩選出該部劇 1/4~3/4 時間的圖片們
2. 在挑選不模糊的圖片（蠻高機率會出現模糊的圖片，很動態那種）
3. 挑選沒有字幕的
4. 裁切

以上四步驟雖然簡單，但對於剛剛轉職軟體的我來說，確實有一點小難度。好在曾經在轉職課程剛好有學到影像處理，可以理解圖片是怎麼處理跟判斷，讓專案可以在一個 sprint 順利完成。
當時花了比較多時間在處理找出 sharp 的圖片，而且要怎麼定義 sharpness value，甚至還研讀了[一堆文章]，一度想嘗試自己寫 Laplacian method (https://pyimagesearch.com/2015/09/07/blur-detection-with-opencv/)
最後是剛好找到 Javascript 有個套件叫做 sharp 專門做影像處理，裡面有個 sharpness value，大量處理後，我計算出平均值以及標準差，找出 2.5 這個數字約為中間數，再由大家投票，決定訂 2.5 是肉眼可以覺得是清晰的圖片，大於 2.5 就定義為清晰圖片。
再來是挑選沒有字幕得圖片，因為台灣許多戲劇公司，他們習慣把字幕直接鑲嵌在原始影片裡面，因此導致在做戲劇截圖時，容易抓到字幕。字幕這點完全就沒有辦法了，我們這點借助了 GCP vision api，使用裡面中文判斷字幕的功能。
裁切相對簡單，研讀一下套件如何材切就好了。
我認為最後一個考驗是，我要怎麼不斷進行這個 loop。在 1/4~3/4 這個區間，為求平均，我會隨機挑選一張，並且把失敗的圖片暫存到一個 set，避免重複挑選。
但是 lambda 最大 timeout 時間是 15min，所以假如運氣不好，我一直挑到 sharpness, vision api 需要大量時間運算，是蠻有可能出現 timeout 狀況，而且這問題確實發生數次。
解決方式就是設定一個上限次數，當達到上限，還沒有找到一個完美的圖片，只好使用 fallback plan，就是至少是清晰，但是可以接受有字幕的圖片。每次計算，我會暫存上一張清晰的圖片，如果達到上限，就會使用這張暫存的圖片。

以上大概是我們處理 episode thumbnail 的方式，其實有點陽春，我個人認為還有很多可以優化的地方。
1. 我認為沒有必要使用 mq，畢竟這不是什麼量很大服務，每天就幾部劇再轉檔而已，使用 lambda trigger lambda 我覺得會更好，讓管理上更容易。
2. 為了要遵循 DDD，我認為這邊做了許多沒有必要的封裝，其實就是個簡單的 use case 配上一些 service，當時為了要裝逼做了許多沒必要的事，現在看來真的是...
3. Netflix 可以觀察到，一般戲劇會挑選有人臉的圖片，如果是美食實境秀，會挑選食物..可以得知 episode thumbnail 是可以根據主題挑選的，在現在 AI 成熟的年代，應該是可以借力 AI 幫忙挑選。
Version 0.7.0 released: accordions, tooltips and flash messages
Tags: rails, hotwire, tailwindcss
Published: 2024-03-11 18:00:00

#### 📦 New
- [Tooltip Component](https://railsdesigner.com/components/tooltips/)
- [Accordion Component](https://railsdesigner.com/components/accordions/)
- Added button (in the bottom-left) to give feedback (and share your product) from the Library
- [Notification Component](https://railsdesigner.com/components/notifications/)

#### ✅ Improvement
- Check components path are present in Tailwind CSS config
- Added option to collapse/expand [Sidebar Navigation Component](https://railsdesigner.com/components/sidebar-navigation/)
- Improved hover states for actions in [Stacked List Component](https://railsdesigner.com/components/stacked-lists/)
- Added sections (to hold groups of links) to [Sidebar Navigation Component](https://railsdesigner.com/components/sidebar-navigation/)

#### 💅 Additions
- More [Badge Component variants](https://railsdesigner.com/components/badges/)
- Added new [Modal Component variant](https://railsdesigner.com/components/modals/)
- Added new [Avatar Component](https://railsdesigner.com/components/avatars/)
- Added new variants to [Sidebar Navigation Component](https://railsdesigner.com/components/sidebar-navigation/) to use new features

#### 🎷🐛 Bugfix
- Included required `data_attribute_controller.js` for NavbarComponent
Creating Bucket (S3) Notifications on AWS with Python
Tags: cloudcomputing, python, tutorial, productivity
Published: 2024-03-11 17:59:11

In this tutorial, we’ll explore how to set up bucket notifications in Python, enabling your applications to react to changes in file storage buckets. This is particularly useful in scenarios where you need to monitor a bucket for new file uploads or deletions. 

> If you haven't used the [Nitric SDK](https://nitric.io) before, then start with this [tutorial](https://dev.to/rsiv/your-first-nitric-api-using-python-m8p).

### 1. **Create a Bucket Instance**

Import the necessary packages and instantiate a new bucket object. In this tutorial, we'll name our bucket 'assets'.

```python
from nitric.resources import bucket
from nitric.application import Nitric

assets = bucket("assets")

accessible_assets = bucket("assets").allow("reading")
```

### 2. **Set Up Notifications for File Write Events**

To monitor for file write events, specifically for files starting with a certain prefix, use the `On` method on the bucket object. Let’s trigger notifications for files starting with '/users/images'.

```python
from nitric.resources import bucket
from nitric.application import Nitric

assets = bucket("assets")

accessible_assets = bucket("assets").allow("reading")

# The request will contain the name of the file `key` and the type of event `type`
@assets.on("delete", "*")
async def delete_anything(ctx):
  print(f"a file named {ctx.req.key} was deleted")

@assets.on("write", "/images/cat")
async def create_cat_image(ctx):
  print(f"A cat image was written")

# If `on` is called with a permissioned bucket, a file will also be provided with the request
@accessible_assets.on("write", "/images/dog")
async def access_dog_file(ctx):
  dog_image = await ctx.req.file.read()

  print(dog_image)

Nitric.run()
```

### 3. **Set Up Notifications for File Delete Events**

Similarly, to monitor for file deletion events for any file, set up a notification like so:

```python
from nitric.resources import bucket
from nitric.application import Nitric

# Create a reference to an 'assets' bucket with permissions to delete
assets = bucket('assets').allow('deleting')

logo = assets.file('images/logo.png')

await logo.delete()

Nitric.run()
```

> Avoid writing or deleting to the bucket from within a notification as this can trigger the notification again, potentially causing an infinite loop which can be costly.

### Let's run this thing!

```bash
nitric start
```

### Conclusion

Now you have set up bucket notifications in Python using the Nitric SDK. 

This setup will help you monitor file write and delete events, allowing your application to react to changes in your bucket accordingly.
ChatGPT vs Gemini: Which one can write better code?
Tags: chatgpt, gemini, softwaredevelopment, generativeai
Published: 2024-03-11 17:40:18

In this video, we're going to take a closer look at two big names in AI and coding: ChatGPT and Gemini. Ever wondered which one can help you more with your coding projects, boost your efficiency, or change the way you approach programming problems? We're here to find out by comparing them head-to-head. Get ready to see ChatGPT and Gemini put to the test across five important areas: generating code, solving problems, debugging, refactoring, and SQL optimization. Let's get started!


{% youtube GDgNw0pwdU4 %}
Web Design Company in Orlando
Published: 2024-03-10 13:10:09

Building a Digital Oasis: Top Web Design Companies in Orlando
Orlando, the City Beautiful, isn't just a hub for theme parks and tourism. It's a thriving center for businesses of all shapes and sizes. And in today's digital age, having a stunning and functional website is no longer a luxury, it's a necessity.

Ezoic
That's where Orlando's web design companies come in. From crafting user-friendly interfaces to creating visually captivating experiences, these talented teams empower businesses to flourish online.

[Web Design Orlando](https://iba-digital.com/web-design-orlando/)

So, whether you're a seasoned entrepreneur or a budding startup, here's your guide to some of the top web design companies in Orlando:

The Creative Mavens:

M5 Design Studio: M5 boasts a passionate team specializing in WordPress development, SEO, and branding. They focus on transforming ambitious website concepts into beautiful realities, ensuring your brand identity shines through.

IBA Digital:
[IBA Digital](https://iba-digital.com/) stands as the premier destination for web design services within Orlando, Florida! Fueled by a dedication to elevating businesses in the digital realm, our aim is not just to meet expectations but to exceed them. With a relentless drive to discover groundbreaking strategies, we ensure our clients always have a competitive edge.

 
ThinkPod Agency: This award-winning agency brings over two decades of experience to the table. ThinkPod offers a comprehensive approach to web design, integrating digital marketing and branding strategies for a holistic online presence.