teleren/devto huggingface dataset:
Canopas Podcast 6— How to get started as a web developer
Tags: webdev, developer, started, programming
Published: 2022-05-19 09:29:37


**How to get started as a web developer?**

In this podcast, you will find all the answers you're looking for.

**Keylines of the podcast:**

1. Who can become a web developer?
2. Why should you choose to be a web developer?
3. How to know web development is the right choice for you?
4. What are the basic web technologies to learn?
5. What are the key responsibilities of web developers?
6. What is the career progression of a web developer?
7. Conclusion

This podcast episode is also available on [Spotify](https://open.spotify.com/episode/7DOgOhaetun3NoDFQ8LD5x?si=9b5bacc61fe7467f&nd=1), [Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5odWJob3BwZXIuY29tLzFiNWM2ZWE1MjNlZmZlYjlkZjAyNjRkMmE3OTIxOGExLnJzcw/episode/aHR0cHM6Ly9odWJob3BwZXIuY29tL2VwaXNvZGUvNi1nZXQtc3RhcnRlZC1hcy1hLXdlYi1kZXZlbG9wZXItMTY1Mjg2NzQ2Mw?sa=X&ved=0CAUQkfYCahgKEwiQ9eGB6uj3AhUAAAAAHQAAAAAQgQE), and [Amazon Music](https://music.amazon.com/podcasts/62405458-cf1a-4d67-956c-a765e5277602/episodes/78ca6184-2e33-4021-99f2-4c9e824947ae/canopas-podcast-6---get-started-as-a-web-developer).

For more information, Check out this [article](https://blog.canopas.com/canopas-podcast-6-how-to-get-started-as-a-web-developer-b09c977c4bf1).
Add dynamically web components from tag and url
Tags: angular, webcomponents, microfrontends
Published: 2022-05-19 09:12:15

Hello,

I want to implement a micro frontends architecture using:
- micro frontends mostly coded in angular 13 built as web-components
- a shell app in angular 13
- expose the web components using a CDN

So in my shell app I want to insert dynamically (so with some kind of lazy loading) my web components when I need.

My approach to insert the components with something using document.createElement does not work as I expected so, I would like  
viewContainerRef.createComponent<>(component)
But all I have for my component are:
- it's tag like <my-web-component>
- it's url like http://my-cdn/my-web-component.js

How to proceed, I'm a little bit lost?
Global Accessibility Awareness Day
Tags: a11y, webaccessibility, accessibledesign
Published: 2022-05-20 10:01:06

---
title: Global Accessibility Awareness Day
published: true
date: 2022-05-19 08:56:23 UTC
tags: accessibility,webaccessibility,accessibledesign,a11y
canonical_url: https://medium.com/matechs/global-accessibility-awareness-day-857f934427d0
---

_Every year, on the third Thursday of May, there’s the Global Accessibility Awareness Day (GAAD)._

![](https://cdn-images-1.medium.com/max/1024/1*cOEKwQVRtxisgZP1985Zgg.png)

When we design and build accessible websites and digital products, we allow everyone to navigate and interact with them. With everyone, we include people with permanent or temporary disabilities and people with situational impairments.

It’s important to keep in mind that many types of disabilities come with ageing. Designing and developing with accessibility in mind means that we’re building for our future selves.

But it’s so much more than that! Especially in recent years, with the rise of the digital economy, more and more people want to join and participate in it. By providing individuals and communities with access to accessible digital means, we enable them to take advantage of what the web has to offer and improve their wellbeing.

However, detecting, understanding, and fixing accessibility issues is not always a straightforward process. At Matechs, we have invested time and resources in building a knowledge base on web accessibility and improving our services. Our goal is to provide our clients with the best possible web accessibility support.

Creating accessible websites and digital products is a long term commitment for us. We look forward to sharing more resources with the community over the coming months.

**Let’s make the web accessible together!**

* * *
Dependency Injection in under 2minutes
Tags: javascript, webdev, beginners, programming
Published: 2022-05-19 08:53:34

---
title: Dependency Injection in under 2minutes
published: true
description: Understand dependency injection easily!
tags: javascript, webdev, beginners, programming
---

Hello Devs! Lets talk **DI** or **dependency injection**. 

### The easy to digest analogy:

You work in a car factory. Each part of the car making process requires either multiple pieces of specialized machinery or a person to put the car together.

Stage 1 of production requires a machine that cuts the frame, and another to lift the frame to stage 2. 

In stage 2 it then puts assembles the frame the car puts it together. It then uses the same machine to lift and take it to stage 3. 

In stage 3 we may have a person who comes and inspects the final product and then sends it on its way.

### The summary:

The above analogy can be thought of as you have a code base or group of functionality (the car factory) that is made up of different services or functionality (machines or people).  

These pieces of functionality could be used in one or multiple places in your code base (the stages of production).

Dependency injection is about providing your functionality to your different pieces of code. Without that code directly importing or using that piece of code (this is the responsibility of something called an injector to provide it). 

This makes it easy to swap it out and only have to make sure that whatever you are swapping it with conforms to the interface that piece of code requires (it is about making sure the contract of functionality is met).

The benefit of dependency injection is:

1. Decreased coupling between pieces of code
2. Increased flexibility in swapping functionality (what happens if you need a new machine to lift or move assemble the car?)
3. Ease of testability of your code
4. Less boilerplate
5. It allows concurrent development. Multiple developers can work on different classes that use each other, while only needing to know the interface the classes will communicate through.

I hope this has helped!
Last chance: Save your seat for IUG 2022!
Tags: blog
Published: 2022-05-24 09:26:36

---
title: Last chance: Save your seat for IUG 2022!
published: true
date: 2022-05-19 08:52:24 UTC
tags: Blog
canonical_url: https://tech.forums.softwareag.com/t/last-chance-save-your-seat-for-iug-2022/257557
---

[![SAG_International_User_Group_banner_1000x280_Apr22](https://aws1.discourse-cdn.com/techcommunity/original/3X/e/3/e35db16ccda5cc6597ba3c4d3ae226818e948f80.jpeg)](https://web.cvent.com/event/3bd58fd0-83fe-40b0-b138-6f8383d3a3ba/summary)

**There are only two weeks until our first-ever hybrid [International User Groups Conference](https://www.softwareag.com/en_corporate/company/events/iug-conference.html) (May 30-June 3rd) opens its doors. The good news: It’s not too late for you to [reserve your seat](https://web.cvent.com/event/3bd58fd0-83fe-40b0-b138-6f8383d3a3ba/regPage:dc736f5b-504e-4fb3-ada9-ac8f7a2d23aa)!**

Our user group community has built a comprehensive program you don’t want to miss, topped with countless networking opportunities and social events.

Still not convinced? Our event host and comedian Pep Rosenfeld knows all the reasons why this year’s event is one you definitely don’t want to miss.

Registration is free of charge, whether you choose in-person sessions in The Hague or virtual sessions from anywhere in the world:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39hr9iz1l78da84j0wt.png)
 
[https://www.youtube.com/embed/zE1RKDpCd0c](https://www.youtube.com/embed/zE1RKDpCd0c?autoplay=1&feature=oembed&wmode=opaque)

> [Register now](https://web.cvent.com/event/3bd58fd0-83fe-40b0-b138-6f8383d3a3ba/summary?utm_campaign=global_events&utm_content=iug-registration-page&utm_medium=organic&utm_region=hq&utm_source=forum)

If you have any questions or feedback, please get in touch with us at [iug@softwareag.com](https://tech.forums.softwareag.com) or check our [website](https://www.softwareag.com/en_corporate/company/events/iug-conference.html?utm_source=mkto&utm_medium=email&utm_region=hq&utm_campaign=global_events&mkt_tok=ODU4LURKUC03NDkAAAGEW6W5vj_JfvEM8PslwhDiThvcN-DoeswtrxqG2s2envWDv-eTxyz6ZCLquYDu265iOkGk2LThCgQahVSlhckX).


[Visit original Post](https://tech.forums.softwareag.com/t/last-chance-save-your-seat-for-iug-2022/257557)
PYTHON | DATA STRUCTURES
Tags: python, datastructures
Published: 2022-05-19 08:41:21

Today these videos are about python datastructures

## EMPTY OBJECT

{% youtube https://youtu.be/ew6GT5Cn6E8 %}


## LISTS

{% youtube https://youtu.be/pmGez3CciGY %}


## TUPLES

{% youtube https://youtu.be/7ggEwqeLpOI %}


## SETS

{% youtube https://youtu.be/GqAwNwBRkpo %}


## DICTIONARIES

{% youtube https://youtu.be/LR77KYKISJ4 %}
Truncate String with CSS
Tags: webdev, css, beginners, tutorial
Published: 2022-05-19 08:22:52

In this article, I am going to cover how you can create truncate strings or paragraphs by just using CSS.

### What is Truncate?
Truncate means to make something shorter, especially by cutting off the top or end. In paragraphs, we make the string shorter by cutting the lines. 

```html
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s when an 
unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting.
```
The above paragraph contains 4 lines and we want to make it short to two lines. like this - 

```html
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s, when....
```

### How to use it?
First, let's take a look at how my HTML is looking- 

```html 
<div class="container">
  <h3>Truncate-2 (two line)</h3>
  <p class="truncate-2">Lorem Ipsum is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
more recently with desktop publishing software like Aldus PageMaker including 
versions of Lorem Ipsum.</p>
</div>
```

So as you can see I've applied the `truncate-2` class to the paragraph. This class contains the following properties-


```css
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* Change the number as per your requirement */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
```

After that result is something like this-

![truncate-1](https://imgur.com/9CZvu3K.png)

**Codepen-**

{% codepen https://codepen.io/j471n/pen/oNEWoVG %}


## Wrapping Up
If you enjoyed this article then don't forget to press ❤️ and **Bookmark** it for later use. If you have any queries or suggestions don't hesitate to drop them. See you. 

My [Newsletter](https://bit.ly/j47letter)
My first real project XeroLinux.
Tags: react, webdev, design, linux
Published: 2022-05-19 08:14:24

Hello, I'm Mhmd Ali, a Front-End Web developer. in this post I'll share my process of designing and building my first real project [XeroLinux](https://xerolinux.xyz).  


## How it started?

First of all, I watched a [video](https://www.youtube.com/watch?v=rqCTzdLNeXY) on [DistroTube YouTube channel](https://www.youtube.com/c/DistroTube) showing the distro, I really liked the distro and how it looks so nice, then I head to the official website to download it, and I realized that the website don't have the same feelings of the distro and I thought that I can do better, so I joined [XeroLinux Telegram channel](https://t.me/xerolinux) and I sent a message with mentioning DarkXero (the Creator and maintainer of XeroLinux) if he is planning to redesinging XeroLinux website and the answer was YES!

### the original design (Before):
![XeroLinux Original Design](https://imgur.com/SLfAV4v.png)

## My redesign Process!

At this point I made a quick mvp with [Figma](https://figma.com) showing my idea to DarkXero, of course no thing is perfect from the first time so I kept tweaking the design for about two weeks until we agreed on this desing below.

### the Re-Design (After):
![XeroLinux Re-Design](https://imgur.com/0eGjmUl.png)

The idea was to make the website looks and feels same as the Distro specifically the XeroCerry rice.

## Building the website

Now it's time to build the website, I created the website with ReactJS since it is the language that I'm comfortable, It tooked around 2 weeks to finish it. but the problem was that DarkXero wanted an easy way to update the Changelog, Announcements, Videos and the FAQs without changing the source code, so I made everything he need to update in a json file, except for the Pop Ups because they do not have a single layout or a fixed content, I kept thinking for a solution until I remembered [NoteDown](https://github.com/mhmdali102/NoteDown), this is a tool/notes web app I've created while I was learning JavaScript to take notes with Markdown syntax with many useful features. Since he knows Markdown I configured the tool to preview Markdown in the same styles for XeroLinux website, [click here to try the configured tool](https://xero-md2html.netlify.app/).

## My experience

It was a good experience, I'm grateful that my first project was something that I love,
and I enjoyed working on it, and DarkXero is an awesome person, I'm happy that I met him.


Thank you for reading, what do you think about it? Any advice would be much appreciate it...
Using Custom Controllers in Strapi to Power a Next.js App
Tags: javascript, react, nextjs, strapi
Published: 2022-05-19 08:11:31

Strapi continues to be the most popular free, open-source, headless CMS, and, recently, it released v4. Built using Node.js with support for TypeScript, Strapi allows developers to perform CRUD operations using either REST or GraphQL APIs.

The best part of Strapi is that it allows users to customize its behavior, whether for the admin panel or the core business logic of your backend. You can modify its default controllers to include your own logic. For example, you might want to send an email when a new order is created.

In this tutorial, you’ll learn how to build a messaging app with Strapi on the backend and Next.js on the frontend. For this app, you’ll customize the default controllers to set up your own business logic.

Read the full blog on [Strapi](https://strapi.io/blog/using-custom-controllers-to-power-a-next-js-app).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-05-19 08:00:08

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
Moving from Shared web hosting to VPS
Published: 2022-05-19 07:21:13

I have a Affiliate website that gets around 10k visits / mo, initially I hosted that site on Bluehost because it was really cheap after applying some coupons etc. and a free domain.

The speed was decent with high uptime, but as the site started getting more visitors both speed and uptime started declining.

There were more frequent downtimes because my site was using too many resources, speed was really slow.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up5s87o4rtcflwdlwjne.png)

So, I decided to move my site to a VPS, bought the cheapest VPS from SiteGround and hosted my site on it, the VPS is managed so I don't have to worry about the technical part.

But the cost is still too much, I'll think about hosting the site on another VPS like AWS when I get time.

[SiteGround vs Bluehost](https://quickserp.com/siteground-vs-bluehost/)

For now its SiteGround is doing fine.
Guide to Game Development Career Paths
Tags: programming, career, tutorial, devops
Published: 2022-05-19 06:57:00


Wondering how to become a Game Designer or how to become a Game Developer? And what is the career path for a game programmer?

In this [article](https://blog.getace.io/all-posts/game-development-career-paths), you will find Gave Developer levels descriptions, what skills you need to be a Game Developer or a Game Designer, as well as Game Development career goals examples.

## Career Path for a Game Developer

Click on the role & get the list of career path levels (or grades) for Game Development specialist and top Game Developer skills on each level.

- [Game Designer](https://www.getace.io/)
- [Game Developer](https://www.getace.io/)

## 50+ tech roles
Need more roles? Go to [Ace’s career path templates](https://www.getace.io/templates) for 50+ tech roles.

You’ll find career paths for Backend Developer, Front End Developer, Software Testing (QA), Data Science, Design, and more.
AWS Insiders Podcast: AWS Cost Optimization 101 with Badri Varadarajan, EVP of product at CloudFix
Tags: cloudfix, aws, podcast, finops
Published: 2022-05-19 06:52:21

## Podcast
* [Episode URL](https://aws-insiders.simplecast.com/episodes/aws-cost-optimization-101-with-badri-varadarajan-evp-of-product-at-cloudfix)
* Subscribe on [Apple Podcasts](https://podcasts.apple.com/us/podcast/aws-insiders/id1608453414), 
 [Spotify](https://open.spotify.com/show/0sH9zDLABk6FoLM0cpZHu1) or [RSS] (https://feeds.simplecast.com/4vl2TtzP)


## EPISODE NOTES
On this episode, Badri Varadarajan, EVP of product at CloudFix, and Rahul Subramaniam, AWS superfan and CTO of ESW Capital of CloudFix, dive deep into AWS Cost Optimization best practices for how to apply cost optimization principles when designing, configuring, and maintaining workloads in AWS Cloud environments.


> "If you keep doing cost optimization, first it's good hygiene, second, you build up your cost optimization muscle. So organizationally, when it becomes a real problem, you can hit the ground running and take commensurate proportional measures, as opposed to just going from not worrying about all, to it being the only thing you worry about." 
>
>Badri Varadarajan, EVP of product, CloudFix

## Time Stamps
* (01:12) How Rahul and Badri got started with AWS
* (07:08) Recognizing the importance of cost optimization 
* (17:13) Simpler ways to save and get results 
* (20:59) How to balance cost vs ROI
* (27:32) Organizational playbooks on how to construct to cost
* (36:34) Key factors to making cost optimization projects successful
* (39:47) Takeaways about cost optimization
Uncontrolled textarea element
Tags: react
Published: 2022-05-19 06:44:12

Renders an uncontroller `<textarea>` element that uses a callback function to pass its value to the parent component.

- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.

- use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8d4l28ylrvwmjy8kgvi.png)
June 1-3 2022 RGTC! 28 Topics + 9 Times Dev Boards Giveaway | Free&Online
Published: 2022-05-19 05:39:51

Hey Embedded & IoT Developer,


We're Back! The 2022 RT-Thread IoT OS Global Tech Conference

When: June 1- June 3

Location: Microsoft Teams http://bit.ly/3GNujSQ

Join us for an exclusive event! You'll learn all about game-changing inventions from our speakers, get much more useful tips for embedded and IoT development, and hear a real review from experts.

28 Topics + 9 Times Dev Boards Giveaway + Certificate for every participant.

Agenda: https://bit.ly/3lflwkq

Register to join us: http://bit.ly/3GNujSQ


Cheers!
RT-Thread Cathy
how to serve css and js file while serving html file via handlebars
Published: 2022-05-19 06:24:19

I can give anydesk access to you if u want to help solving error

when I am serving CSS and JS file it showing the error

Refused to apply style from 'http://localhost:8000/public/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Failed to load resource: the server responded with a status of 404 (Not Found) index.js:1

My index.hbs code

`<html>

<head>
    <title>Employee Registartion</title>
    <link href="../public/css/index.css" rel="stylesheet">
    </link>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <div id="box-wrapper">
        <div id="box">
            <h1 id="head">Insert Employee</h1>
            <form action="/employees" method="POST" autocomplete="off">
            <div id="Name">
                <span id="full-name" class="span">Full Name</span>
                <input type="text" placeholder="Full Name" id="full-name-input" class="input"></input>
            </div>
            <div id="email">
                <span id="email-span" class="span">Email</span>
                <input type="email" placeholder="Email" id="email-input" class="input"></input>
            </div>
            <div id="number">
                <span id="number-span" class="span">Mobile</span>
                <input type="number" placeholder="Mobile Number" id="number-input" class="input"></input>
            </div>
            <div id="city">
                <span id="city-span" class="span">City</span>
                <input type="text" placeholder="City" id="city-input" class="input"></input>
            </div>
            <div id="submit">
                <button type="submit" id="submit-btn"><span id="submit-span">Submit</span></button>
            </div>
            </form>
        </div>

    </div>
    <script src="../public/js/index.js"></script>
</body>

</html>
**My server.js code**

`    const express=require('express');
const app = new express();

const hbs=require('hbs');
const path=require('path');

app.use(express.json())// will convert string into obj
const employeeRouter=require('../controller/employee-controller');
require('../models/db')

app.use(employeeRouter);
app.use(express.static('public'));

const viewsPath=path.join(__dirname,"../views");
app.set('views',viewsPath);
app.set('view engine','hbs');

app.listen(8000,()=>{
    console.log("connect to server bro");
})
`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21bd1vaibfj6l7wnrx90.png)