teleren/devto huggingface dataset:
Let's Learn About SASS
Tags: webdev, beginners, tutorial, css
Published: 2022-04-01 08:48:31

#sass:
SASS is a pre-processor of CSS. The code is most beautiful and optimized when using it. SASS is written without curly brackets [{}], SCSS is written with curly brackets [{}].

## Mainly SASS can be installed in two ways.
- LIVE SASS COMPILER.
- node package modules (NPM).

If you do it with the best NPM and with COMPILER, it will not issue browser support.

## Now let's see how to install SASS?

### first Method:
First come the compiler, now the code editor VS Code is very popular for coding. Go to its extension and install LIVE SASS COMPILER. Then create a file, create html and SASS file and turn on LIVE SASS COMPILER.

### The second method is:
With Node Package Module (NPM):
First you have to go to the terminal and select the correct file.
You have to give the command

```

> npm init - Enter
> npm install / i sass -D (developer) Enter
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"Format":"expanded",
or
"format":"compressed",
"extensionName": ".css",
"savePath":"/sass"
}
],
```

Go to the format option [compressed]> convert the code into a small file / [expanded]> the code will show the output exactly as it is written.
Once installed, go to the Jason file and type in the crypt option ("...")

Another is to extract the SASS file from the settings and set them there.

```
"scripts": {
"compile-sass": "sass style.scss style.css -style compiler --watch --no-source-map"
},
```
When you go to see the code manually you have to give the command in the terminal, when the code changes you have to give the command every time to see which is very paramatman. A nice solution is to turn on the WATCH option. For that, the crypt file first has SASS which refers to the main topic then there is the name of the compiler (you can name it as you like)> then when the code is compiled its place> there is code to indicate that it will not be compressed or expanded> atchwatch which makes the code live> No source map commands.

```
(--watch)
```

## If you want to SASS beautifully, you have to learn these:
1. Variable
2. Operators
3. Extension / Inheritance
4. Rules
5. Value
6. Modules
7. Nesting
8. Mixin
9. Much more

##Wrapping Up
I hope you enjoyed the article, if yes then don't forget to press ❤️ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.😊👇
[G i t h u b](https://github.com/Mohammad-Asif-Web)
[P o r t f o l i o](https://muhammadasif10.blogspot.com/)
[L i n k e d i n](https://www.linkedin.com/in/mohammadasif10/)

##Support

[Buy me a Coffee](https://www.buymeacoffee.com/muhammadasif10)
Creating a new project in Python Django
Tags: django, beginners, webdev, python
Published: 2022-04-01 08:25:01

First, we need a dedicated directory on our computer to store the code. This can live anywhere but for convenience, if you are on a Mac, we can place it in the Desktop folder. The location really does not matter; it just needs to be easily accessible.
$ cd ~/Desktop
$ mkdir code && cd code
This code folder will be the location for all the code in this project.
The next step is to create a
dedicated directory for our library site, install Django via Pipenv, and then enter the virtual environment using the shell command. You should always use a dedicated virtual environment for every new Python project as shown below.
$ mkdir library && cd library
$ pipenv install django~=3.1.0
$ pipenv shell
(library) $
Pipenv creates a Pipfile and a Pipfile.lock within our current directory. The (library) in parentheses before the command line shows that our virtual environment is active.
A traditional Django website consists of a single project and one (or more) apps representing
discrete functionality. Let’s create a new project with the startproject command. Don’t forget to include the period . at the end which installs the code in our current directory. If you do not include the period, Django will create an additional directory by default.
From the command line .
(library) $ django-admin startproject config .
Django automatically generates a new project for us which we can see with the tree command.
Our Python project has different files. And here are their meanings and functions.
• __init__.py is a Python way to treat a directory as a package; it is empty
• asgi.py stands for Asynchronous Server Gateway Interface and is a new option in Django 3.0+
• settings.py contains all the configuration for our project
• urls.py controls the top-level URL routes
• wsgi.py stands for Web Server Gateway Interface and helps Django serve the eventual web pages
• manage.py executes various Django commands such as running the local web server or creating a new app.
Run migrate to sync the database with Django’s default settings and start up the local Django web server
To run migrate, we runt the following command from our terminal;
Python manage.py run migration
Python manage.py migrate

To check our new website from the browser, we run 
python manage.py runserver to start our server.

Open a web browser to http://127.0.0.1:8000 to confirm our project is successfully installed.
DevTips Daily Update 01/04/22
Tags: javascript, tutorial, beginners
Published: 2022-04-01 08:14:34

So we're getting towards the end of our end-to-end project where we're creating a 'Rick Rolling' app.

We did some cool stuff though this week, including some date formatting with DayJS, buying a new 'short' domain to use in our app and also a bit of nginx configuration to point our new domain to our existing app!


[DevTips Daily - Rick and Roll Project - Adding a short domain name](https://youtu.be/GR5uzt41HoQ)
{% youtube GR5uzt41HoQ %}

[DevTips Daily - Rick and Roll Project - Configuring the short domain for production](https://youtu.be/jJqgXsO3IBI)
{% youtube jJqgXsO3IBI %}

[DevTips Daily - Rick and Roll Project - Adding a redirect route in Express](https://youtu.be/A7kRfmIULeY)
{% youtube A7kRfmIULeY %}

[DevTips Daily - Rick and Roll Project - Creating a short URL input](https://youtu.be/h4MKnWl0-oc)
{% youtube h4MKnWl0-oc %}

[DevTips Daily - Rick and Roll Project - Redirecting users in the browser](https://youtu.be/VzTDdC8v8lE)
{% youtube VzTDdC8v8lE %}

[DevTips Daily - Rick and Roll Project - Adding instructions and documentation to the app](https://youtu.be/CyRQvYl-in4)
{% youtube CyRQvYl-in4 %}

[DevTips Daily - Rick and Roll Project - Creating and adding a favicon](https://youtu.be/8Ql86_3WP40)
{% youtube 8Ql86_3WP40 %}

Next week, we’re going to be finishing off our app completely! There’s just a bit of work to do on tidying up styling and adding some mobile responsiveness!

Thanks for watching 👍
10 Library Genesis Alternatives
Tags: books, todayisearched
Published: 2022-04-01 08:07:53

As much as I love going to the library to pick up physical books to read, having a PDF to annotate and markup with notes is always handy. 

Here's a list of websites you can get PDFs of books for free:
1. [zLibrary](https://u1lib.org/) *
2. [Free-Ebooks.net](https://www.free-ebooks.net/)
3. [Internet Archive](https://archive.org/details/books) *
4. [PDF Drive](https://www.pdfdrive.com/)
5. [Free Kindle Books](https://www.amazon.com/b?ie=UTF8&node=20102661011)
6. [PDF Search Engine](https://www.pdfsearchengine.net/)
7. [Read Print](https://ppld.org/recommended-websites/read-print)
8. [DigiLibraries](https://digilibraries.com/)
9. [Project Gutenberg](https://www.gutenberg.org/)
10. [Bookboon](https://bookboon.com/)

* These are the ones I personally use
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-04-01 08:00:15

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

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

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

---

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

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

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

<!--
Joke text:
___Q:___ What did the Class say in court when put on trial?

___A:___ I strongly object!
 -->
Developers Ethics
Tags: codenewbie, discuss, career, devjournal
Published: 2022-04-01 07:35:02

We as developers are central to keep our world functioning. As developers, our core responsibility is to manage our ethics. It's our job to develop and maintain the digital side of our current world.

We can learn from Facebook and steal customers information, sell them, and get money, you'll probably get rich doing that very thing, but it's not right.

No-matter your gender, personal beliefs or anything, I believe we can agree on one thing, doing the right thing, and we as developers have many decision to make. I hope you make the right ones.

Let's not get too serious, let's talk about it! So here are some ways you can help our dev community:

- Make a free tool

- Donate to an open source project

- Support an open source project

If you think I missed something, please comment below, I promise I will try my best to read all comments!
Learn how you can effectively build your wealth using tech in 2 hours!!
Tags: productivity, techtalks, tutorial, opensource
Published: 2022-04-01 07:31:12


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecmkpk4nels9rl3c9n6b.png)](https://www.hackforchange.co.in/events/learn-to-build-you-wealth)

**Description**
Financial knowledge has become a necessity today. It is evident how learning about investment and stocks can get your financial planning on the right track instead of doing it without good knowledge or not doing it at all.

The investment and planning for finance has to start from an early age as the compounding effect is immense in this case. Hence we, along with our speaker for the event for April month, Ritvik Dashora, are bringing to you a webinar and a workshop combined together to learn about Finance.

The first half is planned to give a basic understanding of Investments and stocks. Then we will explore how the finance industry has evolved with time through understanding complicated financial products like Options.

The second half is planned for hands-on experience. You may write a Python code along with the speaker, in which he will do Monte Carlo Simulation to do Options Valuation and learn how you can make a basic financial model that captures some Options trade in the real world.

**About the Speaker**
**[Ritvik Dashora ](https://www.linkedin.com/in/ritvikdashora/)**is an engineer with a Master's in Advanced Finance and a major in **Fintech** from IE Business School, Spain. He currently works for an Indian wealth tech startup, Dezerv, as a quantitative investing expert.

He is a financial programmer and a fintech enthusiast with more than 4 years of experience in the field. He has completed all the levels of CFA. Ritvik also has a YouTube channel named **[Financial Programming with Ritvik ](https://www.youtube.com/c/FinancialProgrammingwithRitvik)**with 8k subscribers.

**[Signup](https://www.hackforchange.co.in/events/learn-to-build-you-wealth)**
Full Laravel Restaurant Reservation Website | Laravel 9 Tutorial
Tags: laravel, tutorial, beginners, programming
Published: 2022-04-01 07:28:35

{% embed https://www.youtube.com/watch?v=8KaBeq9JzrQ %}
Hello, friends in this video we are going to make full Laravel restaurant reservation website.
Restaurant reservation website.
Laravel project.
Laravel 9 tutorial.
Full laravel tutorial.

Support me: 
https://www.patreon.com/Laraveller
https://paypal.me/TonyXhepa

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Setup VS CODE for Laravel: https://youtu.be/EliywWn4IK4
Setup Mac for development: https://youtu.be/yxuR5myrVi4

Playlists:
Laravel Restaurant Reservation: https://bit.ly/3Jc5IcG
Spatie Laravel Permission: https://bit.ly/3pOsOhN
Laravel Testing For Beginners: https://bit.ly/3t1gNq4
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
CPE Online Compiler.
Tags: javascript, webdev, react, node
Published: 2022-04-01 07:25:53

CPE is an open source online code compiler for C, C++, Python, Java.

### built using Nodejs child process 

https://github.com/nisabmohd/cpe-online-compiler


### Functionality
- Error shown at which line
- Output formatted
- Comments
- Syntax Highlight
- Dark / light mode
- Auto indent
- Execution time


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwyc5dl257sbn5e965ju.png)
Add Powerline glyphs to IBM Plex fonts
Published: 2022-04-01 07:25:28

[IBM Plex](https://www.ibm.com/plex/) is an interesting font that I'm looking forward to, and I would like to try it out. However, you may be in similar setup as I am, which relays on [Powerline](https://github.com/powerline/powerline) glyphs in order to display vim/statusline/prompt correctly.

![Terminal prompt with missing glyphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1adeig27xvee9kh9s3d.png)

This walkthrough was performed on macOS and has patched IBM Plex OpenType fonts, but you should be able to patch your own fonts (any fonts) on any OS, as long as you have Python installed.

1. Download IBM Plex:
   https://github.com/IBM/plex/releases

2. Install fontforge:
   `brew install fontforge`

3. Clone the font patch script from [sgolovine](https://github.com/sgolovine/nerdfont-patcher) on GitHub:
   `git clone https://github.com/sgolovine/nerdfont-patcher`

4. Navigate to the directory:
   `cd nerdfont-patcher`

5. Add Powerline glyphs to IBM Plex font:
   `fontforge -script font-patcher --powerline ../OpenType/IBM-Plex-Mono/IBMPlexMono-Regular.otf`
   (You may need to change the _path-to-file_, more info please refer to the [README of nerdfont-patcher](https://github.com/sgolovine/nerdfont-patcher))

![Terminal prompt with Powerline glyphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hl7y1yxldma5yo8r8zx.png)
Bootstrap a website.
Tags: frontend, webdev, programming, css
Published: 2022-04-01 07:23:34

**Bootstrap** the most popular front-end library of responsive components.

just go to [bootstrap](https://getbootstrap.com).
you can install bootstrap from the following ways.

## Using CDN (Content delivery network)
- Copy this in head of your html `<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">` and `<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>` this after body tag.


## Using NPM
- Get all CSS, SCSS, JS written by bootstrap through npm package use it as you want.
- import CSS `import "bootstrap/dist/css/bootstrap.min.css"`
- import JS `import "bootstrap/dist/js/bootstrap.min.js"`


_note JavaScript shown here is bundled so if you want to use components like modals and popovers read this [doc](https://getbootstrap.com/docs/5.1/getting-started/javascript)_

now after successfully linking Bootstrap's CSS and JS.

add [components](https://getbootstrap.com/docs/5.1/components)
and create a multi million dollar app 😁.
_Best of Luck_ 👍
Vận Tải Bắc Nam Siêu Tốc
Published: 2022-04-01 07:15:28

Công ty vận tải bắc nam Siêu Tốc là 1 trong số ít những công ty vận chuyển hàng hóa bắc nam giá rẻ Uy Tín - Trách Nhiệm - Có chính sách đảm bảo hàng hóa an toàn.

Địa chỉ:

Kho bãi Hồ Chí Minh: 1 Đường Bạch Đằng, Phường 15, Quận Bình Thạnh, TPHCM

Kho bãi Hà Nội: 7 Lộc Vừng, Yên Hoà, Cầu Giấy, Hà Nội

Hotline: 0799646668

Email: vantaibacnamsieutoc@gmail.com

Website: [](https://vantaibacnamsieutoc.com/)

Tham khảo bảng báo giá vận chuyển hàng hóa bắc nam 2022 tại:

[](https://vantaibacnamsieutoc.com/bang-gia-van-chuyen-hang-hoa-bac-nam
)
Kết nối với chúng tôi qua các mạng xã hội:

[](https://www.facebook.com/profile.php?id=100079472463837
)
[](https://www.blogger.com/profile/10073507564765470671
)
[](https://www.instapaper.com/p/vantaibacnamst
)
[](https://www.instagram.com/vantaibacnamsieutoc/
)
[](https://www.pinterest.com/vantaibacnamsieutoc/
)
[](https://twitter.com/vantaibacnamst
)
[](https://www.behance.net/vantaibsieutoc
)
[](https://www.provenexpert.com/vantaibacnamsieutoc/
)
[](https://telegra.ph/Cong-ty-van-tai-bac-nam-Sieu-Toc-03-11
)
[](https://vantaibacnamsieutoc.gitbook.io/cong-ty-van-tai-bac-nam-sieu-toc/
)
[](http://vantaibacnamsieutoc.e-monsite.com/
)
[](https://www.linkedin.com/in/vantaibacnam-sieutoc-414926234/
)
[](https://www.behance.net/vantaibsieutoc
)
[](https://profiles.wordpress.org/vantaibacnamsieutoc/
)
[](https://vimeo.com/vantaibacnamsieutoc
)
[](https://issuu.com/vantaibacnamsieutoc?issuu_product=header&issuu_context=link&issuu_cta=profile
)
[](https://www.slideshare.net/vantaibacnamsieutoc)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q690041bzcs3m38ihtsy.png)
Python Interpreter
Tags: python
Published: 2022-04-01 06:58:57

An interpreter is a sort of program that executes other programs. When you scratch Python programs, it converts source law written by the designer into intermediate language which is again restated into the native language/ machine language that's implemented. 

From the distinctive editor or IDLE the [Python](https://www.insideaiml.com/blog/Is-Python-an-Interpreted-Language%3F-1177) Code is written also its transfer to Interpreter and there Byte code is generated after the accomplishment of the code and it inquires for any type of inputs if needed. After taking input it runs the code and gives output to their different editors.
What is VPN? How it works and why you should use it.
Tags: vpn, ips, webdev
Published: 2022-04-01 06:34:45

What is VPN? How it works and why you should use it.

I have been the victim of not using it in past, do you want to make the same mistake?

VPN stands for Virtual Private Network.

You might have heard this term so many times, but what is VPN?

How does it work? and what is it used for?

A VPN provides privacy to your online activity, by encrypting your data by stopping exposing your private searches, passwords, and other sensitive information to others.

VPN also enables its users to pretend that they are in another country, which means users can access region-restricted websites or applications.

A VPN’s purpose is to provide a secure and reliable private connection between computer networks over public networks.

You can read full article here [https://blog.canopas.com/what-is-vpn-how-it-works-and-and-why-you-should-use-it-b8c167218c2d](https://blog.canopas.com/what-is-vpn-how-it-works-and-and-why-you-should-use-it-b8c167218c2d)
Compute Services or Functions for Hosting. 🖥⏳
Tags: webdev, hosting, web, cloud
Published: 2022-04-01 06:29:11

You may heard of many cloud services like - **AWS**, **Google Cloud**, **Digital Ocean**, **Heroku**. But today if you want to host a website there are two main options left.

- **App / Server less Compute**

In this option you store your web app as a function, function then can be host any other server, number of server will be increased as demand grows, so there is no server error, fast loading.
web services for server less compute are 

---

#### Google Cloud Functions / Firebase Hosting, AWS App Runner

- These services provide server less compute, so that you can **focus on your code without tensions of server uptime**.
- If you're familiar with **docker** and concept of **containerization**, it's just the same thing that goes with your app.
- Cloud Services offers **generous pricing**, such that you have to pay only the price, the compute power you have used.
- These services generally comes with a lot of security like SSL.

---

- **Virtual Machine Compute**
 - Create a **instance** of a machine with some OS like ubuntu in it with specific amount of **ram**, **storage**, **CPU** and other resources given to a machine.
 - It's a simple computer somewhere in there data center, which is assigned to you.
 - It can't **scales** with demand, **no security** provided.
 - Advantage, **price is fixed**.

Cloud services providing this type of service are.
 
---

#### Google Compute, Amazon EC2, Digital Ocean Droplet

- most famous amazon EC2 instances, can be used for some computation demanding task, like solving a **sudoku**, **editing** or resizing **photos**, **sending mails** or notification at regular time **interval**.
- you can use this compute instances, other than web hosting, APIs. used for analyzing data, logs and many more thing, rendering videos, training machine learning models.

At last you can consider a difference between server less compute and a compute service is similar to **Containerization** and **Virtualization**.

_This is not sponsored by anyone._
How to write css that looks same in all browsers?
Tags: question, css, webdev, beginners
Published: 2022-04-01 06:16:32

Hello! Two month back me and my friend had created front-end of our project, which looked similiarly in browsers -> chrome, firefox, edge in laptop. After a month, we observed changes in alignment of cards, size of forms, buttons on chrome and firefox eventhough we haven't changed any of the code. 
Can anyone say what might have caused this? 
How professional web dev's write code to avoid such problems?
only title
Published: 2022-04-01 06:13:22

<img src="https://raw.githubusercontent.com/aru31/test-blog-publish/master/media/google.png" alt="another tag" />entirely since you will need to delete files/folders from your system. But it is generally a good idea to move the files/folders you want to delete to a recycle bin and then delete them after some time. I will also share the script and modification I used to adopt this setup.
<img src="https://raw.githubusercontent.com/aru31/test-blog-publish/master/media/download.png" alt="another tag" />entirely since you will need to delete files/folders from your system. But it is generally a good idea to move the files/folders you want to delete to a recycle bin and then delete them after some time. I will also share the script and modification I used to adopt this setup.