Ревізії Stop Using JavaScript, Use These Methods Instead

Korbs ревизій цього gist 2 days ago. До ревизії

1 file changed, 3 insertions, 2 deletions

README.md

			@@ -4,7 +4,7 @@
4	4
5	5		## Let's Talk First, About the JavaScript Issue
6	6
7		-	For years now JavaScript continues to be heavily overused for web features and functions that have standardized, native, and high-performance equivalents in HTML and CSS. In today's modern web standards, it now allows developers to replace these complex and unnesesary scripts with simple declarative tags that provide better accessibility and speed. It's also really annoying when developers decide to use entire libraries for these basic tasks such as jQuery and React logic, which I personally hate.
	7	+	For years now JavaScript continues to be heavily overused for web features, where now today you have functions that have standardized, native, and high-performance equivalents in HTML and CSS. In today's modern web standards, it now allows developers to replace these complex and unnesesary scripts with simple declarative tags that provide better accessibility and speed. It's also really annoying when developers decide to use entire libraries for these basic tasks such as jQuery and React logic, which I personally hate.
8	8
9	9		### Common Overused Scenarios
10	10
			@@ -20,6 +20,7 @@ A lot of these scenarios have had native solutions for years now, although some
20	20		- Complex Page Transitions
21	21		- Color Pickers and Complex Inputs
22	22		- Responsive Element Sizing
	23	+	- and much more
23	24
24	25		### Consequences
25	26
			@@ -28,7 +29,7 @@ Relying so much on JavaScript for these basic functions introduces a few risks:
28	29		- Performance "Tax": Every 500KB of unused and redundant code can lower a site's performance score by 10 - 20 points. JavaScript can be and is computationally "expensive" because it must be downloaded, parsed, and executed, which clogs the browser's main thread and delays rendering time for the webpage.
29	30		- Fragility: JavaScript is less forgiving than how HTML and CSS are. Just a single syntax error can end up breaking an entire webpage's functionality or worse, whereas browsers may often ignore minor errors in markup and styling.
30	31		- Accessibility Barriers: Doing custom-built JavaScript components can often fail to manage keyboard focus or screen reader announcements correctly, while native elements have these behaviors "baked in".
31		-	- CEO and Maintenance: Relying heavily on script-generated content can hinder search engine indexing. It adds layers of complexity for future maintenance compared to using standard, declarative code.
	32	+	- SEO and Maintenance: Relying heavily on script-generated content can hinder search engine indexing. It adds layers of complexity for future maintenance compared to using standard, declarative code.
32	33
33	34		## Native Alternatives
34	35

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 1 insertion, 1 deletion

README.md

			@@ -113,7 +113,7 @@ Another accordion, in this one if you click any of the items, the others will cl
113	113
114	114		## Fallbacks
115	115
116		-	### Noscript
	116	+	### Noscript - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript)
117	117
118	118		In some cases, you may need to disable or at least hide certain elements on the webpage if they require JavaScript regardless but aren't crucial. The tag `<noscript>` can be put in place as a fallback mechanism if the user's web-browser has JavaScript disabled.
119	119

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 1 insertion, 1 deletion

README.md

			@@ -140,6 +140,6 @@ function TogglePassword() {
140	140
141	141		![https://ocean.sudovanilla.org/media/gifs/7fea948c65dc3a07.gif](https://ocean.sudovanilla.org/media/gifs/7fea948c65dc3a07.gif)
142	142
143		-	This method is used in Zorn to hide all controls and show a warning popup explaining to the end-user that JavaScript is required for the video player, as it's impossible to build custom HTML video players without JavaScript. However, a neat thing that Zorn does is show a fallback button to the native player using the `<details/>` method, allowing end-users to instead display the browser's native video player without the need of JavaScript being enabled.
	143	+	This method is used in [Zorn](https://zorn.docs.sudovanilla.org/) to hide all controls and show a warning popup explaining to the end-user that JavaScript is required for the video player, as it's impossible to build custom HTML video players without JavaScript. However, a [neat thing that Zorn does is show a fallback button to the native player](https://ark.sudovanilla.org/MinPluto/Zorn/src/commit/987b5a743e61e2a04125424588cc68521bdec146/package/src/Features/Fallback.astro) using the `<details/>` method, allowing end-users to instead display the browser's native video player without the need of JavaScript being enabled.
144	144
145	145		Read more about how that works here: https://gist.sudovanilla.org/Korbs/3a5888045a7e41f085b44c84d7fd7441

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 8 insertions, 2 deletions

README.md

			@@ -117,7 +117,7 @@ Another accordion, in this one if you click any of the items, the others will cl
117	117
118	118		In some cases, you may need to disable or at least hide certain elements on the webpage if they require JavaScript regardless but aren't crucial. The tag `<noscript>` can be put in place as a fallback mechanism if the user's web-browser has JavaScript disabled.
119	119
120		-	For example, a password field that includes a reveal password button which uses JavaScript, hide it with CSS with `<noscript/>`:
	120	+	For example, a password field that includes a reveal password button which uses JavaScript, hide it with CSS with `<noscript>`:
121	121		```html
122	122		<form>
123	123		<label>New Password</label>
			@@ -136,4 +136,10 @@ function TogglePassword() {
136	136		}
137	137		</style>
138	138		</noscript>
139		-	```
	139	+	```
	140	+
	141	+	![https://ocean.sudovanilla.org/media/gifs/7fea948c65dc3a07.gif](https://ocean.sudovanilla.org/media/gifs/7fea948c65dc3a07.gif)
	142	+
	143	+	This method is used in Zorn to hide all controls and show a warning popup explaining to the end-user that JavaScript is required for the video player, as it's impossible to build custom HTML video players without JavaScript. However, a neat thing that Zorn does is show a fallback button to the native player using the `<details/>` method, allowing end-users to instead display the browser's native video player without the need of JavaScript being enabled.
	144	+
	145	+	Read more about how that works here: https://gist.sudovanilla.org/Korbs/3a5888045a7e41f085b44c84d7fd7441

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 27 insertions

README.md

			@@ -109,4 +109,31 @@ Another accordion, in this one if you click any of the items, the others will cl
109	109		<summary>Question here</summary>
110	110		<p>Answer here</summary>
111	111		</details>
	112	+	```
	113	+
	114	+	## Fallbacks
	115	+
	116	+	### Noscript
	117	+
	118	+	In some cases, you may need to disable or at least hide certain elements on the webpage if they require JavaScript regardless but aren't crucial. The tag `<noscript>` can be put in place as a fallback mechanism if the user's web-browser has JavaScript disabled.
	119	+
	120	+	For example, a password field that includes a reveal password button which uses JavaScript, hide it with CSS with `<noscript/>`:
	121	+	```html
	122	+	<form>
	123	+	<label>New Password</label>
	124	+	<input name="new_password" type="password" required/>
	125	+	<button onclick="TogglePassword()">Reveal Password</button>
	126	+	</form>
	127	+	<script>
	128	+	function TogglePassword() {
	129	+	document.querySelector('[name="new_password"]').type = Field.type === "password" ? "text" : "password"
	130	+	}
	131	+	</script>
	132	+	<noscript>
	133	+	<style>
	134	+	[onclick="TogglePassword()"] {
	135	+	display: none;
	136	+	}
	137	+	</style>
	138	+	</noscript>
112	139		```

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 83 insertions, 2 deletions

README.md

			@@ -11,9 +11,9 @@ For years now JavaScript continues to be heavily overused for web features and f
11	11		A lot of these scenarios have had native solutions for years now, although some are more recent than others.
12	12
13	13		- Dialog Modals and Popups
	14	+	- Dropdown Menus
14	15		- Accordions and Toggles
15	16		- Tooltips
16		-	- Dropdown Menus
17	17		- Form Validation
18	18		- Scroll-down animations
19	19		- Lazy Loading Images
			@@ -28,4 +28,85 @@ Relying so much on JavaScript for these basic functions introduces a few risks:
28	28		- Performance "Tax": Every 500KB of unused and redundant code can lower a site's performance score by 10 - 20 points. JavaScript can be and is computationally "expensive" because it must be downloaded, parsed, and executed, which clogs the browser's main thread and delays rendering time for the webpage.
29	29		- Fragility: JavaScript is less forgiving than how HTML and CSS are. Just a single syntax error can end up breaking an entire webpage's functionality or worse, whereas browsers may often ignore minor errors in markup and styling.
30	30		- Accessibility Barriers: Doing custom-built JavaScript components can often fail to manage keyboard focus or screen reader announcements correctly, while native elements have these behaviors "baked in".
31		-	- CEO and Maintenance: Relying heavily on script-generated content can hinder search engine indexing. It adds layers of complexity for future maintenance compared to using standard, declarative code.
	31	+	- CEO and Maintenance: Relying heavily on script-generated content can hinder search engine indexing. It adds layers of complexity for future maintenance compared to using standard, declarative code.
	32	+
	33	+	## Native Alternatives
	34	+
	35	+	### Dialog Modals and Popups - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog)
	36	+
	37	+	No need to write custom scripst to handle popups, you can use the `<dialog>` tag that is available natively in HTML.
	38	+
	39	+	This dialog example with provided with a header and quick description, along with a form inside it. Forms with a submit button are able to close the dialog. A button is at the top to show a team name and an edit button that'll use `popovertarget` to show the dialog
	40	+
	41	+	```html
	42	+	<div class="team">
	43	+	<h2>Team 2</h2>
	44	+	<button popovertarget="edit-team-2">Edit Team</button>
	45	+	</div>
	46	+
	47	+	<dialog id="edit-team-2" closedby="any" popover>
	48	+	<div class="dialog-header">
	49	+	<h2>Update Team</h2>
	50	+	<p>Change your team's name and color.</p>
	51	+	</div>
	52	+	<form>
	53	+	<label>Name</label>
	54	+	<input name="name" type="text" required/>
	55	+	<label>Color</label>
	56	+	<select>
	57	+	<option>Red</option>
	58	+	<option>Green</option>
	59	+	<option>Blue</option>
	60	+	</select>
	61	+	</form>
	62	+	</dialog>
	63	+	```
	64	+
	65	+	### Accordions and Dropdown Menus - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
	66	+
	67	+	I've been using the `<details>` tag personally to create dropdown menus for headers, elements, and more. They can also be used for accordions too.
	68	+
	69	+	Example for a dropdown menu:
	70	+	```html
	71	+	<details>
	72	+	<summary>Dropdown Menu</summary>
	73	+	<div class="dropdown">
	74	+	<a href="/">Home</a>
	75	+	<a href="/blog">Blog</a>
	76	+	<a href="/projects">Projects</a>
	77	+	<a href="/services">Services</a>
	78	+	</div>
	79	+	</details>
	80	+	```
	81	+
	82	+	For an accordion menu:
	83	+	```html
	84	+	<details>
	85	+	<summary>Question here</summary>
	86	+	<p>Answer here</summary>
	87	+	</details>
	88	+	<details>
	89	+	<summary>Question here</summary>
	90	+	<p>Answer here</summary>
	91	+	</details>
	92	+	<details>
	93	+	<summary>Question here</summary>
	94	+	<p>Answer here</summary>
	95	+	</details>
	96	+	```
	97	+
	98	+	Another accordion, in this one if you click any of the items, the others will close if they share the same `name`:
	99	+	```html
	100	+	<details name="question">
	101	+	<summary>Question here</summary>
	102	+	<p>Answer here</summary>
	103	+	</details>
	104	+	<details name="question">
	105	+	<summary>Question here</summary>
	106	+	<p>Answer here</summary>
	107	+	</details>
	108	+	<details name="question">
	109	+	<summary>Question here</summary>
	110	+	<p>Answer here</summary>
	111	+	</details>
	112	+	```

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 3 insertions, 1 deletion

README.md

			@@ -1,8 +1,10 @@
	1	+	![Thumbnail](https://via.sudovanilla.org/assets/blog/stop-using-js/blog-js-dumb.png)
	2	+
1	3		# Stop Using JavaScript, Use These Methods Instead
2	4
3	5		## Let's Talk First, About the JavaScript Issue
4	6
5		-	For years now JavaScript continues to be heavily overused for web features and functions that have standardized, native, and high-performance equivalents in HTML and CSS. In today's modern web standards, it now allows developers to replace these complex and unnesesary scripts with simple declarative tags that provide better accessibility and speed. It's also really annoying when developers decide to use entire libraries for these basic tasks such as jQuery and React logic, which I personally have hate torwards.
	7	+	For years now JavaScript continues to be heavily overused for web features and functions that have standardized, native, and high-performance equivalents in HTML and CSS. In today's modern web standards, it now allows developers to replace these complex and unnesesary scripts with simple declarative tags that provide better accessibility and speed. It's also really annoying when developers decide to use entire libraries for these basic tasks such as jQuery and React logic, which I personally hate.
6	8
7	9		### Common Overused Scenarios
8	10

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 29 insertions, 1 deletion

README.md

			@@ -1 +1,29 @@
1		-	_
	1	+	# Stop Using JavaScript, Use These Methods Instead
	2	+
	3	+	## Let's Talk First, About the JavaScript Issue
	4	+
	5	+	For years now JavaScript continues to be heavily overused for web features and functions that have standardized, native, and high-performance equivalents in HTML and CSS. In today's modern web standards, it now allows developers to replace these complex and unnesesary scripts with simple declarative tags that provide better accessibility and speed. It's also really annoying when developers decide to use entire libraries for these basic tasks such as jQuery and React logic, which I personally have hate torwards.
	6	+
	7	+	### Common Overused Scenarios
	8	+
	9	+	A lot of these scenarios have had native solutions for years now, although some are more recent than others.
	10	+
	11	+	- Dialog Modals and Popups
	12	+	- Accordions and Toggles
	13	+	- Tooltips
	14	+	- Dropdown Menus
	15	+	- Form Validation
	16	+	- Scroll-down animations
	17	+	- Lazy Loading Images
	18	+	- Complex Page Transitions
	19	+	- Color Pickers and Complex Inputs
	20	+	- Responsive Element Sizing
	21	+
	22	+	### Consequences
	23	+
	24	+	Relying so much on JavaScript for these basic functions introduces a few risks:
	25	+
	26	+	- Performance "Tax": Every 500KB of unused and redundant code can lower a site's performance score by 10 - 20 points. JavaScript can be and is computationally "expensive" because it must be downloaded, parsed, and executed, which clogs the browser's main thread and delays rendering time for the webpage.
	27	+	- Fragility: JavaScript is less forgiving than how HTML and CSS are. Just a single syntax error can end up breaking an entire webpage's functionality or worse, whereas browsers may often ignore minor errors in markup and styling.
	28	+	- Accessibility Barriers: Doing custom-built JavaScript components can often fail to manage keyboard focus or screen reader announcements correctly, while native elements have these behaviors "baked in".
	29	+	- CEO and Maintenance: Relying heavily on script-generated content can hinder search engine indexing. It adds layers of complexity for future maintenance compared to using standard, declarative code.

Korbs ревизій цього gist 1 week ago. До ревизії

Без змін

Korbs ревизій цього gist 1 week ago. До ревизії

1 file changed, 1 insertion

README.md(файл створено)

			@@ -0,0 +1 @@
	1	+	_

Новіше Пізніше