Javascript

Introduction TEI (Text Encoding Initiative) is an international standard for digitally structuring texts in the humanities. It is used in libraries, museums, and academic research, but writing TEI/XML directly requires knowledge of markup, making the barrier to entry high. This is where conversion tools from Microsoft Word (.docx) to TEI/XML come in. A well-known example is TEI Garage (formerly OxGarage), but its multi-purpose nature makes the UI somewhat complex. This time, I created a simple browser-based tool specialized for DOCX to TEI/XML conversion. ...

Introduction I created a Japanese tutorial for ethers.js, a JavaScript library for Ethereum. https://github.com/nakamura196/ethers-ja-tutorial It is also published as a static site using VitePress. https://nakamura196.github.io/ethers-ja-tutorial/ Background ethers.js is one of the most widely used libraries in Ethereum development. Japanese articles about v6 were mostly focused on migration guides from v5, and there was no systematic tutorial for beginners to learn from scratch. Since the official documentation is only available in English, I created a tutorial that allows learners to study the basics step by step in Japanese. ...

Introduction One day, I noticed that annotations could no longer be created at all in a IIIF annotation editor deployed on Vercel. It worked correctly on the local development server, but in the production environment, drawing mode could not be entered. There were no console errors. The UI buttons switched correctly, but dragging on the image did nothing. The cause was an automatic upgrade of Annotorious due to caret (^) specification in package.json, and a state management library migration in v3.7.13 that caused issues with webpack’s production build. ...

Introduction I localized and published a Japanese version of the data visualization tool RAWGraphs. https://rawgraphs-ja.vercel.app/ RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data. What is RAWGraphs? RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy. https://www.rawgraphs.io/ Key features: ...

Overview I had an opportunity to highlight TeX with Ace.js, so here are my notes. I referenced the following article. https://banatech.net/blog/view/11 I hope this serves as a helpful reference. Screen Example Demo Site https://nakamura196.github.io/ace_latex/ Repository https://github.com/nakamura196/ace_latex Source Code < テ h \ \ キ \ \ / t < < u u b ス 右 e h m h / b s s e ト 注 n / t l e < h o < < < e e g { d b m a t e d d s s p p i （ { / o l l d i a y i c s i c r / c c a a n サ d c e e e e e e } e s d > a > t d > v r r n r e s r o c c { ン o d d d d d d ) d c y n l > i c t o f c i n k k d プ c n i i i i i i e e ; i r > g e i p = e s e r p s a a o ル u s e t t t t t t n n t i = > d t " g s r i t t g g c ） m t d o o o o o o a a o p " A = h r o r p > e e u } e i r r r r r r b b r t e C " t i r e t t [ { m テ n e t . . . . . . l l . > n E e t t i r > e d m e キ t d o s g g g $ s e e s " d p y g p x v u n ス } i r e e e e b e B S e > i i s = i o t i l t ト ` t . t t t t l t a n t n t : " n l p t } ; o s F S S S o O s i V o / s = i = s i r e o e e e c p i p a A r / h " c ] c t n s s s k t c p l c " c a a y ` { o = T t s s s S i A e u t d 5 n = \ g l h S i i i c o u t e i s n 1 o " \ r } a e i o o o r n t s ( o t j 2 n n u a c m z n n n o s o : t n y s - y o s p e e e ( ( ( l ( c e < l . o m - e h . ( ( ) ) ) l { o t x / e c V o r p i e " 1 . . . i m r t t = l y u e a c d a 4 s s s n p u , i " o p s f c s i c ) e e e g l e t w u 4 " e k } t e ; t t t e , 1 l i d 8 r a ( / M U T = t ) e d f / r g " t o s a i ; > t l 6 e e e h d e b I o h a 1 r { d e e W S n n : r 0 " h i m ( r i f : e D i t e " a z i 1 . 5 r o / a p e n t 0 c J a r m c M ( i r 0 o o g " o e 4 t u % m 5 i ) n d ) y e ; / 7 n ; o m e ; ; , a 7 o k o ( h j c , a d t e a v r i e r i x p y " / u g / 2 u ) l e h l v m ; a ) t i X i t ; : b + n e s F , x 4 / c c " 0 a 0 i ) 0 c k d ; p e Y } x / a ; 1 I . 6 b 2 s o 3 2 r . t d 2 Z e / R r a q : c B e R 1 . z p j j x s Z " h s 7 o + l y i / d v O g E r H a T y z ; U " e > f < b / X d k i / v B > 8 P 0 B 7 6 b O K 3 t L 1 z e F / Q c X l y i A = = "

Introduction I previously wrote the following article, but GPT-4’s explanation was more useful, so I am sharing it here. How to Implement Exact Non-Match Search in JavaScript Fuse.js is a lightweight fuzzy search library that operates on the client side. However, it is not suitable for the purpose of exact non-match search. Instead, you can easily implement it using JavaScript’s Array methods. Exact Non-Match Search Example The following example uses the filter method to perform an exact non-match search. ...

Overview Fuse.js is a search engine built in JavaScript. https://fusejs.io/ It is very useful as a search engine when creating frontend-only applications. This time, I needed to implement exact non-match searches using Fuse.js, which required some query tricks, so this is a memo. Advanced Search Fuse.js supports various types of searches, including exact/partial match and partial non-match. These are described on the following page. https://fusejs.io/examples.html#extended-search A Japanese translation is also available in the following article. ...

Problem When loading TEI/XML files and visualizing them with JavaScript (such as Vue.js), there were cases where unintended whitespace was inserted. Specifically, when writing HTML like the following: < t / e < t m d / e p i お < お d m l v 問 a 願 i p a > い い v l t 合 h し > a e わ r ま t > せ e す e は f > = " # " > こ ち ら か ら < / a > It was displayed as shown below, with unintended spaces inserted: “お問い合わせは こちらから お願いします”. ...