teleren/devto huggingface dataset:
CSS Position: relative
Tags: css, codenewbie, webdev, html
Published: 2021-02-16 09:00:57

Initially, when I was learning CSS as a complete beginner I faced a lot with CSS position property. However, after learning and playing around I have learned how CSS position property works.
This post of especially for beginners who new to CSS and are confused with CSS position property.

### HTML element for Demo:
 ![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w04z0ysyipezu32dn3j.png)

### CSS code:
![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxvjbni5w6azfp0g71ss.png)

In the code, you can see that no CSS position property is set.
So, here is the layout of the above code:
 ![Screenshot from 2021-02-16 13-39-12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yv5imhk0rcmyn29wl6h.png)
 
## Position: relative;
Aughh.... tell me what the heck **Position: relative** is?
when you set CSS *position: relative* to HTML element the position is actually relative to itself. Still confused okay.

Let's set the child element to **property: relative;**
However, you will not see any changes to the child element position because by default it wouldn't until you set any of these property i.e ***top, left, right, or bottom***.
For example, let's just set the values for top and left.
***top: 50px;***
***left: 50px;***
![carbon (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg3gc8ep7wy30ruxyb1x.png)
![Screenshot from 2021-02-16 14-27-24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg3jzycrsq4b5fxgjyc1.png)
 
In the above image, you can see that position of the child block element has changed. 
As we have set ***left:50px***, what it really means is that the element will move ***50px*** in the left to right direction with respect to(from its) original position.
And we have also set ***top:50px***, element will shift ***50px*** in the top to bottom direction with respect to(from its) original position.

![carbon (4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h8m27tuf7fy5bdakw6j.png)
 
![Screenshot from 2021-02-16 14-22-51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8qbd4z3ibrfgvu1xzxy.png)
 For the above image we have set 
***bottom:50px;***
***right:50px;***

Okay now it's your turn to play around with ***bottom***,***right***,***top***,***left*** learn how element moves.
Position: relative; doesn't care about other elements it changes its position relative to its original position.
That's it!
RSpec: 3 things you should stop writing in example descriptions
Tags: rspec, testing, ruby
Published: 2021-02-16 08:56:41

1\. Useless, general phrases saying nothing about what method is actually doing:

```ruby
it "adds certain value"
it "returns correct result"
it "fails"
it "returns formatted string"
it "returns correct url"
it "is ok"
```

2\. Implementation details:
```ruby
it "changes @scheduled_on"
it "assigns @todos"
```

3\. Lies:
```ruby
it "returns time in 24-hour format" do
  expect(...).to eq "9:25"
end

it "strips leading zeroes" do
  expect(foo(" 9:25 ")).to eq "9:25"
end
```
How to use fancy font anywhere
Tags: showdev, webdev, productivity
Published: 2021-02-16 08:52:13

Hi,

I am back with the new tool on GoOnlineTools which you use to generate 𝖋𝖆𝖓𝖈𝖞 𝖋𝖔𝖓𝖙 :)

Today in this post I will introduce [𝖋𝖆𝖓𝖈𝖞 𝖋𝖔𝖓𝖙 𝖌𝖊𝖓𝖊𝖗𝖆𝖙𝖔𝖗](https://goonlinetools.com/fancy-font-generator/)

![Fancy font generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxu0fd74ytpjy6c9uq50.png)

## Features of 𝖋𝖆𝖓𝖈𝖞 𝖋𝖔𝖓𝖙 𝖌𝖊𝖓𝖊𝖗𝖆𝖙𝖔𝖗

- Generate 200+ Fancy Font
- Type text to generate a cool font
- Works without internet (Need app)
- Use fancy font anywhere (e.g - Dev.to posts)


## How to generate Fancy Font?

Follow the steps given below to generate fancy font instantly:

1. First open [𝖋𝖆𝖓𝖈𝖞 𝖋𝖔𝖓𝖙 𝖌𝖊𝖓𝖊𝖗𝖆𝖙𝖔𝖗](https://goonlinetools.com/fancy-font-generator/)
2. Type or paste text in the box that you want to generate
3. Scroll down to see all generated fancy font
4. Now, click on the copy button to copy fancy font and then use it wherever you want

If you think any feature added to this 𝖋𝖆𝖓𝖈𝖞 𝖋𝖔𝖓𝖙 𝖌𝖊𝖓𝖊𝖗𝖆𝖙𝖔𝖗 tool then please let me know. I am looking for developers feedback 😍

Update - our tools are now ad-free 🎉
Meet your heroes!
Tags: motivation, leadership, codenewbie
Published: 2021-02-11 19:12:57

Millions of times I’ve heard (and I'm sure you have too) “never meet your heroes”

And, like every time someone tells me not to do something, that is exactly what I do. 

Because you are too, if you’re in this world of code, a rebel of some sort. We like things our way, we like to code to shape things and we like to experience things other than being told, not to.

So back to heroes, I tried to reach out to some of the people that have become heroes to me while I was learning to code. People I would take as reference, people I’ve learned from and who have been to me a great example of who I wanted to become in the end. I wanted to meet them, not to be disappointed but to let them know they are my heroes. I tried to reach out to people who recorded live lectures that I’ve found helpful, live project builds that have been inspiring and that I’ve used as guidance to build my own projects. People who have designed cool stuff that I use.

That is a great thing to do and I don’t see myself stopping at any point. The world has enough heroes, we just need more people to let them know how great they are! To encourage them!

Be a hero to your hero, be brave to reach out to someone you don’t even know and let them know how much their work has influenced you, show appreciation! Close that circle and you’ll be amazed by how your heroes become your peers and many who where overestimated will drop their masks unveiling they where never real heroes.
Understand Linux with Man(ual) Pages
Tags: linux, beginners, rudderstack
Published: 2021-02-16 08:34:54

---
title: Understand Linux with Man(ual) Pages
published: true
description: If you needed to reference a program's features, you could use the `man` command. Let's see these in action.
tags: linux, beginners, rudderstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rdgs5bj6dt55nn1aoer0.jpg
---

## How to Seek Out `--help` and Man(ual) Pages

When using a new tool with lots of features, it's easy to forget which options do what, where to put arguments, etc. As far as the Linux command line is concerned, many of these tools have a `--help` option. If you needed to reference a program's features, you could use the `man` command. Let's see these in action.

I downloaded a [1985 documentary about Unix](https://archive.org/details/UNIX1985). I want to use the program `ffmpeg` to do some rudimentary editing. But I've forgotten where the options and arguments go! I run `ffmpeg --help` in a terminal. There's a lot of output, so I scrolled up.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1yx05ihqsya88msly8gw.png)
The line I highlighted is called the Usage Synopsis. Anything in between square brackets is optional. "A-ha," I say, "Source options first, then output options, then the output filename goes at the end."

I only want the countdown at the beginning of the video. I'm not exactly sure which option I use to do that, so I run `man ffmpeg` to open the ffmpeg man (short for "manual") page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7fmq1r5dzjyme0dhsrrs.png)
And I skim through this for a while (using the arrow keys, PgUp, and PgDn) until I find what I am looking for:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kthl0y4r2kj1i60gdsd.png)
Great, I will use the `-t` option with seven seconds to grab the first seven seconds of the video. I press 'q' to exit the pager, and away we go:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/31xzgq8i8cg5qdeo0eck.png)
Now we can all see the utility of `man` pages and `--help`. The documentation is right at your fingertips! Skim the man pages of all the tools you use that have them---Even the simple ones like `ls` and `mkdir`.
Day 40,41,42:100DaysOfCode
Tags: 100daysofcode, programming, productivity
Published: 2021-02-16 08:33:23

hectic week...

samsung prism test , codechef long and sem exams....hmm
so totally solved 5 full and 1 partial question on codechef

(ps: finally became a 4 star on codechef)
had a samsung prism test at college online solved a total of 2 questions out of 3..
one was rearrange array one contigous subarray ques and the last one was sum of valued subtree...
it was a great experience (total time to solve these ques were 70 mins)...

good weeek for cp nd dsa...
studied subset sum problem (now would be doing some ques related to it)

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
What would SQLite look like if written in Rust? — Part 0
Tags: database, computerscience, rust, softwaredevelopment
Published: 2021-02-16 08:28:47

Writing a [SQLite](https://www.sqlite.org/arch.html) clone from scratch in Rust

[Part 1 — Understanding SQLite and Setting up CLI Application and REPL](https://dev.to/joaoh82/what-would-sqlite-look-like-if-written-in-rust-part-1-2np4)

[Part 2 — SQL Statement and Meta Commands Parser + Error Handling](https://dev.to/joaoh82/what-would-sqlite-look-like-if-written-in-rust-part-2-4g66)

Let's get the obvious out of the way, why am I doing this? Do I want to develop the next great embedded DB of the 21st century? Not really.

> What I cannot create, I do not understand. — Richard Feynman

I am really doing it in order to understand better the works of it, and my goal is to document everything along the way. Wish me luck!

* So how does a database work?
* What format is data saved in? In our case, in memory and on disk.
* When does it mode from memory to disk? How would that work exactly?
* Why we only have one primary key per table? Do you know?
* How does rolling back a transaction work?
* How are indexes formatted? And how do they work?
* When and how does a full table scan happen? Does it happen every time we issue a query? Do the indexes help? How?
* What format is a prepared statement saved in?
* What extra features can we add to our DB, if any?

Well, these are some of the questions I aim to answer along the way. And for that I will be relying heavily on the SQLite Architecture Documentation ([https://www.sqlite.org/arch.html](https://www.sqlite.org/arch.html)) and also here ([https://www.sqlite.org/zipvfs/doc/trunk/www/howitworks.wiki](https://www.sqlite.org/zipvfs/doc/trunk/www/howitworks.wiki)).

![sqlite architecture (https://www.sqlite.org/arch.html)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krpdme8jplxtkbcnyk7q.png)

[View on Github (pull requests are welcome)](https://github.com/joaoh82/rust_sqlite)

And hey, I would be lying if I said I got the idea out of the blue, no I didn't. I got the inspiration from this other great developer called Connor, that basically did the same thing, but in C, right here ([https://cstack.github.io/db\_tutorial/](https://cstack.github.io/db_tutorial/)), if you wanna check it out!

If you wanna follow this track don't forget to follow me here on Dev.to and also give some love!

[Continue to Part 1 →](https://dev.to/joaoh82/what-would-sqlite-look-like-if-written-in-rust-part-1-2np4)

Cheers!
UI Dev Newsletter #44
Tags: webdev, html, css, javascript
Published: 2021-02-16 08:17:38

- [An Interactive Guide to CSS Transitions](https://bit.ly/2ZiTp8S)
Josh Comeau writes a tutorial about CSS transitions, and how to use them to create lush, polished animations.


- [More Accessible Skeletons](https://bit.ly/3b7hCoa)
Adrian Roselli describes how to make loading skeletons more accessible.


- [Managing focus in the shadow DOM](https://bit.ly/3jKzSYw)
Nolan Lawson figures out how focus works with Shadow DOM.


- [Placeholders in Form Fields Are Harmful](https://bit.ly/3piIC9l)
Katie Sherwin showcases many reasons why placeholders and floating labels should not be used as replacements for field labels.


- [aria-description: By Public Demand and to Thunderous Applause](https://bit.ly/2ZicsAq)
Steve Faulkner introduces a new aria attribute: aria-description.


- [Understand 3D in Javascript (ThreeJS) in 5 minutes](https://bit.ly/2Nux59y)
Mehdi Zed describes how to start with ThreeJS and understand the 3D model.


- [SmolCSS](https://bit.ly/3rNviva)
Minimal snippets for modern CSS layouts and components.


- [Web Vitals](https://bit.ly/3tRqc2W)
Essential metrics for a healthy site.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
A tool to convert SVG into React 17 / TypeScript components + Ion Icons
Tags: react, typescript, svg, node
Published: 2021-02-16 07:55:56

Since this interesting post [Making SVG icon libraries for React app](http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps), I've been converting SVG files into React components... manually. Now I've created a tool to automate the process, and it may be useful to you too.

Others have been also using SVG-React components, in particular for Icons:

* https://github.com/react-icons/react-icons
* https://primer.style/octicons/packages/react

The tool is here: https://github.com/cpmech/svg-to-react, and it is supposed to work for not only Icons.

Some key aspects that I've considered are:

* Generate React 17 components; those without "import React..."
* Generate TypeScript components that I can copy-n-paste into my projects
* Optimize and (try to) fix the path colors.
* Wrap the SVG into a CSS flex composition to make it easy to adjust the SVG size.

To accomplish these goals, I use:
* [svgo](https://github.com/svg/svgo) to optimize the SVG, a lot.
* [svgson](https://github.com/elrumordelaluz/svgson) to fix fill="currentColor" (optionally)

Usage:

```bash
✔ What is the "input" directory? · /tmp/svg-to-react/assets
✔ What is the "output" directory? · /tmp/svg-to-react/svgs
✔ What is the prefix for the components? · Svg
✔ What is the base url for XCollection.tsx? · 
✔ Add fill="currentColor" if missing? (Y/n) · true
✔ Delete existent output directory? ️⚠️  (y/N) · true
🚀 Processing SVG files
... processing SvgLogoGithub
... processing SvgLogoWhatsapp
... processing SvgSync
😀 DONE
```

The resulting code makes it easy to rescale and center the SVG file. The tool also generates an `XCollection.tsx` component to visualize all generated SVG.

For example, I've used to create React Icons (again ;-): https://github.com/cpmech/iricons

The generated React component looks like this:

```typescript
export interface SvgSyncProps {
  size?: string; // size of square container
  style?: React.CSSProperties; // not for height or width
}

export const SvgSync: React.FC<SvgSyncProps> = ({ size = '24px', style }) => {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
        height: size,
        width: size,
      }}
    >
      <div
        style={{
          position: 'relative',
          height: 0,
          width: '100%',
          padding: 0,
          paddingBottom: '100%',
        }}
      >
        <svg
          style={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            left: 0,
            top: 0,
          }}
          viewBox="0 0 512 512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="..." fill="currentColor"/>
        </svg>
      </div>
    </div>
  );
};
```

And can be directly imported into a React project.

I hope it helps 😀
How to start earning money by learning.
Published: 2021-02-16 07:55:11

#### (This is not a technical blog post).

### Post That I have posted on LinkedIn.
Making money before learning is the worst part of our life, whatever may be the situations in our life, the first thing is we need to learn something before doing anything.

Elon Musk: "First Learn and then remove 'L' in Learn."

Now I am learning to Design posters. Then what are you learning now present?

Comment it down below!
The 6 commandments of web scraping
Published: 2021-02-16 07:54:27

The 6 commandments of web scraping are:

Though shalt always use a framework.
Though shalt use CSS selectors or XPath for web scraping.
Though shalt build monitors that check for expected results in your crawler.
Though shalt imitate humans at every turn.
Though shalt use a rotating proxy service.
[Optional] Though shalt use these 4 external services to stabilize your web crawler.
4 Ways Machine Learning Helps Businesses Grow
Tags: ai, automation, machinelearning, business
Published: 2021-02-19 14:19:19

---
title: 4 Ways Machine Learning Helps Businesses Grow
published: true
date: 2021-02-16 04:52:25 UTC
tags: ArtificialIntelligence,Automation,MachineLearning,business
canonical_url: https://www.botreetechnologies.com/blog/5-ways-machine-learning-can-improve-your-business/
---

![machine learning to improve your business](https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/machine-learning-to-improve-your-business.png)

Automated machines are getting smarter day by day. Beginning with Artificial Intelligence (AI)—which looked impossible to achieve years ago—it has been incorporated into numerous uses and applications. Who knew the same machine could be taught how to diagnose medical conditions then process automated financial transactions? 

Artificial intelligence continues to grow primarily because of algorithms. These mathematical, step-by-step instructions allow [Artificial Intelligence experts](https://www.botreetechnologies.com/artificial-intelligence-solutions) to program machines and computers into specific functions.

One of the most significant and useful subsets of AI is Machine Learning (ML), which has taken over different industries from manufacturing to [healthcare](https://www.botreetechnologies.com/blog/machine-learning-in-healthcare). But did you know that Machine Learning is also helpful to businesses and entrepreneurs? 

###What Is Machine Learning?

Machine learning is a result of Artificial Intelligence development that allows machines to behave like humans and learn things without direct programming input as if the machine is learning on its own. 

The post [5 Ways Machine Learning (ML) Can Improve Your Business](https://www.botreetechnologies.com/blog/5-ways-machine-learning-can-improve-your-business/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
Dapper: SingleOrDefault
Tags: dapper, singleordefault, query, andreacarratta
Published: 2021-02-16 07:54:12

Dapper: SingleOrDefault

❓ Lo conosci, lo evito o lo usi? ⬇️

Tra le possibilita' offerte da Dapper abbiamo SingleOrDefault. 

Il nome richiama molto FirstOrDefault, ma sappiata che il comportamento e' (leggermente) diverso.

❓  In cosa sussiste il cambiamento? Troverai i dettagli nell'articolo sul mio blog. 

🔗 Articolo completo --> [Dapper: SingleOrDefault](https://blog.devandreacarratta.it/dapper-singleordefault/?utm_source=devto&utm_medium=coding-tips&utm_campaign=dapper&utm_content=dapper-singleordefault)

❓ Personalmente credo di averlo usato pochissime volte, voi?

Buona giornata
FreemiumStock.com – Digital Platform for Free Mockup Templates
Published: 2021-02-16 07:13:01


FreemiumStock website is a free digital resource platform which mainly focuses on mockup designs. All mockup are liberal to download, and it’s very easy to download with just a click. All PSD templates are free for private and commercial use. There are many free mockup design Templates are available in our site. You can use them for promotional designs in an efficient and unique manner.

All the Mockups are created with layered PSD template, designed with smart objects layer, that allow users to quickly drag and drop their own content or design into the mockup area. All mockup templates are designed and created in Photoshop.FreemiumStock owns all the mockups designs listed on website to download for free.
We attempt to cover most categories of mockup designs. What are the kinds of Mockups available in FreemiumStock.com?

Office Mockup
Show your branding logo with this realistic view of office interior backdrop. This office mockup template is ideal to replace with any sort of logo or text. Design can be easily replaced with a smart object layer.

Computer Screen
High quality set of free PSD display screen Mockup. Add your website screenshot or branding design with the smart layers.

Billboard Mockup
Showcase your branding images, banners or greeting messages on high quality realistic billboard place holders. All you want to do is, just replace the design on smart object.

Smartphone
Bundles of latest IOS or Android smartphone mockup to showcase your app and site designs. High resolution PSD templates.

LED Screen
Large office LED Screen display to professionally showcase your design or brand. All screens are placed in modern office interiors. High quality hand-crafted PSD files.

Freemiumstock expecting to launce more catogories like Vector Business Card Template, Flyer designs, Stock images, Plugins, Website themes and many more in future. 

We are planning to provide free tips on how to create their own templates with the reguired sources, for the Freemiumstock Newsletter Subscribers. Subscribe to our newsletter for more benefits. 

There are more than 200 free mockups are already listed on freemiumstock.com. Many more mockupe are waiting to upload in future. 

Download top quality PSD mockup templates at https://freemiumstock.com/ for free.
Introduce Autocomplete to JupyterLab with Kite
Tags: jupyter
Published: 2021-02-16 07:02:26

JupyterLab
https://jupyter.org/

## dev env
> macOS BigSur Version 11.2.1
python 3.8.3



## Install jupyterlab
```zsh
$ pip install jupyterlab
```


## Install Kite
https://www.kite.com/



## Install JupyterLab Kite and Jupyter extension
```zsh
$ pip install "jupyterlab-kite>=2.0.2"
$ jupyter labextension install "@kiteco/jupyterlab-kite"
```



## Run JupyterLab
```zsh
$ jupyter lab
```


If you get an error, you may need to update jupyter-server to the latest version, 2.2.0

```zsh
$ pip install jupyter-server
```