-
Notifications
You must be signed in to change notification settings - Fork 3
/
articles.html
687 lines (528 loc) · 25.6 KB
/
articles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Articles</title>
<meta name="description" content="Long text: article, post. I'm attempting to write something. Mini Blogger.">
<meta name="keywords" content="text, article, articles, post, page, main,">
<link rel="alternate" type="application/rss+xml" title="Website RSS" href="/rss.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<link rel="icon" sizes="512x512" href="/img/logo.png" type="image/png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- main -->
<link rel="preload" href="./js/main.js" as="script">
<link rel="preload" href="./css/main.css" as="style">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="preload" href="./css/auto.css" as="style">
<link rel="stylesheet" type="text/css" href="./css/auto.css" id="theme">
<link rel="preload" href="./css/style.css" as="style">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<noscript>
<link rel="stylesheet" type="text/css" href="./css/noscript.css">
</noscript>
<!-- // main -->
<link rel="preload" href="./data/articlesJsonVar.js" as="script">
<link rel="preload" href="./projects/blog-1/script.js" as="script">
</head>
<body>
<!-- Nav v.1.2.2 -->
<!-- page, style.css, main.js, noscript.css -->
<!-- nav HTML part -->
<header>
<div class="wrapper3 navTop">
<div class="margin"></div>
<nav>
<a class="countMenuItem inlineBlock padding" style="padding-left: 0;" href="./index.html" title="nav1"><img class="logo2 reduceLight" src="./img/logo.png" alt="logo" style="max-width: 26px;"></a>
<div class="menuTop">
<!-- menu items -->
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./main-list.html">Main</a>
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./projects-page.html">Projects</a>
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./games-list.html">Games</a>
<!-- // menu items -->
</div>
<!-- // menuTop -->
<!-- dropdown menu -->
<!-- https://www.w3schools.com/howto/howto_js_dropdown.asp -->
<div id="dropdownMenuCSS"><!-- CSS menu if js off -->
<button onclick="dropdownMenuFunction();" class="brand inlineBlock padding" id="dropdownMenuButton">☰ Menu</button>
<div id="dropdownMenu" class="dropdownMenuContent shadow bg2 padding2 borderRadius2">
<div class="dropdownMenuWrapper">
<!--<div class="padding2">menu name</div>-->
<div class="dropdownMenuContentColumn">
<!-- menu items dublicate -->
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./main-list.html">Main</a>
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./projects-page.html">Projects</a>
<a class="countMenuItem brand borderBottomTransparent inlineBlock padding" href="./games-list.html">Games</a>
<!-- // menu items dublicate -->
</div>
</div>
</div>
</div>
<!--<hr />-->
<!-- // dropdown menu -->
<span class="countMenuItem"></span>
<span class="countMenuItem"></span>
<span class="countMenuItem"></span>
<a class="countMenuItem inlineBlock padding mClassNavUp brand" style="margin-right: var(--padding);" href="../" title="../Up">List (↑)</a>
<form class="noscriptHide inlineBlock padding" style="padding-right: 0;" method="GET" action="./site-search.html" role="search">
<!--<label for="siteSearch" class="xSmall op">search:</label>-->
<input id="siteSearch" type="search" placeholder="site search" name="q" autocomplete="off">
</form>
</nav>
</div>
</header>
<!-- // nav -->
<!--<hr>-->
<!-- content -->
<main class="content">
<h1 class="op tCenter insertIconTitle">Articles</h1>
<!--<span class="xSmall block tCenter op">Long text: article, post. I'm attempting to write something. Mini Blogger.</span>-->
<script src="./data/articlesJsonVar.js"></script>
<script>
// fresh data example in script.js
if(articleJsonVar == undefined||articleJsonVar == ''){
var articleJsonVar =
[
{
"id": 251,
"text": "test2 text2",
"url": "https:\/\/test2.com",
"tag": "#test2 #tag",
"time": 1671480576
},
{
"id": 250,
"text": "test text",
"url": "https:\/\/test.com",
"tag": "#test #tag",
"time": 1668444918
}
]
}
</script>
<div id="printBlog"></div>
<noscript>
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Title start end <br>Text start end</div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Instruction: how to create a website (HTML file, webpage, or HTML document). <br>To create an HTML page and view it, we will use your pre-installed programs, such as a text editor and a browser.
1. First step: you need to create a file "index.html" with the ".html" extension. To do this, use this instruction to enable file extensions:
Windows <a class="brand insertIcon" href="https://stackoverflow.com/a/71899738/22625440
">https://stackoverflow.com/a/71899738/22625440
</a>MacOS <a class="brand insertIcon" href="https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac
">https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac
</a>
Create a file: index.html
2. The second step is to place this code in an index.html file. To do this, open your index.html file in a text editor or in a code editor, copy this code, paste it into the editor, and save the changes or save file (or save as "index.html").
code:
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
3. Open your index.html file in a browser, such as Chrome, Firefox, Edge, or Safari, to see the result.
Sources:
HTML - <a class="brand insertIcon" href="https://en.wikipedia.org/wiki/HTML
">https://en.wikipedia.org/wiki/HTML
</a>Windows file extension - <a class="brand insertIcon" href="https://stackoverflow.com/a/71899738/22625440
">https://stackoverflow.com/a/71899738/22625440
</a>MacOS file extension - <a class="brand insertIcon" href="https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac">https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Responsive Web Design <br>Before the 1 step, this is the code in the <head></head> of the page, viewport meta tag optimized for mobile (this transforms the page for mobile):
<meta name="viewport" content="width=device-width, initial-scale=1.0"> *
This is one way to make a page responsive, there are many other ways.
TLDR
Responsive web design is a technique that makes websites fit different screen sizes. We use CSS to make designs responsive by setting the width of the element to 100% and adding a maximum limit to its width using max-width. This allows the element to adapt to different screen sizes without overflow.
Responsive web design is a technique used to ensure that websites can adapt to different screen sizes.
This is achieved using CSS, to make a design responsive, we follow these steps:
1. Set the width of the element to 100%. This means that the element will take up the entire width of the screen, regardless of its size. For example, we can use the following code:
div { width: 100%; }
2. Next, we add a maximum width, it's width limit of the element using "max-width". This is like a segment with a width that we need. For instance, we can set a maximum width of 500 pixels using the following code:
div { max-width: 500px; }
3. Now we combine the two rules as follows:
div {
width: 100%;
max-width: 500px;
border: 1px solid red;
height: 50px;
}
4. With these rules in place, the element will have a maximum width of 500 pixels as indicated in the second step (for design). If the width of the screen decreases, the first rule (width: 100%) will come into effect, and the element will occupy the full width of the screen without overflow element (100% - all free space) - responsive design.
In conclusion, with this method responsive design involves stretching the element using percent and adding a limit to its width, thereby enabling it to adapt to different screen sizes without overflow element. This is only one of the techniques.
Source:
* <a class="brand insertIcon" href="https://www.w3schools.com/html/html_responsive.asp
">https://www.w3schools.com/html/html_responsive.asp
</a>* <a class="brand insertIcon" href="https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
">https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
</a>
Other:
<a class="brand insertIcon" href="https://www.w3schools.com/html/html_responsive.asp
">https://www.w3schools.com/html/html_responsive.asp
</a><a class="brand insertIcon" href="https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design">https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Auto dark mode and auto light mode for browser and OS (app list) <br>List of application and extensions for auto dark theme and light theme mode. Automatic change of the theme based on the time of day or a custom time.
If you have Windows, Linux (Gnome DE) and the Firefox browser, then this topic is for you.
Windows:
Auto Dark Mode
<a class="brand insertIcon" href="https://apps.microsoft.com/detail/xp8jk4hzbvf435
">https://apps.microsoft.com/detail/xp8jk4hzbvf435
</a>repository
<a class="brand insertIcon" href="https://github.com/AutoDarkMode/Windows-Auto-Night-Mode
">https://github.com/AutoDarkMode/Windows-Auto-Night-Mode
</a>
Linux (Ubuntu or Gnome DE):
Night Theme Switcher
<a class="brand insertIcon" href="https://nightthemeswitcher.romainvigier.fr/
">https://nightthemeswitcher.romainvigier.fr/
</a><a class="brand insertIcon" href="https://extensions.gnome.org/extension/2236/night-theme-switcher/
">https://extensions.gnome.org/extension/2236/night-theme-switcher/
</a>repository
<a class="brand insertIcon" href="https://gitlab.com/rmnvgr/nightthemeswitcher-gnome-shell-extension
">https://gitlab.com/rmnvgr/nightthemeswitcher-gnome-shell-extension
</a>
Mozilla Firefox:
automaticDark - Time-Based Theme Changer
<a class="brand insertIcon" href="https://addons.mozilla.org/en-US/firefox/addon/automatic-dark/
">https://addons.mozilla.org/en-US/firefox/addon/automatic-dark/
</a>repository
<a class="brand insertIcon" href="https://github.com/skhzhang/time-based-themes
">https://github.com/skhzhang/time-based-themes
</a>
VSCode:
Sundial – Automatic night mode and settings switch
<a class="brand insertIcon" href="https://marketplace.visualstudio.com/items?itemName=muuvmuuv.vscode-sundial
">https://marketplace.visualstudio.com/items?itemName=muuvmuuv.vscode-sundial
</a>repository
<a class="brand insertIcon" href="https://github.com/muuvmuuv/vscode-sundial">https://github.com/muuvmuuv/vscode-sundial</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">List of search engines (2024) <br>Search engines with their own database:
-----------------------------------------------------------------
Google - The most popular search engine:
<a class="brand insertIcon" href="https://www.google.com/
">https://www.google.com/
</a>
Bing. The second most popular search engine. Recently introduced a chat bot for responses (Using ChatGPT):
<a class="brand insertIcon" href="https://www.bing.com/
">https://www.bing.com/
</a>
Other search engines :
-----------------------------------
Perplexity AI (Probably uses: Google and Bing API, Using: "Claude 3, GPT-4, and Mistral"):
<a class="brand insertIcon" href="https://www.perplexity.ai/
">https://www.perplexity.ai/
</a>
Ecosia - the search engine that plants trees. (Using Bing API):
<a class="brand insertIcon" href="https://www.ecosia.org/
">https://www.ecosia.org/
</a>
Yahoo | Mail, Weather, Search, Politics, News, Finance, Sports & Videos. (Using Microsoft Bing API):
<a class="brand insertIcon" href="https://search.yahoo.com/
">https://search.yahoo.com/
</a>
DuckDuckGo — Privacy, simplified. (Using Bing API):
<a class="brand insertIcon" href="https://duckduckgo.com/
">https://duckduckgo.com/
</a>
Resources on this topic:
---------------------------------------
<a class="brand insertIcon" href="https://en.wikipedia.org/wiki/List_of_search_engines">https://en.wikipedia.org/wiki/List_of_search_engines</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Notes on SEO <br>SEO:
====
- Title length: 30 and 60 characters.
- Description length: 30-155 characters.
- Keyword: less than 10% of the total words of a page.
SEO Tools:
-----------------
- <a class="brand insertIcon" href="https://www.bing.com/webmasters/
">https://www.bing.com/webmasters/
</a>- <a class="brand insertIcon" href="https://analytics.google.com/
">https://analytics.google.com/
</a>- <a class="brand insertIcon" href="https://search.google.com/search-console
">https://search.google.com/search-console
</a>- <a class="brand insertIcon" href="https://trends.google.com/trends/
">https://trends.google.com/trends/
</a>---
- <a class="brand insertIcon" href="https://clarity.microsoft.com/
">https://clarity.microsoft.com/
</a>
Title
--------
Example:
1. "Text text - site name"
2. "Text text / site name"
Delimiters: "|" and "/".
"Text text" - priority is given to the content and it is the first in "Site title".
Research:
========
How the Title looks on the top sites (SEO):
--------------------------------------------------------------------
Example - Wikipedia
<a class="brand insertIcon" href="https://en.wikipedia.org/wiki/Example
">https://en.wikipedia.org/wiki/Example
</a>
jack on X: "just setting up my twttr" / X
<a class="brand insertIcon" href="https://twitter.com/jack/status/20
">https://twitter.com/jack/status/20
</a>
Recap is here for all to cheer, update your app to see your year : r/recap
<a class="brand insertIcon" href="https://www.reddit.com/r/recap/comments/18intt1/recap_is_here_for_all_to_cheer_update_your_app_to/
">https://www.reddit.com/r/recap/comments/18intt1/recap_is_here_for_all_to_cheer_update_your_app_to/
</a>
Me at the zoo - YouTube
<a class="brand insertIcon" href="https://www.youtube.com/watch?v=jNQXAC9IVRw
">https://www.youtube.com/watch?v=jNQXAC9IVRw
</a>
Announcing Meta — the Facebook company’s new name. Meta is helping to build the metaverse, a place where we’ll play and connect in 3D.… | Instagram
<a class="brand insertIcon" href="https://www.instagram.com/p/CVlR5GFqF68/
">https://www.instagram.com/p/CVlR5GFqF68/
</a>
staff on Tumblr: Tumblr Tuesday: National Nothing Day
<a class="brand insertIcon" href="https://www.tumblr.com/staff/739686936250302464/tumblr-tuesday-national-nothing-day
">https://www.tumblr.com/staff/739686936250302464/tumblr-tuesday-national-nothing-day
</a>
Search results page:
---------------------------------
example - YouTube
<a class="brand insertIcon" href="https://www.youtube.com/results?search_query=example
">https://www.youtube.com/results?search_query=example
</a>
example - Google Search
<a class="brand insertIcon" href="https://www.google.com/search?q=example
">https://www.google.com/search?q=example
</a>
example - Search
<a class="brand insertIcon" href="https://www.bing.com/search?q=example
">https://www.bing.com/search?q=example
</a>
example - Search / X
<a class="brand insertIcon" href="https://twitter.com/search?q=example
">https://twitter.com/search?q=example
</a>
example - Reddit Search!
<a class="brand insertIcon" href="https://www.reddit.com/search/?q=example
">https://www.reddit.com/search/?q=example
</a>
example | Tumblr
<a class="brand insertIcon" href="https://www.tumblr.com/search/example
">https://www.tumblr.com/search/example
</a>
How the <a class="brand" rel="nofollow" href="./?q=%23hashtag">#hashtag</a> URL and title looks on the top sites:
---------------------------------------------------------------------------------------
<a class="brand" rel="nofollow" href="./?q=%23example">#example</a> - Search / X
<a class="brand insertIcon" href="https://twitter.com/hashtag/example
">https://twitter.com/hashtag/example
</a>
The most insightful stories about Example - Medium <a class="brand insertIcon" href="https://medium.com/tag/example
">https://medium.com/tag/example
</a>
example on Tumblr
<a class="brand insertIcon" href="https://www.tumblr.com/tagged/example
">https://www.tumblr.com/tagged/example
</a>
YouTube
<a class="brand insertIcon" href="https://www.youtube.com/hashtag/example
">https://www.youtube.com/hashtag/example
</a>
<a class="brand" rel="nofollow" href="./?q=%23example">#example</a> on Instagram | Hashtags <a class="brand insertIcon" href="https://www.instagram.com/explore/tags/example/
">https://www.instagram.com/explore/tags/example/
</a>
Title of the main page
==================
Google <a class="brand insertIcon" href="https://www.google.com/
">https://www.google.com/
</a>YouTube: Home <a class="brand insertIcon" href="https://www.youtube.com/
">https://www.youtube.com/
</a>Wikipedia <a class="brand insertIcon" href="https://www.wikipedia.org/
">https://www.wikipedia.org/
</a>Bing <a class="brand insertIcon" href="https://www.bing.com/
">https://www.bing.com/
</a>Facebook - log in or sign up <a class="brand insertIcon" href="https://www.facebook.com/
">https://www.facebook.com/
</a>Instagram <a class="brand insertIcon" href="https://www.instagram.com/
">https://www.instagram.com/
</a>Reddit - Dive into anything <a class="brand insertIcon" href="https://www.reddit.com/
">https://www.reddit.com/
</a>X. It's what's happening / X <a class="brand insertIcon" href="https://x.com">https://x.com</a> <a class="brand insertIcon" href="https://twitter.com/
">https://twitter.com/
</a>Trending topics on Tumblr <a class="brand insertIcon" href="https://www.tumblr.com/">https://www.tumblr.com/</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Web Design Resources and tools <br>Documentation:
=============
- MDN Web Docs <a class="brand insertIcon" href="https://developer.mozilla.org/
">https://developer.mozilla.org/
</a>- W3Schools Online Web Tutorials <a class="brand insertIcon" href="https://www.w3schools.com/
">https://www.w3schools.com/
</a>- Stack Overflow - Where Developers Learn, Share, & Build Careers <a class="brand insertIcon" href="https://stackoverflow.com/
">https://stackoverflow.com/
</a>- web.dev <a class="brand insertIcon" href="https://web.dev/
">https://web.dev/
</a>
Dev:
====
- PageSpeed Insights <a class="brand insertIcon" href="https://pagespeed.web.dev/
">https://pagespeed.web.dev/
</a>- The W3C Markup Validation Service <a class="brand insertIcon" href="https://validator.w3.org/
">https://validator.w3.org/
</a>- The W3C CSS Validation Service <a class="brand insertIcon" href="https://jigsaw.w3.org/css-validator/
">https://jigsaw.w3.org/css-validator/
</a>
SEO and statics:
=============
- Google Analytics <a class="brand insertIcon" href="https://analytics.google.com/
">https://analytics.google.com/
</a>- Google Search Console <a class="brand insertIcon" href="https://search.google.com/search-console
">https://search.google.com/search-console
</a>- Bing Webmaster Tools <a class="brand insertIcon" href="https://www.bing.com/webmasters/
">https://www.bing.com/webmasters/
</a>- Google Trends <a class="brand insertIcon" href="https://trends.google.com/
">https://trends.google.com/
</a>
Software:
========
- Firefox for desktop — Mozilla <a class="brand insertIcon" href="https://www.mozilla.org/firefox/new/
">https://www.mozilla.org/firefox/new/
</a>- Google Chrome - The Fast & Secure Web Browser Built to be Yours <a class="brand insertIcon" href="https://www.google.com/chrome/
">https://www.google.com/chrome/
</a>- Geany <a class="brand insertIcon" href="https://www.geany.org/
">https://www.geany.org/
</a>- Visual Studio Code - Code Editing. Redefined <a class="brand insertIcon" href="https://code.visualstudio.com/
">https://code.visualstudio.com/
</a>- Inkscape <a class="brand insertIcon" href="https://inkscape.org/
">https://inkscape.org/
</a>
Other:
=====
- Daring Fireball: Markdown <a class="brand insertIcon" href="https://daringfireball.net/projects/markdown/">https://daringfireball.net/projects/markdown/</a></div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">The worst website in the world <br>I want to create a page or site that will be the worst in the world. This is an incomplete list of what should be on it. This is a collection of what I noticed while visiting other sites and when something annoyed me.
Task:
- UX. Ads. Ads with a fixed position and occupying screen space.
- UX. Ads. The ad takes up half a page or more.
- UX. Ads. Too many ads.
- UX. Effects. Page loading progress before opening.
- UX. Image. Image without alt tag.
- UX. Image. Many animations.
- UX. Image. Many icons without a sprite.
- UX. Image. Many large size photos. Many large image photos.
- UX. Navigation. Empty hyperlink.
- UX. Player. Audio does not automatically play on a page designed for audio.
- UX. Player. Automatic video playback on a page that is not intended for video.
- UX. Popup. Cookie consent popup.
- UX. Popup. Cookie pop-up window with a choice: accept or subscribe.
- UX. Popup. Email subscription popup.
- UX. Popup. Fake notifications. + (1) New Messages! in title.
- UX. Popup. Push notification popup.
- UX. Popup. Registration pop-up window.
- UX. Popup. Sign-in prompt popup.
- UX. Prohibit copying and pasting into form input fields such as passwords or credit card numbers. <!--https://www.reddit.com/r/webdev/comments/1c0txo5/is_there_some_kind_of_industry_recommendation_to/#-->
- UX. Scroll. Modify scrolling speed.
- UX. Scroll. Not responsive. Horizontal page scrolling.
- UX. Scroll. The page automatically scrolls up, jumps.
- UX. Text selection is disabled. Forbidden to copy the text or the ability to copy text is disabled.
- UX. Text. Color. Bad color contrast.
- UX. Text. Incorrect heading order.
- UX. Text. More than three fonts.
---
Source: unfinished project.</div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<!-- post -->
<div class="wrapper post bgList border3List borderRadius2 padding3" id="">
<div class="postContent pre padding2List">Web design notes <br>Notes:
======
- Do not use emojis (emoji can have a double meaning and are difficult to read)
- Don't use duplicate content (license conflict)
- Name uppercase (grammar)
- Spaces in JavaScript for if and else
- Use standard font sizes (16px, 1em, 14px because non-standard (13.4px etc) are not suitable for CSS properties such as small, smaller)</div>
<div class="postFooter break2 small">
<div class="tagList tLeft left"></div>
<div class="tagList tRight right"></div>
</div>
</div>
<!-- // post -->
<div class="margin2 padding2"></div>
</noscript>
</main>
<!-- // content -->
<footer id="footer"></footer>
<script src="./js/main.js"></script>
<script src="./js/script.js"></script>
<script>
// fresh config in script.js
let blogConfig = {
"postLimit":"", // number
"embedStatus":"off", // off
"multiEmbedStatus":"on", // on
"tagListStatus":"", // off
"tagListLimit":"", // number
"targetOption":"", // blank
"bottomMsg":``, // bottom text
"display":"article", // grid, article
"timeStatus":"", // off, disable post time
};
</script>
<script src="./projects/blog-1/script.js" onload="blog('printBlog', articlesJsonVar, 'wrapper', './articles.html', blogConfig)"></script>
<script></script>
</body>
</html>