svelte-base64

This is a simple application that encodes/decodes ASCII text or hex strings to/from base64 and provides reactive UI components to help illustrate the encoding process. You can easily view and fork this project on codesandbox:

Base64 Encoder/Decoder

• Input/output strings displayed in hex, decimal, binary, and base64 to demonstrate how input bytes are encoded to base64
• Mouseover/touch any part of the Hex/Base64 output to highlight all related bit groups and the matching base64/ASCII characters in the Lookup Tables
• Hex strings must contain only numbers and/or upper and lowercase hex digits (a-f, A-F, 0-9)
• Hex strings can be prefixed by "0x", but this is not required (e.g., 0xFE and FE both represent the value 254 and both will produce the same output when encoded to base64)
• Encoded strings must be valid base64 (standard) or base64url (url/filename safe) values

CSS Preprocessing

• Svelte 3 + Svelma integrated via svelte-preprocess
  • Svelma is a set of UI components for Svelte based on the Bulma CSS framework.
• Bulma/FontAwesome 5 integrated via node-sass

Rollup & Plugins Config

• Configured to process and minify SASS/SCSS files and copy topublic/build folder (node-sass, postcss/cssnano)
• Configured to copy FA font files from node_modules folder and copy to public folder
• Configured to minify entire bundle when building for production
• resolve, commonjs, and terser rollup plugins configured

Tests

• Cypress E2E tests created for basic encode/decode scenarios
• 1/5 test cases is failing due to bug that can not be reproduced outside of Cypress
• 5 test cases are each executed with 4 different screen types/orientations
• Input and expected output for both ASCII and Hex strings taken directly from the Examples and Illustrations and Test Vectors sections of RFC4648 which is the original specification for Base64 and other print-safe binary encodings

Please leave any feedback by logging an issue, especially bugs! Thanks.