It doesn’t matter what time of year you go to Scandinavia. Countries like Denmark or Norway have a Nordic charm that you can never really escape. But it doesn’t always have to be the far north that provides fascinating motifs for photographers. With these Lightroom presets you can enhance your images with the Nordic feel.
Gitpod - Visual Studio Code on the Web
The popular code editor is conquering the browser and remote work and the Kiel-based company Gitpod is at the forefront with their solution
It’s amazing how quickly the editor Visual Studio Code (VS Code) has conquered the developer community (#1 in the Stack Overflow Developer Survey Ranking 2021) and even those from the Linux faction, who are historically rather critical of Microsoft, but for good reason. The company from Redmond has done quite a lot right with the tool and has gathered a large group of open source developers around it (currently 1,640 contributors), who contribute to the fact that the Swiss Microsoft team around Erich Gamma can bring out a new release for Windows, Linux and macOS every few weeks.
It all started with the Monaco Editor, the core around which VS Code is built and which was first released on April 14, 2016. The exciting thing about Monaco and VS Code is, that it is consistently written using web technologies, i.e. HTML, CSS and Javascript, packaged and executed using the framework Electron developed by GitHub, which in turn is based on Node.js and the open source browser engine Chromium from Google.
Discoveries #19 - Visual Helpers
Colors and images are the visual meat on the boil of any web solution. If you don’t convince the visitor’s eye, they will quickly leave and if users have to work with a visually poor solution, they will be too dissatisfied, no matter how well the algorithms work.
Below are a few JavaScript libraries that help to create appealing interfaces.
- Color Thief
- Vibrant Colors
- Color.js
- TinyColor
- Qix color
- Alpha Paintlet
- DOM to Image
- imagesLoaded
- Graphery SVG
- Flickity
Old Sweetheart Rediscovered
OutlookSignature lives on as Go application
It seems like ages ago that I wrote a tool called OutlookSignature with Visual Basic 6 and put it on the web on my old German blog zerbit.de. But the WayBackMachine says something different. Started in 2006, I released the last version 1.9 at the beginning of December 2008. Just 14 years ago…
The thing was a command line tool, that could be used to automatically generate signatures for Microsoft Outlook in the three formats TXT, RTF and HTML, for example centrally via a Windows login script for the entire organization. No hassle anymore for the users on creating an appropriate mail signature and no more stress for the marketing department in enforcing a uniform appearance. It was based on templates with placeholders for the data and configurable via an INI file. The data could come either from the ActiveDirectory via LDAP or from any database.
Simplest Console File Logger
How to implement your own logger with just a StringBuilder in C#
When you need to do a task in IT and don’t need a fancy user interface, you usually turn to a console application or develop one. But no UI means not, that you don’t want to get some information about the status of the running program. The means of choice in C#/.NET is then the output of certain values in the console via console.WriteLine().
But often these applications are supposed to run in the background or hidden, so that crashes or errors are not immediately noticeable if you don’t have at least a rudimentary logging built in. Such logging is also useful for the later evaluation of program runs. For this reason pretty much all programs log in some way. Currently there an incredible number of logging frameworks available, that make it to the news every now and then, like Log4Shell for Java.
The best known in the .NET area is Microsoft’s own ILogger (Microsoft.Extensions.Logging), log4net, NLog and Serilog. What they all have in common is, that they are highly flexible in terms of configuration, usage and storage of the logs. On the other hand, they are fat beasts, you have to learn to handle first and you have to deliver with the program always. The latter does not apply to the ILogger, but Microsoft has been known to complicate things so unnecessarily that it is almost no fun anymore.
Many times this overload is simply not necessary, when you just need a log file for each run of your console application. Let me show you, how to achieve this with a dead simple StringBuilder…
Thanks Dropbox, but I'm off
How to do homework or say goodbye to the market
I’m a customer of Dropbox many, many years, a paying customer, and was always happy about the service, as it is fast and easy to use. No problems … until now! Be aware … this will be a rant :/
But first a step back:
Nowadays it is normal to work with different classes of devices: stationary PCs, different types of laptops, tablets and also smartphones. You start writing a text on your laptop at home in the garden, have to interrupt it because of an appointment and continue writing on your tablet on your way, only to finish it at home on your PC, because it has started to rain. All of these used devices to write the text may have a different hard- and software configuration, but today we have synchronisation services like Dropbox, OneDrive, GoogleDrive and man others, which ensures that the same version of the text is available at all times at all devices.
To me it is obvious that software manufacturers cannot support every operating system, but I can expect that if they support a particular OS, they will do so on any hardware that the OS manufacturer also supports!
Discoveries #18 - JS UI
This months Discoveries it’s all about Web UI driven by JavaScript. I have found some really cool components in the net you can use in your project right away to give your users a bit more food for the eye. Congrats to the developers for their amazing work.
- Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
- Slider Scroll
- Add-to-Calendar Button
- Responsive Clock Ui
- Swiffy Slider
- Floating UI
- 8 CSS & JavaScript Snippets for Creating Cool Card UI Hover Effects
- How To Build An Expandable Accessible Gallery
- Omicron drag&drop
- LetMeScroll
Discoveries #17 - CSS
- Easing Functions Cheat Sheet
- A New Way To Reduce Font Loading Impact: CSS Font Descriptors
- Container Queries in Web Components
- Multi Color Text With CSS
- Conditional Border Radius In CSS
- Icons in Pure CSS
- parallax.css
- Defensive CSS
- How to Create a CSS-Only Loader Using One Element
- Getting Your head Straight: A New CSS Performance Diagnostics Snippet
Checker Plus - Gmail in better...
Few Chrome browser extensions are as close to user needs as Checker Plus for Google's Gmail, Calendar and Drive services.
Those who have a Google account usually also use the web-based mailer Gmail, often Google Calendar for appointments and perhaps Google Drive for storing files in the cloud. The US internet company makes it very easy for users to use its web-based services. The entry barriers are low and the interfaces are tidy and intuitive.
If you use the in-house Chrome browser, you can also be informed about incoming mails or upcoming appointments. One click and the browser opens with Gmail or Google Calendar …
But it is not always necessary or desirable to load one of the Google tools completely in a new browser window, when you may already have two or three dozen tabs open in several windows and are in danger of losing track of them.
That’s what Montreal-based software developer Jason Savard seems to have thought ten years ago. At that time, he began writing a Chrome extension that would report a newly received Gmail by means of a small icon in the extension bar of the browser and display it directly in a separate pop-up window by clicking on it. The result was Checker Plus for Gmail.
Discoveries #16 - JavaScript
In the first discoveries of 2022 I would like to offer you some interesting links to JavaScript articles that have general language features as their topic or extend them in a clever way. The language (respectively the ECMA standard behind it) is growing from year to year and it is exiting to see how it is expanding.
- Modern Javascript: Everything you missed over the last 10 years
- How can I define an enum in JavaScript?
- 'export default thing' is different to 'export { thing as default }'
- Dynamic, Conditional Imports
- 10 Client-side Storage Options and When to Use Them
- An Intro to JavaScript Proxy
- The Observer Pattern in JavaScript - The Key to a Reactive Behavior
- Why JavaScript Developers Should Prefer Axios Over Fetch
- Toolkit for managing multiple promises
- Promisify an entire object or class instance
CSS Columns and Drop Shadow
How to fix Chromes bug on showing shadows in a column (masonry) layout
As of today, there is no true Masonry Layout technique in web development that can be implemented exclusively with CSS and is not based on JavaScript. True in the meaning, that the reading direction should be from left to right and not in the form of columns from top to bottom. For the latter, also called Fake Masonry, there are even two implementation options in CSS: Columns or Flex, whereas the Columns variant is the much simpler one.
Lets say you have a list of boxes you want to show in a grid-like list, but the height of every box is defined by its content, which results in different heights. Here is an example with a base64 encoded 1px image with an individually defined height:
1 | <div class="wrapper"> |
By applying column-count and column-gap to the wrapper and a margin-bottom with the same value as the gap to each item, you will achieve this:
The order of the boxes is from top to bottom and then from left to right … Fake Masonry, but is works as expected. Here is the most important CSS:
GitHub Tag Plugins for Hexo
Currently I’m working on improving my projects section by linking to some of my projects hosted on Github. One idea is to display the Github README there. Playing around with the GitHub API is fun and so I created two new Hexo Tag Plugins that I don’t want to deprive you of and that extend the Hexo Tag Plugin Collection.
- GitHub README
- GitHub User & Repo Card