Pouya Kary ✨ pouyakary

CSS Clip-Path Shape() Based Squircle

Pure CSS Squircle has always been the fantasy of a web developer's good night's sleep. It is possible to clip a div with a custom SVG, but you have to make that SVG, put it on top of your HTML, then reference it inside the CSS, and regenerate it on each resize... It is a nightmare and the performance is horrible. You can go mad and implement a CSS Houdini to render squircle..., while this is mind-blowingly awesome, it doesn't work in Safari, and still not Pure CSS (my nightmare for those who disable JavaScript on their clients...). While there is work underway to add the superellipse() to CSS, the shape() function is now supported on all major

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

So if you have ever written in a ECMAScript language (JavaScript/TypeScript/...) you know that the autocomplete on the import is crap. Since you first say what you want and then say where from so the autocomplete has no idea what is available:

Visual Studio Code lets you define where in the snippets you want to fill step by step and that became a really good way to fix the problem. With the imp snippet you can do:

Hello World.

Make your Chrome dark, programatically.

Chrome does not have a system to be dark/light. Only way is to manually install themes and you can't use Starlight for it. So this is a simple script that turns your chrome into a dark themed chrome. You get the idea!

IMPORTANT
You have to enable AppleScript JavaScript execution in Chrome first by going to:
View &gt; Developer &gt; Allow JavaScript from Apple Events.


	//
	// Copyright 2018-present by Pouya Kary. Do whatever you like with
	// it and don't sue me :D
	//
	// This is the most simple rewriting system that one can make.
	// it might look silly but you can experiment all sorts of cool
	// systems in it. Just check out the sample rules and the result
	// you're going to get. Believe it or not it was only an accident
	// to get that result.

	alias light="osascript -e'tell application \"System Events\"' -e 'set dark mode of appearance preferences to false' -e 'end tell'"
	alias dark="osascript -e'tell application \"System Events\"' -e 'set dark mode of appearance preferences to true' -e 'end tell'"