OcttKB/Wiki-OcttKB/tiddlers/Normal/Web_Development.tid

63 lines
4.3 KiB
Plaintext
Raw Normal View History

2023-02-28 12:07:24 +01:00
created: 20230221204801305
creator: Octt
modified: 20230227205201140
modifier: Octt
tags:
title: Web/Development
!!! ''References''
; Misc
: [[web.dev|https://web.dev/]] - //Guidance to build modern web experiences that work on any browser//
; DOM querying
: [[Find all text nodes in HTML page|https://stackoverflow.com/a/10730777]]
: [[Find the closest ancestor element that has a specific class|https://stackoverflow.com/a/49516201]] | [[Element.closest()|https://developer.mozilla.org/en-US/docs/Web/API/Element/closest]]
; DOM manipulation
: [[Insert a childNode to a specific position|https://stackoverflow.com/a/26259544]]
: [[Prepend/append childNode to beginning/end of element|https://stackoverflow.com/a/45656684]]
: [[Replace a DOM Element|https://www.javascripttutorial.net/dom/manipulating/replace-a-dom-element/]]
!!! ''Frameworks''
* ''[[Alpine.js|https://alpinejs.dev/]]'' - //Rugged, minimal<<fnote "15 attributes, 6 properties, 2 methods">> framework for composing JavaScript behavior in the markup// - [[[Git|https://github.com/alpinejs/alpine]]]
** [[HyperJS|https://js.hyperui.dev/]] - //Collection of Alpine JS components// - <<[ "[[Git|https://github.com/markmead/hyperjs]]">>
* ''[[Electron|https://www.electronjs.org/]]'' - //Build cross-platform desktop apps with JavaScript, HTML, and CSS// - [[[Git|https://github.com/electron]]]
* ''[[React|https://reactjs.org/]]'' - //Building UI-oriented apps with [[JSX|https://en.wikipedia.org/wiki/JSX_(JavaScript)]]// - [[[Git|https://github.com/facebook/react]]]
** ''[[React Native|https://reactnative.dev/]]'' - //Compiling ReactJS apps to native ones// - [[[Git|https://github.com/facebook/react-native]]]
* ''[[Tauri|https://tauri.app/]]'' - //Use Rust to build desktop and mobile apps with a web frontend// - [[[Git|https://github.com/tauri-apps/]]]
!!! ''Tools''
!!!! ''Tools/Libraries''
* https://github.com/csstools/oldie - //tranforms CSS to be compatible with old Internet Explorer//
; Minification
: ~~[[node-minify|https://github.com/srod/node-minify]] - //Light Node.js module and CLI app that compress javascript, css and html files//~~
: [[UglifyJS|https://lisperator.net/uglifyjs/]] - //JavaScript parser / mangler / compressor / beautifier// - <<[ "[[Git|https://github.com/mishoo/UglifyJS]]">>
* [[FileSaver.js|https://github.com/eligrey/FileSaver.js]] - //An HTML5 saveAs() FileSaver implementation//
* [[srcdoc-polyfill|https://github.com/jugglinmike/srcdoc-polyfill]] - //A shim for the iFrame "srcdoc" attribute//
!!! ''Misc''
* [[Convert any website into a PWA in just 3 simple steps|https://dev.to/developertharun/convert-any-website-into-a-pwa-in-just-3-simple-steps-35pp]]
* [[SPA source code recovery by un-Webpacking source maps|https://medium.com/@rarecoil/spa-source-code-recovery-by-un-webpacking-source-maps-ef830fc2351d]] - ''[[unwebpack-sourcemap|https://github.com/rarecoil/unwebpack-sourcemap]]''
* [[How to inject service-worker.js to a webpage via Chrome Extension? I want to add offline functionality to the existing page|https://stackoverflow.com/questions/72356003/how-to-inject-service-worker-js-to-a-webpage-via-chrome-extension-i-want-to-add]]
* [[Hail, Babel! The Transpiling Overlord|https://www.telerik.com/blogs/hail-babel-the-transpiling-overlord]]
** [[Using babel to transpile to es3 (safari compliant)|https://stackoverflow.com/questions/40205547/using-babel-to-transpile-to-es3-safari-compliant]]
** [[How to Convert ES6 into ES5 using Babel|https://medium.com/@SunnyB/how-to-convert-es6-into-es5-using-babel-1b533d31a169]]
* [[How to add full text search to your website|https://medium.com/dev-channel/how-to-add-full-text-search-to-your-website-4e9c80ce2bf4]]
** [[BlogSearch|https://github.com/kbumsik/blogsearch]]
** [[MiniSearch, a client-side full-text search engine|https://lucaongaro.eu/blog/2019/01/30/minisearch-client-side-fulltext-search-engine.html]]
** [[Client-side full-text search in CSS|https://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html?]] (+ a bit of JS :c)
** [[Lunr.js|https://github.com/olivernn/lunr.js/]]
*** [[Add Search to Your Static Site with Lunr.js (Hugo, Vanilla JS)|https://aaronluna.dev/blog/add-search-to-static-site-lunrjs-hugo-vanillajs/]]
*** [[Adding Super Fast Frontend Search in Rails with Lunr|https://blog.cloud66.com/adding-super-fast-frontend-search-in-rails-with-lunr]]