teleren/devto huggingface dataset:
Create a Personal Portfolio Website Using HTML, CSS, and Bootstrap
Tags: html, css, webdev, javascript
Published: 2021-03-29 14:26:38

Hello friends, in this article I am going to show you how to create a responsive personal portfolio website.

When creating a personal portfolio website, you need to look at a few special things, the most important of which is that you need to design the website in such a way that you can put all your experience and talent in front of your users. A portfolio website is a website where you will showcase your educational qualifications and your experience to the users. They will then hire you for their project according to their needs. So in this case you need to use the website in a modern way, using bright colors and animations to beautifully showcase all your qualities and experiences in front of the users. With this in mind, I have designed this website in a completely modern and professional way.

I basically used HTML, CSS, and bootstrap programming code to make it. You can download all its code and necessary images for free by clicking on the download button below.

If you want to learn how to make it completely, you can watch the video tutorial below.

{% youtube 8YQ07IUybmo %}

[Demo and Download Code](https://youtu.be/8YQ07IUybmo)

If you like the video tutorial, be sure to `like the video and comment on it so I can encourage you to create new designs`. 

You can comment on what kind of design you want. Special thanks to you for reading to the end of the article.
How to do multiple indexed MongoDB text Search
Published: 2021-03-29 14:24:37

Indexing Multiple Fields (Compound Indexing)
More often than not, you will be using text search on multiple fields of a document. In our example, we will enable compound text indexing on the subject and content fields. Go ahead and execute the following command in mongo shell:  

db.messages.createIndex({"subject":"text","content":"text"})
Did this work? No!! Creating a second text index will give you an error message saying that a full-text search index already exists. Why is it so? The answer is that text indexes come with a limitation of only one text index per collection. Hence if you would like to create another text index, you will have to drop the existing one and recreate the new one. 

db.messages.dropIndex("subject_text") 
db.messages.createIndex({"subject":"text","content":"text"})
How to Setup a Python Virtual Environment
Tags: python, linux, virtualenv
Published: 2021-03-29 14:02:23


Virtual Environment is necessary when you have many projects with different requirements, You can use python2 or python3 without worrying about collision and keep then main python folder clean

#### Install python virtual environment
 
```
>> sudo apt-get install updates
>> sudo apt-get install python3-venv
```

#### Create project folder

```
>> mkdir project_folder_name
>> cd project_folder_name/
```

#### Initialize a virtual environment

```
>> python3 -m venv virtual_env_name
```

#### To activate virtual_env

```
>> source virtual_env_name/bin/activate
```

#### To deactivate virtual_env

```
>> deactivate
```
How to do a Text Search in MongoDB
Published: 2021-03-29 13:53:47

A text index is created quite similar to how we create a regular index, except that it specifies the text keyword instead of specifying an ascending/descending order.

Indexing a Single Field
Create a text index on the subject field of our document using the following query:

1
db.messages.createIndex({"subject":"text"})
To test this newly created text index on the subject field, we will search documents using the $text operator. We will be looking for all the documents that have the keyword dogs in their subject field. 

Since we are running a text search, we are also interested in getting some statistics about how relevant the resultant documents are. For this purpose, we will use the { $meta: "textScore" } expression, which provides information on the processing of the $text operator. We will also sort the documents by their textScore using the sort command. A higher textScore indicates a more relevant match.
Using web components and contributing to open source 
Tags: opensource, webcomponents, github, vscode
Published: 2021-03-29 13:50:38

#What is a web component?
If you have taken any software engineering or coding classes professor love to talk about encapsulation. Web components are real-life examples of encapsulation. If you don't know encapsulation is basically the reuse of code in order to create more organization and usable projects. Web components are a great way to reuse code and make your life easier! For example, the web component I will use in this demo was created by another programmer, but if I was say... building my own website I could use his web component in my own project. 

##Find a project
For this example, I will be using Twitter Embed from {% github elmsln/lrnwebcomponents %} The creator is my professor {% user btopro %}

##Install necessary dependencies
This project requires downloading and installing yarn, as well as forking the repo and cloning it locally. No matter what project you decided to contribute to be sure to check their readme page! Personally, I use npm all the time, but this project needs yarn and cannot run with npm. If you need git instructions see my git article [here] (https://dev.to/francescaansell/getting-started-with-git-56k7). 

##Edit some code!
I updated the demo page for the Twitter/embed web component. A demo page can help demonstrate what the web component is supposed to do and the syntax in which to do it. This is the tweet I decided to add 
{% twitter 1375488295526752259%}

How sweet right? 

#Sumbitt to the development team
Just because you changed one line of code does not mean you are done. Next, you have to submit a pull request to be reviewed by the project's main development team. Github will check for any conflicts etc. that could break their project. 

If you've come to this far and your request gets accepted congrats you have hopefully been able to contribute to an open-source project. Welcome to the real world. 

Check out my youtube video to go with this blog post.
Nice vector illustrations resources
Tags: design, webdev, ux, javascript
Published: 2021-03-29 13:49:57

## Drawkit

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g17201m7dbfmdr1ib12q.png)

Link: [https://www.drawkit.io/](https://www.drawkit.io/)

## Undraw

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0esmhd3aynmr6785p55w.png)

Link : [https://undraw.co/illustrations](https://undraw.co/illustrations)

## Storyset

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ieas6aebyq7i4vy8jqb.png)

Link : [https://storyset.com/](https://storyset.com/)

## Icons8

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2j0h3kj55fltzncd51x.png)

Link : [https://icons8.com/illustrations](https://icons8.com/illustrations)

## Error404

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqrtk45pje9jkbjwd2un.png)

Link : [https://error404.fun/](https://error404.fun/)

## Delesign

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80yu0m7eszeozeh8pdmv.png)

Link : [https://delesign.com/free-designs/graphics/](https://delesign.com/free-designs/graphics)

## Brooklyn

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ruybst0aenkadkwk81h.png)

Link : [https://www.streamlinehq.com/illustrations/brooklyn](https://www.streamlinehq.com/illustrations/brooklyn)

## Blush Design

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mqcdrqjt5iurq9gb9fw.png)

Link : [https://blush.design/fr](https://blush.design/fr)

## Control Rocks

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ii04j8fxbs8c7w7w9jw.png)

Link : [https://control.rocks/](https://control.rocks/)

<strong>If you know other illustrations resouces, I would be happy to hear it. 😊 </strong>
Troubleshoot Linux network issue
Published: 2021-03-29 13:46:28

## Linux 系统查看网络的常用命令

1. ifconfig命令
查看和配置网络状态

2. 关闭和启动网卡

ifdown  网卡设备名   # 禁用该网卡设备
ifup  网卡设备名     # 启用该网卡设备

3. 查询网络状态
netstat  选项

选项：
　　-t：列出TCP协议端口
　　-u：列出UDP协议端口
　　-n：不使用域名与服务名，而使用IP地址和端口号
　　-l ：仅列出在监听状态网络服务（只有TCP有监听状态）
　　-a：列出所有网络连接
　　-r ：列出路由列表，功能和route命令一致

4. 查看DNS
nslookup 地址
或者dig命令
dig hostname mx
dig hostname cname
dig hostname +short
[dig 是一个非常强大的命令，可以@server 来获得某个dns server上面的dns record。](https://www.howtouselinux.com/post/linux-5-ways-to-check-a-remote-port-is-open)
查看本机DNS服务器

了解[更多Linux网络命令](https://www.howtouselinux.com/post/basic-networking-commands-for-ubuntu-linux-interview)可以查看这个帖子。
## 网络测试命令

1. ping 选项 ip或域名
ping是利用icmp协议来获得对端机器的状态，通常是echo request 和echo reply来查看。更多[icmp协议的信息](https://www.howtouselinux.com/post/linux-5-ways-to-check-a-remote-port-is-open)可以查看这个帖子。
      查看网络是否通畅
选项：
　　-c：次数，指定ping包的次数

2. telnet  [域名或ip]  [端口]
     远程管理与端口探测命令，由于协议不加密，很少使用，大多用于探测对方某个端口是否开启。
我们也可以用[python来判断远程网络端口的情况](https://www.howtouselinux.com/post/linux-5-ways-to-check-a-remote-port-is-open)。 可以查看这个帖子。

## Linux网络性能差
网络性能差是一个不容易分析的问题， 我们大概可以从以下几个方面来分析。
1. 物理层
 查看网络端口网络丢包情况，物理链路的情况。在os上面都有相应的指标来衡量。
2. 数据链路层
链路的的mtu的配置，数据包分组，重新组装的测试等等。
3.  tcp 的数据重传
这些在netstat -s的输出中都有记录。
4. 应用层
这个帖子详细的介绍了[如何分析Linux 网络性能差的问题。](https://www.howtouselinux.com/post/check-network-performance-problems-on-the-linux-system)

上面所有的这些网络指标都可以通过[Linux的图形化的监控](https://www.howtouselinux.com/post/check-network-performance-problems-on-the-linux-system)来获得， 这样就可以拿到实时的数据，帮助我们来分析对应的问题。我们使用的是开源的软件，性能也非常强大。

一些网络方面的配置也会对性能有很大的影响，例如[tcp window scaling会对网络的带宽有很大的提升](https://www.howtouselinux.com/post/tcp_window_scaling)。
How to specialise as a freelancer ...
Tags: freelance, freelancer, specialisation, niches
Published: 2021-03-29 13:38:28

You've seen all the "experts" tell you that "the riches are in the niches" (if you pronounce it that way).  
But the idea of positioning yourself like that is terrifying.  

Turning away clients?  Saying no?  

It's hard enough getting clients as it is.  

However, without even realising it, you're already doing it.  

Every time you write a custom proposal, you're doing the same task.  

You're positioning yourself as the expert.  

In a niche of one.  

Your proposal is a sales document, telling your prospective client that you know what they want, you understand why they want it and you have a plan to deliver it for them.  

Because the proposal is a one-off, it doesn't feel like you're excluding others.  

But because the proposal is a one-off, it also takes you a load of time to write.  

All niching does is save you time by generalising your proposal writing.  

Instead of a new sales document, custom-written for every client, you're saying "I've already got one for this group of clients".  

Write once, use many.  

If you want to attract several groups of clients, you just research them, find out what they're looking for and write a proposal for each group in turn.  

You don't have to exclude anyone you don't want to.  

You're just saving yourself time.  

Perfectly positioned.  

(If you want more like this, check out my "[All Work, No Pay](https://allworknopay.substack.com)" - a free podcast and daily email)
Kubernetes CKAD Tips 10 – Labels
Tags: kubernetes, devops, cloudnative, ckad
Published: 2021-03-29 13:30:48

Labels in Kubernetes are a very humble but important component. Through labels Kubernetes objects like deployment, services are connected to the core component Pod. Labels are not mandatory. You can create an object without a Label. Labels can be added or modified later as well. Together with selector label helps connect loosely coupled objects.

{% youtube u6-7JCaGUO8 %}
Cross-platform terminal characters
Tags: terminal, cli, shell, unicode
Published: 2021-03-29 13:19:17

---
title: Cross-platform terminal characters
published: true
description: All the characters that work on any terminal and any operating system
tags: [terminal, cli, shell, unicode]
cover_image: https://raw.githubusercontent.com/ehmicky/design/main/cross-platform/cross-platform_white.png
---

While [ASCII characters](https://en.wikipedia.org/wiki/ASCII) display correctly on all terminals, this is not the case of all characters. When building a terminal application or tool, it is common to experience cross-platform issues like:

<img src="https://raw.githubusercontent.com/ehmicky/cross-platform-terminal-characters/main/invalid_terminal_characters.png" width="259"/>

The main reasons are:

- The terminal font might not include this specific character.
- The terminal encoding may not support [Unicode](https://en.wikipedia.org/wiki/Unicode). For example, [`cmd.exe`](https://en.wikipedia.org/wiki/Cmd.exe) on Windows often use specific encodings like [CP437](https://en.wikipedia.org/wiki/Code_page_437), [CP850](https://en.wikipedia.org/wiki/Code_page_850) or [Windows-1252](https://en.wikipedia.org/wiki/Windows-1252).
- The application might not be properly converting encodings when reading or writing terminal characters.

The first two points can be solved by using characters known to display correctly on most terminals and environments.

The following repository shows a full list of cross-platform terminal characters: https://github.com/ehmicky/cross-platform-terminal-characters

Those have been tested on:

- Ubuntu 20.10, Gnome terminal 3.38.0
- macOS 10.14, terminal.app 2.9
- Windows 10.0.17763, cmd.exe (CP850)
Backstage intro
Tags: backstage
Published: 2021-03-29 13:01:43

Originally published on [mccricardo.com](https://mccricardo.com/backstage-intro/).

We have multiple teams that have to, somehow, work together to achieve goals. Obviously, we have documentation, API specifications, monitoring systems, alerting systems, dashboards, CI/CD systems, logging systems, infrastructure, and so on. We keep jumping from system to system to find and correlate information. We need to find that API specification. We need to find those dashboards to check why our services are misbehaving. We need to check the build system to figure out why the build failed. New hires spend countless hours just getting to grips with everything. Our software ecosystem keeps growing and becoming more fragmented and complex. How awesome would it be if we had a way to provide a consistent experience that would tie all these tools, resources, standards, together in one place?

Born out of [Spotify](https://www.spotify.com/), [Backstage](https://backstage.io/) *"is an open platform for building developer portals"*. Their idea was to build a platform that would unify all your infrastructure tooling, services, and documentation creating a streamlined development environment from end to end. *"Armed"* with Backstage they can maintain standards and best practices across the organization, have a standardized way to build software, provide a central place to manage all projects and documentation, enable scalability and extensibility by allowing integration with new tools (via plugins) and much more.

After several interactions with the community at large as well as with some partners they [decided to open source it](https://engineering.atspotify.com/2020/03/17/what-the-heck-is-backstage-anyway/) and now we can benefit from it and contribute back to the community.

## Get the ball rolling

We'll be dipping our toes into Backstage and we have two ways to quickly do that: create a standalone app or clone the Backstage repository. Each has its purposes and we'll be creating a standalone app since we want to get Backstage up-and-running quickly and play with it.

### Requirements
  - [node.js](https://nodejs.org/en/download/)
  - [npx](https://www.npmjs.com/package/npx)
  - [Python](https://www.python.org/downloads/)
  - [yarn](https://classic.yarnpkg.com/en/docs/install#debian-stable)

### Create a Backstage app

```sh
npx @backstage/create-app
```

The **@backstage/create-app** package will be used to scaffold a standalone instance of Backstage. Go through a wizard to create your app (tip: select SQLite for now).

### Run Backstage

```sh
cd your-backstage-app
yarn dev
```

**yarn** will run both the frontend as well as the backend and it should launch a browser window displaying the app at [http://localhost:3000](http://localhost:3000).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6d8jit8hkpajxziq8q4.png)

And that's about it! Easy wasn't it? In a future post, we will be exploring several Backstage functionalities but for now, we can just play around a bit and get used to Backstage. Stay tuned!
Connect Google Meet Link with Personal Reserved Domain
Tags: tips, hacks, tricks, googlemeet
Published: 2021-03-29 12:55:38

One of the cool things I tried and implemented was to connect the Google Meet Link with my custom reserved domain name and made it look like my own custom meeting link.

**Prerequisites:**

* A Google Meeting link
* Personal/Reserved Domain
* Cloud Hosting/Server

**Steps:**
1. Generate a meeting link from Google Meet.
2. Get a domain from any Domain Name Providers. For the `.np` domain, you can register it freely from [Mercantile Communication](https://register.com.np/).
3. Get the cheapest cloud hosting plan.
4. Point the domain name to the IP of your cloud server in the name server.
5. Simply create a server block in your web server. In my case, I have used Nginx. The only thing you have to do is to redirect the request to your previously created Google Meet link.

**Sample of server block:**
```
server {
        listen 80;
        listen [::]:80;
        server_name <reserved_domain_name>;
        return 301 <google_meet_link>;
}
```

In my case, my custom Google Meet link is `meet.ashishakya.com.np`. It is easy to remember and I have been using it for my official meetings and work schedules.
Big Projects, Short Deadlines | Podcast
Tags: productivity, podcast, management
Published: 2021-03-29 12:40:43

{% spotify spotify:episode:4O9AXeSogQowhv7r6ginAp %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin. 

## What's This One About?

In this episode Matt and Mike discuss dealing with large projects with rapidly approaching deadlines. We all know that managing your time and tasks appropriately can really help alleviate stress and concern over large projects, however, all that management takes time - time you don't always have. Rapidly approaching deadlines can force your hand into just diving straight into a large project with minimal (if any) task/project management - which can put a lot of pressure on you and your team. The duo discuss how they deal with this stress and how they can even push that deadline back a bit without raising too much alarm from a client.

## Show Notes

1:35 - Introduction

2:50 - What happens when you have a project where you don't have time to manage it?

15:35 - The don't miss deadlines myth

20:35 - Do you ever push a deadline?

29:00 - If the project isn't managed, do you still delagate tasks to employees or contractors?

38:30 - The balance between customer feedback and your own judgment

44:23 - Do you try to buy yourself time on a project when you're running close to a deadline?


##Key Takeaways

* When starting a new project, start with creating the initial project structure as well as the initial template layout. This gives a good starting point compared to a blank page. 
* When faced with a large list of tasks, tackling the most difficult (pinnacle) tasks initially can help make sure they go smoothly. If there's immediate issues with those tasks you can reach out to clients early to let them know of potential delays. 
* Be clear with your customers about potential delays
* As the expert that was hired to do a web site or web application, sometimes you have to use your best judgement instead of relying on feedback from your client

##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)
How to Convert From One Image File Format to Another – PNG, JPG, TIFF, etc
Tags: howto, linux, ubuntu, convertimage
Published: 2021-08-02 11:00:23

---
title: How to Convert From One Image File Format to Another – PNG, JPG, TIFF, etc
published: true
date: 2021-03-29 12:40:41 UTC
tags: HowTo,Linux,Ubuntu,convertimage
canonical_url: https://fossnaija.com/convert-images-in-linux/?utm_source=rss&utm_medium=rss&utm_campaign=convert-images-in-linux
---

This video will help you to convert between various image file formats like JPG, PNG, GIF, etc. I would be using an application that is readily available on most Linux distribution, SHOTWELL, you’d not need to install any additional software.


{% youtube aFXhPyT-3Z0 %}

**Happy Linux’NG!**

The post [How to Convert From One Image File Format to Another – PNG, JPG, TIFF, etc](https://fossnaija.com/convert-images-in-linux/) appeared first on [Foss Naija](https://fossnaija.com).
DISCUSS: The Locomotive scroll — what do you guys think of it?
Tags: watercooler, discuss, webdev, javascript
Published: 2021-03-29 12:33:21

---
series: "Thalita's weekly discussions"
---

The locomotive scroll is always a bit of a hit-or-miss to designers. Some absolutely hate it due to questionable UX, but many agencies that have Awwwards SOTD sites use it (or something similar) so it's definitely widely loved as well. Others think that it depends on the site and whether it adds to the overall experience.

I don't hear this topic a lot among devs though, so I wonder what you guys think of it!

# What is the locomotive scroll?

[Github repo](https://github.com/locomotivemtl/locomotive-scroll)

Locomotive scroll is a smooth scrolling plugin made by the web agency (surprise surprise) [Locomotive](https://locomotive.ca/). All you have to do is add the plugin, initialise it, and add a tiny bit of HTML where you'd like the scrolling behaviour to be. It also includes parallax features using the "scroll speed" of your elements.

What it does is replacing the default scrolling behaviour of pages and replace it with a much more easened scroll. This generally gives scrolling through the page a more pleasing feeling.

Here are some examples of sites that use the locomotive scroll (or similar behaviour that looks like it):
- [The plugin's demo](https://locomotivemtl.github.io/locomotive-scroll/)
- [Locomotive's site](https://locomotive.ca/) (of course...)
- [Normal Studio](https://normal.studio/)
- [Thierry Chopain](https://thierrychopain.com)
- [Synchronized studio](https://synchronized.studio)

# ✍ Comment below answering the following question

**Do you find it mezmerising or are you one of those people who absolutely can't stand it?**

**Update**: Elaborated a bit on how Locomotive scroll works for those who aren't familiar with plugins like this one.

---

![Thalita logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa0hfs0886uf0g7c0b7e.png)

[Twitter](https://twitter.com/thalitadev) | [Website](https://thalita.dev)