Use object with iframe fallback to support all mobile browsers.
http://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.png00Génesishttp://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.pngGénesis2021-02-28 02:13:002022-03-06 19:26:36Embedding PDF files into HTML
http://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.png00Génesishttp://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.pngGénesis2021-01-19 15:38:002022-03-06 19:27:58Modern horizontal and vertical center
The original comic was painted by John Martz in 2009 and released under a Creative Commons license. The main critics were for IE6 and IE7 who somehow inherited its problematic genes. In this new updated version I painted how Safari became the new Internet Explorer and how we have lost browser diversity due to Chrome (Chromium) dominance.
http://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.png00Génesishttp://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.pngGénesis2020-12-06 19:24:372022-03-06 19:37:07Web Browsers War Comic (Updated)
You probably know about loading="lazy" for images and iframes but what if you want to do something similar with a div or any of your components… To the rescue CSS with content-visibility: auto
content-visibility is a CSS property that controls whether and when an element’s content is rendered. It only renders the content of an off-screen component when it becomes on-screen. As an example I use it as sustituted of Svelte Lazy component what it’s great but I prefer as less dependences as possible. Keep in mind that as of the date of this post, this porwerful CSS property is not supported everywhere.
http://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.png00Génesishttp://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.pngGénesis2020-11-10 15:55:002021-06-10 16:06:00How to Lazy Loading anything
Reasoning: TypeScript introduces additional complexity with its type system, build process, and configuration. For small or fast-moving teams, this can slow down development, as developers spend more time setting up, understanding, and maintaining type definitions.
2. Steeper Learning Curve
Reasoning: TypeScript adds new concepts like interfaces, generics, and enums, which may not be familiar to developers who are used to the flexibility of JavaScript. This steeper learning curve can be a barrier for teams that have JavaScript-heavy expertise.
3. Tooling and Build Overhead
Reasoning: TypeScript requires a build step (transpilation to JavaScript) before code can be run in browsers or Node.js. This adds additional tooling, which can complicate the build process, slow down CI/CD pipelines, and introduce dependencies that need maintenance.
4. JavaScript Ecosystem Sufficiency
Reasoning: Many modern JavaScript development tools, editors, and frameworks have excellent support for JavaScript (e.g., VSCode offers intelligent code completion and error detection even for plain JavaScript). This reduces the need for TypeScript, as modern tools can already provide many of the benefits without adopting a new language.
5. Dynamic Nature of JavaScript
Reasoning: JavaScript’s dynamic nature allows developers to be flexible with how they write and structure code. TypeScript’s strict typing can feel restrictive and overly verbose for those who prefer JavaScript’s flexibility, especially in dynamic web applications or prototype-heavy development.
6. Faster Prototyping
Reasoning: JavaScript allows for quick prototyping, which is often important in startups or early-stage projects. With TypeScript, the overhead of defining types can slow down this process when the focus is on rapidly testing new ideas.
7. Library/Dependency Compatibility
Reasoning: Not all JavaScript libraries have well-maintained or accurate TypeScript types. This can lead to issues where developers have to manually define types for third-party libraries, adding time and complexity. JavaScript, by contrast, is compatible with any library out-of-the-box.
8. TypeScript Doesn’t Eliminate Runtime Errors
Reasoning: While TypeScript can catch some errors at compile time, it doesn’t eliminate runtime errors, especially when dealing with dynamic data (like API responses). Developers still need to write robust runtime checks in JavaScript, and some argue that focusing too much on compile-time types doesn’t necessarily improve code quality or reliability.
9. Increased Maintenance
Reasoning: TypeScript requires additional maintenance for types, especially in large codebases where the data model changes frequently. Developers may need to update type definitions alongside the actual code, which can lead to extra work and potential for mistakes if the types get out of sync with the implementation.
10. Interoperability and Setup Issues
Reasoning: TypeScript’s integration into legacy JavaScript projects or complex toolchains can cause interoperability issues. Configuring TypeScript to work with different module systems, bundlers, and transpilers can be quite problematic.
11. Focus on Clean Code Principles
Reasoning: Some teams prefer to focus on clean code principles (e.g., modularization, meaningful naming, testing, no code) rather than using TypeScript to enforce correctness. They argue that discipline in writing JavaScript can achieve many of the same outcomes without needing a type system.
12. Use JSDoc Instead
Reasoning: JSDoc allows developers to add type annotations directly in JavaScript code without requiring TypeScript’s tooling and setup. For teams that want some benefits of type safety but find TypeScript too restrictive or complex, JSDoc can provide a lightweight alternative to adding type hints and generating documentation without enforcing a strict type system.
13. Focus on Higher-Level Testing Over Static Typing
Reasoning: Most bugs occur in component integration, not from isolated units or static typing. Given that higher-level testing is slower and more expensive, prioritizing integration tests over static typing may provide better value, especially in dynamic projects. This approach better captures complex, real-world bugs and avoids the false sense of security that sometimes comes from relying on type systems.
Overall: While TypeScript offers benefits, its additional complexity and overhead might not justify the advantages for all projects, especially when teams can achieve similar quality goals through other practices in modern JavaScript.
http://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.png00Génesishttp://gengns.com/wp-content/uploads/2015/05/logo-onepage-300x66.pngGénesis2020-10-30 19:02:002024-10-30 20:37:00Why Many Developers and Teams Stick to JavaScript: A Look at Key Reasons for Skipping TypeScript
Embedding PDF files into HTML
/in HTML5/by GénesisUse object with iframe fallback to support all mobile browsers.
Modern horizontal and vertical center
/in CSS3, HTML5/by GénesisWeb Browsers War Comic (Updated)
/in Design/by GénesisThe original comic was painted by John Martz in 2009 and released under a Creative Commons license. The main critics were for IE6 and IE7 who somehow inherited its problematic genes. In this new updated version I painted how Safari became the new Internet Explorer and how we have lost browser diversity due to Chrome (Chromium) dominance.
How to Lazy Loading anything
/in CSS3, HTML5/by GénesisYou probably know about
loading="lazy"
for images and iframes but what if you want to do something similar with adiv
or any of your components… To the rescue CSS withcontent-visibility: auto
content-visibility is a CSS property that controls whether and when an element’s content is rendered. It only renders the content of an off-screen component when it becomes on-screen. As an example I use it as sustituted of Svelte Lazy component what it’s great but I prefer as less dependences as possible. Keep in mind that as of the date of this post, this porwerful CSS property is not supported everywhere.
Why Many Developers and Teams Stick to JavaScript: A Look at Key Reasons for Skipping TypeScript
/in Tooling/by Génesis1. Added Complexity
Reasoning: TypeScript introduces additional complexity with its type system, build process, and configuration. For small or fast-moving teams, this can slow down development, as developers spend more time setting up, understanding, and maintaining type definitions.
2. Steeper Learning Curve
Reasoning: TypeScript adds new concepts like interfaces, generics, and enums, which may not be familiar to developers who are used to the flexibility of JavaScript. This steeper learning curve can be a barrier for teams that have JavaScript-heavy expertise.
3. Tooling and Build Overhead
Reasoning: TypeScript requires a build step (transpilation to JavaScript) before code can be run in browsers or Node.js. This adds additional tooling, which can complicate the build process, slow down CI/CD pipelines, and introduce dependencies that need maintenance.
4. JavaScript Ecosystem Sufficiency
Reasoning: Many modern JavaScript development tools, editors, and frameworks have excellent support for JavaScript (e.g., VSCode offers intelligent code completion and error detection even for plain JavaScript). This reduces the need for TypeScript, as modern tools can already provide many of the benefits without adopting a new language.
5. Dynamic Nature of JavaScript
Reasoning: JavaScript’s dynamic nature allows developers to be flexible with how they write and structure code. TypeScript’s strict typing can feel restrictive and overly verbose for those who prefer JavaScript’s flexibility, especially in dynamic web applications or prototype-heavy development.
6. Faster Prototyping
Reasoning: JavaScript allows for quick prototyping, which is often important in startups or early-stage projects. With TypeScript, the overhead of defining types can slow down this process when the focus is on rapidly testing new ideas.
7. Library/Dependency Compatibility
Reasoning: Not all JavaScript libraries have well-maintained or accurate TypeScript types. This can lead to issues where developers have to manually define types for third-party libraries, adding time and complexity. JavaScript, by contrast, is compatible with any library out-of-the-box.
8. TypeScript Doesn’t Eliminate Runtime Errors
Reasoning: While TypeScript can catch some errors at compile time, it doesn’t eliminate runtime errors, especially when dealing with dynamic data (like API responses). Developers still need to write robust runtime checks in JavaScript, and some argue that focusing too much on compile-time types doesn’t necessarily improve code quality or reliability.
9. Increased Maintenance
Reasoning: TypeScript requires additional maintenance for types, especially in large codebases where the data model changes frequently. Developers may need to update type definitions alongside the actual code, which can lead to extra work and potential for mistakes if the types get out of sync with the implementation.
10. Interoperability and Setup Issues
Reasoning: TypeScript’s integration into legacy JavaScript projects or complex toolchains can cause interoperability issues. Configuring TypeScript to work with different module systems, bundlers, and transpilers can be quite problematic.
11. Focus on Clean Code Principles
Reasoning: Some teams prefer to focus on clean code principles (e.g., modularization, meaningful naming, testing, no code) rather than using TypeScript to enforce correctness. They argue that discipline in writing JavaScript can achieve many of the same outcomes without needing a type system.
12. Use JSDoc Instead
Reasoning: JSDoc allows developers to add type annotations directly in JavaScript code without requiring TypeScript’s tooling and setup. For teams that want some benefits of type safety but find TypeScript too restrictive or complex, JSDoc can provide a lightweight alternative to adding type hints and generating documentation without enforcing a strict type system.
13. Focus on Higher-Level Testing Over Static Typing
Reasoning: Most bugs occur in component integration, not from isolated units or static typing. Given that higher-level testing is slower and more expensive, prioritizing integration tests over static typing may provide better value, especially in dynamic projects. This approach better captures complex, real-world bugs and avoids the false sense of security that sometimes comes from relying on type systems.
Overall: While TypeScript offers benefits, its additional complexity and overhead might not justify the advantages for all projects, especially when teams can achieve similar quality goals through other practices in modern JavaScript.