Personal website of a web app developer & UXer from Malaysia. He enjoys stories of people doing great works and Kopi-O. https://longyc.com/ <figure><img alt="A doodle of a snowman with the number 2021 on the left." src="/blog/2021-week-51-longyc-24th-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>TypeScript</strong> - a main distinction between interface and type aliases is that declaration merging is possible for interfaces, e.g. new fields can be added to an existing interface with an additional declaration of the said interface. This is documented in the <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces">official TypeScript handbook</a>.</p> </li> <li> <p><strong>Serverless</strong> - CLAD is a model to think about Serverless security - Code, Library, Access, and Data. One useful perspective is to treat each function as a perimeter to be secured instead of a single application. Got that from chapter 3 of <a href="https://www.goodreads.com/book/show/53324854-serverless-security">Serverless Security</a>.</p> </li> <li> <p><strong>On the week 51 of 2021</strong>, we saw that the introduction of <code class="language-plaintext highlighter-rouge">:has()</code> CSS pseudo-class support in Safari Technology Preview Release 137, more details in <a href="https://developer.apple.com/safari/technology-preview/release-notes/">the release note</a>.</p> </li> </ul> <p>This is weekly bite-sized post on web app development from JavaScript to UX and technology in general, started in July 2021, with this one being the last post of the year. Not sure if this is something I want to continue into 2022 but there’ll definitely be change in the format and frequency at the very least, hopefully for the better. Thank you for reading and have a great new year ahead!</p> Sun, 26 Dec 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-51-cladding-interface https://longyc.com/blog/2021-week-51-cladding-interface <figure><img alt="A doodle of Mantine the manta ray-like Pokémon with the number 23 on the left." src="/blog/2021-week-50-longyc-23rd-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>Webpack</strong> - when using the dev server, we can visit the <code class="language-plaintext highlighter-rouge">/webpack-dev-server</code> route to access a list of all the files being served, this is mentioned as <a href="https://webpack.js.org/configuration/dev-server/#devserver">a tip on the official documentation page</a>.</p> </li> <li> <p><strong>HTTP/2</strong> - just because a server speaks the protocol doesn’t mean the underlying implementation is correct and given that HTTP/2 clients rely more on the server compared to older versions of HTTP, the impact might be worse. Got that from chapter 13 of <a href="https://www.goodreads.com/book/show/17985198-high-performance-browser-networking">High Performance Browser Networking</a>.</p> </li> <li> <p><strong>On the week 50 of 2021</strong>, we saw a demo from Dell on Concept Pari - a magnetic webcam that can be attached to anywhere on a monitor screen, allowing video call participants to have eye contacts, or at least virtually. <a href="https://arstechnica.com/gadgets/2021/12/dells-magnetic-wireless-webcam-might-help-you-forget-about-that-infamous-nose-cam/">The demo was covered by Ars Technica with some comparison on Dell’s previous webcam designs</a>.</p> </li> </ul> <p>This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!</p> Sun, 19 Dec 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-50-server-implementation https://longyc.com/blog/2021-week-50-server-implementation <figure><img alt="A doodle of Twitter Retweet button with the number 22 on the left." src="/blog/2021-week-49-longyc-22nd-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>CSS</strong> - <code class="language-plaintext highlighter-rouge">aspect-ratio</code> can be used to set a preferred width-to-height ratio of a box, it accepts values of <code class="language-plaintext highlighter-rouge">&lt;ratio&gt;</code> data type, e.g. <code class="language-plaintext highlighter-rouge">16/9</code>. <a href="https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping">More about this CSS property is explained on MDN Web Docs</a>.</p> </li> <li> <p><strong>AWS Lambda</strong> - the context object passed to a handler function includes a method <code class="language-plaintext highlighter-rouge">getRemainingTimeInMillis()</code> which returns the approximate remaining execution time before timeout. Picked that up from chapter 6 of <a href="https://www.goodreads.com/en/book/show/29970427">Serverless Architectures on AWS</a>.</p> </li> <li> <p><strong>On the week 49 of 2021</strong>, we saw a remote code execution vulnerability on the popular Java logging library - Apache Log4j. Now also known as Log4Shell, the exploit allows arbitrary Java code to be executed, <a href="https://www.lunasec.io/docs/blog/log4j-zero-day/">more details about this on LunaSec blog</a>.</p> </li> </ul> <p>This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!</p> Sun, 12 Dec 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-49-remaining-ratio https://longyc.com/blog/2021-week-49-remaining-ratio <figure><img alt="A doodle of a PlayStation Memory Card with the number 21 on the left." src="/blog/2021-week-48-longyc-21st-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>Node.js</strong> - we could get an object describing the memory usage of a Node.js process using <code class="language-plaintext highlighter-rouge">process.memoryUsage()</code>. The numbers returned represent the usage in bytes, as described in <a href="https://nodejs.org/api/process.html#processmemoryusage">the official documentation page</a>.</p> </li> <li> <p><strong>Design</strong> - a content is what a user needs right now, regardless of what a search form is designed for. If it’s not feasible to have a universal search, label a search form explicitly, e.g. Search products. Got that from chapter 6 of <a href="https://www.goodreads.com/book/show/42272974-form-design-patterns">Form Design Patterns</a>.</p> </li> <li> <p><strong>On the week 48 of 2021</strong>, AWS announced the preview of EC2 M1 Mac instances. There is <a href="https://aws.amazon.com/blogs/aws/use-amazon-ec2-m1-mac-instances-to-build-test-macos-ios-ipados-tvos-and-watchos-apps/">an official blog post on this with details on pricing and example usage</a>.</p> </li> </ul> <p>This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!</p> Sun, 05 Dec 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-48-memory-search https://longyc.com/blog/2021-week-48-memory-search <figure><img alt="A doodle of Dobby with the word twenty in Chinese, Malay, and English on the left." src="/blog/2021-week-47-longyc-20th-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>Jest</strong> - in single run mode, the maximum number of workers is set to be the number of CPU core available minus one for main thread, we can customise using the CLI option <code class="language-plaintext highlighter-rouge">--maxWorker</code>, as stated on the <a href="https://jestjs.io/docs/cli#--maxworkersnumstring">official documentation page</a>.</p> </li> <li> <p><strong>JavaScript</strong> - <code class="language-plaintext highlighter-rouge">undefined</code>, <code class="language-plaintext highlighter-rouge">NaN</code>, and <code class="language-plaintext highlighter-rouge">Infinity</code> are actually not reserved words, got this from chapter 2 of <a href="https://www.goodreads.com/book/show/2998152-javascript">JavaScript: The Good Parts</a>.</p> </li> <li> <p><strong>On the week 47 of 2021</strong>, we saw the public preview of Amazon Linux 2022 which is now based on Fedora. Also, there will be a new major version of Amazon Linux every two years from now on and each will be supported for five years. More information available on the <a href="https://aws.amazon.com/about-aws/whats-new/2021/11/preview-amazon-linux-2022/">official announcement page</a>.</p> </li> </ul> <p>This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!</p> Sun, 28 Nov 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-47-reserved-workers https://longyc.com/blog/2021-week-47-reserved-workers <figure><img alt="A doodle of Ditto with the word nineteen in Chinese, Malay, and English on the left." src="/blog/2021-week-46-longyc-19th-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>Typography</strong> - it affects first impressions because even when users don’t read copy, they scan it. Approaches to adjust spacing between characters include tracking (horizontal spaces between words) and kerning (spaces between two individual letters). <a href="https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833">UX Planet has a UI typography beginner guide that explains these and more</a>.</p> </li> <li> <p><strong>AWS API Gateway</strong> - we can utilise mock integration to generate a response without integrating with any other services, got this from chapter 7 of <a href="https://www.goodreads.com/en/book/show/29970427">Serverless Architectures on AWS</a>.</p> </li> <li> <p><strong>On the week 46 of 2021</strong>, we saw the beta release of Serverless framework version 3, there were a lot of highlights on the new CLI but it’s also noteworthy that many features deprecated in version 2 are not removed. More information available on the <a href="https://www.serverless.com/blog/serverless-framework-v3-beta">announcement blog post</a>.</p> </li> </ul> <p>This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!</p> Sun, 21 Nov 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-46-tracking-kerning https://longyc.com/blog/2021-week-46-tracking-kerning <figure><img alt="A doodle of a Digivice with the word eighteen in Chinese, Malay, and English on the left." src="/blog/2021-week-45-longyc-18th-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>Git</strong> - the <code class="language-plaintext highlighter-rouge">--no-pager</code> option can prevent git from piping output to a pager, this option could be useful for logging in a CI environment, e.g. <code class="language-plaintext highlighter-rouge">git --no-pager log</code>. More info available on <a href="https://git-scm.com/docs/git#Documentation/git.txt---no-pager">git documentation page</a>.</p> </li> <li> <p><strong>JavaScript</strong> - the block comment syntax <code class="language-plaintext highlighter-rouge">/* */</code> comes from the PL/I language. The pairs were used in PL/I because their occurrence is unlikely but they can appear in JS regex literals, thus making them unsafe for commenting out blocks of code. Got this from chapter 2 of <a href="https://www.goodreads.com/book/show/2998152-javascript">JavaScript: The Good Parts</a>.</p> </li> <li> <p><strong>On the week 45 of 2021</strong>, we saw the release of developer preview of Hydrogen - a React-based framework from Shopify focused on building custom storefronts, it ships with built-in components and Tailwind CSS. More info can be found on <a href="https://www.shopify.my/partners/blog/hydrogen-developer-preview">its announcement post on Shopify blog</a>.</p> </li> </ul> <h2 id="a-little-note">A little note</h2> <p>Looking at the reviews and benchmarks of the new MacBook Pro with M1 Pro/Max, the single core performance improvement over the much cheaper M1 MacBook Air seems negligible. So, other hardware features aside, they are only better options (performance-wise) if you need more performance cores or much, much faster graphics. That’s all for this week’s post, thank you for reading and have a nice day!</p> Sun, 14 Nov 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-45-pager-comments https://longyc.com/blog/2021-week-45-pager-comments <figure><img alt="A doodle of Nintendo Switch Joy-Con with the word seventeen in Chinese, Malay, and English on the left." src="/blog/2021-week-44-longyc-17th-post.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ul> <li> <p><strong>GitHub Action</strong> - there can be up to 256 jobs per workflow run using a job matrix. One example use case is to run with multiple versions of Node.js, as pointed out by <a href="https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idstrategymatrix">the official GitHub Docs webpage</a>.</p> </li> <li> <p><strong>AWS Lambda</strong> - we could create aliases for Lambda functions, an alias has its own ARN and points to specific version of a function. One use case is to set up production and staging aliases that points to different versions of a function, got this from chapter 6 of <a href="https://www.goodreads.com/en/book/show/29970427">Serverless Architectures on AWS</a>.</p> </li> <li> <p><strong>On the week 44 of 2021</strong>, we saw the release of Intel’s 12th generation Core processors known as Alder Lake, one of the highlights is that it’s a hybrid architecture with both performance cores and efficiency cores. <a href="https://www.anandtech.com/show/17047/the-intel-12th-gen-core-i912900k-review-hybrid-performance-brings-hybrid-complexity">AnandTech has a detailed review on this</a>.</p> </li> </ul> <h2 id="a-little-note">A little note</h2> <p>Another small change in the post format, of the three weekly items, one will be from an online source, like an article or a Tweet, while another one will be from a book or a paper, and to mix things up a little, the third item will be a bit of a wild card, probably something new from that week. That’s all for this week’s post, thank you for reading and have a nice day!</p> Sun, 07 Nov 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-44-action-matrix https://longyc.com/blog/2021-week-44-action-matrix <figure><img alt="A doodle of Harley Quinn with the word sixteen in Chinese, Malay, and English on the left." src="/blog/2021-week-43-slice-and-map.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ol> <li> <p><strong>JavaScript</strong> - the array <code class="language-plaintext highlighter-rouge">.slice()</code> method accepts negative index, thus it is possible to extract the last element with <code class="language-plaintext highlighter-rouge">.slice(0, -1)</code>. More details available on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">MDN Web Docs</a>.</p> </li> <li> <p><strong>JavaScript</strong> - it is common to see objects being used as maps but there are quite a number of differences in using an actual <code class="language-plaintext highlighter-rouge">Map</code>, such as using any types as keys instead of just string. MDN Web Docs has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps">a good comparison table on this</a>.</p> </li> <li> <p><strong>Jest</strong> - ESM support is still experimental at the moment as mentioned in <a href="https://jestjs.io/docs/ecmascript-modules">the official documentation page</a>.</p> </li> </ol> <h2 id="note-of-the-week">Note of the week</h2> <p>On the week 43 of 2021, we saw that <a href="https://mozillagfx.wordpress.com/2021/10/30/switching-the-linux-graphics-stack-from-glx-to-egl/">the news of the upcoming Firefox 94 switching from GLX to EGL</a>, this should translate to better WebGL performance for Linux users. That’s all for this week’s post, I must admit this week’s post was a bit more rushed than usual, still, thank you for reading and if you have got any feedback, do let me know by leaving on either <a href="https://longyc.medium.com/16th-weekly-post-slice-and-map-also-jest-aff20c842789?source=friends_link&amp;sk=a616a5993940f4bff6500e24262bdd46">Medium</a>, <a href="https://dev.to/longyc/16th-weekly-post-slice-and-map-also-jest-54f3">Dev.to</a>, or <a href="https://smallpotatodev.substack.com/p/16th-weekly-post-slice-and-map">Substack</a>. Have a nice day!</p> Sun, 31 Oct 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-43-slice-and-map https://longyc.com/blog/2021-week-43-slice-and-map <figure><img alt="A doodle of a Slime from the Dragon Quest game with the word fifteen in Chinese, Malay, and English on the left." src="/blog/2021-week-42-a-sticky-configuration.jpg" /></figure> <h2 id="items-of-the-week">Items of the week</h2> <ol> <li> <p><strong>CSS</strong> - an element with <code class="language-plaintext highlighter-rouge">position: sticky;</code> sticks to the nearest parent / ancestor element that is scrollable , thus wrapping the said element in a container might change its behaviour. The explanation is available on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN Web Docs</a>.</p> </li> <li> <p><strong>Serverless</strong> - the Serverless framework configuration file (<code class="language-plaintext highlighter-rouge">serverless.yml</code>) allows using variables as config values, e.g. <code class="language-plaintext highlighter-rouge">light: ${env:LIGHT_SWITCH}</code>, what’s great is that it also allows nested variable references, e.g. <code class="language-plaintext highlighter-rouge">light: ${env:${opt:room}_LIGHT_SWITCH}</code>. Details can be found on the <a href="https://www.serverless.com/framework/docs/providers/aws/guide/variables/#nesting-variable-references">documentation page</a>.</p> </li> <li> <p><strong>Design</strong> - use progress visualisation, gamification, and activity tracking in design to motivate users toward desired goals. These techniques can invoke the goal-gradient effect where users might put more efforts as they get closer to targets, as explained by <a href="https://uxdesign.cc/designing-for-motivation-with-the-goal-gradient-effect-c873cdf58beb">an article on UX Collective</a>.</p> </li> </ol> <h2 id="note-of-the-week">Note of the week</h2> <p>On the week 42 of 2021, we saw <a href="https://nodejs.org/en/blog/release/v17.0.0/">the release of Node.js 17</a> with the underlying V8 JavaScript engine updated to version 9.5 and also <a href="https://developer.chrome.com/blog/new-in-chrome-95/">the release of Chrome 95</a> that marks the start of the new user-agent reduction origin trial. That’s all for this week’s post, thank you for reading and if you have got any feedback, do let me know by leaving on either <a href="https://longyc.medium.com/15th-weekly-post-a-sticky-configuration-also-goal-gradient-effect-7659f4df2cc8?source=friends_link&amp;sk=7d01c6a8b5a3253dd990f99d859dde87">Medium</a>, <a href="https://dev.to/longyc/15th-weekly-post-a-sticky-configuration-also-goal-gradient-effect-2aln">Dev.to</a>, or <a href="https://smallpotatodev.substack.com/p/15th-weekly-post-a-sticky-configuration">Substack</a>. Have a nice day!</p> Sun, 24 Oct 2021 00:00:00 +0800 https://longyc.com/blog/2021-week-42-a-sticky-configuration https://longyc.com/blog/2021-week-42-a-sticky-configuration