🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

Anup Aglawe — Wed, 21 Oct 2020 14:42:07 +0000

✨As I mark the completion of hacktoberfest, I would say that the one thing which helped me cross the barrier to enter the world of open source, is hacktoberfest.

A slight of background before introducing svgwave, this was early of October I just heard of hacktoberfest, and although I was bit hesitant, I finally took up an issue to work on. The task was to implement a feature to add an SVG wave generator to an existing stencil js app. It was fascinating to me because I was pretty familiar with svgs, paths, & bezier curves. I immediately started working on the simple vanilla js version of svg generator, & built in a day or so. ➰

But this was where the hard part started for me. I was overwhelmed to see the big codebase/structure of the application. Although it was the first time I was looking something more than a personal project, I thought I would it pick up in a day or two. Since the project was based on stencil, I looked up a few docs and articles. In the end, I didn't grasp much and ask the maintainer to unassign myself from the issue and gave up.😢

Few days gone, I finished my four ❤ hacktoberfest PRs ( easy ones ), now it was time to do something of my own. Then suddenly an idea popped up to scale my small & simple vanilla js app to something bigger. I quickly looked up for some lightweight components based frameworks and decided upon using preact ⚛. And to my surprise, I was able to finish building the desired SVG wave generator within 4-5 days.🚀

I was delighted with the result and decided to showcase, and the same day I bought a domain -- svgwave.in, quickly deployed my app on vercel, configured DNS servers, and boom app was live in 10 mins.

Svg wave - a tiny, customizable SVG wave generator

So, the tool I built is called SVG wave. Svg Wave is a fast, customizable SVG wave generator for UI/Website Designs. It offers minimal GUI toolbar to customize layers, colors, crests and heights of the wave to suit your designs. Visit - svgwave.in to see it live.

Final say - apart from all the spam PRs many maintainers are facing, hacktoberfest is doing its job in welcoming people to contribute.

I would also like to thanks all the contributors who helped the project. I would appreciate the feedback.

⭐ us at Github - svgwave

Beautify your Windows Terminal 🦄

Anup Aglawe — Sun, 31 May 2020 13:34:31 +0000

Edit - ⚠️ With the newer version of oh-my-posh, and significant changes from V2, this article is outdated. Note that this will still work perfectly fine with V2 of oh-my-posh.

The Windows Terminal is a modern, fast, efficient, powerful, and productive terminal application for users of command-line tools and shells like Command Prompt, PowerShell, and WSL.

Lets start with windows Terminal installation -

Install the Windows Terminal from the Microsoft Store. This allows you to always be on the latest version when we release new builds with automatic upgrades.
- Alternative Way (Via Chocolately) - choco install microsoft-windows-terminal

Next Step is to modify Windows Terminal settings.

Fire up your installed windows terminal, and open up its settings, which will open settings.json in your default editor.

Under profiles list update the powershell profile to -



 {
       // Make changes here to the powershell.exe profile.
       "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
       "name": "Linnea",
       "commandline": "powershell.exe -NoLogo -NoExit",
       "hidden": false,
       "colorScheme": "Blue Matrix",
       "fontFace": "Cascadia Code PL",
       "fontSize": 10,
       "icon": "xxxxxxxxxxxxxxxxxxxxxx",
       "backgroundImage": "xxxxxxxxxxxxxxxxxxx",
       "backgroundImageOpacity": 0.2,
       "acrylicOpacity": 0.8,
       "useAcrylic": true,
       "startingDirectory": "Q:\\Development"
 },

Properties - name-[ Appears as title in top bar ]
acrylicOpacity-[ its just the opacity of window ]
useAcrylic-[ to use acrylicOpacity it must be true]
icon-[ appears as favicon to window ]

(Note 1- make sure to update icon and background image to your personal liking)
(Note 2- make sure to that your defaultProfile has the guid of your powershell)

Next step is to update our schemes list -



 "schemes": [
    {
        "name": "Blue Matrix",
        "black": "#101116",
        "red": "#ff5680",
        "green": "#00ff9c",
        "yellow": "#fffc58",
        "blue": "#00b0ff",
        "purple": "#d57bff",
        "cyan": "#76c1ff",
        "white": "#c7c7c7",
        "brightBlack": "#686868",
        "brightRed": "#ff6e67",
        "brightGreen": "#5ffa68",
        "brightYellow": "#fffc67",
        "brightBlue": "#6871ff",
        "brightPurple": "#d682ec",
        "brightCyan": "#60fdff",
        "brightWhite": "#ffffff",
        "background": "#1d2342",
        "foreground": "#b8ffe1"
    }
],

More themes at - [atomcorp.github.io/themes/](https://atomcorp.github.io/themes/)

That's pretty much for the windows Terminal Settings , lets move to add some cool plugins 🔥.

---

### PowerLine Setup ⚡
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73e98cxinv28jywdxrhb.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8uejzmvkxrwkxevxohk4.png)

Edit - ⚠️ With the newer version of oh-my-posh, and significant changes from V2. this article needs update. Note that this will still work perfectly fine with V2 of oh-my-posh.

 Prerequisites - 
 - Install [Cascadia code PL](https://github.com/microsoft/cascadia-code/releases) font. (Otherwise you might some gibberish on your terminal )
 - [Git](https://git-scm.com/downloads) for windows
 - Install Posh-git and Oh-my-posh  ( use powershell )

Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

---

####  Customize your PowerShell prompt 🔨
 - Open your PowerShell profile with `notepad $PROFILE` or the text editor of your choice. This is not your Windows Terminal profile. Your PowerShell profile is a script that runs every time PowerShell starts.
 -  If your powershell doesn't already have a profile, create one ->

if (!(Test-Path -Path $PROFILE)) { New-Item -ItemType File -Path ROFILE -Force }

- Now go ahead and add the following code to your powershell profile -

Import-Module posh-git
Import-Module oh-my-posh
Set-Theme Paradox

More themes at - [ oh-my-posh themes](https://github.com/JanDeDobbeleer/oh-my-posh#themes)

( ⚠️  if your powershell gives module not found error ) add the following code with default module location, to the top of your Powershell Profile.

$env:PSModulePath = $env:PSModulePath + "$([System.IO.Path]::PathSeparator)C:\Users\xxxx\Documents\WindowsPowerShell\Modules"

Still facing error - Visit [https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_profiles?view=powershell-7](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_profiles?view=powershell-7)


---
### Modifying Oh-my-posh theme ( 🦄🔥🚀 Emojis )

![Emojis](https://dev-to-uploads.s3.amazonaws.com/i/eqttvii2l25877p2vytv.png)

---
Remember we set our default oh-my-posh theme to paradox, lets head over to customize it.

- Navigate to your PSmodules directory, then into oh-my-posh themes directory 
    - `Documents\WindowsPowerShell\Modules\oh-my-posh\2.0.412\Themes`

- Open Paradox file, scroll down to the bottom and update following lines -

$sl.PromptSymbols.StartSymbol = [char]::ConvertFromUtf32(0x01F984) + [char]::ConvertFromUtf32(0x0001F525) + ' '
$sl.PromptSymbols.PromptIndicator = [char]::ConvertFromUtf32(0x01F680) +[char]::ConvertFromUtf32(0x276F)

*(This lines will add cool emojis just before your StartSymbol & PromptIndicator)*

---

### Adding custom banner to your Powershell 🏳️‍🌈

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uwpi5z246kgy9ubu9i4a.png)
This is quite tedious task if you want to add complex images in the banner.
( There is easier way [Neofetch for windows](https://github.com/dylanaraps/neofetch), but it comes with its own lag overhead whenever you open your windows terminal )

- *Tedious but way less overhead* Method
    -  Change your powershell file to add your custom ascii art. 
    -  In my case, I changed my Profile Image to Ascii Art via [https://www.topster.net/ascii-generator/](https://www.topster.net/ascii-generator/).
    - Next problem is color support, by default powershell doesn't allow you to write multipler colored text on a single line.
    -  ( You could proceed without this ) If want the above function install Write color module.
    `Install-Module -Name PSWriteColor`
    - Now just below your $psenvmodule path add the following lines to display your customized banner .

Write-Color -Text " /@ " -Color Cyan
Write-Color -Text " @(","@ " -Color Blue,Cyan
Write-Color -Text " @@/"," @* " -Color Blue, Cyan
Write-Color -Text " @#/"," @@* " -Color Blue, Cyan
Write-Color -Text " @@(/"," @@,, " -Color Blue, Cyan
Write-Color -Text " @%(/ @@","@@@@@@","@@@@ " -Color Blue, DarkCyan, Cyan
Write-Color -Text " @@#","#"," " -Color Blue, DarkCyan, Cyan
Write-Color -Text " @@##","#(((/","///",",,,,,@ " -Color Blue, DarkBlue, DarkCyan, Cyan
Write-Color -Text " @@%%#","##(((/","///","****,,,,,,@ " -Color Blue, DarkBlue, DarkCyan, Cyan
Write-Color -Text "@@@@@W","@@@@@@","@@@@@@","@@@@@@@@@@@ " -Color Blue, DarkBlue, DarkCyan, Cyan
Write-Color -Text " "


*(Note - the number of colors you can choose from is somewhat limited: Black, DarkBlue, DarkGreen, DarkCyan, DarkRed, DarkMagenta, DarkYellow, Gray, DarkGray, Blue, Green, Cyan, Red, Magenta, Yellow, and White )*

Edit 1. - Your Powershell Profile should look like this - [ pastebin.com/JAX3Ce23](pastebin.com/JAX3Ce23)

Edit 2. - Background Image source - [facets.la](facets.la)

Edit 3. - With the new version of oh-my-posh, few commands (ex- set-theme ) have been depreciated. I'm planning to update the article with the specifics, till then use their documentation for updated syntax - [Repo Link](https://github.com/JanDeDobbeleer/oh-my-posh)


----

## Credits

- [Windows Terminal Community ❤](https://github.com/microsoft/terminal) 
- [https://github.com/JanDeDobbeleer/oh-my-posh](https://github.com/JanDeDobbeleer/oh-my-posh)
- [https://github.com/dahlbyk/posh-git](https://github.com/dahlbyk/posh-git)
- [https://github.com/EvotecIT/PSWriteColor](https://github.com/EvotecIT/PSWriteColor)
- [https://github.com/atomcorp/themes](https://github.com/atomcorp/themes)

DEV Community: Anup Aglawe

🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

Svg wave - a tiny, customizable SVG wave generator

Beautify your Windows Terminal 🦄