Forem: Felix Häberle

Supercharging Localization in VS Code with inlang

Felix Häberle — Wed, 31 Jan 2024 22:35:39 +0000

Localization (also Internationalization, i18n) is a critical aspect of software development, ensuring that applications are accessible and user-friendly for a global audience. The inlang extension for Visual Studio Code revolutionizes this process by integrating translation management directly into the IDE, streamlining the workflow for developers.

Streamlined the translation/i18n workflow

🎥 WATCH THE LOOM: https://www.loom.com/share/7cdab3851fd44f65ad0375a5240a3fc6?sid=bb6812cf-d0bb-4d15-8338-586c4b321afd

The inlang extension simplifies the localization process. Traditional methods often involve constant switching between code and separate translation files, leading to inefficiency and increased potential for errors.

Inlang integrates i18n into the Visual Studio Code environment, allowing developers to manage translations directly within their code.

Key Features:

💬 Inline Annotations: Translations are visible directly in the code, eliminating the need to toggle between files.
✂️ Extract Messages: Easily extract new strings with a single click, making the process more intuitive.
🚦 Message Linting: Automatically notifies developers of missing translations and other issues, ensuring quality and consistency.
📦 Monorepo Support: Conveniently manage multiple projects within a single repository.
♻️ Automatic Updates: Changes in source text automatically update corresponding translations.
✨ Ease of Use and Setup

Setting up the inlang extension is straightforward, involving a few simple steps:

1️⃣ Install the extension directly from the Visual Studio Marketplace.
2️⃣ Configuration: Create a project.inlang/settings.json file in your project root to configure language settings and modules.
3️⃣ Syntax Matching: Choose a syntax matcher compatible with your project's framework.

The extension requires Visual Studio Code version 1.84.2 or higher and Node.js version v18 or higher.

Enhancing Developer Experience

The inlang extension not only enhances efficiency but also improves the overall DX:

Reduced Context Switching: By integrating translations within the IDE, developers can focus more on coding rather than juggling between files.
Quality Control: Linting features ensure that translations are consistent and error-free.
Faster Turnaround: The direct editing and extraction of translations within the IDE mean faster implementation and updates.

App ecosystem

The inlang VS Code extension is part of the inlang ecosystem, a variety of internationalization (i18n) apps working seamlessly together. See:

Paraglide JS - JS library

A fully configurable JavaScript i18n library that integrates within your framework.

Fink – Localization Editor

Your translation workflow with no-code setup and repository-based operation — the ideal i18n solution for translators.

inlang CLI - Translation Automation

Command line interface for inlang projects. Many commands and the possibility to do translation automation.

TLDR

The inlang extension for Visual Studio Code is a game-changer for software localization. It provides an integrated, efficient, and error-reducing environment, making the process of localizing software smoother and more developer-friendly.

➡️ Install the extension
🅇 Follow me on X/Twitter

By adopting this extension, development teams can significantly improve their workflow, ensuring that their applications are truly global-ready.

Build an outstanding developer portfolio – [2022 Edition]

Felix Häberle — Wed, 30 Nov 2022 13:01:42 +0000

Are you a developer looking to build an outstanding portfolio that stands out in the highly competitive job market? You’ve come to the right place. The year is 2022 and the digital world has changed drastically since the pandemic, opening up new possibilities for developers to showcase their skills and accomplishments.

I'm the maker of Stage – an API-based portfolio builder: bring you data from pages like DEV.to / GitHub / LinkedIn and we generate you an always in-sync portfolio with ootb nice design – you can even extend it with custom extensions and your own API. Sign up for free!!

In this blog post, we’ll discuss five key tips for building an impressive developer portfolio for the 2022 edition.

🎤 Showcase 2-4 of Your Best Project

As a developer, you want to make sure that your portfolio focuses on the projects that best demonstrate your skill set and experience. Choose two to four projects that are the best examples of your work and showcase them prominently on your portfolio page. Make sure you include a detailed overview of the project, screenshots, and links to the actual project if possible.

5 steps: How to present your projects

Write an engaging description of each project. Include any key achievements, challenges you faced, and the outcome.
Share images, screenshots, or videos of the project. If you have the original files, consider including them as well.
Showcase any awards or recognition you’ve received for the project.
Include client testimonials or any feedback they provided.
Link to the project’s live URL, if applicable.

🙋 Sprinkle in Some Personality

Your portfolio should reflect your unique personality and style. Don’t be afraid to let your creativity shine and make sure that your portfolio looks and feels like you. You can add in some personal branding elements like a profile picture, a brief bio, or even a fun background image – or even the music you like.

👔 Add the Formal Part

Your portfolio should also include the more formal elements of a resume such as your education, work experience, and skills. Make sure to highlight the most relevant information and focus on the experience and skills that are most important to your career.

A resume on your personal website also allows employers, recruiters, and potential clients to quickly and easily view your qualifications, contact information, and accomplishments.

Having a resume on your personal website may also help you stand out among other applicants and may even open up new opportunities or job leads.

🪄 Create the Main Action

Your portfolio should also have a clear call-to-action. This could be something as simple as a contact form or a button that links to a demo of your work. Whatever it is, make sure it’s easy to find and understand.

A good call to action on a website should be concise and direct. It should clearly state the desired action and provide a clear path to take that action.

It should also be visually appealing and stand out from the rest of the page. Good calls to action should also be tailored to the user's context and be relevant to what they are looking for.

✨ Have Good Design

Finally, make sure your portfolio has a modern, professional design. Everything from the typography to the colors should be carefully chosen to ensure that your portfolio looks great and is easy to navigate.

Designing a personal website can be challenging, especially for those who are not experienced web designers. It requires a lot of planning, understanding of web design principles, and a good understanding of the technologies needed to create an effective website.

Additionally, personal websites need to be designed to fit the individual’s needs and tastes, which can be very difficult to achieve. Furthermore, many personal websites need to be updated regularly in order to remain relevant, which can be a lot of work for those who are not experienced web designers.

Don't overengineer here, a clean modern look with not much noise is perfectly fine, it even lets the visiting user read the website faster.

By following these five tips, you’ll be able to create an outstanding developer portfolio for the 2022 edition. Showcase your best projects, sprinkle in some personality, add the formal part, create the main action, and have ootb good design. Good luck!

PS: I'm the maker of Stage – an API-based portfolio builder: bring you data from pages like DEV.to / GitHub / LinkedIn and we generate you an always in-sync portfolio with ootb nice design – you can even extend it with custom extensions and your own API. Sign up for free!!

Responsive fix for the Next.js Image component

Felix Häberle — Thu, 06 May 2021 16:01:02 +0000

Currently, layout="responsive" requires you to set width and height which you don't want to set because you don't know what the aspect ratio is going to be.

This is a new change since version 10.0.1 where the team around Next deprecated the unsized prop, replacing it with layout="fill" – which doesn't gives you the same functionality.

Also, if you're going to set layout="fill" and objectFit="cover" on the Image component you will get a strange behavior. There are cases in which you can fix this with position: relative on the parent item, but then you also have to set width and height which you don't want in case of a responsive image.

There is an easy fix to this problem, you only have to set a wrapper around the Image component to give a bit of extra styling.

First, we have to add the wrapping item with the class image-container. Please adjust this to fit your styling needs, e.g. if you're using styled-components the syntax will look slightly different.

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

For this to work, it's important that you add two classes: image-container to the parent element and image to the Image component. After adding these classes, you should add this styling.

.image-container {

  width: 100%;

  > div {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
}

And that's it! 🎉

Your images should now display with the right dimensions and should scale up to 100% width and at the same time having the correct height.

3 easy steps to fix slow image loading

Felix Häberle — Sun, 27 Oct 2019 11:46:30 +0000

Loading images on the web can be a pain, especially if you are doing a website mainly for mobile devices. Because wireless connection is used in such cases, the transfer speed is often slower compared to a wired connection and therefore the content loads slower.

For text, you might not be able to spot a difference because text gets really fast transported over the web and only weights a few KB's, where images, especially those which have a high resolution, often tend to have a really big file (multiple MB's) size which loads slowly. The easy way would be to exclude the high resolution images, but in most cases, we can't reduce the amount of high-res images so we have to deal with them. Don't worry, I'll show you how to master big images on your website in a minute. ⏱

Tools to the win 🏆

First of all, make sure the images you want to include in your webpage are minimized/compressed. You can accomplish this task with a lot of tools, some of them also guarantee that the overall quality of the image does stay the same. That said, it's good to know how and where the image should be used, because you should optimize it for the use case. For example, a picture which is only displayed as a little icon (possibly 20px/20px) doesn't need to have a resolution of 2000px/2000px because that would be too big. On the other side, a big full-width image shouldn't be that small to keep a nice resolution on the image.

To tackle this task, I can recommend the following sources based on your needs:

🛰 Online image minimization/compression:

📦 Integrate the minimization task into your build/preprocessing (recommended):

webpack: https://web.dev/codelab-imagemin-webpack
gulp: https://github.com/sindresorhus/gulp-imagemin
parcel: https://github.com/DeMoorJasper/parcel-plugin-imagemin

Make sure loading images the right way 🔍

Second, a fundamental part of making your loading faster and better is loading the images the right way. Eventually you have heard of lazy loading things, that's when you interrupt the browser to load things immediately and start it over later usually with JavaScript. Lazy loading is used on sites where there are big amounts of images and you can't afford loading all images at once because then your site would take really long to load or eventually would never stop loading (because of you being bored and cancel). To fix this problem, lazy loading only loads images you specified (at first) and loads the other part after an action is happening e.g. the image gets scrolled into the view or some other interaction is happening. 🕹

A few lazyload libraries:

Another solution to load the right image is choosing the right file for the right viewport. There are often images on websites which could be smaller on mobile devices because they scale down on small viewports anyway and could therefore also be smaller in size. To load different images based on the viewport/screen size, you need to monitor the viewport and set in the right image source. 🖼📱

1️⃣ The standard <img> element traditionally only lets you point the browser to a single source file:

<img src="nice-image-900.jpg" alt="This is a very nice image">

2️⃣ For setting up responsive image loading we can use two new attributes — srcset and sizes — to provide several additional source images along with instructions to help the browser pick the right image.

<img srcset="nice-image-340.jpg 340w,
             nice-image-500.jpg 500w,
             nice-image-900.jpg 900w"
     sizes="(max-width: 340px) 300px,
            (max-width: 500px) 450px,
            900px"
     src="nice-image-900.jpg" alt="This is a very nice image">

At first, the srcset and size look complicated, but they aren't that hard to understand. To dive right in, the srcset sets the various images and defines the real widths for them (e.g. 340w -> w not px). To get the real width of the image, you can inspect the image informations on your computer. The sizes attribute describes which image fits best for the current viewport.

At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 480px) media condition will be true, and so the browser chooses the 450px slot. The nice-image-500w.jpg will be loaded, as its inherent width (450w) is the closest to 500w.

Design with image loading in mind 💡

Third, the best solution to prevent slow image loading or loading problems in general is to reduce the overall amount of images which you load initially on your website. The more images you load the slower your site will get and the tips I gave you above are only in the case you can't dispense with it.

Designers tend to do more vector graphics such as SVG these days because SVG files ares basically text and therefore load really quickly. Also, you can modify SVG code to a certain point in your code after loading them which is pretty neat in some cases. Thus, it can be said that SVGs should be used wherever it is possible and images are only used where necessary. Another part of the image loading solution is choosing the right image format in general, a good read about this can be found here.

Thus, it can be said that SVGs should be used wherever it is possible and images are only used where necessary.

Happy coding and improving your images to be lighting fast! 🚀💫

The core of every Software Design Pattern

Felix Häberle — Fri, 25 Oct 2019 09:34:00 +0000

As Software Developers, we often valuate our code through Design Patterns. It’s the core of every good or bad written code and a high factor for security and performance only to mention two. We are often looking for opportunities to write our code better and searching for new Design Patterns. I think we’re often misusing this words to describe Best-Practices or To-Do’s which we should follow anyway. For me, the core of Software Design Patterns consists of the following 6 rules.

1️⃣ They are proven solutions
2️⃣ They are easily reusable
3️⃣ They are expressive
4️⃣ They ease communication
5️⃣ They prevent the need for refactoring code
6️⃣ They lower the size of the codebase

1️⃣ They are proven solutions

Because design patterns are often used by many developers, you can be certain that they work. And not only that, you can be certain that they were revised multiple times and optimizations were probably implemented.

2️⃣ They are easily reusable

Design patterns document a reusable solution which can be modified to solve multiple particular problems, as they are not tied to a specific problem.
If you want to guarantee quality over the lifespan of the software project, a reusable adaption must be considered. This procedure also offers other developers a simple adaption into the existing solution.

3️⃣ They are expressive

Design patterns can explain a large solution quite elegantly.
There is often code in your codebase, which you would like to exchange, because it is very slow or difficult to understand. Do not be afraid to exchange it or delete it completely and write it from scratch. If this is not possible, try to separate the individual tasks of the code better to make the code more understandable.

4️⃣ They ease communication

When developers are familiar with design patterns, they can more easily communicate with one another about potential solutions to a given problem.
If you’re working with colleagues in a team of multiple developers, agree with them about the design patterns, as they can help you better with a problem. Also with regard to the maintenance of software you should follow such procedures, as you make maintenance operations faster and more efficient.

5️⃣ They prevent the need for refactoring code

If an application is written with design patterns in mind, it is often the case that you won’t need to refactor the code later on because applying the correct design pattern to a given problem is already an optimal solution. If such solutions are then updated, they can be seamlessly applied by any good software developer and do not cause any problems.

6️⃣ They lower the size of the codebase

Because design patterns are usually elegant and optimal solutions, they usually require less code than other solutions. This does not always have to be the case as many developers write more code to improve understanding.

Therefore, if you're writing code on a daily basis, design patterns of your code might be interesting for you. Try to validate them with these basic ruleset to verify them. Happy coding! 👩‍💻👨‍💻

Use CSS Grid in production — today

Felix Häberle — Thu, 24 Oct 2019 09:08:56 +0000

Everyone wants CSS Grid. It’s about a new layout method that will significantly change the way we design our content on the Internet. With CSS Grid you have the opportunity to place content in an unprecedented form on a website and sort it dynamically between viewports. This technique has therefore emerged, as many authors of websites had too limited possibilities working with the grid. With regard to the variety of devices on which websites are presented today, this state had not been sustainable.

CSS Grid was created.💫

📅 Yes, CSS Grid is new. But around for quite a while.

It is a new technology that recently emerged so we have to look around in the ecosystem of this technology and see where we can use that technology. Since this technique has to be supported by the browser, we can verify the current browser support on caniuse.com.

This shows us that all common browsers are supporting CSS Grid. But what if the customer wants support for IE 10 + 11 or earlier versions of Internet Explorer? I try to answer this question in this article.

💡 Use Autoprefixer

There is a common problem with showing CSS attributes in all browsers with the same effect, so fully automated tools have been developed that can improve your code and you can make yourself a coffee, a quick coffee, because it all happens in less than one second. On tools like Autoprefixer you should take a closer look. Autoprefixer is a tool that checks your CSS code and adds the necessary attributes to unify your code in all browsers. With Autoprefixer you could thus cover all browsers in which CSS Grid attributes are supported including Internet Explorer 10 / 11. For browsers that are not supported you use fallbacks.

🛠 Plan fallbacks with the first line of code

Since there are still browsers that do not support CSS Grid (around 10% of all browsers worldwide), we rely on creating alternative solutions. Fallbacks come into play here. This technique works by detecting unsupported browsers and then providing them with other code they support. The best way to do this is to use the following argument if you have decided to support IE10+11 over -ms prefixes:

If you want to use different code for Internet Explorer 10 and 11 and other non-functioning browsers, you can use the following fallback directive:

With these @support queries you have the possibility to design your layout for older browsers completely independent of CSS Grid. 🏎

👩‍💼 Convince your customer with the right arguments

You should convince your customers of this new and exciting technology. Advantages here are the responsive restructuring of content and the better accessibility of a layout method, which otherwise can only be guaranteed by “heavy” frameworks such as bootstrap.

Through fallbacks which cover the browsers that do not have CSS Grid support, you can use this technology today without hesitation.

🎇 CSS Grid will take over

Hopefully, in 1–2 years you will be able to eliminate the fallbacks from your code. Browsers such as Internet Explorer will be replaced by Edge (with Chrome Engine) or other browsers with CSS Grid support, and CSS Grid will prevail as a layout method on websites.