DEV Community: Pushpak Chhajed

Change Cursor Colour in VS code 🤯

Pushpak Chhajed — Thu, 17 Sep 2020 02:59:45 +0000

I’ve been using VSCode for almost 2 years now and I like it so much. I’m sure that you like it too. But I decided that it was time to customize it a bit more. I will show you how to change cursor colour in VScode.

VSCode is an electron application. So you can change the CSS and JS way you want in VSCode for that you need one extension called "Custom CSS and JS Loader".

After installing the extension follow these steps to change the colour of the cursor.
1) Add this settings into settings.json.



"editor.cursorWidth": 3,
"vscode_custom_css.imports":[""],
"vscode_custom_css.policy": true,

2)Create one CSS file into your machine and add the following property to that CSS file.

Feel free to choose any gradient colour you want from uiGraients and paste into the '.monaco-editor .cursors-layer .cursor ' selector.



.monaco-editor .cursors-layer .cursor {
  background: #12c2e9; 
  background: -webkit-linear-gradient(
    to top,
    #f64f59,
    #c471ed,
    #12c2e9
  ); 
  background: linear-gradient(
    to top,
    #f64f59,
    #c471ed,
    #12c2e9
  ); 
}

3)Change the file location for 'vscode_custom_css.imports' in the settings.json



  "editor.cursorWidth": 3,
  "vscode_custom_css.imports": ["file:///home/pushpak1300/Documents/vscode.css"],
  "vscode_custom_css.policy": true,

4)Type 'CMD +SHIFT +P' to toggle command palette and type 'Reload Custom CSS and JS' to apply settings.

5)Hooray!

If all goes well, you should have the gradient cursor in vs code.

If u have any questions please let me know in comments.

Honourable Mentions

Don't forget to check out this course if you want more cool feature.

Vscode 4.5 hours course for JavaScript, Python & PHP

𝒮𝒶𝓇𝓉𝒽𝒶𝓀 📨 ・ Sep 15 '20

#vscode #php #javascript #python

Thank You!

Redesign my portfolio! It loads very fast ⚡

Pushpak Chhajed — Sat, 16 May 2020 01:46:27 +0000

Hi, everyone!

This is my second attempt for writing a blog.

So I learned web development around 2 years ago. I decided to build my portfolio using Bootstrap4. my old portfolio used to load in 3.5 seconds and had a performance score of 69. most of the content on the previous portfolio was static means I have to change HTML to change my project listing. so I decided to rebuild (and redesign) my portfolio site using AlpineJs and Bootstrap4

After 5 days of working non-stop, I've finally migrated my site over to AlpineJs! You may notice the site is a little faster:

Why AlpineJS ?

Starting with AlpineJS

Thomas Toledo-Pierre ・ Jan 3 '20

#javascript #alpinejs #gulp #webdev

You are right: why would you bother learning, AGAIN, a new tool while there are so many others, with such huge communities around them?
Well here are a few pros:

you get to follow the evolution of a library from the beginning, and, why not, contribute,
while React, Vue is acclaimed by a lot of developers, AlpineJS presents a much lighter way of doing front-end Web, much closer to the basics than today's framework.
I have a data source as a JSON file so loading data from JSON and parsing in HTML is easy in Alpine. (NO MORE STATIC CONTENT 🎉)

How I optimize speed

Eliminating render-blocking resources( using async and defer)

<link rel="stylesheet" href="build/all.css" media='all' />

<script src="build/app.js" defer></script>

Used Purge to remove unused css.
Using CDN to serve static content with good cache policy
I used netifly CDN to serve static content.
Used webp images for better compression ratio
Used module bundler(Webpack) to minify and bundle files

Here is the link to my portfolio.

Here is the link to Source Code github.

I'm also planning to add dark mode on site.🌙

would love to receive some feedback on my portfolio site🍍

Did I miss anything? Let me know in the comments :)

Thank You!

Deploying Laravel8 app on shared-hosting (Hostinger)🌎

Pushpak Chhajed — Thu, 30 Apr 2020 06:07:55 +0000

Hi, everyone!

In this article, I’ll try to explain how you can deploy your laravel application on shared hosting.
I’ll use hostinger.com.

It is well discouraged to use shared hosting for your Laravel 8 app. There are other very cheap web hosting starting from $5 per month.

But some clients (- very low budget clients ) or circumstance (for instance, you want to have something tested and move on) might call for you to use shared hosting.

I will cover the following here:

How to deploy your app to shared hosting (Hostinger).

Step 1) Go to Add website section under Domain's section on panel(Hostinger Control Panel) and add your domain.

Step 2) Click Manage on the domain which you want to use.

Step 3) Now you have to upload all source code of an application to Hostinger using SFTP, SSH access or Hostinger File Manager in the respective domain directory.

I assume you've finished building your app – at least a functional app that is working on your localhost.

Let's say your laravel project is named laravel with the following folder structure:

Using Hostinger File Manager: compress the entire project folder on your local machine. You'll get a zip file – laravel.zip and upload it on the root directory of your project and extract files in laravel folder.
Using SSH: You can download the project using git in the root directory of your project using ssh client like putty.
Using SFTP: You can upload project files on the respective file directory using FileZilla.

after that, your file structure should look like this.

Step 4) Open the laravel folder and MOVE the CONTENTS of the 'public' folder to your panel's public_html folder. You can as well delete the empty public folder now.

your public_html folder should look like this.

Step 5) locate the index.php file from the public_html folder. Right-click on it and select Code Edit from the menu.

Change the following code from index.php file

<?php


define('LARAVEL_START', microtime(true));

/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| our application. We just need to utilize it! We'll simply require it
| into the script here so that we don't have to worry about manual
| loading any of our classes later on. It feels great to relax.
|
*/

require __DIR__.'/../vendor/autoload.php';

/*
|--------------------------------------------------------------------------
| Turn On The Lights
|--------------------------------------------------------------------------
|
| We need to illuminate PHP development, so let us turn on the lights.
| This bootstraps the framework and gets it ready for use, then it
| will load up this application so that we can run it and send
| the responses back to the browser and delight our users.
|
*/

$app = require_once __DIR__.'/../bootstrap/app.php';


$kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);

$response = $kernel->handle(
    $request = Illuminate\Http\Request::capture()
);

$response->send();

$kernel->terminate($request, $response);

<?php

define('LARAVEL_START', microtime(true));

/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| our application. We just need to utilize it! We'll simply require it
| into the script here so that we don't have to worry about manual
| loading any of our classes later on. It feels great to relax.
|
*/

require __DIR__.'/../laravel/vendor/autoload.php';

/*
|--------------------------------------------------------------------------
| Turn On The Lights
|--------------------------------------------------------------------------
|
| We need to illuminate PHP development, so let us turn on the lights.
| This bootstraps the framework and gets it ready for use, then it
| will load up this application so that we can run it and send
| the responses back to the browser and delight our users.
|
*/

$app = require_once __DIR__.'/../laravel/bootstrap/app.php';


$kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);

$response = $kernel->handle(
    $request = Illuminate\Http\Request::capture()
);

$response->send();

$kernel->terminate($request, $response);

If everything went well, going to http://yourdomain.com should throw database errors (if you have models running on your app). Not to worry! The next phase is migrating your databases to your shared hosting.

Step 6) If Models are running on your application then you have to migrate tables to the database. I'm using sqlite database for migrating tables to the database.

Use ssh access or file manager create a 'database.sqlite' file in the 'laravel/database' directory. (Make Sure to give write and read permission)

Now change 'DB_DATABASE' in .env file of your laravel folder.

Ensure that these details are entered correctly.

Now using SSH in your laravel directory migrate all the files to a database.

If all goes well, you should have your site working fine now. So go ahead and try it out.

If you have questions please let me know in comments.

Thank You!