Leonel Mira leox23

Future Sticky Navigation with Glas Effect

A really cool modern sticky navigation with a glass effect and a menu button. Only Vanilla JS and (S)CSS.

True Encapsulation in JavaScript

How to achieve "private" in a dynamic language

If you're developing in a dynamically-typed language like JavaScript or Python, you may be dearly missing our friend "private" from statically-typed languages like C#, Java, and C++.

I'm sure plenty of developers know about this already, but I feel like no one ever talks about this. In all my years of studying programming, every time I've searched for how to achieve true encapsulation in JavaScript, the same answer always appears:

You can't.

There are many tutorials and articles available online which explain functional programming. Examples show small functions, which are composed into others which again get composed. It is hard to imagine how it would all work, then come the analogies and then the math. While the math is necessary to understand it can be difficult to grasp initially. The analogies on the other hand, (at least for me) are not relatable. Some articles assume the reader knows the different terminologies of FP. Over all I felt it is not inviting to learn.

This introduction is for those who have had a tough time understanding those analogies, taken the plunge to functional programming but still have not been able to swim. This is yet another tutorial on functional programming

Terminology

Functions as first class citizens

Functions are first class means they are just like anyone else, or rather they are not special, they behave the same as say primitives or strings or objects.

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

	<script>
	const iconSvg = `<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
	<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
	</svg>`;

	Swal.fire({
	showCancelButton: true,
	buttonsStyling: false,

	/* CUSTOMIZATIONS
	-------------------------------------------------------------------------------------------------
	$path: the path of the folder containing the es.exe executable, with a final
	slash.

	$paper: the base name of the paper folder containing the search results, without
	extension;

	$mode: controls how the minus sign, which introduces switches in es.exe, is
	treated/escaped. Three modes are available.


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */