Skip to content

Instantly share code, notes, and snippets.

View vviikk's full-sized avatar
🙃

Vik Ramanujam vviikk

🙃
11 followers · 6 following
View GitHub Profile
@vviikk
vviikk / index.html
Created January 7, 2019 17:24
Electron Fiddle Gist
<html>
<head>
<style>
webview {
display: inline-flex;
width: 800px;
height: 600px;
}
</style>
</head>
@vviikk
vviikk / userChrome.css
Created November 17, 2018 09:44
userChrome.css
/* Hide horizontal tabs at the top of the window #1349 */
#TabsToolbar {
visibility: collapse !important;
}
/* For only Tree Style Tab sidebar #1397 */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
display: none !important;
}
@vviikk
vviikk / ordering-custom-properties.css
Last active November 15, 2018 14:52
custom properties ordering
:root {
/* CONSTANTS on top */
--COLOR-PRIMARY: palevioletred;
--COLOR-GRAY: silver;
/* Regular custom properties */
--heading-color: var(--COLOR-GRAY);
}
h1 {
/* Custom properties without calc */
@vviikk
vviikk / custom-properties-constants-naming-convention.css
Created November 15, 2018 13:59
custom-properties-constants-naming-convention.css
:root {
--FONT-SIZE-MIN: 16;
--FONT-SIZE-MAX: 26;
/* The properties below are also constants, as they don't rely on any external variables */
--FONT-SIZE-MIN-PX: var(--FONT-SIZE-MIN) * 1px;
--FONT-SIZE-MAX-PX: var(--FONT-SIZE-MAX) * 1px;
--COLOR-PRIMARY: palevioletred;
--COLOR-SECONDARY: mediumseagreen;
@vviikk
vviikk / CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer).md
Created November 15, 2018 10:20
CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer)

CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer)

Someone is going to unify these three different syntaxes and write a language that just addresses the web platform directly, and it's going to be insanely popular.
—[Jeremy Askenas][rise-of-the-transpilers], creator of coffeescript, 2015

TL;DR; styled-components FTW!

The journey to styled-components has been long, but with it's simplicity, tooling and level of adoption, it's the future of CSS in JS, and IMHO, the emerging standard that is about to stay. I can mention the disadvantages of CSS in JS, but most of them will not be valid if we're using styled-components. The topic is probably one of the fastest evolving in web development, so I hope you'll see:

  • advantages of CSS in JS
@vviikk
vviikk / Importing-Markdown-into-Medium-a.k.a-write-your-articles in-Markdown.md
Created November 15, 2018 10:20
Importing Markdown into Medium a.k.a write your articles in Markdown

The Medium editor is great and it will get better.Medium has taken the world by storm and I spend a lot of time absorbing all the great information here.

However, there's one drawback. I would like to write my articles offline. And also, even when online, I'd want something more minimal to write my articles - fast. I'm a command-line junkie and take my notes via sncli - a simple note client that is awesome, and allows me to use my favorite text editor - Vim. On the Mac, I use nvAlt

The original way, that used to work, doesn't anymore. I tried it and Medium imported nothing than the heading. Now, Medium's import is looking for a URL, which I assume is parsing as a HTML Document.

Copy / paste method

You will need to either:

  • convert your Markdown to HTML first. Copy & paste it into your article.
  • use many of markdown editors that have a preview mode. Copy that, and paste it in.
@vviikk
vviikk / nicely-named-fluid-typography-with-custom-properties.css
Last active January 17, 2020 21:08
Better Fluid type with custom properties
:root {
/* CONSTANTS */
--FONT-SIZE-MIN: 16;
--FONT-SIZE-MAX: 26;
/* Notice, no calcs used yet */
--FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px);
--FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px);
--BROWSER-WIDTH-MIN: 300;
@vviikk
vviikk / fluid-typography-without-css-variables.css
Created November 14, 2018 05:19
[fluid-typography]
html {
font-size: calc(
14px + (26 - 14) *
((100vw - 300px) / (1600 - 300))
);
}
@vviikk
vviikk / scss-variable-naming-in-CSS4-age.scss
Created November 13, 2018 13:44
/* SCSS Variables only used for media queries. All else is custom properties. Overlook it's usage. */
$--browser-width-min: 300;
$--browser-width-max: 1600;
$--browser-width-min-px: $--browser-width-min * 1px;
$--browser-width-max-px: $--browser-width-max * 1px;
/* ^^
Since I'm only using SCSS for the bare minimum,
I'll not try to use a convention.
I think the regular $--kebab-case is just fine.
However, I just find it consistent to be prefixed with a --
@vviikk
vviikk / valid-but-bad-custom-properties.css
Created November 13, 2018 12:53
:root {
--bg-color: black;
--fontSize: 1rem;
--bg_color_light: ....;
--highlightColor: rebeccapurple;
}