Create a Scope limited Codeblock Web Component

Create a Scope limited Codeblock Web Component Table of Content Create a custom element Lazy loading the script Prism manual mode One way data flow and mutation observer Conclusion Known limitations Recently I started with a personal project portfolio website and one of the challenges I had is to allow code highlighting. There are tools like Prism.js, Highlight.js that does the job if my goal is only to have one theme shown at the same time. On the page that needs syntax highlighting, the design is to have two different themes applied for different sections on the same page. With Prism.js, there isn’t an out-of-box method loading two different theme stylesheet without style clashing. The problem could be abstracted to allow each loaded stylesheet has their own scope so they don’t affect each other when shown on the same page. There are a few key points in this challenge: Each theming stylesheet share exactly the same name space and selector names. We should avoid interce

NPM dependencies vs devDependencies

What's the difference between dependencies and devDependencies in npm? If you are creating just an application or a service, there isn't a difference in the usage. However, if you are creating a library, this following key part may help you understand the difference: Anything is the devDependencies list will NOT be installed in the client application while everything in the dependencies list will be. Why does it matter? Scenario 1 Imagine your library is to offer a date time parser to its users. You may be using eslint for your development linting check. If you decide to put it in the dependencies list, when user install your library package, the eslint listed in your "dependencies" list will also be installed into users' node_modules folder, even if users have decided not to use any eslint feature at all for their applications. This increase the overall package size for their application if it is a Node JS application and also force the client to unneces

Distributed Transaction Management with REST and Try Confirm/Cancel Pattern

distributed-transaction-management-with-rest-and-try-confirm-cancel-pattern This article introduces how to manage transactions effectively in distributed REST services with Try Confirm/Cancel (TCC) pattern. It also provides a repository that is a simplified Java implementation for anyone who is interested in learning the TCC pattern. This repository attempts to trim the most of the common boilerplate, but only preserve the minimal that could be most straightforward to observe this pattern. It could be adapted to use any backend stack. Try Confirm/Cancel (TCC) Pattern TCC is a distributed transactions pattern that fits in the stateless REST services. It is originally proposed by Guy Pardon, the creator of Atomikos. Useful References Conference Speech By Guy Pardon TCC for REST API (API specification) Spring Cloud TCC Example By Chris About This Repository This repository is a simplified Java implementation for anyone who is interested in learning the TCC p

Spring JMS and JPA XA Transactions with WebLogic

spring-jms-and-jpa-xa-transactions-with-weblogic This article shows the configuration of using XA transactions with the resources managed by WebLogic server. There are three parts of configurations for this XA transactions to work - JMS, JPA and JTA. Both JMS and JPA are acquired through the JNDI registry and the XA transaction manager implementation uses the one from the WebLogic server. This configuration relies on WebLogic server. The concept should be similar and applicable to other JEE application servers. With these configurations, we could easily use @Transactional annotation on the services for XA transactions. Excerpt @Configuration public class JmsConfiguration { // properties... @Bean public ConnectionFactory connectionFactory ( ) { return lookupByJndiTemplate ( jmsConnectionFactory , ConnectionFactory . class ) ; } @Bean public JndiTemplate jndiTemplate ( ) { Jnd

Recursively Move a Directory

recursively-move-a-directory This article shows one effective implementation that follows the Visitor Pattern to recursively move a directory using Java NIO library. public static void move ( Path source , Path target ) throws IOException { class FileMover extends SimpleFileVisitor < Path > { private Path source ; private Path target ; private FileMover ( Path source , Path target ) { this . source = source ; this . target = target ; } @Override public FileVisitResult visitFile ( final Path file , final BasicFileAttributes attrs ) throws IOException { Path newFile = target . resolve ( source . relativize ( file ) ) ; Files . move ( file , newFile , StandardCopyOption . REPLACE_EXISTING ) ; return FileVisitResult . CONTINUE ; } @Override public FileVisitResult pre

Creating a Library Project for Spring Boot

creating-a-library-project-for-spring-boot This article introduces the key points when creating a library for spring boot project. It could be common that over the years you have created a number of services that could be reused by other spring projects. It then makes sense to make the reusable modules such as a library and install it in your local repository for later use. Here are the key points to consider when building a spring boot library. release version build plugin dependency injection autoconfigurations Release Version To guarantee spring boot works the way you expect, it is recommended to keep update the release versions of the library so that it supports some versions of the spring boot minor version. A good practice is to monitor change spring boot changelog and see if there are any conflicting dependencies that are used in the library project. If there is, introduce a new version to resolve the conflict. Build Plugin If the projects refere

Wrap A Command with Builder Pattern

wrap-a-command-with-builder-pattern This article shows a well-designed way to wrap a command and expose it through API with the classic Builder pattern. In this tutorial, you will learn how to write the Builder pattern, and how to direct standard output stream and standard error stream from the command to the input stream of your API. In a scenario that we have this command line application that will send some information to a server developed using some exotic framework or in a completely a different programming language, which increase the difficulty to reference it directly in your client application. It is used so often in the integration test that you feel the strong need to convert it to an API so that your projects could use it directly from your code without the knowledge on what exactly the correct command line is to have it send the correct information. If this scenario is too complicated for you, let’s just say you want to run a command that execute a j