teleren/devto huggingface dataset:
Learn HTML and CSS
Published: 2022-09-12 16:18:16

## Want to learn HTML and CSS


{% embed https://www.youtube.com/playlist?list=PLd5Ha3tHnWyIyB7yDFx37otlMpzgwYDxo %}


## Useful Tricks

> {% embed https://www.youtube.com/playlist?list=PLd5Ha3tHnWyJqGWqR-0AIvTkcVSBj-U9o %}

## Some Fun

{% embed https://www.youtube.com/playlist?list=PLd5Ha3tHnWyLV3bEdkiqc_WcbRnaiOq8m %}


I am not uploading videos for 2-3 weeks as I have exams and I will not upload for next 2 weeks. Sorry for that.



Thanks
How to Create Your Own Layout Component in Vue.js
Tags: javascript, programming, vue, webdev
Published: 2022-09-15 23:49:57

---
title: How to Create Your Own Layout Component in Vue.js
published: true
date: 2022-09-12 16:17:45 UTC
tags: javascript,programming,vuejs,webdevelopment
canonical_url: https://javascript.plainenglish.io/how-to-create-your-own-layout-component-in-vue-js-32ad6ddc0d8f
---

[![](https://cdn-images-1.medium.com/max/2600/0*WYOb1ZW_ZeEqOUXD)](https://javascript.plainenglish.io/how-to-create-your-own-layout-component-in-vue-js-32ad6ddc0d8f?source=rss-17217f29618a------2)

A guide on how to create basic layout components with Header, Footer, and content section.

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/how-to-create-your-own-layout-component-in-vue-js-32ad6ddc0d8f?source=rss-17217f29618a------2)
Learn to notice the invisible with UI Kids
Tags: design, uiweekly, ux, writing
Published: 2022-09-12 16:14:45

UI Kids is a comic about important, but not always noticeable, interface elements with which the user interacts with the service. These elements — buttons, tumblrs, checkboxes, etc. — allow the user to indicate their intentions and wishes, select the necessary options, and generally navigate the service. Evrone designers imagined what all these elements would be like if they were brought to life.

[Read full case study here.](https://evrone.com/ui_kids)
Learn Coding here
Published: 2022-09-12 16:12:27

I am a youtuber who makes guide about coding. 

Visit my channel now : https://www.youtube.com/channel/UCTjo7CaWDD5ld-XeGjs8Mzg/

Github : https://github.com/codes-guide-youtube/

Any suggestons for me.... please drop it in the comments.

Thank You
The Blob Data Type
Tags: datatype, database
Published: 2022-09-12 16:09:59

There are varying data types that exist in the world of programming. Common data types include: strings, integers, floats, characters, booleans. All of these data types can be used along with tables and data to create rich and expressive databases for web apps. But what can developers do if they would like to use images, video, or audio?

## ENTER type:blob


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



A blob data type is used for storing information in databases just like a string or an integer. However, blobs can store binary data which allows for the storage of files. Images, videos and audio can then be stored in databases as blobs.

The term "blob" actually stands for "Binary Large Object" and is used for storing information, as binary, in databases.


Through the use of blobs, common social media features such as photo albums can be constructed where a photo album table would contain photos:blob and photo_caption:string.

Because blobs are used to store objects such as images, audio files, and video clips, they often require significantly more space than other data types. The amount of data a blob can store varies depending on the database type, but some databases allow blob sizes of several gigabytes.

Example
```
{
  "data" : {
    "image": "/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2===",
  },
  "time": <Optional Timestamp>,
  "flowVersion": <Optional Workflow Version Name>
}
```

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






How to record and play audio in JavaScript:

https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b

How can I get the blob file (i.e recorder voice) to send the server:

https://github.com/mattdiamond/Recorderjs/issues/188




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o1y6inbdw7ptrbulfou.jpeg)




Sources:
https://techterms.com/definition/blob
https://en.wikipedia.org/wiki/Binary_large_object
https://docs.losant.com/devices/blobs/
Apprentice Blog: Double Feature
Published: 2022-09-12 16:08:22

I'm playing catch-up after having my normal blog day (Monday) off last week for Labor Day. This week's blog post will feature not one, but two(!) posts in one. Woohoo!

> You’ve been a software engineer for a few weeks now. How do your day-to-day responsibilities differ from what you expected? Have you been surprised by the breakdown of work each week?

Oh gosh, a "software engineer". I still don't feel worthy of the title, despite the insistence of everyone around me that I do actually qualify for it. This feeling of not being a "real" software engineer yet is exacerbated by not having yet been placed on a project with my host company. As such, I don't have solid day-to-day responsibilities as much as I have an amorphous lump of time to devote to learning as much as possible (right now working through an agile/scrum course) and to working on my umbrella project. While I'm definitely loving this time to learn, I think I will be better able to answer this prompt/question after I've transitioned onto a project. Will come back and do an update once I reach that point!

> Where do you fit into South Carolina’s ecosystem right now, and where would you like to contribute in the future?

This is a great question. Right now I feel like I'm on the fringes of integration into the SC tech ecosystem, on the cusp of becoming a meaningful part of things, though not quite there. I think that (as I mentioned before) being placed on a project and contributing to the work that project is doing will help to solidify both my place in the ecosystem as well as my confidence in myself as a developer. Down the road a bit, I would like to encourage other women/moms/career-changers to consider the idea of joining the tech ecosystem, and to show that this is a diverse field that truly is accessible to all types of people. I've mentioned this before, but programming is something that I never considered myself capable of until being kindly introduced to it by a loved one. There are pervasive stereotypes around the types of people who are well-suited for this field, and I never even considered that I may have a place here because I don't fit into those stereotypes. Though I don't know what my contribution will look like exactly, I'm hoping to be lucky enough to know it when it finds me and to contribute something meaningful back into the community that has supported me so completely.

This week my goals are to: make some excellent headway on the umbrella project, complete a course on scrum/agile, begin learning Unity/C#, maintain a grateful mindset, and feel even 5% more competent/confident than I did last week (a trend that has been holding steady throughout - I've learned so much!) 

The journey continues!
Portseido: Portfolio tracker for global stocks, cryptos, ETFs
Published: 2022-09-12 16:07:05

Portseido is a portfolio tracker that provides rich analytics and visualizations of your portfolio, providing historical performance, trade analytics, allocations and many more. It covers over 70+ stock exchanges, 20000+ ETFs and cryptos, allowing international and global investors to view all their investments in one place.

https://www.portseido.com/
What does object-fit property do?
Tags: html, css, javascript, webdev
Published: 2022-09-12 16:02:47

Last time I wrote about the topic of responsive images and `object-fit` plays a vital role in displaying images.

Usually, during displaying user-uploaded images we face the issue of image replacement according to the UI.

For example, if you want to show a rectangle image in a square box, it will be shown as a stretched image in a browser.

To fix this kind of issue, `object-fit` CSS property is beneficial.

I have created a simple app to demonstrate `object-fit` property usage and benefits.

{% codesandbox object-fit-demo-2qtjeq %}

Thank you for reading!
Feel free to connect on [Twitter](https://twitter.com/Aneeqa_Khan25)
Luos 2.6 keynote live on Discord on September 15 at 9:00 am PT.
Tags: opensource, microservices, live, luos
Published: 2022-09-12 16:00:58

🔴 It's this week! Luos keynote live on Discord on Thursday 15th at 9:00 am PT.

To participate ⏩ https://discord.gg/myMhgJvP?event=1013835403465326683

Nicolas Rabault will present the new version 2.6!
Give/Get a coding project idea.
Tags: webdev, idea, programming, help
Published: 2022-09-12 15:59:17

I always have a lot of ideas for projects I would love to see built or build myself if I had the time. 

So why not just share some of our ideas for others to build off of. 

I posted in the past that I would love to see an AI that would take meeting notes just by being present in the room.

The other idea I wish someone would build is a search/post site dedicated strictly to blogs. Search by name, category, topics and so on. 

Whats your ideas you want to share with others to use?
Flink and Pulsar for September 12th, 2022
Tags: apachepulsar, apacheflink, flipstack, opensource
Published: 2022-09-12 15:49:11

Flink and Pulsar for September 12th, 2022
Published on September 12, 2022
Edit article
View stats

Tim Spann 🇺🇦 🥑Status is online
Tim Spann 🇺🇦 🥑
Developer Advocate @ StreamNative, Apache Pulsar, FLiP Stack, DeveloperWeek Advisor 🇺🇦
101 articles
#ApachePulsar #ApacheFlink #FLiPStack #FLiPNStack #ApacheNiFi #Spring #Java #OpenSource #Python #JDK17 #Reactive
Is it Halloween yet? So many cool events before then so I won't rush it. I will be costume and decorate well before then. I hope to see people at [J].dev, ApacheCon, and CurrentEvent Summit.
Training!

Changes to new versions of Akka, a consideration for the Apache Spark and Apache Flink projects.

CODE + COMMUNITY
The podcast is coming this week.
Thanks to Comcast for a great event in Philly, it was a lot of fun and the venue is amazing. The Comcast Labs team put in an amazing effort, I can't wait to speak at another event there. It would be an amazing venue for meetups. One of the Speakers at the conference has an interesting podcast. Check it out.


Thanks to the Spring + Pulsar team, we are now Reactive!!!! Lari Hotari has got an early snapshot out there. I will test it out and let you know how awesome it is next week.

The mainstream Apache Pulsar - Spring module is coming along well. I have been testing some releases and Soby Chacko David Kjerrumgaard Alexander Preuß Chris Bono have been crushing it.
This is Issue #48!



TRAINING

ARTICLES









DEMOS

PULSAR APPS

VIDEOS

EVENTS



Pulsar Summit Asia 2022 is looking for speakers, get your talks in. I got mine in.


Sept 13-16, 2022: OSS Summit (Virtual). Now!



Sept 26-28, 2022: JConfDev Chicago: Join me on Sept 27 at 1:15 PM

https://2022.jconf.dev/
No alt text provided for this image
Oct 3-6, 2022: Apache Con, New Orleans, LA.

Oct 3, 2022: Real-Time Data Meetup. Austin, TX.
Oct 4-5, 2022: Current: Apache Kafka Summit. Austin, TX.

No alt text provided for this image
Oct 25, 2022: KubeCon: Detroit
Nov 3, 2022: Real-Time Data Event NYC
Nov 10, 2022: Real-Time Data Event Austin
Nov 10-11, 2022: AllDayDevops

Nov 15-18, 2022. PASS Data Community Conference. Seattle.

Nov 17, 2022: Real-Time Data Event San Francisco
Nov 23, 2022: Big Data EU (Virtual)

Dec 6-8, 2022: Spring One: San Francisco

December 8, 2022: Real-Time Data Event Silicon Valley
CODE


TOOLS














Published by
Tim Spann 🇺🇦 🥑Status is online
Tim Spann 🇺🇦 🥑
Developer Advocate @ StreamNative, Apache Pulsar, FLiP Stack, DeveloperWeek Advisor 🇺🇦
Published • 1h
101 articles
hashtag
Reflecting
Tags: programming
Published: 2022-09-12 15:45:37

I tend to think of a career as something that you spend year building towards. It is a job path that you have worked to achieve through experience and/or education. Growing up I believed that my college education was the path to my optimal career. However, this was far from the truth. I left college unprepared for a career and scrambling to pay off debts.

Now I don't blame my college or parents for these debts and lack of preparedness. I know I am responsible for my actions, I chose my major, my university, my "career path", I just didn't think it through as carefully as I should have. Yes, my university could have done a better job training students to actually get a job rather than the purely academic pursuits but I bear the brunt of the responsibility. 

So after a few years of switching jobs and trying new things, I didn't believe that further education would be possible, or practical to a new career. When I first read about the Software Engineering program through Flatiron, I thought it was a gimmic. A way to get people's money, and maybe it worked for a few people but there was no way someone like me could start a new career with just 4 months of training/learning in a new field. 

Nevertheless, after engaging in some free programming courses and finding enjoyment in the work, and after much research, I decided to give this four month program, and myself, a chance.

When I reflect upon how this program and the past few months of study have prepared me for the futue, my thoughts are split between pride and incredulousness. Of course, I am proud of how far I have come, though I am only scratching the surface of programming and full stack development. I went from no knowledge of programming to the ability to create a fullstack website in about 3 months. Even if I didn't take this into a job afterwards I would be impressed with myself and how far I have come. 

At the same time, I still suffer from a bit of imposter syndrome and I am sure it will not go away when I first get a job as a developer either. I still think of getting a job a bit of stretch. Is my knowledge and growth over the past 3 months truly enough to transition me into a programming career? 

I have the knowledge base to develop a fullstack website, I have the experience of putting this knowledge into practice, and will have do so a few times before relly setting out into the job market. I have to fight the imposter syndrome that creeps in telling me I am not a programmer. I am a programmer now. I may be early on in my career, slow and still learning, but I am a programmer. Reminding myself that programming is a lifelong learning commitment really helps me to fight off the imposter syndrome. Every programmer is still learning, and that is one of the things I enjoy most about this field. The imposter syndrome might be around for a while, but at least I can keep growing into a more competent programmer.
Strict Mode of JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-09-12 15:34:32

Hey 👋, Guys Welcome.

Today we are deeply learning , that what's the difference between LET , VAR & CONST Keyword in JavaScript.

Let's Dive In ..

---

You will be surprised to know that JavaScript also have a strict mode. Now What does this strict mode do, This is What Today's article about.

## Strict Mode

Strict Mode enables us to write much more secure code than normal. This Mode throws much exceptions than normal, so that we can avoid little mistakes that are often ignored by JavaScript. We Will Be Discussing Many Examples to Explore this Feature.

## How to Use

In Order to use this Mode, we have to write these two words before writing JavaScript Code

```javascript
"use strict" or 'use strict'
```

## Working Environment

This Strict Mode can be used in two ways.

1. Inside Block
2. Globally

- Inside Block, Strict Mode Will Only Work in Between these two curly brackets {}.
- With Global, Strict Mode  Will Work Globally in all our Code.

## Example

```JAVASCRIPT
function Mode() {
  "use strict";
  X=20; // X is not defined
}

Z=20;
console.log(Z) // 20
Mode()
```

In Above Example, We can see that due to strict mode in function, we get an Error. Because Strict Mode in only Enabled inside Function (Mode() Function). According to Exception thrown by strict mode "X is not defined". This exception is due to not defining variable X. We Must Have to use let const or var keyword to Get Rid of this Exception. See Given Example

## Example

```JAVASCRIPT
function Mode() {
  "use strict";
  let X=20;

  console.log(X) // 20
}

Z=30;
console.log(Z) // 30
Mode()
```

Lets See Few More Examples

## Example

```javascript
'use strict'

function Func(P1,P1) // Duplicate parameter name not allowed in this context
{
  return P1+P1 
}

console.log(Func(3,5)) // !! Output Will Be Wrong

// Always Try to Keep Arguments Name Different
```

##Example

```javascript
'use strict'

let X=010; // We Cannot Use Leading Zero before Number, Should Be 10 Only 

console.log(X) // Octal literals are not allowed in strict mode.
```

##Example

```javascript
'use strict'

let eval=20; // Error
let static=10; // Error
let private=10 // Error
```

We Cannot use Reserved Word as Variable in JavasSript if Strict Mode Enabled.

List of Few Reserved Words is 

- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield

As i already mentioned , strict mode helps to write more secure code. JavaScript make it easier for developer code. but strict mode converts previously accepted bad syntax code into error. I think it's good practice to code in Strict Mode.

This is it For Today's Lesson. Hope you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡
Boot up Pop OS in 30 mins
Tags: popos, linux
Published: 2022-09-12 15:24:32

_Disclaimer:
This article uses USB boot practice with an old PC, clean-installing(replace) its old OS. Thus it's NOT suitable for people who try to run Pop! OS on Virtual Machine or dual-boot multiple operating system._

**What you need**
- An old laptop(of course, any new PC is welcome.)
- USB drive

**Getting Started**
1. Download [BalenaEtcher](https://www.balena.io/etcher/)
    - My favorite tool to make bootable drive.
2. Download Pop!_OS ISO file from [their website](https://pop.system76.com/).
3. Flash the ISO file using BalenaEtcher into USB drive.

Now the OS is ready, so move to the laptop with which you want to use Pop OS.

4. Insert the USB drive into the computer, then reboot or power on your system. Hold F1/F2/F7 keys when doing this operation until the boot menu shows up.

5. Choose to boot up with USB drive. 
**Please disable fast/secure boot-up, if any.**

The details so far: https://support.system76.com/articles/live-disk/

Then just follow [their built-in great instruction](https://support.system76.com/articles/install-pop/).

Have you readers followed up here?

I very quickly wrote up this page in the same day I set all up Pop OS, and you know what, I'm writing this content right inside Google Chrome, which is inside Pop OS. I'm so excited for this. Please leave a comment if there's any unclear point or mistake. I would like to help you out or correct. 

Also please check here [chat.pop-os.org](chat.pop-os.org).
It helped me well.

A little bit back story follows.

I heard of this GNU/Linux distribution from my co-worker then I checked out the website of System76(the maker). I just intuitively love their philosophy, UI/UX, that is, most stuffs they offer.

I wanna give it a try without buying anything so I decided to replace my dad's old Windows laptop with this. I have been Mac user about a decade, plus this laptop is from Lenovo with legacy Windows and outdated IE inside. I have no experience using Powershell so I feel very unwilling to learn some basic of it for just accomplish this mission.

I called my good friend @greenteabiscuit just for some complaint and hopefully get some knowledge about Powershell. BUT he insisted that why I don't just use USB drive to boot up, instead of learning Powershell, get a web browser, and do the rest. That was truly an Aha moment. I was totally trapped in the box that I have to ONLY use this old laptop to finish everything. 

With his grateful amazing bit of advice, I successfully began the journey of Pop!_OS, following the steps above.

I sincerely wish this piece of page would similarly help you.

Happy making!
Using Django's hitcount for unregistered users in your application
Tags: python, django, webdev
Published: 2022-09-12 15:17:18

Django `hitcount` is a python library that allows you track the number of hits/views on a particular objects by detecting the IP address of each click to prevent unreal views this ensures views aren't counted twice.

This library was built using the Django’s class based views which provides a wrapper for Django’s generic `DetailView` and allows you to process the Hit as the view is loaded.

To begin with this library you must have Python and Django running on your system, next we install the `django-hitcount` using `pip install django-hitcount`, after installation we add the hitcount library to our installed applications in `settings.py`

![settings file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjp2jqxk4urucg3tt57f.png)

Next, we modify our `models.py` file by importing the following line of code

```
from hitcount.models import HitCountMixin, HitCount
from django.contrib.contenttypes.fields import GenericRelation
```
**this library was built using Django's class based views so for beginners who might have already began using function based view in their application should have no worry as you can use both function based views and a class based view in one application view.**

So, now lets move to our `views.py` and tweak it a little, but before we do that, we need to import our hitcount into our `views.py` file

```
from hitcount.views import HitCountDetailView
```

![Detail views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trpc5xjwiximtqjcqu9i.png)

The `HitCountDetailView` can be used to do the business-logic of counting the hits by setting `count_hit=True`.

Almost there, now we move to our HTML template and load our hitcount tags, just right above your html DOCTYPE load the hitcount tags

```
{% load hitcount_tags %}
```
Finally, we add styling to our application with this line of code

```
<span class="ion-ios-eye"></span> {% get_hit_count for project %} views
```
VOILA!!! You've successfully integrated Django's hitcount to your application
Forget Heroku (use THIS instead)
Tags: heroku, programming, cloud, webdev
Published: 2022-09-12 15:01:13

By now you must have heard the news that Heroku will be ending its' free tier. Are you looking for alternatives to Heroku ? there are many options such as **Glitch**, **Render** and **Vercel** etc. 


![BMC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xmhxkzpktm4qjp6i3vm.gif)

Today, we will be looking at Glitch. I have used it and it is a really great service.

Glitch is a free PaaS (platfom-as-a-service) where you can host your projects made with Nodejs.


## How to use

Create an account by [signing up](https://glitch.com/signup). 

### Create Readme

In your project, create a Readme and add the following

```javascript

[<img src="https://cdn.gomix.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix-button.svg" width="163px" />](https://glitch.com/edit/#!/import/github/<GitHub Username>/<Repository Name>)

```

### Deploy

**Deploy by clicking the button above** to import this Nodejs app on Glitch

### env

If you have `.env` in your project, you can add them on Glitch.

🎉Your site is live.


**Thank you**


<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>


Follow me on [linkedin](https://linkedin/in/ifeanyi-thankgod-chima), [github](https://github.com/masterifeanyi) and [twitter](https://twitter.com/@ifeanyiTchima)