Will update this list updated if there is something new.
]]>So, I've created a Next.js starter kit tailored for myself, which you can check out here .
This kit contains just 5 files but comes packed with everything you need right out of the box:
When starting a new project, I either duplicate this template or simply copy and paste the 5 files. This method saves me the hassle of removing unwanted code from other starter kits and ensures Prettier and ESLint are configured exactly to my liking.
See it here:
github.com/praveenjuge/nextjs-minimal-starter
Here's a breakdown, based on personal experience, of where Auto Layout shines and where it might not be the best fit:
Design Systems: Auto Layout is invaluable for creating design systems. It ensures consistency across components and layouts, making it easier to maintain and update your design system over time.
Application Design: For designing UI/UX for applications, Auto Layout can drastically reduce the time needed to create and adjust layouts. It helps in managing the spacing and alignment of elements, ensuring that your designs are both aesthetically pleasing and functionally effective.
Landing Page Content: When it comes to the content sections of landing pages, Auto Layout can help manage the flow of text, buttons, and images seamlessly.
Landing Page Graphics: For more graphic-intensive elements of a landing page, such as hero images or complex visual compositions, Auto Layout may not offer the flexibility needed to achieve the desired outcome. In these cases, manual adjustments might provide better control over the design.
Graphic Design: In the realm of graphic design, where designs often require a high level of creativity and flexibility, Auto Layout might restrict the designer's ability to manipulate elements freely.
Icon Design: Similar to graphic design, designing icons often requires precise adjustments and a level of detail that Auto Layout might not support effectively.
The decision to use Auto Layout in Figma ultimately depends on the specific needs of your project and your personal design process.
]]>I wonder how all of these will integrate into a single system in the future.
]]>This approach is not about stripping away features or reducing functionality, but rather about prioritizing usability and user needs.
In doing so, designers can create products that are not only efficient but also resonate more deeply with their audience. This resonates particularly well in the corporate world, where the balance between innovation and usability becomes a critical factor in a product's success.
Simplicity in design is more than an aesthetic choice – it's a fundamental principle that should guide modern design philosophy. It’s about creating products that are not only efficient and easy to use but also bring joy and ease into our increasingly complex lives.
The future of design is clear – it must be simple.
Marden, who later founded Success Magazine, wrote this during the 1890s depression, aiming to inspire success in challenging times. As designers, we often face our own kind of recession - creative blocks, challenging clients, and the ever-evolving nature of design trends. Marden's book, filled with stories of people achieving great things against the odds, is a reminder that success is possible despite these hurdles.
The book is a goldmine of wisdom, offering advice on progressing through small, consistent steps - a principle very much applicable to design projects. I found it beneficial to read it like a daily design brief: one chapter a day, with time afterwards to reflect on how its lessons apply to my work.
But what's truly inspiring for any creative professional is the story behind the book. After losing his original manuscript in a hotel fire, Marden, with incredible resilience, began rewriting it from scratch. This act of starting over, with nothing but a nightshirt and a 25-cent notebook, is a powerful metaphor for the design process. We often have to scrap our concepts and begin anew, finding strength in our vision and determination.
Marden's perseverance is a lesson in not giving up on our creative dreams. He rewrote not just "Pushing to the Front" but also penned "Architects of Fate" in a modest Boston room. His dedication resulted in a manuscript that caught the attention of multiple publishers, finally getting published in 1894.
For designers, "Pushing to the Front" is more than a book. It's a source of daily inspiration, a reminder of the timeless nature of creativity, hard work, and resilience. As we navigate the world of design, where trends come and go, and projects can be as fleeting as they are fulfilling, Marden's journey and his words stand as a testament to the enduring power of perseverance. This book isn't just a read; it's a daily dose of motivation, reminding us that our creative journey, much like Marden's, is filled with limitless possibilities.
]]>Think of a README file as your project's welcoming brochure. It's essential. This file should give a clear tour of your project, highlighting its goals and what it's not about. Setting up a CONTRIBUTING file is like a guidebook for travelers wanting to join your journey. It ensures everyone knows the path and makes their contributions count, making the whole trip more organized and inclusive.
When coding, remember the saying, "Slow and steady wins the race." Regular, small updates are better than rare, big changes. This keeps the project easy to handle and invites constant input from your fellow travelers. Use tools like automated testing and continuous updates – they're like reliable travel gadgets that keep your project on track and improving.
Open source isn't just about the code – it's about building a friendly neighborhood. A Code of Conduct is like the rules of a clubhouse, making sure everyone feels safe and welcome. Licenses are the signs that tell others how they can use and share your project, so pick them thoughtfully.
To sum up, succeeding in the open source world is about being organized, communicating clearly, and always being ready to learn and grow.
]]>Here's what inclusive design is all about:
Equal Experience for All: Whether someone is using a smartphone, a computer, or special technology to help them, the website or app should work well for them. For instance, if there's a picture, there should also be a text description for people who can't see it. Or, if there's a video, there should be captions for those who can't hear it.
Giving Users Control: It's important to respect how people have set up their browsers. For example, if someone likes to view things in a certain way, like with bigger text, the website shouldn't change that. Also, it's good to offer different ways to do things on the site. This way, people can choose the way that works best for them.
In short, inclusive design is about knowing that people use websites and apps in many different ways. By thinking about these different needs, we can make the digital world a welcoming place for everyone.
]]>My routine involves crafting several designs at the start of each week and then sharing them daily. These designs are a mix of work from client projects and my own ventures, like the mynaui icons and Teak. You can check these out at icons.mynaui.com and teak.praveenjuge.com , respectively.
This journey has been more than just about improving my design skills; it's been a crucial step in overcoming imposter syndrome. The rule I set for myself is simple yet transformative: regardless of how I feel about a design, it gets posted. This process of creating, sharing, and receiving feedback is a continuous learning curve.
Now, I'm venturing into daily blogging to keep my thoughts organized. I must admit, writing daily poses a different set of challenges compared to designing. But, as with design, I believe it's a path filled with growth and learning. So here's to more days of creating, sharing, and evolving!
]]>People often argue about whether designers need formal training. But really, design is more about solving problems than just working with visual stuff like colors and fonts. Think about how you set up your phone screen or arrange your living room – that's design thinking too! And many people do this kind of design in their everyday life without any formal training.
What makes you a good designer isn't just having a degree or knowing certain tools. It's really about being good at figuring out and creatively solving problems. Good designers turn challenges into great solutions. It's kind of like how an architect turns a simple idea for a space into something that looks good and works well. This means anyone who's good at solving problems can be a designer, even if they haven't studied it in school.
]]>Initially, a product's simple and intuitive nature draws people in. However, as features are added, complexity creeps in, and the essence of simplicity can be lost.
This complexity often leads people back to seek simpler alternatives.
The lesson for designers is clear: maintain simplicity at the core of design.
But people want more features all the time. It's crucial to regularly step back and view the product, asking if the added features enhance or hinder the experience.
How would you decide what feature to add next?
]]>Far Cry 6 takes us to Yara, a fictional Caribbean island under the dictatorship of Anton Castillo, played with scene-chewing brilliance by Giancarlo Esposito. The story, though not as groundbreaking as Far Cry 3, is engaging enough to keep players hooked. The real standout is Dani Rojas, the protagonist, whose journey from a disillusioned citizen to a fervent revolutionary is both relatable and inspiring. Esposito’s portrayal of Castillo, a tyrant with a vision for his country, adds depth to the narrative, making him more than just a one-dimensional villain.
The world of Yara is a breathtaking spectacle. Its massive and varied landscapes range from lush jungles to urban streets, each painted with meticulous detail. However, the game does not shy away from the repetitive elements typical of Ubisoft's open-world games, which can be a double-edged sword for players seeking variety. The graphical beauty of Yara is undeniable, showcasing some of the best visuals in modern gaming.
Where Far Cry 6 truly shines is in its writing and character interactions. The dialogues are slick, peppered with humor and emotional depth. Castillo's character, despite his tyranny, is constantly humanized through his speeches and justifications, showcasing excellent writing. The interactions between Dani and other characters are filled with witty banter and heartfelt moments, creating a narrative that’s both entertaining and thought-provoking.
Comparing Dani Rojas to Vaas from Far Cry 3, it’s clear that while Vaas remains the series' most iconic villain, Dani represents one of its best heroes. Their journeys and impacts on the player are different but equally memorable.
The auditory experience in Far Cry 6 is another high point. The music, ranging from local tunes to action-packed scores, enhances the gameplay experience. I often found myself lingering in cars just to listen to the songs, a testament to the game's sound design.
Far Cry 6 is a game that thrives on its character development, stunning visuals, and a world brimming with stories. While it may not have the most groundbreaking story in the franchise, it makes up for it with its detailed world and compelling characters. For those who play games for their stories, Far Cry 6 is a journey worth embarking on, a tale of tyranny, rebellion, and the spirit of revolution.
]]>A Shift from the Norm: Taylor Swift, who we all know for her catchy pop tunes and personal stories, took a different route with "Folklore." This album isn't just about her life; it's a mix of made-up stories and a few personal touches. It's like she's telling us tales from a magical forest in her mind.
Lyrical Genius: Taylor's always been great with words, but "Folklore" takes it to another level. The lyrics are like vivid stories - from tales of wild adventures to the raw emotions of doctors during the pandemic. It's storytelling at its best.
Cottagecore Vibes: The album gives off this 'cottage in the woods' feel. It's all about finding peace in nature, something we all longed for when stuck indoors during the lockdowns. Taylor uses this to express her need for escape - from the pandemic chaos and the pressures of fame.
Swift's decision to craft stories beyond her personal experiences adds depth and diversity to the album. This approach highlights her skill as a storyteller, weaving narratives that, while not autobiographical, are deeply influenced by her perspectives and experiences.
From the very first listen, "Folklore" felt like stepping into a misty, otherworldly forest. The album's overall tone was melancholic yet soothing, interspersed with moments of profound introspection and emotional rawness. Each track contributed to a cohesive narrative, creating an experience that was both deeply personal and universally relatable.
The Curtain Rises: "the 1"
As the opening chords of "the 1" played, I was immediately transported to a world tinged with the soft light of nostalgia. The song’s reflective lyrics about lost love and what-ifs, combined with its mellow melody, set the tone for the album. It's like sitting by a window on a rainy day, lost in thoughts of what could have been.
Echoes of the Past: "cardigan" and "the last great american dynasty"
"cardigan" took me on a journey through the complexities of a mature love. Its haunting melody, layered with rich, poetic lyrics, felt like a warm, familiar embrace. Then, "the last great american dynasty" unfolded a story that was not mine but felt strangely personal. Swift's storytelling prowess shone through, painting vivid pictures with her words.
The Heart of the Album: "exile" and "my tears ricochet"
"exile," a duet with Bon Iver, struck a chord with its portrayal of a failed relationship. The contrast between Swift’s and Bon Iver’s voices added depth to the narrative of miscommunication and regret. Following this, "my tears ricochet" was a raw, emotional experience. Its haunting melody and lyrics about betrayal and loss resonated deeply, as if echoing the pain of every broken heart.
A Soothing Balm: "mirrorball" and "seven"
"mirrorball" shimmered with a vulnerability, a soft confession of one’s desire to be loved and seen. It was like watching light dance off a disco ball in a dimly lit room – mesmerizing and a little melancholic. In "seven," there was a return to innocence, a reminiscence of childhood friendships and simplicity, offering a soothing balm to the album’s earlier intensity.
Reflective Moments: "august" and "this is me trying"
"august" felt like a fleeting summer romance, full of longing and wistfulness. Its airy melody carried the bittersweet tang of memories best left untouched. "this is me trying" was a raw acknowledgment of effort and struggle, a poignant reminder of the strength it takes to keep going.
The Twilight of the Album: "illicit affairs" and "invisible string"
"illicit affairs" was a journey into the complexities of forbidden love, its hushed tones and vivid imagery creating an intimate atmosphere. "invisible string," on the other hand, offered a sense of serendipity and connection, a reminder that life’s tapestry is intricately woven with threads of fate.
The Final Act: "mad woman," "epiphany," and "betty"
"mad woman" was a fiery expression of anger and defiance, a striking contrast to the album’s earlier tranquility. In "epiphany," there was a shift to a more somber tone, a reflection on the fragility of life. Finally, "betty" brought a sense of closure, a return to the roots with its more traditional narrative structure and harmonica-infused melody.
The Encore: "peace" and "hoax"
As the album neared its end, "peace" offered a raw, honest confession of one’s imperfections in love. And finally, "hoax" was like the last brushstroke on a canvas, a melancholic yet beautiful end to a masterful album.
"Folklore" by Taylor Swift is more than just an album; it's a journey through the human experience. Each track is a chapter in a larger story, one of love, loss, and the bittersweet taste of life. Swift has crafted an album that resonates on a deeply personal level, inviting listeners to find pieces of their own stories within her songs. As the final notes faded, I was left with a sense of having been part of something truly magical.
]]>📨 Mail Client: Apple Mail
📮 Mail Server: iCloud Custom Email Domain
📝 Notes: Apple Notes
✅ To-Do: Todoist
📷 Photo Shooting: iOS Camera
🎨 Photo Editing: Adobe Lightroom
📆 Calendar: Cron
📁 Cloud File Storage: iCloud
📖 RSS: NetNewsWire
🙍🏻♂️ Contacts: iOS Contacts
🌐 Browser: Safari
💬 Chat: WhatsApp, iMessages
🔖 Bookmarks: Raindrop.io
📑 Read It Later: Raindrop.io
📜 Word Processing: iA Writer
📈 Spreadsheets: Google Spreadsheets
📊 Presentations: Slides
🛒 Shopping Lists: Todoist
🍴 Meal Planning: N/A
💰 Budgeting and Personal Finance: N/A
📰 News: N/A
🎵 Music: Apple Music
🎤 Podcasts: Pocket Casts
🔐 Password Management: iCloud Keychain
🧑💻 Code Editor: VSCode
✈️ VPN: N/A
🎮 Gaming: Xbox One with Game Pass
🔎 Search: ChatGPT
🖼️ Screenshots: CleanShot X
]]>You know how we all enjoy watching those mesmerizing speed drawing and speed art videos on YouTube, right? I mean, who doesn't love seeing a blank canvas transform into a stunning piece of art in just a matter of minutes?
Well, I noticed that there wasn't much content like that for Figma designs, and being a designer myself, I decided to do something about it. So, guess what? I've started uploading my very own Figma speedrun videos!
I've already added 4 videos to my channel, and I promise there are more to come! I'd really appreciate it if you could check them out and let me know what you think. Are they good? Do they inspire you to create your own designs? And most importantly, is there anything else design-related you'd like to see on the channel? I'm open to all your suggestions and ideas!
Here's the link to my YouTube channel: https://www.youtube.com/@praveenjuge
LIKE AND SUBSCRIBE, or I will be slightly disappointed.
P.S: I don't design that fast; all videos are 2x sped up.
]]>My commit messages last week:
My commit messages now:
I've always admired how other people in popular open source projects and some of my peers take the time to write detailed commit messages and PR requests. In the past, I would often be impatient and write something quickly just to get it out of the way.
After transitioning to design full-time from development, the rare commits I make to my websites still don't have any meaningful commit messages, which I didn't mind until I had to go back to find something in the wall of commits.
But opencommit changed all that. As soon as I saw it, I went to OpenAI, got an API key, and tried it out. I have to say, I love the result! As you can see in the image above, it generates perfect commit messages, and I love it.
That's enough of me raving about it - try it out for yourself -> github.com/di-sukharev/opencommit .
]]>A number badge is just as it sounds, a number shown in a badge like UI. In our case, we are showing a badge next to the tab names that shows the number of posts in a particular view. Let’s go through the process of developing a UI for it.
There are lot of ways to denote this type of UI to the user, here are some of the early ideas I had.
Displaying the number right next to the tab names seemed a little off as it’s easy to read it as a continuous text with the tab name.
I decided that the last idea would be a better solution overall. As it’s easy to understand with the context of the tab name and it has really distinctive active states, it’s easier for people to glance at it while scrolling through it and know how many items are in the current list.
As we decided on how the UI is going to look, let’s create the needed figma component for it. We have two variants here, the active and normal state. Let’s make use of figma’s variants feature and create it.
We also have different themes that people can choose and a dark mode. As our solution is not that complicated, it will easily adapt to those scenarios too.
Now, it’s time to create the component in code, let’s take the green theme for example. We are going to use TailwindCSS to make these components.
<span
class="inline-flex rounded-full bg-gray-100 px-1.5 py-px font-mono text-xs font-medium text-gray-500"
>4</span
>
The code above will create the following UI. It has text, background and padding on the same element which works for the following normal badge variant.
But a problem comes when we go to the active variant. Here is all the colors we have:
The primary color is the color that is selected by the user so don’t have a light version of the color for the active badge’s background.
Now, we have to reduce the primary color’s opacity to denote that there is a brand background on the number badge.
For this, we have to add a decoration component inside the number badge so that it will have primary color as it’s background with reduced opacity.
The wrapping span
will have relative position so that we can have an absolute positioned empty background span
inside it. The order also matters here, inside the wrapper span, the background should come first and then the number span
should come which is also relatively positioned.
<span
class="text-primary relative ml-1 inline-flex rounded-full px-1.5 py-px font-mono text-xs font-medium transition"
>
<span
aria-hidden="true"
class="bg-primary absolute inset-0 select-none rounded-full opacity-5 transition"
></span>
<span class="relative">393</span>
</span>
This way we can easily add opacity to the background alone and we don’t need another color here to depict the light primary background color.
TailwindCSS needs to have the full class names present in our files to generate those css, so we need to have some decider functions that will help us set our variant colors.
import clsx from 'clsx';
export default function NumberBadge({ number = '', variant = 'light' }) {
const setTextColor = (color) => {
if (color === 'primary') return 'text-primary';
if (color === 'light') return 'text-gray-600';
if (color === 'white') return 'text-gray-600';
return 'text-gray-600';
};
const setBackgroundColor = (color) => {
if (color === 'primary') return 'bg-primary opacity-5';
if (color === 'light') return 'bg-gray-100';
if (color === 'white') return 'bg-white border border-gray-200';
return 'bg-gray-100';
};
return (
<span
className={clsx(
setTextColor(variant),
'relative ml-1 inline-flex rounded-full px-1.5 py-px font-mono text-xs font-medium transition'
)}
>
<span
aria-hidden="true"
className={clsx(
setBackgroundColor(variant),
'absolute inset-0 select-none rounded-full transition'
)}
/>
<span className="relative">{number}</span>
</span>
);
}
setBackgroundColor
and setTextColor
here will decide the color class names based on the variant that is passed through the component’s props.
Then you can use the NumberBadge component in your code.
<NumberBadge number="5" variant="light" />
Another small optimization is to use monospace font for the number so that it won’t move the layout when the number is dynamically updated.
]]>Let's create a new hugo site to test on, run the following commands in your terminal:
hugo new site hugo-tailwind-jit
cd hugo-tailwind-jit
We have to add some new files for tailwind to work, so run the following command in your terminal:
touch layouts/index.html static/tailwind.css package.json tailwind.config.js
We are going to transform static/tailwind.css
into static/main.css
, which we will include in our hugo layout:
In layouts/index.html
add the following code,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<h1 class="p-20 text-2xl font-bold">Hello World</h1>
</body>
</html>
Let's add our tailwind code, add the following code to static/tailwind.css
,
@tailwind base;
@tailwind components;
@tailwind utilities;
We have to add our build scripts for Tailwind's new CLI work for us.
In package.json
add the following code,
{
"scripts": {
"dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./static/tailwind.css -o ./static/main.css -w",
"build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./static/tailwind.css -o ./static/main.css --minify"
},
"dependencies": {
"tailwindcss": "^3.0.5"
}
}
And next the basic Tailwind config, where we mention our JIT mode, and tell where to purge.
In tailwind.config.js
add the following code,
module.exports = {
content: ['./content/**/*.md', './content/**/*.html', './layouts/**/*.html']
};
We only have tailwind as a dependency, install it by using the following code in your terminal:
npm install
For Tailwind watcher, run the following code in your terminal:
npm run dev
For Hugo Server, run the following code in another terminal tab:
hugo server
And go to
http://localhost:1313
to see the Tailwind JIT enabled hugo server in action.
Our build script will minify the css while building for production, you can use the following combined script for building minified production ready code.
npm run build && hugo --minify
And don't forget to add static/main.css
to your .gitignore
file. Otherwise the automatically generated css file will be pushed to your repo.
That's it. ✨
]]>//tailwind.config.js
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
'blue-gray': colors.blueGray,
'cool-gray': colors.coolGray,
gray: colors.gray,
'true-gray': colors.trueGray,
'warm-gray': colors.warmGray,
red: colors.red,
orange: colors.orange,
amber: colors.amber,
yellow: colors.yellow,
lime: colors.lime,
green: colors.green,
emerald: colors.emerald,
teal: colors.teal,
cyan: colors.cyan,
sky: colors.sky,
blue: colors.blue,
indigo: colors.indigo,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose
}
}
};
]]>Tested on Hugo Version 0.83.1 and Tailwind Version 2.1.2, learn how to install Hugo here .
Let's create a new empty hugo site to test on:
hugo new site hugo-tailwind
cd hugo-tailwind
Run the above command in your terminal. It will create a new folder called hugo-tailwind
which will contain your new Hugo site.
Let's create some basic layout files by using the following commands:
mkdir assets/css layouts/_default
touch layouts/index.html layouts/_default/baseof.html assets/css/main.css
In layouts/_default/baseof.html
, add:
<!doctype html>
<html>
<head>
<title>{{ .Title }}</title>
{{ $styles := resources.Get "css/main.css" }} {{ $styles = $styles |
resources.PostCSS (dict "inlineImports" true) }} {{ if hugo.IsProduction }}
{{ $styles = $styles | minify }} {{ end }}
<link href="{{ $styles.Permalink }}" rel="stylesheet" />
</head>
<body>
{{ block "main" . }}{{ end }}
</body>
</html>
In layouts/index.html
, add:
{{ define "main" }}
<h1 class="container mx-auto mt-5 text-3xl">Hello from the other side!</h1>
{{ end }}
Now, let's add tailwind.
Run the following command in your terminal to add a package.json file and complete the required steps.
npm init
Then install the following packages,
npm install tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest --save
In the root folder, run the following code:
npx tailwindcss init -p
This will create a tailwind.config.js
and postcss.config.js
file.
For proper purging add the following to your tailwind.config.js
file:
...
purge: {
enabled: process.env.HUGO_ENVIRONMENT === "production",
content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
},
...
Next, add the following to assets/css/main.css
to get the sweet tailwind css on your project.
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, if you run hugo server
in your terminal, you should see this:
That's all, tailwind css is integrated into your hugo site!
]]>Here are some of the tricks I used:
The only way you can wake up early is by going to bed early. Start slow, if you goto bed at 23:00, then try going to bed at 22:45 the next week, then 15 mins earlier the next week.
I go to bed by 22:00 with a book and sleep by 22:30 at the most. This is the main reason, I think, that I can wake up early. Whenever I go to bed later at night, I miss my 5:30 deadline in the morning.
Early to bed and early to rise makes a man healthy, wealthy, and wise. ~ Benjamin Franklin
I close all my devices at 21:00 and put my mobile in a shelf across the room while going to bed. This has several benefits:
You should have a strong reason to wake up early, or else you will rationalize yourself to sleep in the morning. My reasons are:
Reward’s work wonders to make habits, whenever you wake up early give yourself a reward that you look forward to.
It can be anything you like, one episode from your favorite TV show, coffee or even instagram. I forgot what I used to reward myself since I started so long ago. After some time you will also stop doing it for the rewards and do it just for the pleasure of waking up early.
Whatever you do, don’t go back to the bed.
At dawn, when you have trouble getting out of bed, tell yourself: “I have to go to work — as a human being. What do I have to complain of, if I’m going to do what I was born for — the things I was brought into the world to do? Or is this what I was created for? To huddle under the blankets and stay warm?”
So you were born to feel “nice”? Instead of doing things and experiencing them? Don’t you see the plants, the birds, the ants and spiders and bees going about their individual tasks, putting the world in order, as best they can? And you’re not willing to do your job as a human being? Why aren’t you running to do what your nature demands?
]]>You don’t love yourself enough. Or you’d love your nature too, and what it demands of you. ~ Marcus Aurelius, Meditations
The major takeaway for me was Cal Newport’s call to join the attention resistance movement.
Like most people, I don’t have the self-control to read a book if I have the opportunity to watch Netflix. So I use the following techniques to trick my brain into doing what I want even when I don’t want to do it.
Phone:
iPad:
MacBook:
PC:
After I set the main purpose for each device, I got into removing all the other cruft apps that I didn’t need.
I ended up with a total of 8 essential apps on my phone. I have rooted my phone, so I could remove Play Store and other unneeded apps. I installed third-party apps with APK from trusted sources which I manually update once a month.
iPad is my main entertainment device. Apart from some, I didn’t have the need to install apps that are already available in the browser.
As my work device, it has everything I need to get into a flow, attend meetings, and collaborate with my coworkers.
Already my screen time has reduced a lot, but here are more steps I followed:
Though I gain more time every day by getting rid of unnecessary apps, I seem to be spending a lot of time on video games lately which might be an effect of quarantine.
I also observed that playing games for 30 mins to an hour makes me happy. And playing for more than 4 hours a day makes me miserable.
So that's my next target. Play games for an hour a day and then move on to the next thing.
Here are some steps that Cal Newport suggests which I intend to do more of:
I love anything that is long-lasting. Trees, Tortoise, Hugh Hefner.
The modern web is volatile, constantly evolving, and prone to break at a thousand different points. It’s a constant challenge to support all the devices that can access web and its even more terrifying when you think about the future.
But the web has one big supporter on its side. Backward Compatibility. HTML and CSS written in 1999 can still be seen without any problem. Even JavaScript has excellent backward compatibility.
But how can we make our content last?
I came across this manifesto called Designed to Last by Jeff Huang in which he shares similar ideas. His advice was to make your build process simple and go back to HTML/CSS.
Here are the steps I’ve taken to ensure that this site works for the foreseeable future:
Netlify and GitHub are the only services that are needed to make this site work. I’ve brought this domain and hosted the static HTML files on netlify. The layouts and the content files are stored in GitHub.
I trust both of these services to work for a long time but I have backup plans if either of these services stopped working.
Hugo is a static site generator. It takes my layouts as HTML and content as Markdown and converts it into HTML format.
And most importantly, it is fast and easy to work with.
All the files on this website are served from praveenjuge.com
. The more the external domains you hit, the chances that something will break is higher. Better safe than sorry.
Analytics has some benefits, but 90% of analytics is just problems. My marketing brain always tells me to add some form of analytics to every website I make.
But I convinced myself to let go and removed the need to measure vanity metrics.
This site uses Merriweather font which is self-hosted on this website rather than using Google Fonts. This means that I have to update it to the latest version from time to time. But that’s better than having to hit Google’s domain.
I’m gonna be honest with you, I don’t like JavaScript that much. I write it all the time, I understand how it works, I even like React and other JavaScript frameworks. But it seems to be the cause of most of the bloat on the web today.
And for a blog site, I don’t see a reason to add any JavaScript.
I compress all the images before uploading it to GitHub repo so that everything stays easy to download at all network speeds.
And I use an Netlify Plugin called Checklinks to check for broken links in the build process.
I get lazy. Netlify doesn’t work anymore. I’ve moved on to carpentry.
Just like that, I may forget about this website. But I don’t want that to happen. So this blog post is my commitment to make this website last for at least the next 10 years.
Go ahead and bookmark this page. Visit it after 10 years. It will work as intended and will probably look the same.
But no one can promise 50 years.
]]>The saddest thing is that I didn’t even remember what I was watching. It was just a clockwork for my brain at that point. Wake up, open YouTube, watch a video, continue watching videos.
I write this blog on another Sunday afternoon, almost three months after, to say that I watched YouTube for just 10 minutes this week to watch a work-related video that a colleague sent.
I’m a little proud of myself, to tell the truth.
This is a log of everything I did to overcome this addiction. If it helped me, it might help someone else too.
YouTube is a community where billions of people share their talents, interests and findings with you.
That's the hook.
The real YouTube is a billion-dollar company where hundreds of researchers and designers manipulate an algorithm to deliver a low-quality video to you.
I thought about why I was addicted for a long time. It basically was three things,
This one was easy to justify for me, I like watching someone be good at something. Until I realized that this was a passive way of thinking about it.
I’m not raising my skill by watching this, so what’s the point? The only way I could get better at video games is to play it more, not by watching someone else play it.
Biggest trap of them all. Productivity, Self Help, Motivational channels might seem to have a good agenda on the onset but they can’t profit if you actually improve yourself.
Most of the YouTubers in this category are good people at heart. But they know that 90% of the people watching them won’t improve anything in their life. They just like the feeling of improving themselves.
Every time you watch one of the self-help videos, your brain plays a trick on you. It makes you think that you are actually improving yourself but when in reality you are just actually watching a video that you will forget in 40 minutes.
You will come for more when that rush is over. And YouTube tells them to create more videos quickly for us to consume.
For quick reference these are the only things they will say to you from now until eternity:
Ironically most of these YouTubers recommend you to read a book.
I’m a professional web designer, so it’s important for me to keep up with the latest developments in my field. Of course, that’s what I told myself.
Things always change but YouTube is not a place to capture it. YouTube videos seem to be the fast-food sector of the industry. Fast to the point but not impactful and everlasting.
I've found that written content like
are often more informative and educational. They let you,
One might argue developer tutorials are inherently good and I agree, but I usually get a better flow in my work from written tutorials.
These are mostly for entertainment, but as I distance myself from these more and more I find them to be passive entertainment.
Netflix has a collection of marvelously produced entertainment that will take my entire lifetime to watch. Why should I settle for this glut?
This was the cone of shame for me, I liked reality TV, YouTubers fighting with each other and mostly pointless drama. I was thinking about why I like this, and then a quote someone said came to me,
Don’t live on someone else’s life.
I was projecting. I have a simple life with no problems. So, I liked watching other people have problems. I thought I was superior to them in some way and that made me feel good.
Of course, I was the idiot watching videos while they simply got paid and went home.
Whenever I open YouTube, it shows me a carefully chosen list of videos that interests me. It’s a combination of what I recently liked, latest videos from the creators I like, trending videos from my location, and cute animals.
It's impossible not to click on any of these.
YouTube’s algorithm is very powerful at this point, probably the most sophisticated recommendation engine in the world. You simply can’t win it.
You can, however, not participate in its game. Some steps you can take:
Do not smash that like button
on any videos.
If you want to see a video again, download it to your drive. The YouTube video can be removed, blocked, or altered but you can always have what you want.
Do not hit that bell icon
.
Voluntarily having more notifications on your phone is the first step to becoming mindless and have other people dictate where you spend your time.
Pause Watched History and Search History.
Again, download important videos. 98% of what you watch is not worth it and the other 2% can easily be searched again.
Clear watch history, remove previously liked videos, clear out your comments. Do not give any indication to YouTube on what you like.
I even ran a puppeteer (automated script) to remove all the videos from my recommendation but it just pops back up. The Not Interested
option is not real.
Ultimately, be utilitarian on what you want.
If you want to learn How to Tie a Tie, search for it, learn it and close it. Don't needlessly subscribe, like or engage in any way.
A brand’s story is what you want other people to tell about your brand. YouTube’s story is,
YouTube is a community of people giving free information and entertainment.
YouTube is not a community.
Individual creators may create a community. But YouTube is a company that wants nothing but profits.
YouTube is not free.
Nothing Google does is free.
YouTube gives low-quality information and entertainment.
Only 5% of its millions of videos are actually helpful. Don’t take that burden of sifting through all that to find something you might like.
Here are some simple and actionable steps that I took over the months,
Cancelling YouTube Premium
If you get pissed off at the ads like I do, then it’s good. You will quit the video soon.
Turn off notifications
Taylor Swift’s new music video is not that important to notify you. No one should have the right to disturb you anytime they want.
Reducing subscriptions
Go through your subscription list and remove anyone who you don’t need in your life anymore. I followed this and removed almost 300 subscriptions and I don’t even remember what they were now.
Uninstalling apps
YouTube is available everywhere, it doesn’t need to be on your phone or tablet. You can always watch in your mobile browser for something urgent.
Mobile apps have 30% higher engagement rate. We actively go back to an app more often than a website. That’s why everyone keeps pushing you to download their app. Don’t.
Remove all subscriptions
After some time, I naturally removed all my subscriptions, I found alternate sources to topics I was interested in. Books, Newsletters, Spotify, and Netflix was enough for me.
Tip: Subscribe to a channel called Sub with no videos
to reduce the recommendations in your subscriptions tab.
Add alternate habits
My viewing hours reduced exponentially at this point. Now I opened YouTube, searched for some good creators, watched their latest video, and closed the site.
But to quit fully I knew I needed to replace YouTube time with something else. This can be a different thing for you and me. I started writing more often. The silence is great for creative thoughts and reflection.
Today, after all this, I realized that I’m not addicted to YouTube anymore. I should be careful to make sure I don’t go back to it slowly. But I have high hopes for the future.
And always remember,
]]>"Too much of anything can make you sick" ~ Cheryl Cole
Every project I start, starts with the problem of facing an empty canvas. That blank white screens that stare at me.
Thousands of thoughts run through my head,
While these are important questions to ask, these are the dialogues that will stop you from completing anything.
Ask these questions at the end.
Always be stupid and just start your work without thinking. You will always have time to improve anything.
For me, adding the first object is the hardest part.
My advice for beginners and to myself is to start with something, add the first stroke, add the first text, add the first rectangle. Then, slowly, you go into a flow state where you forget about the difficulty of the situation and just get things done.
You should face adversity head-on and you will always find that it is 10x times easier than you imagined.
VINCENT VAN GOGH: The blank canvas by Zen Pencils
"Many painters are afraid of the blank canvas, but the blank canvas is afraid of the truly passionate painter who dares-and who has once broken the spell of 'you can't.'" ~ Vincent Van Gogh
Reminder to myself: Come back and read this whenever I start something new.
]]>Rating: 10/10, would definitely read again.
This book is written by Steven Pressfield who is an author of both fiction and non-fiction works. After reading this book, out of curiosity, I read his fiction works like Gates of Fire which delivers spectacularly on the grit and discipline of the Spartan warriors.
It’s not the writing part that’s hard. What’s hard is sitting down to write.
This book is a quick read on why we put off doing our work and how to procrastinate less. Pressfield expresses these by telling us about his own problems while writing his books and how he overcomes them. This will be a good read for anyone who has a creative pursuit but can't seem to fill the gap of becoming a pro.
The War of Art is divided into three parts,
Pressfield uses the term Resistance
to label the thing that distracts and prevents anyone from doing their work. He argues that Resistance comes to us whenever we attempt to improve our long-term growth, health, or integrity.
What keeps us from sitting down (to do our work) is Resistance.
Resistance cannot be seen, touched, heard, or smelled. But it can be felt. We experience it as an energy field radiating from a work-in-potential. It’s a repelling force. It’s negative. Its aim is to shove us away, distract us, prevent us from doing our work.
Resistance never goes away, even if you complete one project, it comes to the next one with twice as much strength.
There is however one thing we can do to deal with resistance, turning pro.
Here are the characteristics of a professional:
Someone once asked Somerset Maugham if he wrote on a schedule or only when struck by inspiration. “I write only when inspiration strikes,” he replied. “Fortunately it strikes every morning at nine o’clock sharp.” That’s a pro.
Some qualities that define us as a professional:
There’s no mystery to turning pro. It’s a decision brought about by an act of will. We make up our minds to view ourselves as pros and we do it. Simple as that.
In this part, Pressfield goes to the metaphysical by using terms like muses and angels to dramatize how we get inspired to do our work. I quite like the idea of muses watching over us and calling us to do our best work. But it's not for everyone.
When we sit down, day after day and keep grinding, something mysterious starts to happen. A process is set into motion by which, inevitably and infallibly, heaven comes to our aid. Unseen forces enlist in our cause; serendipity reinforces our purpose.
This is the other secret that real artists know and wannabe writers don’t. When we sit down each day and do our work, power concentrates around us. The Muse takes note of our dedication. She approves. We have earned favor in her sight. When we sit down and work, we become like a magnetized rod that attracts iron filings. Ideas come. Insights accrete.
Clearly, some intelligence is at work, independent of our conscious mind and yet in alliance with it, processing our material for us and alongside us.
This is why artists are modest. They know they’re not doing the work; they’re just taking dictation. It’s also why “noncreative people” hate “creative people.” Because they’re jealous. They sense that artists and writers are tapped into some grid of energy and inspiration that they themselves cannot connect with.
Of course, this is nonsense. We’re all creative. We all have the same psyche. The same everyday miracles are happening in all our heads day by day, minute by minute.
The Ego and the Self:
Creative work is not a selfish act or a bid for attention on the part of the actor. It’s a gift to the world and every being in it. Don’t cheat us of your contribution. Give us what you’ve got.
]]>Here is how I did it and let's see what’s good and what's bad about this setup.
I got this whole idea when GitHub made private repo free for personal use. I simply created a private repo, cloned it to local for offline access.
Now, I just have to push to the repo whenever I make a change to my files. I know it would lead to many unnecessary commits but if I want I can squash commits anytime.
Be sure to clone it locally to take notes on.
Now to the editor, I like to write my notes on markdown format cause it's easily parsable on the web and it's easy to write it.
I already use VS Code for development and it has a sweet markdown viewer, so we will be using that for editing the notes.
And I also use these extensions:
Markdown linter is not really necessary but it does help when you are learning markdown for the first time.
This helps in pushing the markdown files to git whenever you save it. After installing this extention, in VS code settings.json, add this:
{
"runOnSave.commands": [
{
"match": "{{ path_to_folder }}.md$",
"command": "pushnotes",
"runIn": "terminal"
}
]
}
Here the pushnotes
command executes in the terminal whenever a save occurs. And now in your bash_profile
add these lines:
pushnotes() {
cd && cd projects/notes
now=$(date '+%A %d %m %Y %X')
git add . -v
git commit -a -s -v -m $now
git push -v
}
These will push your code to GitHub with the time and date as the commit messsage. So now, whenever you save a file, you push to the repository.
After some days, I noticed that starting up VS Code and going to my notes folder was taking a lot of time, precious seconds that I could spend watching Netflix.
So I made a automator script to open my notes in VS Code with a keyboard shortcut from any application.
You can reproduce it by:
Open Automator App
Create New Quick Action
Change Workflow receives current
to no input in any application
Drag Run Shell Script from the sidebar to the workflow pane
Add opennotes
to the text box
Now go to System Preferences > Keyboard > Shortcuts and Services in the left pane. Find the service you just created, it should be under General.
You should see add shortcut when you hover over it, I have used CMD + SHIFT + '
as my shortcut.
And finally add this code to your bash_profile
to actually open VS code:
alias opennotes='cd && cd projects/notes && code .'
I've been using this setup for 2 months and I love it so far, but I don't know how long I can go without editing on my mobile or iPad. For now I've been adding tasks in Todoist and copying to my notes when I'm on my laptop.
So there are few problems, but in this moment I'm happy with this.
]]>You can download the latest version of Audacity
here
. Make sure it's the latest version, I'm on a mac and at the time of writing this the latest version is 2.3.2
Once you open audacity you can go to Tools -> Macros...
to open this window.
Click on New
to create a new macro and give a new name to your macro.
On the edit steps pane, click on the Insert
button. You will see another window where you can add the steps to be taken when this macro runs.
In our case, we need to speed up our audiobooks. Now you will see the option to change speed, don't use that unless you want to hear chipmunks. Use the Change Tempo
option and click on edit parameters in the same window.
Here you can increase the percentage to match with the speed you want, for 1.5x
speed of the original audio, increase the percentage to 50
, for 2.0x
change percentage to 100
. Then click on ok, you can see the step added.
By doing this, it won't get saved anywhere, so let's add another step. Click on insert and find the Export as MP3
step. This will make sure the contents would be exported.
If all goes well you should see something like this:
Now click on Apply Macro to: Files
button below and select the files you want to convert.
When you open the files the macro would start to run and after completion, you will see the converted files in the same origin folder under a new folder name called macro-output
.
Make sure you save the macro for future use. That's all, enjoy!
]]>