The latest articles on DEV Community by LongYC (@longyc). https://dev.to/longyc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180556%2F0d98d36d-a0f2-49f7-974e-1a5949598409.png https://dev.to/longyc en LongYC Sun, 26 Dec 2021 15:10:38 +0000 https://dev.to/longyc/24th-weekly-post-cladding-interface-also-2022-34c0 https://dev.to/longyc/24th-weekly-post-cladding-interface-also-2022-34c0 <h2> 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>: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> typescript serverless css LongYC Sun, 19 Dec 2021 16:06:13 +0000 https://dev.to/longyc/23rd-weekly-post-server-implementation-also-pari-5h11 https://dev.to/longyc/23rd-weekly-post-server-implementation-also-pari-5h11 <h2> Items of the week </h2> <ul> <li><p><strong>Webpack</strong> - when using the dev server, we can visit the <code>/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> LongYC Sun, 12 Dec 2021 15:58:43 +0000 https://dev.to/longyc/22nd-weekly-post-remaining-ratio-also-log4shell-1hh8 https://dev.to/longyc/22nd-weekly-post-remaining-ratio-also-log4shell-1hh8 <h2> Items of the week </h2> <ul> <li><p><strong>CSS</strong> - <code>aspect-ratio</code> can be used to set a preferred width-to-height ratio of a box, it accepts values of <code>&lt;ratio&gt;</code> data type, e.g. <code>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>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> css aws java LongYC Sun, 05 Dec 2021 15:47:40 +0000 https://dev.to/longyc/21st-weekly-post-memory-search-also-ec2-m1-45ek https://dev.to/longyc/21st-weekly-post-memory-search-also-ec2-m1-45ek <h2> 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>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> node design aws LongYC Sun, 28 Nov 2021 15:58:10 +0000 https://dev.to/longyc/20th-weekly-post-reserved-workers-also-al2022-463a https://dev.to/longyc/20th-weekly-post-reserved-workers-also-al2022-463a <h2> 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>--maxWorkers</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>undefined</code>, <code>NaN</code>, and <code>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> javascript aws LongYC Sun, 21 Nov 2021 15:59:44 +0000 https://dev.to/longyc/19th-weekly-post-tracking-and-kerning-also-mock-integration-3380 https://dev.to/longyc/19th-weekly-post-tracking-and-kerning-also-mock-integration-3380 <h2> 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> typography aws serverless LongYC Sun, 14 Nov 2021 14:00:43 +0000 https://dev.to/longyc/18th-weekly-post-pager-and-comments-also-hydrogen-1k1c https://dev.to/longyc/18th-weekly-post-pager-and-comments-also-hydrogen-1k1c <h2> Items of the week </h2> <ul> <li><p><strong>Git</strong> - the <code>--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>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>/* */</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> 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> git javascript LongYC Sun, 07 Nov 2021 14:53:51 +0000 https://dev.to/longyc/17th-weekly-post-action-matrix-also-lambda-alias-fe3 https://dev.to/longyc/17th-weekly-post-action-matrix-also-lambda-alias-fe3 <h2> 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> 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> github aws intel LongYC Sun, 31 Oct 2021 15:58:53 +0000 https://dev.to/longyc/16th-weekly-post-slice-and-map-also-jest-54f3 https://dev.to/longyc/16th-weekly-post-slice-and-map-also-jest-54f3 <h2> Items of the week </h2> <ol> <li><p><strong>JavaScript</strong> - the array <code>.slice()</code> method accepts negative index, thus it is possible to extract the last element with <code>.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>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> 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 a comment. Have a nice day!</p> javascript jest firefox LongYC Sun, 24 Oct 2021 10:18:21 +0000 https://dev.to/longyc/15th-weekly-post-a-sticky-configuration-also-goal-gradient-effect-2aln https://dev.to/longyc/15th-weekly-post-a-sticky-configuration-also-goal-gradient-effect-2aln <h2> Items of the week </h2> <ol> <li><p><strong>CSS</strong> - an element with <code>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>serverless.yml</code>) allows using variables as config values, e.g. <code>light: ${env:LIGHT_SWITCH}</code>, what's great is that it also allows nested variable references, e.g. <code>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> 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 a comment. Have a nice day!</p> css serverless design LongYC Sun, 17 Oct 2021 16:57:52 +0000 https://dev.to/longyc/14th-weekly-post-constant-assertions-and-signatures-also-storytelling-in-design-49jc https://dev.to/longyc/14th-weekly-post-constant-assertions-and-signatures-also-storytelling-in-design-49jc <h2> Items of the week </h2> <ol> <li><p><strong>TypeScript</strong> - const assertion can prevent literal types from being treated as more general types, e.g. <code>const config = {light: "ON"} as const;</code> will have <code>light</code> as the literal type <code>"ON"</code> instead of <code>string</code>, making it compatible with type <code>{light: "ON" | "OFF"}</code>. It'll also make <code>light</code> readonly. More explanation can be found on the <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions">official documentation page</a>. </p></li> <li><p><strong>JWT</strong> - it can be signed asymmetrically with a key pair or symmetrically with a shared secret. The latter means all parties involved use one secret for both signing and signature verification, which means any party with the shared secret could have signed the JWS - something to be taken into consideration during implementation.</p></li> <li><p><strong>Design &amp; storytelling</strong> - good stories are engaging and help build empathy, adapting them to your audience and backing up the points with data could be helpful in getting buy-in during a design process. <a href="https://www.nngroup.com/articles/persuasive-storytelling/">NN/g has an article on 6 rules for persuasive storytelling</a>.</p></li> </ol> <h2> Note of the week </h2> <p>On the week 41 of 2021, I found out about a portable game console powered by a microcontroller - <a href="https://shop.pimoroni.com/products/picosystem">PicoSystem</a>, an interesting product considering it is sporting the RP2040 just like a Raspberry Pi Pico. 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 a comment. Have a nice day!</p> typescript jwt design LongYC Sun, 10 Oct 2021 13:55:58 +0000 https://dev.to/longyc/13th-weekly-post-specific-stashes-and-regions-also-colourblindness-m2o https://dev.to/longyc/13th-weekly-post-specific-stashes-and-regions-also-colourblindness-m2o <h2> Items of the week </h2> <ol> <li><p><strong>Git</strong> - use the <code>git stash push</code> command followed by pathspec to stash specific files, e.g. <code>git stash push file/not-to-commit-now.js</code>, or for multiple files, <code>git stash push directory/*</code>. More details on the <a href="https://git-scm.com/docs/git-stash">git documentation page</a>.</p></li> <li><p><strong>AWS</strong> - regions are physical locations of data centres, choosing one that's near to target users can reduce latency but on top of that, there is also AWS Local Zones for latency-sensitive use cases, and even AWS Wavelength for 5G mobile devices allowing traffic to stay within a mobile provider's network to avoiding extra network hops. More information available on <a href="https://aws.amazon.com/about-aws/global-infrastructure/regions_az/#AWS_Local_Zones">AWS's about page</a>.</p></li> <li><p><strong>Colourblindness</strong> - be reminded that it is often about difficulty in differentiating colours, not that colours disappearing entirely and the colours most affected by colour-vision deficiency are red and green. Best to avoid using colour alone to convey meaning in designs. More on this in <a href="https://joeclark.org/book/sashay/serialization/Chapter09.html">the chapter 9 of the book Building Accessible Websites</a>.</p></li> </ol> <h2> Note of the week </h2> <p>On the week 40 of 2021, a couple of major incidents in the tech industry including <a href="https://engineering.fb.com/2021/10/04/networking-traffic/outage/">hours-long Facebook outage</a> and <a href="https://www.videogameschronicle.com/news/the-entirety-of-twitch-has-reportedly-been-leaked/">Twitch data leak</a>, not to mention <a href="https://techcrunch.com/2021/09/26/signal-the-encrypted-messaging-app-is-currently-down-for-many-users/">Signal was down last week</a> as well. Seems like the importance of reliability and security are most significant in their absence. 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 a comment. Have a nice day!</p> git aws design