
<p class="wp-block-paragraph">If you&#8217;ve stayed apprised of all the latest advancements of LLMs, you&#8217;ll know that they are now incredibly capable machines that can build literally <em>anything</em> you can imagine. Well, in code anyway. (But I&#8217;m sure that they&#8217;ll dominate the physical space too in the near future, but I digress&#8230;)</p>



<p class="wp-block-paragraph">Today, I decided to take the accumulated learnings of harnessing these powerful tools that I used to power my W2 and instead employ them to improve my long lost personal projects, including the site from which you are reading this post: <a href="https://daniely.im">https://daniely.im</a>. This domain was initially a small space that I carved out for myself on the web, meant to be an entry point for the world to view all of my proudest creations. That, of course, never panned out as I imagined. Higher priorities in my career or life always trumped any justification for the hours necessary to research techniques and iterate on projects mostly for my own indulgence. Well, AI-assisted coding (or <a href="https://antirez.com/news/159">automatic coding</a> as antirez says) completely changed the calculus. We are now at a point in software engineering where the time-consuming, annoying, or run-of-the-mill boilerplate programming tasks&#8211;the not-so-fun parts of programming&#8211;can be completely shoved under the rug with a well-crafted prompt. This means that the previous limitations in time, effort, and patience required to build the product you desire are significantly reduced; we&#8217;re now only limited by our own ambitions and imagination.</p>



<h2 class="wp-block-heading">The Ambition</h2>



<p class="wp-block-paragraph">There are so many kinds of personal websites out there. I see many of my SWE peers standing up a domain of their own with varying degrees of effort. Most are just static HTML pages intended to be a public curriculum vitae for interested parties. But given my background in frontend engineering, I felt that there was an onus on me to use my website to showcase the full extent of my work.</p>



<p class="wp-block-paragraph">With that on my shoulders, I&#8217;ve always had strong opinions of how <em>my</em> personal website should look: It should load quickly; it should be slick. It should strive to be simple as possible on the surface, but with enough complexity that enlightens the overall experience. It shouldn&#8217;t be too loud or too provocative, nor should it be banal. Most importantly, it should represent <em>me</em>. And what others might assume of my capabilities given my profession.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-8f761849 wp-block-group-is-layout-flex">
<p class="wp-container-content-9cfa9a5a wp-block-paragraph">Fighting against ever decreasing motivation, I decided to take the plunge and publish something simple a few years ago during COVID lockdowns (2021):</p>



<figure class="wp-block-image size-full is-style-default"><a href="https://blog.daniely.im/wp-content/uploads/2026/07/image-2.png"><img loading="lazy" decoding="async" width="783" height="455" src="https://blog.daniely.im/wp-content/uploads/2026/07/image-2.png" alt="" class="wp-image-512" srcset="https://blog.daniely.im/wp-content/uploads/2026/07/image-2.png 783w, https://blog.daniely.im/wp-content/uploads/2026/07/image-2-300x174.png 300w, https://blog.daniely.im/wp-content/uploads/2026/07/image-2-768x446.png 768w" sizes="auto, (max-width: 783px) 100vw, 783px" /></a></figure>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-8f761849 wp-block-group-is-layout-flex">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-8f761849 wp-block-group-is-layout-flex">
<p class="wp-block-paragraph">It&#8217;s a very simple site that follows a cheeky dictionary-like theme: a word, a pronunciation, a definition and related words. Much inspiration was taken from how Oxford structured their entries (though the one pictured appears to be doctored in order to deliver a joke).</p>



<div class="wp-block-cover alignleft"><img loading="lazy" decoding="async" width="683" height="1024" class="wp-block-cover__image-background wp-image-509" alt="" src="https://blog.daniely.im/wp-content/uploads/2026/07/image-1-683x1024.png" data-object-fit="cover" srcset="https://blog.daniely.im/wp-content/uploads/2026/07/image-1-683x1024.png 683w, https://blog.daniely.im/wp-content/uploads/2026/07/image-1-200x300.png 200w, https://blog.daniely.im/wp-content/uploads/2026/07/image-1-768x1152.png 768w, https://blog.daniely.im/wp-content/uploads/2026/07/image-1.png 1024w" sizes="auto, (max-width: 683px) 100vw, 683px" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size wp-block-paragraph"></p>
</div></div>
</div>
</div>



<p class="wp-block-paragraph">While it felt good to have <em>something</em> out there on the web, there were parts of the site that never really functioned exactly how I had imagined it, but alas, time, effort, and patience were too scarce to do anything about it&#8230;</p>



<h2 class="wp-block-heading">That is, Until Now</h2>



<p class="wp-block-paragraph">Fast forward to 2026: LLMs are here ready to do your bidding. They&#8217;re efficient, infinitely patient, and are just <em>down</em> to build anything that your heart desires so as long as you stay under your token allowance.</p>



<p class="wp-block-paragraph">My original ambitions for the website was to not only convey information but to also serve an experience. That meant a tasteful collection of animations, chained transitions, and special effects to give a dull dictionary some polish. As I was doing some research on interactivity, my past experience steered me towards <a href="https://www.framer.com/">Framer Motion</a>. Much to my surprise, they&#8217;ve gone completely pro since I last checked. Their front page is no longer a Github repo but a very polished marketing page touting a full-blown website builder IDE, a la Dreamweaver. Framer seems to have ascended to be in competition with Webflow and is surely beyond the simple animation library that I remembered.</p>



<p class="wp-block-paragraph">When I asked Claude about the kinds of animations I wanted to build, it thoughtfully arranged the pros and cons of using Framer but also offered to fill me in about <a href="https://gsap.com/">GSAP</a>, or the GreenSock Animation Platform. I haven&#8217;t heard about this library before, but after reading the timeline API and nodding along in agreement, I knew that I had to give it a try.</p>



<p class="wp-block-paragraph">What I&#8217;ve written up below is the adventure I&#8217;ve had in building various aspects of the site using GSAP.</p>



<h3 class="wp-block-heading">Animation Chaining / Queuing</h3>



<p class="wp-block-paragraph">There are many primitives available to &#8216;good enough&#8217; craft animations in vanilla JS and CSS, but to get the professional quality animations that you&#8217;ve always dreamed of, you&#8217;ll need to update your tooling and an expressive DSL to crisply define the intended interaction. This is where GSAP&#8217;s <code>timeline</code> API shines. </p>



<p class="wp-block-paragraph">Specifically for my website, I wanted to chain together the following in sequence:</p>



<ul class="wp-block-list">
<li>Complete the page transition</li>



<li>Trigger the typing animation of the header word</li>



<li>Trigger the outro for the cursor once done typing</li>



<li>Fade in the pronunciation and definition body</li>



<li>Fade in the &#8220;See Also&#8221; section</li>
</ul>



<p class="wp-block-paragraph">If I wanted to wire this by hand, it either be a rat&#8217;s nest of callbacks or a long chain of Promises with some serious time accounting. I don&#8217;t want to do any of that. So here comes GSAP:</p>



<pre class="wp-block-code"><code>const tl = gsap.timeline();
tlRef.current = tl;
typeHeaderText(tl, headerTextEl, text, speed);
tl.add(buildCursorOutro(cursorEl), 'typed');
// And a little more hand-waving for the fade-in effects
tl.add(fadeIn(body), 'typed');
tl.add(fadeIn(seeAlso), 'typed');</code></pre>



<p class="wp-block-paragraph">Very easy. And best of all, Claude is <em>very good</em> navigating its way through this API.</p>



<h3 class="wp-block-heading">Page Transitions</h3>



<p class="wp-block-paragraph">daniely.im is a Next.js app and acts like a SPA for the most part. Though you can get fancy and build server-side components with Next, I use none of that and simply rely on the router to map URL paths to JS bundles. Often these navigation events are painfully simple. If you&#8217;re building a data intensive webapp, you may add a Suspense loading spinner somewhere on your UI, but more often than not, route transitions are dull, synchronized updates to a part of or the entire screen.. I wanted something akin to a page turn where the current route is a layer on top of the next, and the screen peels to reveal the next layer.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><a href="https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-seam.png"><img loading="lazy" decoding="async" width="364" height="291" data-id="519" src="https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-seam.png" alt="" class="wp-image-519" srcset="https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-seam.png 364w, https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-seam-300x240.png 300w" sizes="auto, (max-width: 364px) 100vw, 364px" /></a><figcaption class="wp-element-caption">If you can catch it, you&#8217;ll see that the next page is rendered <em>under</em> the current page, allowing us to execute this wipe transition.</figcaption></figure>



<figure class="wp-block-image size-large"><a href="https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-slow.gif"><img loading="lazy" decoding="async" width="706" height="558" data-id="521" src="https://blog.daniely.im/wp-content/uploads/2026/07/page-transition-slow.gif" alt="" class="wp-image-521"/></a><figcaption class="wp-element-caption">1/4 speed</figcaption></figure>
</figure>



<p class="wp-block-paragraph">How was this achieved? We mount a special intermediary component called a <code>WipeTransition</code> which prepares for the transition by taking a snapshot of the current page before allowing the router to navigate to the next page. With a snapshot of the old page, we are able to render a simple animation of a banded sweep bar where one side is the old and the other is the &#8220;new&#8221;/current route.</p>



<h3 class="wp-block-heading">Text Expansion</h3>



<p class="wp-block-paragraph">Another trick: &#8220;to be simple on the surface but to hold hidden complexity&#8221;. Here I wanted this idea of momentary expanding and collapsing tokens so that by default we see the concatenated view, but if the user seeks more information, they can hover over to gain the context in-situ.</p>



<p class="wp-block-paragraph">This required a few iterations to get right. The main challenges here are:</p>



<ul class="wp-block-list">
<li>When replacing text, accurately measuring the replaced text&#8217;s width and rendering that space in the layout in order fill the space with &#8216;typed&#8217; characters shortly after</li>



<li>When expanding text, tokenizing each word, measuring their width, and then injecting those elements inline to ensure that text wrapping will still work</li>



<li>Defining the behavior and impact for mobile users since they don&#8217;t have a cursor hover state</li>
</ul>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><a href="https://blog.daniely.im/wp-content/uploads/2026/07/expansion-normal.gif"><img loading="lazy" decoding="async" width="628" height="446" data-id="524" src="https://blog.daniely.im/wp-content/uploads/2026/07/expansion-normal.gif" alt="" class="wp-image-524"/></a><figcaption class="wp-element-caption">Flowing text expansion / collapsing</figcaption></figure>



<figure class="wp-block-image size-large"><a href="https://blog.daniely.im/wp-content/uploads/2026/07/expansion-quarter.gif"><img loading="lazy" decoding="async" width="628" height="446" data-id="526" src="https://blog.daniely.im/wp-content/uploads/2026/07/expansion-quarter.gif" alt="" class="wp-image-526"/></a><figcaption class="wp-element-caption">1/4 speed</figcaption></figure>
</figure>



<p class="wp-block-paragraph">All in all, the interaction feels as if someone were to wrest control over your keyboard and started typing where the cursor was positioned. Those who have worked collaboratively in Google Docs know all too well how this interaction feels. But as a simulation of that behavior, it was moderately difficult to recreate due to the edge cases.</p>



<h3 class="wp-block-heading">Typing Simulation</h3>



<p class="wp-block-paragraph">This effect was the least technical to execute, but the effort to reward ratio was very high so it&#8217;s worth mentioning. Throughout the site, you&#8217;ll see headers, underlined words, and numbers animate intermediate values (blank space -> character or many unrelated characters settling to the real value over time).</p>



<p class="wp-block-paragraph">These too are controlled by GSAP&#8217;s Timeline API, for example:</p>



<pre class="wp-block-code"><code>const tl = gsap.timeline({ delay });
for (let i = 1; i &lt;= SCRAMBLE_TICKS; i += 1) {
  const isLast = i === SCRAMBLE_TICKS;
  const offset = scrambleEase(i / SCRAMBLE_TICKS) * SCRAMBLE_DURATION;
  tl.call(
    () => setDisplay(isLast ? finalText : randomDigits(finalText.length)),
    undefined,
    offset,
  );
}</code></pre>



<h2 class="wp-block-heading">Conclusion</h2>



<p class="wp-block-paragraph">In conclusion, this was all a very exciting exercise of being able to achieve some ambitious transitions that would&#8217;ve otherwise been a nightmare to embark on my own. Thanks to LLMs, polish projects like these are fun again. In this mode of operation, your contributions towards the end result mostly become: 1) how well you can convey the vision you have in your head into prose and 2) how to make the output of the code AI-legible so that the agent has a feedback loop to work against.</p>



<p class="wp-block-paragraph">My hope is that this semi-rant-y and prosaic post helps motivate someone to attempt ambitious animations of their own. It&#8217;s no longer treacherous or reserved for the professional marketers and designers! At the very least, take a gander at the <a href="https://gsap.com/showcase/">GSAP Showcase</a> sites and be amazed at what&#8217;s possible with the modern web.</p>



<p class="wp-block-paragraph"></p>


An LLM-Powered Facelift


<p class="wp-block-paragraph">For a couple years now this blog existed on a [now defunct] domain <a href="https://yimd.net">https://yimd.net</a> and has been left to rot mainly due to my indifference in maintaining a pretty website (sorry!). But actually, the real reason was due to the technical hurdles necessary to make the personal site and blog that I <em>want</em> to build within the narrow confines of a <a href="https://github.com/danyim/yimd">custom WordPress theme</a>.</p>



<p class="wp-block-paragraph">Now if you&#8217;ve never had to deal with building a WordPress theme in PHP (lucky you), I&#8217;ll say that I personally don&#8217;t find it to be the most pleasant development experience. This is likely due to my ignorance, inexperience, and&#8211;most definitely&#8211;impatience with learning PHP. I heard modern PHP can be great, and I mean no disrespect to the numerous PHP-specialized developers out there. However given that a large chunk of my experience is in modern Javascript and React, I was dismayed by the lack of PHP tooling available to me compared to what I&#8217;m used to. Prettier, ESLint, Typescript, and rich IDE annotations, anyone? </p>



<p class="wp-block-paragraph">So you can imagine how hard it was to motivate myself to slog through <em>pages</em> of inline PHP tags to incrementally make my vision come alive.</p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://blog.daniely.im/wp-content/uploads/2020/10/image-2-1024x457.png" alt="" class="wp-image-333" width="427" height="190" srcset="https://blog.daniely.im/wp-content/uploads/2020/10/image-2-1024x457.png 1024w, https://blog.daniely.im/wp-content/uploads/2020/10/image-2-300x134.png 300w, https://blog.daniely.im/wp-content/uploads/2020/10/image-2-768x343.png 768w, https://blog.daniely.im/wp-content/uploads/2020/10/image-2.png 1232w" sizes="auto, (max-width: 427px) 100vw, 427px" /><figcaption>Sigh</figcaption></figure></div>



<p class="wp-block-paragraph">Well, the time has come to change it all thanks to <a href="https://www.gatsbyjs.com/">GatsbyJS</a>!</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="226" height="112" src="https://blog.daniely.im/wp-content/uploads/2020/10/image.png" alt="" class="wp-image-280"/><figcaption>Gatsby, save us all from writing PHP</figcaption></figure></div>



<p class="wp-block-paragraph">In case you missed the memo, GatsbyJS is a new-ish CMS platform based on modern web tooling and written entirely in Javascript. The engine encapsulates a common toolchain (Webpack, React, Node) into a single package/framework and allows you to build amazing static web pages with the power of the JS ecosystem. The plugin community around this project is incredibly rich, making it a strong contender against WordPress&#8217; longstanding reign.</p>



<h2 class="wp-block-heading">The Migration</h2>



<p class="wp-block-paragraph">After a few days of tinkering around, I&#8217;m happy to report that the site is now running WordPress as essentially a headless CMS (!) with a GraphQL endpoint that&#8217;s accessible to Gatsby via <a href="https://www.gatsbyjs.com/plugins/gatsby-source-wordpress-experimental/">gatsby-source-wordpress-experimental</a>.</p>



<p class="wp-block-paragraph">It was difficult at first to grasp what the publishing workflow would be after incorporating Gatsby, but I seemed to have figured it out now:</p>



<ul class="wp-block-list"><li>New posts/content will be posted and edited using the WordPress administrative UI via <a href="https://blog.daniely.im ">https://blog.daniely.im </a>(WordPress site with custom theme)</li><li>WordPress pages will <strong>not</strong> be used, since it requires hand-wiring custom page-*.php templates into the theme</li></ul>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://blog.daniely.im/wp-content/uploads/2020/10/image-1-421x1024.png" alt="" class="wp-image-284" width="214" height="520" srcset="https://blog.daniely.im/wp-content/uploads/2020/10/image-1-421x1024.png 421w, https://blog.daniely.im/wp-content/uploads/2020/10/image-1-123x300.png 123w, https://blog.daniely.im/wp-content/uploads/2020/10/image-1.png 582w" sizes="auto, (max-width: 214px) 100vw, 214px" /><figcaption>Yeah, no thanks PHP 😀</figcaption></figure></div>



<ul class="wp-block-list"><li>New pages, the landing page (most important), and overall site layout will be generated by Gatsby. With Gatsby, it allows me to build pages with React and all the great tools available to the frontend JS ecosystem.</li></ul>



<p class="wp-block-paragraph">This setup frees me from the pain of maintaining a WordPress theme chock full of inline PHP and WordPress-specific APIs/registries/directives. Which makes me wonder: how do the folks who monetize WP themes do it?</p>



<h2 class="wp-block-heading">Alternatives Explored</h2>



<h3 class="wp-block-heading">Separate Gatsby Landing Page and WordPress Blog</h3>



<p class="wp-block-paragraph">One route I considered was to separate my landing page and blog entirely, with the former running Gatsby and the latter remaining on WordPress. However as I dug more into how the Gatsby &lt;-&gt; WP integrations have matured, I found that the WP Gatsby and WP GraphQL WP add-ons have really pushed the envelope of merging the two worlds since I last left it.</p>



<p class="wp-block-paragraph">The experimental add-on is now considerably faster when Gatsby scrapes the posts than before with the REST API.</p>



<h3 class="wp-block-heading">Ghost</h3>



<p class="wp-block-paragraph">One of the newer players in the CMS game is <a href="https://ghost.org/">Ghost</a>. Though the idea sounds interesting and was <a href="https://news.ycombinator.com/item?id=21322712">praised by members of HackerNews</a>, I found that it&#8217;s significantly more difficult to setup a deployment than the drag-and-drop FTP install experience that WordPress is famous for. Their documentation seem to suggest that the subscription-based PaaS service is the easiest option, and I don&#8217;t think that&#8217;s any mistake.</p>



<p class="wp-block-paragraph">Though the team offers an <a href="https://hub.docker.com/_/ghost">official Docker image</a>, I haven&#8217;t been able to find  tutorials for a self-hosting Ghost on a cloud provider, so that discouraged me from experimenting pretty quickly.</p>



<p class="wp-block-paragraph"></p>



<h2 class="wp-block-heading">In the End</h2>



<p class="wp-block-paragraph">Overall, I&#8217;m quite happy with the setup I&#8217;ve built and think it&#8217;ll be a great foundation to build exactly what I envisioned. It strikes the balance of customizability and functionality by leaving the site building to React and the CMS features (such as syntax highlighting, comments, post tagging) to WordPress.</p>



<p class="wp-block-paragraph">More updates on what that might be to come soon.</p>


Site migration to GatsbyJS


<p class="wp-block-paragraph">It&#8217;s been a while since I took a deep dive into a Linux distro since switching from Windows to a Mac several years ago. Nightmares of missing drivers and endless configuration drew me away from exploring any further. Luckily, OSX/macOS&#8217;s user-friendly and Unix-like environment was enough to quell the hacker dreams I had as a budding developer. After four years, I&#8217;ve since perfected my development environment on my Mac with my <a href="http://www.zsh.org/">zsh</a>, <a href="https://github.com/tmux/tmux/wiki">tmux</a>, and a slew of text editors fine-tuned ad nauseam to my liking. Since reaching &#8220;developer nirvana&#8221; and seeing my productivity peak, I haven&#8217;t found a compelling reason to venture out to Linux or, really, to any other OS for that matter.</p>



<p class="wp-block-paragraph">However, lately I&#8217;ve been hankering to explore free and open-source alternatives to the Apple ecosystem I&#8217;ve willingly locked myself into. Although I can&#8217;t deny the productivity gains from great suite of apps available on macOS, I feel like I&#8217;m losing control of my already eroding personal data in this day and age. As a result, I decided to experiment with one of the most popular Linux distributions similar to macOS: <a href="https://elementary.io/">Elementary OS</a>.</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1024" height="576" src="https://blog.daniely.im/wp-content/uploads/2017/09/elementary-mhs-notes-1024x576.jpg" alt="" class="wp-image-243" srcset="https://blog.daniely.im/wp-content/uploads/2017/09/elementary-mhs-notes-1024x576.jpg 1024w, https://blog.daniely.im/wp-content/uploads/2017/09/elementary-mhs-notes-300x169.jpg 300w, https://blog.daniely.im/wp-content/uploads/2017/09/elementary-mhs-notes-768x432.jpg 768w, https://blog.daniely.im/wp-content/uploads/2017/09/elementary-mhs-notes.jpg 1191w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure></div>



<p class="wp-block-paragraph">First off, Elementary is a beautiful OS that clearly takes some design cues from macOS. Out of the box, the installation and desktop experience is miles ahead of any other Linux distributions I&#8217;ve tried. However, as macOS-like as it tries to be, I still found several friction points that prevented me from transitioning over smoothly as a Mac user.</p>



<p class="wp-block-paragraph">Below are some of the steps I took to turn my regular MacBook into a dual booted machine with an Elementary OS install with the most Mac-like settings. This post is by no means exhaustive, but it covers steps that I could not find in other guides.</p>



<p class="wp-block-paragraph"><strong>I would recommend you use this guide as a <em>supplement</em> to the countless Elementary OS install tutorials that are out there. </strong><strong>This article will only guide you through specific steps for setting up a <span style="text-decoration: underline;">Macbook</span> to play nicely with Elementary.<br></strong></p>



<p class="wp-block-paragraph">With that said, enjoy!<strong><br></strong></p>



<h2 class="wp-block-heading">Creating the Dual Boot Setup</h2>



<p class="wp-block-paragraph">Before you begin, you will need to reboot your machine into recovery mode in order to disable the <em>System Integrity Protection</em> (SIP) flag via <code>csrutil disable</code> in the terminal. After you boot the machine with this setting off, it will allow you to install the <a href="http://www.rodsbooks.com/refind/">rEFInd boot loader</a>, which is required to dual boot your machine.</p>



<p class="wp-block-paragraph"><strong>When I attempted this step, I found that I could not install rEFInd unless I manually mounted the EFI partition first</strong> via <code>sudo diskutil mountDisk /dev/disk0s1</code> (and of course replace <code>/dev/disk0s1</code> with the correct disk identifier on your machine).</p>



<h2 class="wp-block-heading">Replacing Spotlight/Alfred</h2>



<p class="wp-block-paragraph">I&#8217;m a huge fan of <a href="https://www.alfredapp.com/">Alfred</a> on macOS, and the first thing I noticed with a fresh Elementary install was that Command+Space wasn&#8217;t bound to anything useful. Luckily, there is a project called <a href="https://github.com/albertlauncher/albert">Albert</a> (see the similarities?) that has the core features you would expect from a quick launcher.</p>



<p class="wp-block-paragraph">Install via apt-get, add it to your startup applications in System Settings &gt; Applications &gt; Start, and in Albert&#8217;s preferences, set the keyboard shortcut to Super+Space (Command+Space).</p>



<h2 class="wp-block-heading">Enabling Mac-like Keyboard Bindings</h2>



<p class="wp-block-paragraph">This was the most difficult part for me, as I couldn&#8217;t find <em>any</em> definitive resources online regarding this crucial step in closing the loop on the Mac-like experience.</p>



<h3 class="wp-block-heading">&nbsp;</h3>



<h3 class="wp-block-heading">Command Key Aliases</h3>



<p class="wp-block-paragraph">Maybe other Linux users prefer sticking with Control+V for Paste, but I find it much more comfortable to use the command key instead. One would naively think swapping Command and Control through xkb would be enough as I have, but there are unfortunately more nuances to it.</p>



<p class="wp-block-paragraph">Although Command and Control are switched for clipboard operations and other shortcuts, we still need Control to be mapped to the physical key for the terminal, such as Control+C for exiting commands. Another reason for this is for tmux. I like most others have my tmux prefix key mapped to Control+A, which is rendered useless when the keys are swapped.</p>



<p class="wp-block-paragraph">Therefore, the current solution which was worked well for me is to <strong>leave Control and Command as-is and use the Autokey app to create keyboard shortcut aliases for common operations.</strong></p>



<p class="wp-block-paragraph">One StackOverflow answer <a href="https://elementaryos.stackexchange.com/a/7946">hit the mark</a> but didn&#8217;t provide complete details. So here is the complete solution that I created:</p>



<p class="wp-block-paragraph">Run these commands to unbind the defaults that will coincide with our keybindings: repo here.</p>



<ol class="wp-block-list"><li>Install Autokey with `sudo apt-get install autokey-gtk`</li><li>Open Autokey, set it as a startup application either through Autokey&#8217;s settings or through Elementary OS&#8217;s system preferences</li><li>Create a folder inside Autokey, which will map to a directory in your system. I made mine in <code>~/.autokey</code></li><li>Clone this repository into that folder: <a href="https://github.com/danyim/elementary-macos">https://github.com/danyim/elementary-macos</a></li></ol>



<p class="wp-block-paragraph">Also it may help to take a look at the default keybindings with this command: <code>gsettings list-recursively | grep -i ".keybindings"</code>. Specifically, take a glance at the defaults set for `org.pantheon.desktop.gala` and `org.gnome.desktop.wm.keybindings` bindings. If you find something you don&#8217;t like, you can change the value through the terminal&#8217;s <code>gsettings</code> or by using the GUI equivalent <code>dconf-editor</code>.</p>



<p class="wp-block-paragraph">The <code>gsettings</code> commands take the following format:</p>



<pre class="wp-block-code bash"><code>gsettings set &#91;folder] &#91;command] &#91;value]</code></pre>



<p class="wp-block-paragraph">Unsetting a command, for example: <code>gsettings set org.pantheon.desktop.gala.keybindings zoom-in []</code></p>



<p class="wp-block-paragraph">Setting a command:</p>



<pre class="wp-block-code bash"><code>gsettings set org.pantheon.desktop.gala.keybindings zoom-in &#91;"'&lt;Super&gt;+P'"]</code></pre>



<h3 class="wp-block-heading">Mapping the Tilde Key</h3>



<p class="wp-block-paragraph">Also, the tilde/grave key wasn&#8217;t working out of the box, so I had to add the following line in <code>/usr/share/X11/xkb/symbols</code></p>



<pre class="wp-block-code bash"><code>// Find this line
key { &#91; less, greater, bar, brokenbar ] };
// Add this beneath it
key { &#91; grave, asciitilde, grave, asciitilde ] };</code></pre>



<p class="wp-block-paragraph">After that, clear the cache <code>sudo rm -rf /var/lib/xkb/*</code> and reboot.</p>



<h2 class="wp-block-heading">Replacing Default Apps</h2>



<h3 class="wp-block-heading">File Explorer</h3>



<p class="wp-block-paragraph">The default File Explorer looks great, but it is very dissimilar to what I&#8217;m used to with Finder. A great alternative File Explorer I found is <a href="https://github.com/linuxmint/nemo">Nemo</a>. It won&#8217;t work perfectly out of the box, however.</p>



<p class="wp-block-paragraph">Run the following to remove the window on your desktop:</p>



<pre class="wp-block-code"><code>gsettings set org.nemo.desktop show-desktop-icons false</code></pre>



<p class="wp-block-paragraph">Edit your <code>nemo*.desktop</code> files in <code>/usr/share/applications/</code> and change the <code>Exec</code> field to include <code>--no-desktop</code>, i.e. <code>Exec=nemo --no-desktop</code></p>



<p class="wp-block-paragraph">Go into System Settings &gt; Applications and set your default file explorer to Nemo. In my case, I saw two &#8220;Files&#8221; in the dropdown after I had installed Nemo, so I assumed Nemo was the second.</p>



<h3 class="wp-block-heading">Terminal</h3>



<p class="wp-block-paragraph">Again, nothing too bad to say about the default Elementary terminal, but I wanted something more customizable a la iTerm2, so I opted to switch my terminal to the <a href="https://github.com/GNOME/gnome-terminal">GNOME Terminal</a>. This was straightforward for the most part.</p>



<h3 class="wp-block-heading">Browser</h3>



<p class="wp-block-paragraph">Install <a href="https://www.brave.com/">Brave</a>, a privacy-focused browser. <a href="https://github.com/brave/browser-laptop/blob/master/docs/linuxInstall.md#debian-jessie-and-ubuntu-artful-zesty-yakkety-xenial-and-trusty-amd64">Follow their instructions here</a>; however, you&#8217;ll need to run this line instead of what they provided:</p>



<pre class="wp-block-code bash"><code>curl https://s3-us-west-2.amazonaws.com/brave-apt/keys.asc
sudo apt-key add - echo "deb &#91;arch=amd64] https://s3-us-west-2.amazonaws.com/brave-apt xenial main"
sudo tee -a /etc/apt/sources.list.d/brave-xenial.list</code></pre>



<h2 class="wp-block-heading">Improving the Interface: the macOS Look and Feel</h2>



<p class="wp-block-paragraph">There are many different theming applications and plugins to choose from that will help make your Elementary OS feel like a Mac. I haven&#8217;t explored those options too deeply yet (I&#8217;ll update this post when I do). What I&#8217;ve done for now is install <a href="http://manjaro.site/make-up-your-elementary-os-loki-with-this-osx-arc-theme/">Elementary Tweaks</a> and replaced the GTK+ theme with a theme called <a href="https://github.com/yarik-vv/OS-X-buttons">OS-X Buttons</a>. This simple change will give you a very convincing title bar with the three buttons on the top left that we all know and have grown to love.</p>



<h3 class="wp-block-heading">Adding an Icon Set</h3>



<p class="wp-block-paragraph">Check out this project for a great set of macOS-like icons: <a href="https://github.com/keeferrourke/la-capitaine-icon-theme">https://github.com/keeferrourke/la-capitaine-icon-theme</a></p>



<h3 class="wp-block-heading">Installing Fonts</h3>



<p class="wp-block-paragraph">macOS uses San Francisco for most of its interface, which you can <a href="https://github.com/AppleDesignResources/SanFranciscoFont">download from Apple directly here</a>. Copy the *.otf files from that repository into <code>/usr/local/share/fonts</code> (<a href="https://elementaryos.stackexchange.com/questions/658/how-do-i-install-and-use-custom-fonts">your system-wide fonts folder</a>) and refresh the font cache by running `sudo fc-cache`.</p>



<p class="wp-block-paragraph">Change your fonts in Elementary Tweaks, via System Settings &gt; Tweaks &gt; Fonts</p>



<h2 class="wp-block-heading">Last Thoughts</h2>



<p class="wp-block-paragraph">Honestly, I really didn&#8217;t expect Elementary OS to blow me away. I wasn&#8217;t sure how well this experiment will go or how long it would last, but after tweaking Elementary to my liking, I found myself staying on this side of the partition much longer and&#8211;most importantly&#8211;enjoying the experience 🙂</p>



<p class="wp-block-paragraph">Please give the instructions a try, and feel free to leave your thoughts and comments below.</p>



<p class="wp-block-paragraph">Thanks!</p>



<hr class="wp-block-separator"/>



<h2 class="wp-block-heading">Resources</h2>



<ul class="wp-block-list"><li><a href="https://github.com/danyim/elementary-macos">https://github.com/danyim/elementary-macos<br></a>Please feel free to submit PRs if you can think of more useful shortcuts that should be included!</li><li><a href="https://github.com/autokey/autokey/wiki/Special-Keys">https://github.com/autokey/autokey/wiki/Special-Keys<br></a>Useful reference for making your own mappings for Autokey</li><li><a href="https://developer.gnome.org/integration-guide/stable/desktop-files.html.en">https://developer.gnome.org/integration-guide/stable/desktop-files.html.en</a><br>Documentation on <code>.desktop</code> files in GNOME. Useful in order to understand how links to programs appear on the Applications menu and on the desktop.</li></ul>


In Search of an Open macOS

<p>If you&#8217;ve been tuned in lately to what&#8217;s next on the web, there&#8217;s been a lot of talk (from Google especially) pushing <em>progressive web apps</em>, or PWAs,  as the next evolution of web apps. As a HackerNews addict and also as a front-end engineer who&#8217;s obligated to feign knowledge over every single thing popping up on the web, I can say that PWAs have been on my radar for some time, but it&#8217;s never intrigued me enough to investigate it&#8230; until now. At Google&#8217;s I/O 2017 conference this year, they featured multiple presentations over the current capabilities of progressive web apps, and after watching a couple, I felt compelled to learn more about what it had to offer and if it was indeed a new paradigm worth pursuing.</p>
<p>Some unbaked initial thoughts in my head before I dive in:</p>
<ol>
<li>What are the forces behind Google pushing <em>so hard </em>for PWAs to take over? Are they trying to displace Apple&#8217;s App Store market share or is this a pure &amp; altruistic &#8220;for the betterment of the web&#8221; movement?</li>
<li>Related to #1, why is touted as the new web standard when iOS is clearly not on the same page? All examples&#8211;and maybe I&#8217;m wrong here&#8211;only show PWAs working seamlessly on Android w/ Chrome. Are other permutations of mobile OSes and browsers supporting this movement?</li>
<li>Lastly, are PWAs merely fancy bookmarks in the form of app icons? What are the benefits for the consumer? For developers?</li>
</ol>
<p>I&#8217;ll explore these topics in detail in a subsequent post. Stay tuned&#8230;</p>
<h2>Resources</h2>
<ul>
<li><a href="https://developers.google.com/web/progressive-web-apps/">https://developers.google.com/web/progressive-web-apps/</a> (2017) &#8211; Google&#8217;s main documentation on PWAs.</li>
<li><a href="http://blog.ionic.io/what-is-a-progressive-web-app/">http://blog.ionic.io/what-is-a-progressive-web-app/</a> (2016) &#8211; A nice blog post from the Ionic team about what PWAs have to offer. Interesting perspective to read about, considering that Ionic is a cross-platform &#8220;Angular Native&#8221; project.</li>
</ul>


Progressive Web Apps, part 1

<p>While digging through the year-old source code to review <a href="http://blog.daniely.im">http://blog.daniely.im</a>&#8216;s current design, I finally got to the bottom of something that&#8217;s been bugging me for a while. I remember when first designing that name card on the top of the landing page, I spent a considerable amount of time and effort to get it my liking. It looks like this now (because by the time I post this, it should be gutted):</p>
<p>&nbsp;</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-167 aligncenter" src="https://blog.daniely.im/wp-content/uploads/2017/03/out.gif" alt="" width="600" height="400" /></p>
<p>After sinking a ton of time getting this right, I remember not really being impressed with the results, but after working on it for so long, I justified to myself that I had to keep it there even though it was a bit of an eyesore and didn&#8217;t push any boundaries of sleek design.</p>
<p>&nbsp;</p>
<p>Flash forward a year later, this is the first thing I gut out with a swift press of a delete key. Loss aversion is a bitch. I just wish I could have recognized it earlier.</p>


Loss Aversion

<p>It&#8217;s been a long time since I last wrote on the blog. There seems to always be a point where I&#8217;d think &#8220;Oh, that would be a great topic to blog about!&#8221;, but then the moment of opportunity disappears and eventually distractions pull me away to something else. I think my hang up is focusing too much on the quality of writing instead of putting thought to paper (keyboard?).</p>
<p>&nbsp;</p>
<p>Here&#8217;s the new approach I&#8217;ll take: <strong>it&#8217;s better to produce <em>something </em>than <em>nothing</em></strong>. And this philosophy will not just apply to my blog posts but also to side projects.</p>
<p>Lately, I&#8217;ve been thinking of the qualities that I&#8217;d like to see in a single ideal side project.</p>
<p>&nbsp;</p>
<p>It goes something like this, in no particular order:</p>
<ol>
<li>It should be a pressure-less sandbox where I can experiment with new frameworks/languages at the unfortunate cost of reduced dev velocity</li>
<li>Emphasis on the pressure-less. With no hard deadlines, I can work on anything and most everything at my leisure.</li>
<li>The project should be the shining example of the latest best practices that I can refer to for my other projects</li>
<li>I should be able to freely practice development paradigms I haven&#8217;t used before like aiming for 100% test coverage or trying a new architecture</li>
<li>Perhaps it&#8217;s a transferrable project I could build an open source community around</li>
<li>The idea should have monetization potential in hopes of creating passive income</li>
<li>There should be an element of flair to the project which will look good to perspective employers</li>
<li>The project should feel fun to the point where I don&#8217;t feel like I&#8217;m doing work</li>
<li>It should give me a feeling of transcendence by the mere creation of it (in other words, it satisfies my need for visual creativity)</li>
<li>Yada yada yada&#8230;</li>
</ol>
<p>&nbsp;</p>
<p>But after being stuck in analysis paralysis, I&#8217;ve come to find that <strong>a single side project will take forever to satisfy even 50% of this wish list</strong>.</p>
<p>Which is why I recently figured it&#8217;ll be easier to achieve these goals by dividing and conquering. One project might emphasize points 1, 2, 4, and 7, while another is focused on 3 and 5.</p>
<p>Now that list is on this blog, I&#8217;ll look back and report how successful I&#8217;ve been 🙂</p>
<p>&nbsp;</p>
<p>And off I go&#8230;</p>


New Projects & Productivity

<p>I&#8217;ve recently come to realize that I am very close to losing writing (and the creative process in general) to atrophy. Writing effectively has become increasingly difficult for me these days. I often catch myself reading, editing, re-reading, and re-writing passages of what I wrote to constantly measure the &#8220;flow&#8221; of the text, but ironically, the process of re-editing and injecting thoughts sporadically lends itself to producing disorganized material in the first place. I&#8217;m certain it&#8217;s the logical side of me interfering, panicking and fearing the loss of control and structure. The hands that translate the thoughts in my head are used to writing work emails or matching a curly brace in code&#8211;it&#8217;s been too long since I hardwired what I type to the creative hemisphere of my brain.</p>
<p>&nbsp;</p>
<p>Back in grade school when personal blogs were all the rage, I felt motivated and <em>always</em> looked forward to writing a post about random, contrarian thoughts on Xanga. Nowadays, I get a mild sense of social anxiety when just thinking about bearing my controversial thoughts and my true self out for the entire internet to see. Anxiety issues aside, isn&#8217;t that natural to begin? It&#8217;s probably unfair to be comparing my younger and more reckless self to the carefully curated individual that I&#8217;m trying to be now, 10 odd years later.</p>
<p>&nbsp;</p>
<p>As much as I want this blog to be technical, I also want it to be an insight of how I am at an individual level. Hopefully, one of these days I can look back at these posts as I&#8217;ve done before and measure my growth as a writer since then.</p>


Writing atrophy

<p>As you may have seen with the constant changes, I have been (and will be) using this website as a conduit for learning/re-learning WordPress, PHP, and getting into the nitty-gritty details of web design&#8211;a process I am finding to be extremely satisfying. So far, I&#8217;ve made great progress adopting Ahmed&#8217;s <a href="https://github.com/ahmadawais/advanced-gulp-wordpress">Gulp-Wordpress theme workflow</a>. I highly recommend using his repo as a starting point for any new Wordpress theme design, as it&#8217;s extremely well-organized, thoroughly documented, and well coded both inside and out (from his work you can see that Ahmed is clearly a developer).</p>
<p>I think it&#8217;s safe to say that we are in a glory age for web development. Never has it been easier to stand up a website. From securing a domain name to setting up a host and creating your website&#8217;s first Hello World page, I found that the tools today enable us to complete this entire process in less than 15-minutes flat. <em>Back in my day, </em>I recall domain name registrations would take several hours or days to finalize while the registrar slowly propagated the changes to its servers, which was an agonizingly slow endeavor that robs most of your elated &#8220;I-just-made-a-website&#8221; high. Today, domains are bought and sites are live as soon as you checkout. Amazing.</p>
<p>Not only is the friction from DNS registration greatly reduced these days, but the sheer number of amazing tools that are available to front-end developers make the experience so much easier and accessible. Take something as simple as <a href="http://gulpjs.com/">Gulp</a> for example. Under the hood, Gulp is simply a task-runner that programmatically runs specific tasks to &#8220;compile&#8221; websites together into a nice, distributable package for the web. In my workflow, this tool alone accounts for the most time-savings due to its enabling of quick feedback loops from code to browser. No more manual dragging and dropping files, linting, or transpiling needed.</p>
<p>The biggest hurdle for me is to learning the vast features, limitations, and the syntax of the CMS behemoth that is WordPress. Built years ago entirely on top of PHP, WordPress has been time-tested to be a great platform for creating a content-rich website for whatever your heart desires, given that you take the time to learn the <i>system</i>. As I developer, I find some of the ways that WP manages its scripts/stylesheets (by way of registering/deregistering), theming (what&#8217;s with all these components and pages I need to style?), and code (random underscored method names abound) questionable, but I realize it&#8217;s an uphill battle trying to complain my way to comprehension. So I&#8217;m learning. And I&#8217;m trying really hard. I hope by the end I will be able to deliver a wickedly slick WP site with an awesome theme forged out of love (and could possibly monetize?). At this point, I have a vision of how I want the site to be. It&#8217;s just a matter of how much WP hacking that I&#8217;ll have to do in order to get there.</p>
<p>&nbsp;</p>
<p>Stay tuned.</p>


WordPress, web development, and getting back into the swing of things

<p>For a while now, I&#8217;ve owned the domain www.nubs.org and haven&#8217;t done much with it except for the occasional total-site-makeover from time to time. Sadly, it remains un-updated and is a sad reminder of how much time I used to have to dedicate to creating websites.</p>
<p>Well folks, this is a fresh start! A new domain, a time-tested CMS (read: WordPress), and a personal goal to pump out blog posts like my professional career counted on it.</p>
