teleren/devto huggingface dataset:
Things you might not know about Windows Terminal
Tags: productivity, windows, terminal, cli
Published: 2021-12-20 13:08:06

With Microsoft announcing that Windows Terminal will be the [new default terminal](https://www.theverge.com/2021/12/15/22837218/microsoft-windows-terminal-default-windows-11-changes), I wanted to take the time to share some of the things you might not know about the new default.

## Launch anything

You can configure Windows Terminal with various profiles that let you launch into any program you want. 

Say you needed to remote into a machine super often. Setting up a profile with `ssh user@hostname` puts you right into that machine with a `Ctrl` + `Shift` + `<number>` keystroke. The same can be done for WSL containers or REPLs. I literally use my Node REPL profile daily for quickly transforming objects or making quick calculations. 


## Launch Anywhere

You can also set your starting directory so you can have shortcuts to open a new tab in any directory you choose. I use this to quickly get between my main projects.

## Launch as anyone

This is more of a hacky workaround for the PowerShell "Run as different user" option but as long as you have an SSH server running you can SSH into your own system as another user. Simply run `ssh [domain\]username@localhost` and you're able to log in (as admin)! If you find yourself doing this often, put it in a profile since it's no different to any other SSH command.

![The feature we are trying to emulate](https://content.spiceworksstatic.com/service.community/p/post_images/0000350437/5c93d00b/attached_image/Untitled.png)

*The feature we are trying to emulate*

## Have a terminal that looks like it's been updated since the 90s

Windows Terminal supports ligatures and [Nerd Fonts](https://www.nerdfonts.com/) so installing one of those opens the door to alternative prompts like [Oh My Posh](https://ohmyposh.dev) that gives you inline Git info, privilege level and so on. I have mentioned this before and go into greater detail on [another post](https://dev.to/jonosellier/4-must-have-tools-for-developing-on-windows-3eg8) but it's worth mentioning again because it's so good. 

### Bonus modernization features you should install anyways

- [Terminal Icons](https://github.com/devblackops/Terminal-Icons) makes your `ls` a bit prettier and more useful. 

- [Change Tab Completion](https://tech.ligthartnet.nl/powershell-tab-completion/) so you can see all arguments and options available to you. You can also bind `UpArrow` and `DownArrow` to `HistorySearchForward` and `HistorySearchBackward` in the same way to cycle the history of commands starting with what you typed.
Some HTML Tags
Tags: beginners, webdev, tutorial, programming
Published: 2021-12-20 13:20:31

Hi guys ! I wanted to show you a few html tags.

If you want to know you can read . 

Let's start!



```
Tags                               Use

(<HTML> </HTML>)	  The entire HTML document

(<HEAD></HEAD>)	          The head, or prologue, of the HTML document

(<BODY></BODY>)         All the other content in the HTML document

<TITLE></TITLE>	         The title of the document

<H1></H1>	         First-level heading large text size

<H2></H2>	         Second-level heading

<H3></H3>	         Third-level heading

<H4></H4>	         Fourth-level heading

<H5></H5>	         Fifth-level heading

<H6></H6>	         Sixth-level heading small text size

<P>(</P>)	         Paragraph Hitting a return in the HTML file will not make a new paragraph when the file is viewed. You need to use this tag to make a new paragraph.

<BR>	               Line Break This tag will show a blank line.

<HR>	                Horizontal Rule Creates a horizontal line on the page.

<!- . . . ->	        Comment The comments you write in the middle will not show up on the page when viewed.

<A href=> . . . </A>	Link (A=Anchor) links the current HTML file to another file. Example: <A HREF="menu.html">Go back to Main Menu</A> This will display the file which is named in the quotes. The name of the link, which is the colored words you actually see goes between the first > and the second <. Here, the name of the link is Go back to the Main Menu Another example is : <A HREF="http://www.ilt.columbia.edu/">ILTNet</A> This link will take you to another page on the Internet. You can see the Internet address in the quotes.

<DL>
<DT>
<DD>
</DL>
Definition list Put <DL> at the beginning, </DL> at the end, and <DT> for each :definition term" in the list. Use <DD> for each "definition" of each term. The definition will be indented.
<DL>
<DT>Item One
<DD>Item One Definition
</DL>
<IMG SRC="image.gif">	Inline Image Put the name of the graphic (.gif or .jpg) in the quotes.

<B> . . . </B>	Bold Makes text bold

<I> . . . </I>	Italic Makes text italic
<font size="+3"...</font>	Font Size This tag is used to change the size of the font. It is better than using the header tag to make the font appear bigger.


<table>
<TR>
<TD>
</TD>
</TR>
</Table>
"Table"=Starts a table.
"TR" (Table Row) = Starts a row.
"TD" (Table Data) = Starts a cell to enter data.
"/TD" = Puts an End to data entry.
"/TR" = Puts an end to a row.
"/table" = Ends Table.**

Kader ÖZEN 
Computer Engineer 

Have Fun.
As a freelance java code developer can I get clients where there are developers offering services at extremely low rates?
Tags: javascript, javacoder, javaprogramming
Published: 2021-12-20 13:08:33

One of the most common problems faced by several freelance java code developers is that on any freelance platform, or bidding, several developers charge quite low to offer the same services that you offer. And the worst part is that they are just as skilled as you are. For clients, your work is merely a commodity. So if they see that you are charging high, they move on to the next java code programmer. Even during the bidding, some developers may compete and go low to the minimum value. This leaves you with a project being delivered at price as low as 2 to 4 dollars. The time taken on that project is not as low though. 

This is more because the freelancing portals are global mostly, and in some countries, that amount is sufficient for lunch and at times, even more. 

To deal with such circumstances, one effective way is to change your pricing strategy. Instead of charging on an hourly basis, you might want to look for an alternative that is more beneficial for you as well as for the client. You can focus on value-based pricing for instance. Here, you will charge a fee based on the potential return for the business. Here, instead of hourly work, you sell potential solutions to the clients. The client will feel that this approach is safer as there won’t be any hidden costs like situations where the money for extra hours of work needs to be paid because the developer is taking longer to complete the project. 

Over here, you can charge a reasonable price on platforms like Eiliana, and the client will be willing to pay as they will be expecting quality from you. With a few good projects, you will now have the potential to create something great instead of worrying about time and going over the client's budget.
DashaHR and the HR Working Process 
Published: 2021-12-20 12:42:36

Employing and screening potential employees for firms is a tedious job. This job requires many hours of reading resumes and many phone calls to find the best candidates for in person interviews. 

With the huge amount of work load that piles up for human resource employees, staffing companies should find ways to cut down the manual work of their employees so that HR employees can focus more on analysis work or other important matters. 

This is when Dasha comes into the picture for our DashaHR solution. Using DashaHR, potential interview candidates are interacting with AI that has human-like voice and natural talking flow. The AI asks potential candidates questions about their skills and education. Based on the information, the AI can determine if the candidates are qualified for the next round of interview or not. Afterwards, the AI will set up in-person interviews with the qualified candidates. 

DashaHR was built using the conversational AI of Dasha. Thanks to Dasha, the conversations between humans and AI are very natural. We create intents, data, and entities to detect the leads as well as the patterns in humans' speech. The Dasha Script Language (DSL) also enables us to build dialogs and transitions in the conversations smoothly. 

The conversation is structured orderly with certain conditions being triggered in different nodes and detected by intents. The conversation is transitioned to different routes based on the intents of the humans. AI can sort if the humans meet the requirements to go a different route of conversation (setting up next round of interviews or not). 

We need to create different intentions and macros to train the AI. The most difficult part is to have a good source of phrases or intents to predict how the humans talk or discuss in conversation. 

During the development of DashaHR we encountered some challenges such as learning about  Dasha and how it functions for the first time. We had to go through different documentations to understand the flow and how to develop the conversation/logics. Finally, we were able to resolve all the errors that we encountered. We also learnt about Dasha and how well the conversation that Dasha provided. We were able to make the whole process work, creating the demo and video.

For future improvement of DashaHR, we would like to incorporate the process in automation process in which machine gets info of candidates automatically and then calls qualified candidates if their skills match the requirement of the job.
Explore CSS positions
Tags: html, css, beginners
Published: 2021-12-20 13:04:44

## Let’s talk about CSS position property. 
Before understanding anything, let’s know the default position of an element when it enters into a web page. 

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

That’s the default look of these children with their parents (same here) which is static. HTML code for it looks like: 

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

So, 1st child, 2nd child, 3rd child positions according to their HTML code. And this thing defines the “static” position.

Move forward to the “relative” position which is exactly the same as the “static” position. But we can move any element from 4 sides with the “relative” position.

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

We have changed the position of the 1st child with the “relative” position with 20px from the left. It means, the 1st child will occupy the position according to HTML code, but it will move itself 20px from the left. And, we get,

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

the 2nd, and 3rd child are in the same place/ position because none of the 4 attributes: top, left, right, bottom is used for them despite having position:relative. And for these 4 attributes, the element with the “relative” position moves itself over other elements and we have to set the same top/left/right/bottom attribute for getting the similar look like before which is so confusing. 

Now, have a look at it:

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

Can you say why the 1st child has become an inline element??
No, it’s not behaving like an inline element. Actually other elements are ignoring it’s position and rendering themself as usual. Isn’t it drastical? No, it’s very useful sometimes. When you want to make anything fixed on a web page in any position, you can use it. And this is done relative to its parent container’s position. If no position is set to its parent, then it will occupy the top position of the viewport. 


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

The code snippet:

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

So, you have to fix the position of the parent also.

With a fixed position, the element becomes fixed relative to the entire viewport. With scrolling, this element doesn’t leave its space and becomes visible over other elements. It differs from “absolute” in the sense that it is visible on screen with scrolling while “absolute” becomes invisible while scrolling. 

The position “sticky” is the combination of “relative” & “fixed”. Without scrolling, the element with “sticky” behaves like “relative”. With scrolling, it becomes fixed. Fixed on which position on screen depends upon the 4 attributes: top/left/bottom/right. 

Bingo!!! That's all for today.
What Actually Pseudo Element? Why Do We Need Pseudo element?

Tags: css, css3
Published: 2021-12-20 12:50:49

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

There are many CSS Pseudo Element, but today We are going to talk about ::before and ::after pseudo Element.

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input>). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn’t use it for actual content because it’s not very accessible in that you can’t even select and copy text inserted on the page this way —  it’s just decorative content.

`img {
  display: block; /* Avoid the space under the image caused by line height */
  position: relative;
  width: 100%
}`

In this article, I’ll walk you through seven different examples that showcase how ::before and ::after can be used to create interesting effects.

`img::before {
  background-color: hsl(0, 0%, 93.3%);
  border: 1px dashed hsl(0, 0%, 66.7%);
  /* ... */
}`


That’s because we set content to an empty string (which we need to display our generated content and styles) and cover the entire space, including the actual alt text. It’s there, we just can’t see it.

We can see it if we display the alt text in an alternate (get it?) way, this time with help form the ::after pseudo-element. The content property is actually capable of displaying the image’s alt attribute text using the attr() function:

```
` img::after {
  content: attr(alt);

  /* Some light styling */
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
} 
```
`
CSS TOPICS
Published: 2021-12-20 12:24:42

					CSS	 TOPICS			       			


**Animation CSS: **

> An open source online pre-made animation file. In our project sometimes we use some animation which makes our project more beautiful. Animation files are too small and we can use them very easily.  There are many animation libraries we can find online. There are many online sites but [https://animate.style] is one of the most common online sites for animation.
  

**Tailwind CSS: **

> Tailwind CSS is one of the most popular frameworks. Using this library we can easily handle our project. Bootstraps is also a popular CSS library framework and we have been using this library for several years but in 2017 Tailwind CSS first time release and in this short time we can see that there are many advance code already done for us and I hope this CSS library will be more popular in future. Using this framework we can easily design our project. 

**Media Queries: **

> Media queries are also very important to customize our design layout. Very easy to use and we can handle this very easily. Actually media queries are needed when we use the smallest resolution display monitor just like phones and tabs. Using media queries we can handle the whole project.
 

**CSS 3D Transforms: **

> This is also a powerful feature in CSS. Sometimes we use this in our project. Using this we can easily shifted, slanted, and rotate our small project design. Also we can design 3D transforms and add a new dimension to traditional websites.

**Box Model: **

> We use it to design our website layout page. There are four parts. When we use this in our browser we can easily control our layout design to fixed content, padding, border and margin. This is very essential to customize our design.


**Scroll Snapping: **

> This is also one of the advanced CSS techniques. Using this developer control scroll experiences. Normally we use this to page or photo scroll. This scroll-snap-type decides scrolling x or y. 
> Gradients:
 

**Gradients: **

> We use it to create smooth transitions between color without having to resort to images. This is a little tool to make our design page more colorful. We can find many gradient color codes online. It is determined by an angle or direction. It is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points. One is the starting and the other is the ending point.

**Z-Index: **

> A CSS property that defines the order of overlapping Html elements. Elements with a higher index will be placed on top of elements with a lower index.
Set up TailWind CSS in SvelteKit project
Tags: svelte, tailwindcss, sveltekit
Published: 2021-12-20 12:09:18

Rapidly build modern websites using TailWind CSS inside your SvelteKit projects.

**Set up a new SvelteKit project and install Tailwind and AutoPrefixer**

```cli
mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer
```

---


**Create a postcss.config.cjs file in the root directory of your project**

SvelteKit is bundled by Vite which comes with postcss support out of the box.

```javascript
module.exports = {
    plugins: {
        autoprefixer: {},
        tailwindcss: {},
    },
}
```

---


**TailWind Config**

Create a `tailwind.config.cjs` in the root of your project. You can also run `npx tailwind init`, but be sure to rename the extension to `.cjs`

```javascript
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.svelte'],
}
```

---


**Create and import the CSS**

Add these tags somewhere in your CSS that PostCSS knows where to insert the tailwind styles. A good place to import these is within `__layout.svelte` inside our style tag.

```css
<style>
    ...
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>
```

That's it! You can now use TailWind CSS classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
Vialgo - A Web App For Writing And Visualizing Algorithms.
Tags: algorithms, showdev, tooling
Published: 2021-12-20 12:21:30

An intuitive graphical frontend that presents the algorithm ongoing progress has the potential to significantly enhance the user experience.
Therefore, I have decided to start developing **Vialgo - A Web App For Writing And Visualizing Algorithms.**

[Github Repo](https://github.com/aldober/vialgo)

Feedback and comments are cordially invited:pencil2:.
My Experience
Published: 2021-12-20 12:21:03

Currency trading was very difficult for individual investors prior to the Internet. Most currency traders were large multinational corporations, hedge funds, or high-net-worth individuals because forex trading required a lot of capital. With help from the Internet, a retail market aimed at individual traders has emerged, providing easy access to the foreign exchange markets through either the banks themselves or brokers making a secondary market. Most online brokers or dealers offer very high leverage to individual traders who can control a large trade with a small account balance.
 
Learning to trade forex is an easy and quite doable task that everyone can handle. There is a blog for beginners on the company’s website [**LiteFinance**](https://www.liteforex.com/ms/blog/for-beginners/ulasan-litecoin/)
Unconditionally with sufficient knowledge, dedication and willingness to learn, you can achieve incredible results.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zlto3bhleq3fuxc163e.jpg)
Integrating Jest with latest angular version
Tags: angular, testing, jest
Published: 2021-12-20 12:01:06

As jest is increasingly gaining traction in unit testing angular components lets see how to integrate it with latest angular versions (12+)

- uninstall jasmine & karma using `npm uninstall -D @types/jasmine jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter ts-node`

- install jest using `npm i -D @types/jest jest jest-preset-angular @angular-builders/jest`

- create file `setupJest.ts` in root and add below content
```typescript
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'jest-preset-angular';
import 'zone.js';
import 'zone.js/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  {
    teardown: { destroyAfterEach: true },
  }
);

Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  }
});

```
- If you are migrating from lower angular version using `ng upgrade` then except above piece of code if you are using any other piece of code in `src/test.ts` file then add that new content to `setupJest.ts` and delete `src/test.ts`

- create file `jest.config.js` in root and add below content
```javascript
module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  collectCoverage: true,
  coverageReporters: ['html', 'lcov', 'json', 'text'],
  coverageDirectory: '<rootDir>/coverage',
  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
};
```
- replace `test` part of `angular.json` with below content
```json
...
"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "main": ["setupJest.ts"],
    "tsConfig": "src/tsconfig.spec.json",
    "no-cache": true
  }
}
...
```
- add ` "esModuleInterop": true` to `compilerOptions` in `tsconfig.json`
- open `tsconfig.spec.json` and replace `jasmine` with `jest` in `types` field

That's it jest is now comlpetely integrated with latest angular :clap: :boom:

Thanks for reading :thumbsup: and post any issue if you faced while doing so in comments below :point_down:

You can find the example repo [here](https://github.com/KiranMantha/jest-with-latest-angular)