Forem: ShGI

Chnp-cli: Code Highlight and Print tool

ShGI — Tue, 19 Nov 2024 13:05:42 +0000

What is it?

CHNP (Code highlight and print) which is the project I developed in my first year of Diploma for the purpose of code printing where I can use a certain format to create a PDF from my code and it's output.
It was helpful throughout my diploma where I have to submit prints of my code.
You can checkout that repo here

SGI-CAPP-AT2 / code-highlight-n-print

A black & white Code highlighter for hard copy of documentations ...

Consider Using Chnp-Cli

code-highlight-n-print

A code highlighter for microsoft word and print code problems with there code, output, graphics output, title, filename and watermark
A BnW Code highlighter for hard copy of docs

Getting Started

Description of project

Convert your code with highlight into rich text using BnW highlighter

Features

Efficient highlighting
only two color tones used in highlight
line numbering
full support for rtf paste in microsoft word & google docs
output and code have different blocks
can even watermark your name/username

Initiated by ShGI

Recent fixes

added site watermark
added session exports for autosave

Sample outputs

View on GitHub

What is CHNP Cli?

CHNP is an webapp where I have to copy my code and paste which is very hard to manage in case we've multiple codes for same practical/experiments.
You've to copy them one by one and paste them there.
So, to tackle this problem and make tool more convenient I developed a Command Line application in Nodejs.
You can check the repo here

SGI-CAPP-AT2 / chnp-cli

Command line tool for converting your codes and output into pdf

Code Highlight n Print Command Line Interface

What is it?

CHNP (Code highlight and print) which is the project I developed in my first year of Diploma for the purpose of code printing where I can use a certain format to create a PDF from my code and it's output It was helpful throughout my diploma where I have to submit prints of my code. You can checkout that repo here

What is CHNP Cli?

CHNP is an webapp where I have to copy my code and paste which is very hard to manage in case we've multiple codes for same practical/experiments. You've to copy them one by one and paste them there. So, to tackle this problem and make tool more convenient I developed a Command Line application in Nodejs.

How it works?

CHNP Cli has following major components :

1.Session Object: This is where all of your codes…

View on GitHub

How it works?

CHNP Cli has following major components :

1.Session Object: This is where all of your codes and settings for current working directory is stored. (A Json File)
2.Commands: Currently there are 2 commands details

cohl: It is for operations like exporting or printing the session object i.e. it only reads the session objects.
cohls: It is for operations like editing your style preferences, staging codes for printing and many more i.e. for editing session object

3.Operators: These are the always first arguments passed to commands like to perform add operation we'll use add operator. details

CHNP Cli uses Nodejs as runtime

Installation

Prerequisites

Nodejs is only Prerequisites you have to install
You can install it from here

Install

After Installing the Nodejs you will type following command into terminal in any directory.

npm install -g chnp-cli

This will install the CHNP-Cli

How to use it ?

STEP 1: Create Session Object

Always you've to create session object so to do that you can use following command

cohls create "<MyObjectName>""

STEP 2: Sepcify file name

Cohls will ask you for filename enter like following

cohls create "JavaSessionObject"
Enter filename while adding: $1.java

here $1 will be replaced with 2nd arg passed while add operator because 1st arg will alway be the add operator.

STEP 3: Specify Commands

To Execute Source Code of java we require 2 commands usually which are javac and java.
So, Specify Them As Follows

$ cohls create "JavaSessionObject"
Enter filename while adding: $1.java
Enter commands to run program while adding: 
1. > javac $1.java
2. > java $1
3. >

Now whenever we've to stage a java file we can use following command

$ cohls add App

Source Code file will be App.java which will produce App.class and wil execute it.

STEP 4: Specify your watermark

$ cohls create "JavaSessionObject"
Enter filename while adding: $1.java
Enter commands to run program while adding: 
1. > javac $1.java
2. > java $1
3. > 
Enter watermark for your codes: CODE_BY_SHUBHAM
Operation is SUCCESSFULL

STEP 5: Add a Java File

You can add your file by using add operator

cohls add App.java
<
YOUR CODE EXECUTION WILL BE HERE
>
OPERATION IS SUCCESSFUL

Wrapping Up

And that's it for this post,
You can use this project for printing your codes with output.

Made with 💖 by Shubham

Host websites from mobile for free

ShGI — Thu, 23 Dec 2021 09:57:13 +0000

Hosting from mobile

Hosting is most important step to make your website accessible for world.
there are some services which will help you to host from you Android mobile.

GitHub pages

You can host your repository folder , branch or whole repo by enabling pages from repo settings. Get more information on pages.github.com

Firebase hosting

Firebase hosting is better because it provides domain .web.dev

How you can host website on firebase via mobile.

You've to download app called termux
Once you download termux you've to enter firebase commands in termux and site will be live.
link firebase commands
if you've any Query about firebase hosting , ask us.

Netlify

Netlify also offers you free hosting with domain .netlify.app.
You've to signup to Netlify and authenticate your gh/gl/bitbucket repo with site.

Thanks for reading
Written by shubham with <3.

Creating markdown blog or docs generator with js.

ShGI — Wed, 15 Dec 2021 07:55:20 +0000

Hey there everyone ,
If you've created blog on dev.to , you're might be familiar with blog generator with md.
I'll share how you can create that type of generator with only js.

libraries to use.

Showdown.js @showdownjs
Markdown.css by sindresorhus @markdown-css

showdown.js

Showdownjs is a library which converts markdown code into HTML code.
From

# header
**Bold**
_italic_

<h1>header</h1>
<strong>bold</strong>
<em>italic</em>

How to use showdown.js

You should visit to official docs for advanced level tools of library.
I'll show you how you can convert the md into html with GitHub flavour of markdown.

var my_markdown_input = document.querySelector("#mdinput") , converter = new showdown.converter();
var converted_text = converter.makeHtml(my_markdown_input);
// converted_text will be variable having html code

Markdown css

The style created by sindresorhus which looks like github markdown body.

How to use markdown css ?

The markdown css by sindresorhus is very simple to use. You just have to add classname "markdown-body" and it will convert html into GitHub like markdown styled html.

<div class="markdown-body"></div>

to get notified about latest webdev news join us ondiscord

How to do web development only on mobile

ShGI — Sat, 11 Dec 2021 12:18:50 +0000

Hey there today I am sharing how I created boosted notes in mobile only.

Apps to use ( @apps-to-use )
Console for mobile
Hosting via mobiles (in next blog)

Apps to use

There are many code editors on mobile I'll share two of them.

Treb edit Teb edit is best app to use for web development on mobile. PROS:- Better syntax highlight Better app experience JavaScript console CONS:- No local server
Spck Spck is better to use if you are working with git. PROS:- Support git Zip file extraction Intellisense Local server support CONS:- No better responsiveness.

console in mobile

You can use eruda console which is very simple to use in mobile.

Let's try it

~~First open any website on you browser~~ (you've already opened this page)
Enter following code in address bar

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

demo images of console

Join us On telegram || Formal Dr

ShGI — Sun, 12 Sep 2021 10:25:44 +0000

The channel is stopped on OCT032021

PWA || MAKING APP synchronous || Auto update assets

ShGI — Sat, 04 Sep 2021 05:12:25 +0000

Updating pwa

Whenever you change the version of service worker the app gets auto updated.
And also you can show interface for update.
But You have to make cool app like Amazon android which updates automatically when Amazon wants.

let's get started

To make app like that you have to cache only your index.html.
(If you have to give styled interface , you can add style.css also)

index.html

...

<div id="app" class="full-body">
<H1>You're offline<H1>
</div>

<script src="update.js"></script>
...

one script that will update content.

If you are using the framework like MDL or bootstrap.You have to place their scripts after update.js

update.js

var template = "you're online now";
var app = document.querySelector("div#app");
app.innerHTML=template;

This is process which will update your app when you will update the template variable

Making more complex

In my app I have created 3 tabs which are create,markdown to pdf, settings.
Each tab have it's own template file.
You can check here.

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.

View on GitHub

And whenever the js file reads it on tab is changed and display content after reading means in my app content is purely synchronous with user .

You can check here :
https://formal-stack.netlify.app/

Example of my app

In my app you can see I have created a loader and different tabs when you tap on tab the html template for that tab loads and the loader hides.
On every click on tab button the ui.js file reads the page template stored in pages directory and shows content.

You can see here https://github.com/NotableAPP/Formal-stack-pdfs/tree/main/APP/pages

In my app I have created my own extension which is .stackformal.In this type of file I have stored the html code which appears on the call means on tab opened.

temp.js

In my app I have created temp.js file which handles update temporary and after the service worker update app became stable.

Written by SGI with 💕

PWA || Mistakes While making pwa INSTALLABLE

ShGI — Sun, 22 Aug 2021 13:09:38 +0000

The Mistakes that make your pwa not valid to install. Or service and manifest does not meet installability

Today,I'm writing the mistake that I created while making my pwas and grabbed some knowledge and now I am sharing that knowledge with you.

M1 : Icons purpose .

In webmanifest we have to declare the purpose of our icon in "icons":[{"purpose":"my purpose"}]
We write purpose maskable but it is not valid for Installiblity. You have to declare purpose to any .

{
...
"icons":[
{
...
"purpose":"any"
}
]
}

M2 : Broken path.

It's more important that you have to write correct path every time.
If you write any broken path it will not meet Installiblity.
Where it's important.

While Adding caches(sw.js)
While writing paths of icon , scope and start_url.(manifest)

M3 : Path have to smaller case

In my app
I was written
https://formal-stack.netlify.app/APP/
And my folder was also APP but it's important that start_url and scope in manifest have to match with the scope of registration of service worker (with case sensitivity).
I replaced APP with app and my app became installable.

source code

If you want to check pwa example.

Check
https://notableapp.github.io

https://formal-stack.netlify.app

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.

View on GitHub

NotableAPP / NotableAPP.github.io

The noting app

BOOSTED

App which creates the notes with md.

App is running at : https://NotableAPP.github.io/

View on GitHub

jsPdf || 🖼️ Adjust image in scale Which will fit in page.

ShGI — Sat, 21 Aug 2021 04:12:00 +0000

Making js-based

online pdf maker / generator.
It is hard to make clientside apps. It needs to get more libraries and stackoverflow (for me)🤓.
I was also trying to create clientside pdf generator and I found very useful library. which is jsPDF. So,I used it and started to make app.

Starting using jsPDF

It was also not simple to implement library.Mainly the photo is not being fit on the page of pdf file.

let me show you example .

In this screenshot you can see the photo is going out of the pdf page
I searched it on Google but no one written article on it and also jsPDF not given solution on this problem.
So, I started solving this problem.

Ratio

It's important to know the ratio
of image height as width so we can derive the small scale of the image which will fit on the page of pdf

here how to get ratio of image

Note : we have to get ratio of image exact after image upload so, we can be able to use it globally whenever we wanted..

Let's code it

<input type="file" onchange="getratio(this.files"/>

var images_to_convert = []
var getRatio = (files) =>{
// Note files is json object not array object
for(let file of Object.values(files)){
let reader = new FileReader();
reader.onloadend=()=>{
let imgsrc = reader.result;
addImageToPdf(imgsrc);
}
reader.readAsDataUrl(file);
}

function addImageToPdf (src){
// src is data url of image

let img = new Image();
img.onload=()=>{
images_to_convert.push({src:img.src, height:img.height,width:img.width})
// Now successfully ratio of height as width is noted
}
img.src=src;
}

It was how I noted Ratio.

Making image fit on page

Image by icons8

Now we have ratio of image.only we need is page height and width size.
A4 page have width 210mm and height 300mm so the max is 300mm*210mm.

const max = {height:300,width:210}

We have know that the image height and width is in pixels but this doesn't Matter because it's in ratio.
Because , Height as well as width decrease or increase at same time so ratio will in same proportion.

Rendering

Now things we have are

Max height and width
Ratio of image height as width

If width of page is smaller than image width then image width will be page width similarly , if height of page is smaller than image height then image height is page hei axis.
Let me show in code

var render = () =>{
var doc = new jsPDF("p", "mm", "a4");
image_to_convert.forEach(img=>{
// img is json that we stored previously
let height=img.height,width=img.width,src=img.src,ratio=img.height/img.width;
if(height>max.height||width>max.width){
if(height>width){
height=max.height;
width=height*(1/ratio);
// Making reciprocal of ratio because ration of height as width is no valid here needs width as height
}else if(width > height){
width=max.width;
height=width*ratio;
// Ratio is valid here 
}
}
doc.addImage(src,"png",0,0,width,height);   
doc.addPage("p","mm","a4");
// Now successfully fitted image on page                                                
// I will prefer to use mm instead px

});
doc.save("download.pdf");
}

demo

https://formal-stack.netlify.app/

I have created the App which converts images into pdf. Which will show you how images are being fitted on page of jsPDF.
Source code:-

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.

View on GitHub

Forem: ShGI

Chnp-cli: Code Highlight and Print tool

What is it?

SGI-CAPP-AT2 / code-highlight-n-print

A black & white Code highlighter for hard copy of documentations ...

Consider Using Chnp-Cli

code-highlight-n-print

Getting Started

Description of project

Features

Initiated by ShGI

Sample outputs

What is CHNP Cli?

SGI-CAPP-AT2 / chnp-cli

Command line tool for converting your codes and output into pdf

Code Highlight n Print Command Line Interface

What is it?

What is CHNP Cli?

How it works?

How it works?

Installation

Prerequisites

Install

How to use it ?

STEP 1: Create Session Object

STEP 2: Sepcify file name

STEP 3: Specify Commands

STEP 4: Specify your watermark

STEP 5: Add a Java File

Wrapping Up

Host websites from mobile for free

Hosting from mobile

GitHub pages

Firebase hosting

How you can host website on firebase via mobile.

Netlify

Creating markdown blog or docs generator with js.

libraries to use.

showdown.js

How to use showdown.js

Markdown css

How to use markdown css ?

How to do web development only on mobile

Sharing topics

Apps to use

console in mobile

Let's try it

demo images of console

Join us On telegram || Formal Dr

PWA || MAKING APP synchronous || Auto update assets

Updating pwa

let's get started

index.html

update.js

Making more complex

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

Formal contribution

Example of my app

temp.js

PWA || Mistakes While making pwa INSTALLABLE

The Mistakes that make your pwa not valid to install. Or service and manifest does not meet installability

M1 : Icons purpose .

M2 : Broken path.

M3 : Path have to smaller case

source code

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

Formal contribution

NotableAPP / NotableAPP.github.io

The noting app

BOOSTED

jsPdf || 🖼️ Adjust image in scale Which will fit in page.

Making js-based

Starting using jsPDF

let me show you example .

Ratio

here how to get ratio of image