A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 9.3KB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Unreal Engine 5 is meant to ridicule web developers (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.theolognion.com/unreal-engine-5-is-meant-to-ridicule-web-developers/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Unreal Engine 5 is meant to ridicule web developers</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.theolognion.com/unreal-engine-5-is-meant-to-ridicule-web-developers/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>Our sources report that the underlying reason behind the impressive tech demo for Unreal Engine 5  by Epic Games is to ridicule web developers. </p>
  69. <p>According to the Washington Post, the tech demo includes a new dynamic lighting system and a rendering approach with a much higher geometric detail for both shapes and textures. For example, a single statue in the demo can be rendered with 33 million triangles, giving it a truly unprecedented level of detail and visual density.</p>
  70. <p>Turns out that the level of computational optimization and sheer power of this incredible technology is meant to make fun of web developers, who struggle to maintain 15fps while scrolling a single-page application on a $2000 MacBook Pro, while enjoying 800ms delays typing the corresponding code into their Electron-based text editors.</p>
  71. <figure class="kg-card kg-embed-card kg-card-hascaption"><iframe src="https://www.youtube.com/embed/qC5KtatMcUw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">VIDEO</iframe><figcaption>Each of hundreds of millions of triangles that compose this magnificent image is a direct evaluation of the skills of all web developers worldwide.</figcaption></figure>
  72. <p>"We are disappointed with our colleagues," says the head of Web Developers Union Peter Eanline. "Both 3D game- and web-development have fundamental problems to overcome. Sure, they work hard computing millions of states in real-time by applying linear algebra and physics while maintaining up to 60fps of 4k video output. But at the same time we expect them to acknowledge equally challenging tasks like highlighting dozens of lines of code with 16 <em>different</em> colors, or remembering the scroll position after user closes an absolutely-positioned div, or deciding whether to inject CSS via JS or scale up the static assets cluster with Kubernetes."</p>
  73. <p>The Web Developers Union members created an online petition to bring this potentially hostile decision of Epic Games to public light. The petition website is scheduled to go live in July 2020 (in approx. 43 days), as soon as the Node packages updating process is expected to finish.</p>
  74. </main>
  75. </article>
  76. <hr>
  77. <footer>
  78. <p>
  79. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  80. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  81. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  82. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  83. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  84. </p>
  85. <template id="theme-selector">
  86. <form>
  87. <fieldset>
  88. <legend>Thème</legend>
  89. <label>
  90. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  91. </label>
  92. <label>
  93. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  94. </label>
  95. <label>
  96. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  97. </label>
  98. </fieldset>
  99. </form>
  100. </template>
  101. </footer>
  102. <script type="text/javascript">
  103. function loadThemeForm(templateName) {
  104. const themeSelectorTemplate = document.querySelector(templateName)
  105. const form = themeSelectorTemplate.content.firstElementChild
  106. themeSelectorTemplate.replaceWith(form)
  107. form.addEventListener('change', (e) => {
  108. const chosenColorScheme = e.target.value
  109. localStorage.setItem('theme', chosenColorScheme)
  110. toggleTheme(chosenColorScheme)
  111. })
  112. const selectedTheme = localStorage.getItem('theme')
  113. if (selectedTheme && selectedTheme !== 'undefined') {
  114. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  115. }
  116. }
  117. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  118. window.addEventListener('load', () => {
  119. let hasDarkRules = false
  120. for (const styleSheet of Array.from(document.styleSheets)) {
  121. let mediaRules = []
  122. for (const cssRule of styleSheet.cssRules) {
  123. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  124. continue
  125. }
  126. // WARNING: Safari does not have/supports `conditionText`.
  127. if (cssRule.conditionText) {
  128. if (cssRule.conditionText !== prefersColorSchemeDark) {
  129. continue
  130. }
  131. } else {
  132. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  133. continue
  134. }
  135. }
  136. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  137. }
  138. // WARNING: do not try to insert a Rule to a styleSheet you are
  139. // currently iterating on, otherwise the browser will be stuck
  140. // in a infinite loop…
  141. for (const mediaRule of mediaRules) {
  142. styleSheet.insertRule(mediaRule.cssText)
  143. hasDarkRules = true
  144. }
  145. }
  146. if (hasDarkRules) {
  147. loadThemeForm('#theme-selector')
  148. }
  149. })
  150. </script>
  151. </body>
  152. </html>