diff --git a/src/posts/animating-css-snake-art.md b/src/posts/animating-css-snake-art.md index 7b54fe9..37aa3ee 100755 --- a/src/posts/animating-css-snake-art.md +++ b/src/posts/animating-css-snake-art.md @@ -1,7 +1,8 @@ --- layout: post -title: Animating CSS Snake Art +title: A Snake in CSS date: 2017-05-18 +tags: [css, animation] --- If you think the article has a terrible title, you are right. Moving on... diff --git a/src/posts/css-toggle-function.md b/src/posts/css-toggle-function.md index 61fbc6b..1e5b958 100755 --- a/src/posts/css-toggle-function.md +++ b/src/posts/css-toggle-function.md @@ -2,6 +2,7 @@ layout: post title: The CSS toggle() Function date: 2017-04-25 +tags: [css] --- CSS has had [functions](https://drafts.csswg.org/indexes/#functions) for a long time now. We use them everyday in colors( e.g `rgb()/hsl()`), backgrounds( e.g. `linear-gradient()`), animations(e.g. `cubic-bezier()`) etc. CSS Values and Units Module Level 4 defines the [`toggle()`](https://drafts.csswg.org/css-values-4/#funcdef-toggle) function. Let's take a look. diff --git a/src/posts/design-story-independence-day-cover-photo.md b/src/posts/design-story-independence-day-cover-photo.md index df08016..83e8f68 100755 --- a/src/posts/design-story-independence-day-cover-photo.md +++ b/src/posts/design-story-independence-day-cover-photo.md @@ -2,6 +2,7 @@ layout: post title: Design Story - Independence Day Cover Photo date: 2014-08-15 +tags: [design, india] --- Let's have a look at it first. diff --git a/src/posts/finding-unique-color-strings-in-project.md b/src/posts/finding-unique-color-strings-in-project.md index 41afb6a..e87bb86 100755 --- a/src/posts/finding-unique-color-strings-in-project.md +++ b/src/posts/finding-unique-color-strings-in-project.md @@ -2,6 +2,7 @@ layout: post title: Finding Unique Color Strings In Project date: 2015-11-01 +tags: [regex, javascript, colors] --- One of my recent projects is messy with it's color theory. Partly because it's brand new and there are things which will take different directions _soon_! diff --git a/src/posts/first-scss-experiment-a-blurry-world.md b/src/posts/first-scss-experiment-a-blurry-world.md index e462735..8764cf7 100755 --- a/src/posts/first-scss-experiment-a-blurry-world.md +++ b/src/posts/first-scss-experiment-a-blurry-world.md @@ -2,6 +2,7 @@ layout: post title: First SCSS Experiment - A Blurry World date: 2015-03-19 +tags: [css, scss] --- I know. I know. I am late into the business. All cool kids have nailed it completely and I took it up yesterday. But better late than never. diff --git a/src/posts/how-i-have-settled-down-to-inconsolata-for-codes.md b/src/posts/how-i-have-settled-down-to-inconsolata-for-codes.md index ba79efd..a5d609a 100755 --- a/src/posts/how-i-have-settled-down-to-inconsolata-for-codes.md +++ b/src/posts/how-i-have-settled-down-to-inconsolata-for-codes.md @@ -1,7 +1,8 @@ --- layout: post -title: How I Have Settle Down To Inconsolata For Code +title: I Have Settle Down To Inconsolata For Code date: 2014-07-29 +tags: [typography, font] --- Choosing the coding font that suits your style is a difficult job. It has to impress you with it's curves, spaces and visual aesthetics. For me, there are these specific things that mattered the most. diff --git a/src/posts/how-to-import-markdown-files-in-vue-cli-typescript-project.md b/src/posts/how-to-import-markdown-files-in-vue-cli-typescript-project.md index 76330ea..b1dd0a2 100755 --- a/src/posts/how-to-import-markdown-files-in-vue-cli-typescript-project.md +++ b/src/posts/how-to-import-markdown-files-in-vue-cli-typescript-project.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Import Markdown Files in Vue CLI + TypeScript Projects +title: Import Markdown Files in Vue CLI + TypeScript Projects tags: [markdown, typescript, vue-cli, vue] date: 2021-02-17 --- diff --git a/src/posts/how-to-use-avif-today.md b/src/posts/how-to-use-avif-today.md index 272c1c5..1c92963 100755 --- a/src/posts/how-to-use-avif-today.md +++ b/src/posts/how-to-use-avif-today.md @@ -1,8 +1,8 @@ --- layout: post -title: How to use AVIF today +title: Use AVIF today description: Short post on how to serve AVIF today with fallback for unsupported browsers. -tags: [avif, image, compression, picture, fallback] +tags: [avif, image, compression, html] date: 2021-07-08 --- diff --git a/src/posts/how-to-use-sass-variables-in-javascript-in-a-webpack-project.md b/src/posts/how-to-use-sass-variables-in-javascript-in-a-webpack-project.md index a54ed50..5093c73 100755 --- a/src/posts/how-to-use-sass-variables-in-javascript-in-a-webpack-project.md +++ b/src/posts/how-to-use-sass-variables-in-javascript-in-a-webpack-project.md @@ -1,7 +1,8 @@ --- layout: post -title: How to use Sass variables in JavaScript in a Webpack project +title: Use Sass variables in JavaScript in a Webpack project date: 2021-01-24 +tags: [sass, webpack] --- Wouldn't that be great? diff --git a/src/posts/introducing-poppins.md b/src/posts/introducing-poppins.md index 71a51ef..74c40d2 100755 --- a/src/posts/introducing-poppins.md +++ b/src/posts/introducing-poppins.md @@ -2,6 +2,7 @@ layout: post title: Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme date: 2015-12-20 +tags: [sublime-text, theme, tools] --- diff --git a/src/posts/make-wamp-work-on-windows-10-technical-preview.md b/src/posts/make-wamp-work-on-windows-10-technical-preview.md index f17e022..603b22b 100755 --- a/src/posts/make-wamp-work-on-windows-10-technical-preview.md +++ b/src/posts/make-wamp-work-on-windows-10-technical-preview.md @@ -2,6 +2,7 @@ layout: post title: Make WAMP Work On Windows 10 date: 2015-02-12 +tags: [windows, wamp] --- ### Edit For Windows 10 Clean Install diff --git a/src/posts/make-your-web-apps-little-more-native.md b/src/posts/make-your-web-apps-little-more-native.md index b4aec4d..365c287 100755 --- a/src/posts/make-your-web-apps-little-more-native.md +++ b/src/posts/make-your-web-apps-little-more-native.md @@ -1,7 +1,8 @@ --- layout: post -title: Make Your Web Apps Little More Native +title: Make your web apps look a little more native date: 2016-05-18 +tags: [typography, font] --- Everybody loves Medium and there is just something about it that attracts people. The more I used it, the more I realized there was something wonderful it was doing to give it's users, the native feeling. I personally love apps when they adapt to different systems & devices. It shows that they care for their users and what sort of system they use. The user doesn't need to adapt to the app but the app adapts for the user's environment. Making elements adapt to native design system also creates a sense of trust. diff --git a/src/posts/managing-mixins-and-utils-in-vue.md b/src/posts/managing-mixins-and-utils-in-vue.md index a0e816f..293abb1 100755 --- a/src/posts/managing-mixins-and-utils-in-vue.md +++ b/src/posts/managing-mixins-and-utils-in-vue.md @@ -3,6 +3,7 @@ layout: post title: Managing Mixins & Utilities in VueJS published: true date: 2019-04-09 +tags: [vue.js, javascript] --- > The code examples are in TypeScript but the idea works just as well in JavaScript. diff --git a/src/posts/meeting-lea-and-chris.md b/src/posts/meeting-lea-and-chris.md index 5980cc9..12bc39d 100755 --- a/src/posts/meeting-lea-and-chris.md +++ b/src/posts/meeting-lea-and-chris.md @@ -2,6 +2,7 @@ layout: post title: Meeting Lea & Chris date: 2015-12-11 +tags: [life] --- **Reporting From Boston** diff --git a/src/posts/my-graphql-schema-types-generation-workflow copy.md b/src/posts/my-graphql-schema-types-generation-workflow copy.md index ea2dae0..c60e713 100755 --- a/src/posts/my-graphql-schema-types-generation-workflow copy.md +++ b/src/posts/my-graphql-schema-types-generation-workflow copy.md @@ -2,6 +2,7 @@ layout: post title: My GraphQL Schema & Types Generation Workflow date: 2021-01-26 +tags: [graphql, typescript] --- At [Voicezen](https://voicezen.ai), we use multiple GraphQL endpoints. We also use Vue with TypeScript. Naturally, we need type definitions for everything the endpoints expose. diff --git a/src/posts/vuejs-scss-webpack-quick-tip.md b/src/posts/nicer-imports-with-webpack-aliases.md similarity index 93% rename from src/posts/vuejs-scss-webpack-quick-tip.md rename to src/posts/nicer-imports-with-webpack-aliases.md index 3163417..81c24e1 100755 --- a/src/posts/vuejs-scss-webpack-quick-tip.md +++ b/src/posts/nicer-imports-with-webpack-aliases.md @@ -1,12 +1,13 @@ --- layout: post -title: VueJS + Webpack + SCSS - Quick Tip +title: Nicer imports with webpack aliases date: 2017-10-26 +tags: [vue.js, webpack, scss] --- ## The Setup -- Initializd with Vue CLI + Webpack template. +- Initialized with Vue CLI + Webpack template. - [Sass loader installed so we can use SCSS in our components](https://www.youtube.com/watch?v=jrxalQdn64k). ## The Problem diff --git a/src/posts/people-i-learn-from.md b/src/posts/people-i-learn-from.md index 9673a7e..6e81d3d 100755 --- a/src/posts/people-i-learn-from.md +++ b/src/posts/people-i-learn-from.md @@ -2,27 +2,35 @@ layout: post title: People I Learn From date: 2016-02-13 +tags: [life] --- -The world of web development is wild. Every day there are literally tons of new things to learn. I feel exhausted time to time and it's really important for one to remain inspired. I like it when I look at work done by people and wonder wide eyed - *How the heck is this done?*. That inspires me. + +The world of web development is wild. Every day there are literally tons of new things to learn. I feel exhausted time to time and it's really important for one to remain inspired. I like it when I look at work done by people and wonder wide eyed - _How the heck is this done?_. That inspires me. Following people on Internet has been the key for me to learn new things and experiment with latest and greatest stuff. It's also been a great source of knowledge of future tech. It gave me the opportunity to talk to them time to time and even [meet them](/meeting-lea-and-chris/). Here's a short list of people I follow for their amazing work & everyday tips. ### [Lea Verou](https://twitter.com/LeaVerou) + Following her on twitter did a lot of good to me. She writes about everything in web development world. I often find that the tips she posts laer become some of the real good tools/techniques I ever used. ### [Ana Tudor](https://twitter.com/anatudor) + Wanna learn CSS/SASS and awesome animations? Follow her. She does amazing live coding sessions on [CodePen](http://codepen.io/thebabydino/). That's the fastest way I have found out to learn bunch of new things. ### [Rachel Smith](https://twitter.com/rachsmithtweets) + When I started learning canvas( pretty late and still don't know a ton) and looked for some of the coolest stuff on codepen... [I found her](http://codepen.io/rachsmith/). Her [Hack Physics & JavaScript - 1](http://codepen.io/rachsmith/post/hack-physics-and-javascript-1) really helped me in understanding canvas and physics together. ### [Addy Osmani](https://twitter.com/addyosmani) + Every time I come to know about a new feature in Chrome Dev Tools, it's because of him. Following Addy has been amazing for me to know about tooling and performance testing. He also has this [YouTube Series](https://developers.google.com/web/shows/ttt/?hl=en) dedicated to tooling which is cool! ### [Chris Coyier](https://twitter.com/chriscoyier) & [CSS-Tricks](https://css-tricks.com) + I don't think Chris needs any introduction. He is one of the most popular folks out there. I have been following Chris & CSS-Tricks since I learned what is box model in CSS. They are like StackOverflow for CSS for me. ### [Una Kravets](https://twitter.com/Una) + I came to know about her a year ago or so. I was totally wowed by her [personal goals repository](https://github.com/una/personal-goals) and the projects she worked upon. Whatever knowledge I have about [CSS blending modes](http://una.im/CSSgram/), I owe it to her. They are my major source of stuff I work with and care about. I do follow a lot of others who are really amazing. Their work makes me think and rethink and always make me realize that there's more to learn and better ways of solving problems. diff --git a/src/posts/ready-steady-gulp.md b/src/posts/ready-steady-gulp.md index f895e87..1eb70de 100755 --- a/src/posts/ready-steady-gulp.md +++ b/src/posts/ready-steady-gulp.md @@ -2,6 +2,7 @@ layout: post title: Ready Steady Gulp! date: 2015-06-28 +tags: [gulp, javascript, bundling] --- Lately, if something has totally changed the way I work, it's [Gulp](http://gulpjs.com/) - _the streaming build system_ . There are lot of cool things you can do with gulp with great flexibility. Let's get started! diff --git a/src/posts/reusing-areas-in-css-grid.md b/src/posts/reusing-areas-in-css-grid.md index 78047f9..7bd744c 100755 --- a/src/posts/reusing-areas-in-css-grid.md +++ b/src/posts/reusing-areas-in-css-grid.md @@ -2,6 +2,7 @@ layout: post title: Reusing Areas In CSS Grid date: 2017-09-18 +tags: [css, grid] --- I have been playing around with CSS Grids for some time now and it has been an extremely delightful experience. So much so that I have submitted a talk proposal at [MetaRefresh 2017](https://metarefresh.talkfunnel.com/2017/2-grid-is-fun). If it gets selected, it's gonna be my first time ever speaking at a conference. I am nervous. If you are gonna be at MetaRefresh and wanna know about Grids, go vote! 😊 diff --git a/src/posts/secret-page-dev-info-vite-react.md b/src/posts/secret-page-dev-info-vite-react.md index 5c9d8ff..a4df34a 100644 --- a/src/posts/secret-page-dev-info-vite-react.md +++ b/src/posts/secret-page-dev-info-vite-react.md @@ -1,6 +1,6 @@ --- layout: post -title: A secret, system version page for Web Developers +title: A secret, deployment version page for developers tags: [typescript, react, vite, git, tips] date: 2023-01-06 --- diff --git a/src/posts/so-you-love-in-ternational-brands.md b/src/posts/so-you-love-in-ternational-brands.md index 6e26d62..f350e17 100755 --- a/src/posts/so-you-love-in-ternational-brands.md +++ b/src/posts/so-you-love-in-ternational-brands.md @@ -2,6 +2,7 @@ layout: post title: So You Love IN-ternational Brands? date: 2014-09-28 +tags: [india, brands] --- I have never written anything about brands or branding before. I have never been bothered enough but as I realize, they do affect me and my surroundings. They bring in changes in how people interact with each other. They are used as tools to measure your mental and financial conditions. Having a good knowledge of brands make you appear sophisticated( ...or at least few people think so! ) diff --git a/src/posts/talks-that-impress.md b/src/posts/talks-that-impress.md index 699c17b..f5dc256 100755 --- a/src/posts/talks-that-impress.md +++ b/src/posts/talks-that-impress.md @@ -2,6 +2,7 @@ layout: post title: Talks That Impress date: 2015-09-06 +tags: [thoughts] --- I am organizing a [CodePen Meetup in India](http://nvite.co/e114) for the first time ever and it's a big deal for me. Not just because CodePen is big and people know it for it's quality, but also because of the care I am required to take in all aspects of the event. Most importantly the talks. diff --git a/src/posts/the-right-html-element-for-icons.md b/src/posts/the-right-html-element-for-icons.md index de0957d..a1d97a3 100755 --- a/src/posts/the-right-html-element-for-icons.md +++ b/src/posts/the-right-html-element-for-icons.md @@ -2,6 +2,7 @@ layout: post title: The Right HTML Element For Icons date: 2015-02-17 +tags: [html, icons] --- [![ VS ](/assets/images/2015/02/span_vs_i.avif)](/assets/images/2015/02/span_vs_i.avif) diff --git a/src/posts/tree-style-directory-structure-powershell.md b/src/posts/tree-style-directory-structure-powershell.md index 5a0b6bb..f58dde6 100755 --- a/src/posts/tree-style-directory-structure-powershell.md +++ b/src/posts/tree-style-directory-structure-powershell.md @@ -2,6 +2,7 @@ layout: post title: Tree Like Directory Structure In PowerShell date: 2015-03-17 +tags: [tools, shell] --- One of those things that I may not require too often but when I do, it has to be nicely formatted and give me precise results. diff --git a/src/posts/why-vue-is-so-awesome.md b/src/posts/why-vue-is-so-awesome.md index ea811f4..f932e7b 100755 --- a/src/posts/why-vue-is-so-awesome.md +++ b/src/posts/why-vue-is-so-awesome.md @@ -3,6 +3,7 @@ layout: post title: Why Vue Is So Awesome 😍 published: true date: 2018-04-06 +tags: [vue.js, thoughts, javascript] --- ...and Angular is not. diff --git a/src/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design.md b/src/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design.md index 903d0de..bf450ab 100755 --- a/src/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design.md +++ b/src/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design.md @@ -2,6 +2,7 @@ layout: post title: Xiaomi Redmi 1S Is A Powerful Product With Bad Design date: 2014-10-19 +tags: [thoughts, phone, design] --- [![](/assets/images/2014/10/xiaomi-redmi-1s-quad-core-16ghz-1gb-8gb-47-inch-ips-8mp-camera-dual-sim-wcdma-version-smartphone-black.avif)](/assets/images/2014/10/xiaomi-redmi-1s-quad-core-16ghz-1gb-8gb-47-inch-ips-8mp-camera-dual-sim-wcdma-version-smartphone-black.avif)