DEV Community: Exousia KASEKA

Exploring TypeScript 5.8 Beta: New Features, Improvements, and Future Perspectives

Exousia KASEKA — Fri, 07 Feb 2025 18:10:17 +0000

TypeScript 5.8 Beta has just been announced, bringing exciting new features, performance improvements, and enhanced developer experience. In this article, we'll explore the key updates, discuss their impact, and highlight areas where improvements could still be made.

1. Getting Started with TypeScript 5.8 To start using TypeScript 5.8 Beta, you can install it via npm:

pnpm install -g typescript@beta

Or update it in your project:

pnpm install --save-dev typescript@beta

Check the installed version:

tsc --version

Now let's dive into what's new!

2. Key Features and Improvements

2.1. `using` Keyword for Disposable Resources

TypeScript 5.8 introduces the using keyword, which allows automatic resource disposal when dealing with objects that need cleanup (similar to try-with-resources in Java or using in C#).

Example:

class FileHandler { 
[Symbol.dispose]() { 
console.log("File closed!"); 
} 
} 

function processFile() { 
using file = new FileHandler(); console.log("Processing file..."); 
} 

processFile(); 
// Output: 
// Processing file... 
// File closed!

This feature helps prevent resource leaks and makes cleanup more predictable.

2.2. `const` Type Parameters

TypeScript 5.8 allows marking type parameters as const, preserving literal types across function calls.

Example:

function logType<const T>(value: T): void 
{ 
  console.log(typeof value); 
} 

logType(42); // 'number' 
logType("TS"); // 'string'

This enhances type inference, reducing the need for explicit type annotations.

2.3. Better Type Narrowing for Logical Operators

TypeScript now better understands conditions inside logical operators like &&, ||, and ??, leading to improved type inference.

Example:

function getLength(input: string | null) { 
  return input?.length ?? 0; // TypeScript knows the result is always a number. 
}

This removes unnecessary type assertions and improves type safety.

2.4. Performance and Compiler Optimizations

Faster Type Checking: Optimized type resolution reduces compilation time.
Improved IntelliSense: Better autocompletion and hover information in VSCode.
Reduced Memory Usage: More efficient internal caching mechanisms.

3. What's Still Missing?

Despite these improvements, some features are still in high demand:

Pattern Matching: Developers are requesting a native pattern matching system similar to Rust or Scala.
Improved typeof for Generics: A more flexible way to infer types in complex generic scenarios.
Native Operator Overloading: While workarounds exist, direct operator overloading could enhance DX (Developer Experience).

4. Future Perspectives: What We'd Love to See

Better Type Inference for Complex Types: Further reducing the need for manual annotations.
More Efficient Build Performance: Even faster incremental builds for large projects.
Expanded JSX Support: Improved TypeScript handling for frontend frameworks like React and Solid.js.

5. Conclusion

TypeScript 5.8 brings significant improvements, especially with resource management (using), better type inference, and performance optimizations. However, there's still room for future enhancements, particularly around pattern matching and operator overloading.

Are you excited about these new features? What do you hope to see in TypeScript 6.0? Let's discuss!

Goodbye Sass & Less, Hello CSS Innovations in 2024!

Exousia KASEKA — Wed, 22 May 2024 10:32:21 +0000

The year 2024 witnesses a true renaissance in the world of web development. CSS preprocessors such as Sass and Less, once indispensable, are fading away in favor of more advanced and intuitive native CSS features. Let’s dive into the reasons why we should move away from these tools and embrace CSS innovations with enthusiasm.

Farewell to Sass and Less

Sass and Less have long been the cornerstones of structure and development speed thanks to their utility class systems and predefined components. But these tools, while useful, also have their limitations: they can hinder creativity and weigh down code maintenance. Today, CSS advancements free us from these constraints, offering customization and design finesse that render Sass and Less obsolete.

Hello to CSS Innovations in 2024

The CSS advancements in 2024 are a true ode to creative and technical freedom, far surpassing what traditional preprocessors could offer. Here’s a glimpse of the revolutionary features:

1. Container Queries

Imagine web components that adapt harmoniously to their environment, like a chameleon. This is now possible thanks to container queries, which mark a major evolution in responsive design. These queries allow elements to adjust according to the size of their parent container, rather than the size of the viewing window.

This means you can create components that fit seamlessly into a sidebar, main content area or other container, without the need for separate media queries for each one.

Code Example:

.card {
  container-type: inline-size;
  container-name: card;
}

@container card (max-width: 30em) {
  .card-title {
    font-size: 2rem;
  }
}

In this example, a .card element becomes an intelligent container, capable of modifying the .card-title font size based on its own width.

2. Advanced Color Systems (LCH, LAB, HWB)

The new LCH, LAB and HWB color palettes transform the way we interact with color. They offer a more natural and intuitive approach, enabling us to manipulate contrast and color harmony with unrivalled precision.

LCH (Lightness, Chroma, Hue) lets you specify color properties in a more natural way, approximating the way humans perceive color. LAB(lightness a* b*) is similar, but focuses on brightness and color opposites. HWB (Hue, Whiteness, Blackness) is a user-friendly way of defining colors by mixing a hue with varying amounts of white and black.

Code Example:

:root {
  --primary-color: lch(50% 40 130);
}

.button {
  background-color: var(--primary-color);
  border: 1px solid hwb(130 10% 10%);
}

Here, the primary color is defined with the LCH system, while the button’s border uses the HWB system for optimal contrast.

3. Enhanced CSS Variables

CSS variables have become the superheroes of web design. They enable us to create dynamic themes and scalable design systems with disconcerting ease.

CSS variables, also known as custom properties, allow you to store values that can be reused in your stylesheet. This makes it easier to maintain consistency and adapt your design with a minimum of changes.

Code Example:

:root {
  --main-bg-color: #222;
  --main-text-color: #eee;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

.theme-light {
  --main-bg-color: #eee;
  --main-text-color: #222;
}

Switching themes is as simple as applying the .theme-light class to change the background and text colors.

4. Subgrid

Subgrid is an extension of the CSS Grid layout that allows nested grids to participate in the sizing of their parent grid.

Subgrid simplifies complex layouts by allowing nested grid items to align directly with the parent grid’s tracks. This removes the need to set up individual grid definitions for nested elements.

Code Example:

.grid {
  display: grid;
  grid-template-columns: subgrid;
}

.item {
  grid-column: span 2;
}

In this example, .item elements will span two columns of the parent .grid, which uses subgrid to align its columns.

These CSS features in 2024 will empower developers to create more responsive, maintainable, and visually appealing websites with ease. The code examples provided should give you a starting point to experiment with these new capabilities in your projects.

Web Developers, Get Ready to Transform Your VS Code in 2024!

Exousia KASEKA — Fri, 03 May 2024 10:49:00 +0000

In the fast-paced world of web development, your coding environment is not just a tool; it's your creative companion. Visual Studio Code, with its robust ecosystem of extensions, is at the forefront of this digital revolution. As 2024 unfolds its carpet of technologies, we present to you a meticulously selected list of 10 VS Code extensions that will not only optimize your workflow but also elevate your coding experience to an unmatched level of excellence.

1. Live Server:

Imagine a canvas where each brushstroke instantly alters the landscape. Live Server makes this vision a reality for your web projects, reflecting every HTML, CSS, or JavaScript modification in real-time in your browser.

2. Markdown All in One:

Write with the precision of an editor and the grace of a poet. This extension transforms VS Code into a master of Markdown, with intuitive keyboard shortcuts and automatic previews that bring your documents to life.

3. GitLens:

Dive into the intricacies of your Git repositories like never before. GitLens unveils the hidden history behind each line of code, offering deep transparency and understanding of your project's evolution.

4. Code Spell Checker:

Like a vigilant proofreader, this extension scans your code to root out any spelling mistakes, ensuring clarity and professionalism in your variable names and comments.

5. Prettier:

Harmony is essential, and Prettier is the conductor of your code. With a single keystroke, it reformats your code according to consistent rules, ensuring a uniform aesthetic throughout your project.

6. Better Comments:

Transform your comments into a rainbow of clarity. This extension allows you to categorize and color your annotations, making your code as readable as an open book.

7. Jest:

Test with confidence and speed. Jest brings a powerful and intuitive JavaScript testing framework, making testing a breeze for React projects and beyond.

8. JavaScript (ES6) code snippets:

Speed up your coding with a library of snippets for JavaScript and TypeScript. These smart shortcuts save you precious time, allowing you to focus on logic rather than syntax.

9. Error Lens:

The Error lens extension acts as a diagnostic tool, similar to a doctor examining a patient’s symptoms. Just as a doctor identifies ailments and prescribes treatment, the error lens pinpoints coding mistakes and suggests remedial actions.
It checks your code line by line and highlights the error printing a message inline, as shown below.
Error Lens extension is essential for developers as it discovers the bug before the code is run.

10. Material Icon Theme:

The Material Icons Theme extension enhances the default VS Code icons for over 450 file types displayed in the Explorer pane of your workspace. With over 23 million downloads, this extension underscores its significance in enhancing the overall aesthetics of your workspace, offering visually appealing and intuitive icons for improved navigation and user experience.

Dear developers, these extensions are the pillars on which you can build revolutionary projects. They are the guardians of your efficiency and the muses of your creativity. Install them, and watch your VS Code transform into a powerhouse of web development. Happy coding! 🚀

🚀 A Comprehensive Guide to Personalizing Your GitHub Profile README

Exousia KASEKA — Wed, 24 Apr 2024 11:29:09 +0000

Why Personalize Your GitHub Profile?

Your GitHub profile is a digital reflection of your developer identity. It’s the first thing visitors see and your chance to make a lasting impression. Here’s why it’s crucial:

🌟 Personal Introduction

Your README is an immediate introduction to who you are, what you do, and what excites you. It can include information about your projects, skills, and professional aspirations.

🏆 Project Showcase

Use the README to highlight your projects with descriptions, screenshots, and links. This underscores your skills and achievements.

💡 Personality Expression

Personalizing your README allows you to express your personality and personal style, making your profile unique and memorable.

🤝 Community Engagement

A well-crafted README can prompt visitors to delve deeper into your projects, follow you, or collaborate.

📚 Open-Source Documentation

If you’re involved in open-source projects, a detailed README can serve as documentation for other developers.

In short, customizing your README helps you make a strong first impression, effectively showcase your work, and connect with the developer community.

How to Create and Add a README to Your Profile?

Creating the README

Select the “+” icon in the top right corner of any page and click on “New Repository”.
In “Repository name”, enter a name that EXACTLY matches your GitHub username.
Optionally, add a description in the “Description” field.
Select “Public”.
Check the option “Initialize this repository with a README”.
Click on “Create Repository”.
Click on “Edit README” in the right sidebar.

🎨 Customizing the README

Using GitHub Markdown (https://shorturl.at/eg128)

Start simple, as thinking about what to write always takes time. Use GitHub Markdown to structure and style your content.

Language

Choose the language based on your target audience. English is often preferred as it’s the “universal language”.

Tone

Your GitHub profile doesn’t need to be as formal as LinkedIn. It can be viewed by colleagues and potential recruiters, so maintain a professional tone while adding a personal touch.

🛡️ Badges

Badges showcase your skills. Explore the variety available on “markdown-badges”.

📝 Quotes

If you enjoy quotes, feel free to add one that inspires you. You can use “github-readme-quotes” to automatically generate quotes if needed.

✨ Emojis and Statistics

Statistics are a controversial topic, but they can add a visual touch to your profile. Use “github-readreadme-stats” to include them. Emojis can be found on “emoji-cheat-sheet”.

♿ Accessibility

Enhance the accessibility of your profile by adding descriptive alternative text for your images.

💡 README Generators

For a more user-friendly interface, there are several online README generator options, such as:

Profilinator (https://profilinator.rishav.dev/)
Profile README Generator (https://profile-readme-generator.com/)
ProfileMe.dev (https://www.profileme.dev/)
GH Profile README Generator (https://rahuldkjain.github.io/gh-profile-readme-generator/)

Let your creativity lead the way and make your GitHub profile a true reflection of yourself.

A paid Chrome version?

Exousia KASEKA — Tue, 16 Apr 2024 11:06:43 +0000

Google announces a paid version of Chrome, but who is it for?

In a bid to improve online security, Google has announced a new, paid version of its Chrome browser. Don't worry, it's not for you (yet?).

In fact, the Chrome Enterprise platform has just made official the launch of a paid version of the most popular web browser. Chrome Enterprise Premium, as it's called, is aimed at all professionals who want to put security at the heart of their concerns.

In concrete terms, Chrome Enterprise Core is an optimized version of Chrome, incorporating various additional protection and security tools compared to the standard version. The latter is free of charge and is aimed at businesses.

For businesses, Google offers two versions of Chrome, one free, the other paid.

With Chrome Enterprise Premium, Google wants to go one step further. The new paid version offers the same basic functions, but includes a number of special features, such as improved malware detection, URL filtering, document sharing and data loss prevention.

Google Enterprise Premium is priced at $6 per month, per user.

Sources : Clubic, Android Police

DEV Community: Exousia KASEKA

Exploring TypeScript 5.8 Beta: New Features, Improvements, and Future Perspectives

1. Getting Started with TypeScript 5.8 To start using TypeScript 5.8 Beta, you can install it via npm:

2. Key Features and Improvements

2.1. using Keyword for Disposable Resources

Example:

2.2. const Type Parameters

Example:

2.3. Better Type Narrowing for Logical Operators

Example:

2.4. Performance and Compiler Optimizations

3. What's Still Missing?

4. Future Perspectives: What We'd Love to See

5. Conclusion

Goodbye Sass & Less, Hello CSS Innovations in 2024!

Farewell to Sass and Less

Hello to CSS Innovations in 2024

1. Container Queries

2. Advanced Color Systems (LCH, LAB, HWB)

3. Enhanced CSS Variables

4. Subgrid

Related posts

Web Developers, Get Ready to Transform Your VS Code in 2024!

1. Live Server:

2. Markdown All in One:

3. GitLens:

4. Code Spell Checker:

5. Prettier:

6. Better Comments:

7. Jest:

8. JavaScript (ES6) code snippets:

9. Error Lens:

10. Material Icon Theme:

🚀 A Comprehensive Guide to Personalizing Your GitHub Profile README

Why Personalize Your GitHub Profile?

🌟 Personal Introduction

🏆 Project Showcase

💡 Personality Expression

🤝 Community Engagement

📚 Open-Source Documentation

How to Create and Add a README to Your Profile?

Creating the README

🎨 Customizing the README

Using GitHub Markdown (https://shorturl.at/eg128)

Language

Tone

🛡️ Badges

📝 Quotes

✨ Emojis and Statistics

♿ Accessibility

💡 README Generators

A paid Chrome version?

Google announces a paid version of Chrome, but who is it for?

2.1. `using` Keyword for Disposable Resources

2.2. `const` Type Parameters