Create a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.
Building flexible data visualizations for international sites
Learn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.
Explore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project.
Basic WebSocket API setup for ComfyUI for prompt to image and image to image generation. Host ComfyUI workflows and get real-time updates with an API
Svelte is one of the best bets on technology we have ever made. We tested, if the hype around the Svelte 5 beta and the new runes API was warranted
Exploring the fusion of AI and traditional digital art to design a unique movie poster.
A Brief History Of Augmenting An Existing Application With LLM
Glossary for terms and concepts in world of Artificial Intelligence for everybody
Building a video search engine based on transcribed video content
Testing full-stack web applications thoroughly
Using LLMs to translate human input to be used in predicate logic programs
I have released my first Figma plugin. But how did this journey begin, and what obstacles have I encountered along the way?
I had to build a card component that looked a little different than the usual cards you find on most websites. Now we got the chance to refactor the code, and I took another look at the component to see if I better solution with modern CSS.
Last week, I had the incredible opportunity to attend my first CSS Day in Amsterdam. It was an exceptional experience that left me brimming with newfound knowledge. While I felt confident about certain topics, such as the has-selector and container...
Recently I was faced with the following problem: I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row. The images' aspect...
Corporate growth kills individuality – or at least it tries to. We found, at least for us, an approach to combat the slow death of our company culture while growing from a living-room-like office with a few team members to a global player with over...
Angular is an excellent framework for building enterprise-grad JavaScript single-page applications. How do take advantage of Angular’s testability?
Produkt- und Shop-Design für J'Tanicals – Als sehr technisch angesehene Agentur mit vielen Projekten und Partnern im IT-Bereich, ist es oft schwer, sich in anderen Branchen zu behaupten.
How we enhanced and refactored a client project over six years.
Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout.
On the 1st of December, the first phase of the Ethereum 2.0 transition from Proof of Work to Proof of Stake will start - and we're happy to be part of the genesis. We followed this guide to set up a lighthouse client (we love Rust) developed...
Last week the keyboard of my MacBook Pro broke. One key just stopped working, and I have lived over months with double keystrokes. It was time to bring it to the Apple store and get it fixed. The dude in the Genius Bar told me it would take 10-14...
Do you know the feeling when a subject never lets you go? In the last years, I have worked with different graphics programs and have written many lines of CSS. Even though it is now easy to copy CSS code for gradients directly from e.g. Figma, I...
GPT-3 is a transformer neural net topology that can be used for natural language processing (NLP) tasks. It is an unsupervised learning approach with the core idea that if you feed the net enough text, it eventually will be able to find patterns. It...
"So, how's the remote working thing going for you?" Right about now I get this question a lot, not only from other team members, but from friends and family struggling with working from home.
Layouts with diagonal sections are quite popular for several years now. You will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay.
We have always been big fans of Ethereum, and we've been on the lucky side to have invested into this idea early on. When the second big bubble of crypto was about to pop, disillusionment and doubts lured behind the corner: The technology that was...
At some point, almost every product served by a web application needs a reporting functionality for its admins. This may be a page showing a graph and a table, or a spreadsheet download. Admins can usually select a date range, and possibly provide...
One of the many challenges when it comes to writing CSS is choosing the right unit. Over the years there has been a lot of controversies whether to use px, em or rem to size text. So I thought, why not add some custom properties to this mixture and...
We used a feature toggle to gradually re-build parts of the business logic of our app. We were then able to switch to the new logic, and seamlessly roll back to the old logic in case of unforeseen problems. We had to come up with two interesting...
Lessons we have learned from maintaining large JavaScript applications in the long term.
How to create very cool effects with a rarely used feature.TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW.
Shared test setup operating at the application level or below always made my test code hard to maintain. I stopped using test framework mechanics for this, in favor of concise repetitious setup pipelines at the start of each test.
Als die-bewerbungsschreiber.de Anfang des Jahres auf uns zu kamen und mit uns die Neugestaltung ihrer Website planen wollten, wurde schnell klar - ein kompletter Rewrite birgt viele Risiken.
Don’t worry, I´ve got you covered. This article is about the best sites (mostly free) that teach you how to code.
Our story begins in July 2015, when the Ethereum project released the genesis block, the very first block of the ether blockchain.
We at 9elements organize an annual JavaScript conference called RuhrJS. The key visual shows a shaft tower and the conference name executed with a neon light effect. The main page features the full visual with flickering lights. This effect is...
Rust is a strongly typed, low-level programming language built for safety, speed, and concurrency from the ground up. It is mostly developed by Mozilla and has been battle tested by over a hundred companies including Dropbox and the game...
How to create a logo that responds to its own aspect ratio There are quite a few articles on the web that deal with responsive logos. The most popular example might be the Responsive Logos website that shows some very well known logos in different...
As we are determined to strengthen our local tech community with events like the RuhrJS conference and PottJS Meetups, we are always happy to embrace new chances to do so. We took the opportunity to create a new forum for people to share their...
#tragmit - Every child deserves a future Our coders and tinkerers recently launched the new website for our client’s project #tragmit! (engl. #backit). The project aims to collect donations to support children with convicted parents in countries of...
9elements strives to bring local developers together. We successfully host the user group PottJS and the international conference RuhrJS in the Ruhr Area, but development is not all about JavaScript, right? What are Developer Circles? First things...
A tale about language features and HTTP streaming This might sound familiar to you: You want to measure how well a product is doing and need some kind of reporting mechanism that provides you with insightful KPIs. Surely you don’t want to log into a...
and keep concerns separate along the way The official announcement of Elixir 1.5 was dominantly about improvements for debugging. Here I want to talk about a seemingly small change to how supervisor children can be specified. This change demonstrates...
Learn how to serve mp4 files to the Safari browser. With Welect we have a client where we heavily rely on Elixir and Phoenix. Welect is a service you can use to access premium content by paying with your attention by watching ads you choose by...
A lot of people might have heard of Ethereum, the new blockchain technology coming up as a successor to the bitcoin cryptocurrency. Although widely celebrated as the next big thing, the reaction to being stressed by the DAO hacker(s) recently and an...
Elixir and Phoenix are promising to become a productive foundation for creating backend applications. While the software ecosystem is not yet on par with Rails, we think that this technology is on a very good trajectory. It is already superior in a...
For some of our Rails projects we have replaced the Rails Asset Pipeline with Webpack and we're quite happy with it. Webpack has so many nifty features and combining it with Babel we can write next generation JavaScript today. But sometimes,...
Let’s wind back the clock for one and a half years. I just started my new job at 9elements and at that time I would have never give thought to organizing a conference. But soon after I became a part of 9elements I took over the responsibility for the...
We all need more SSL! But installing SSL certificates is a big PITA. Let’s Encrypt is a new certificate authority (CA) offering free and automated SSL/TLS certificates. Certificates issued by Let’s Encrypt are trusted by most browsers in production...
Version managers have been around in the ruby ecosystem for quite some time. You switch (cd) to a project using a different ruby version, and voilà, you are magically using the desired version of ruby. When running ruby, rails or any other binary...
Yeah, just quit it. Why? Because, most probably you can get a much better one! Let me explain this bold statement in some detail. Working as a software engineer, I had the chance to take a peek into many different tech companies in Germany. In my...
Alright, fellow fullstack developers. In the last few weeks I had the chance to dive into Ember.js - and I would like to give you a complete example of a blog application with Ember CLI for the frontend and Rails as backend server. This article...
This week, the World Economic Forum launched “The Inclusive Growth and Development Report 2015” with combined forces of 9elements and the help of our friends. The report, which covers 112 economies, seeks to improve our understanding of how countries...
Some of you may have heard of the new big thing - You may have heard that Ethereum's co-founder Vitalik Buterin was awarded with $100k within the Peter Thiel fellowship programme. That Ethereum which pre-sold it’s cryptocurrency, the Ether, last year...
I just returned from my German Valley Week trip to San Francisco and the Silicon Valley. German Valley Week is an organized trip where entrepeneurs, investors and politicians from Germany visit disrupting startups ranging from new ones like Uber or...
Some of our projects are gaining traction lately. That’s why we need to scale some parts of the infrastructure. 9elements started the search for a language that gives us more performance but that’s also expressive and easy to write. Since Go is used...
Adding dependencies to your project can often be very painful, because technically there are many ways to include foreign code. In very simple cases you might just copy over code, in most cases you are going to link against a library and sometimes...
In July, we have launched a new client site, the OECD Data Portal. The OECD is an international organization that analyses national economies to coordinate the policies of its member states. The OECD conducts well-known studies like PISA and...
Every other month or so we like to do a small Hackathon at 9elements. Last week, after months of hard client work, we finally had the chance to have one again. During the two-day long event, several teams gather to explore new technologies,...
Browserify is a nifty little tool that was originally invented to let Node.js modules run in your browser. A nice side effect of this is that you can use browserify to split up your application’s JavaScript into a well organized modules and then...
Recently we were working on a redesign of the uformit website. Uformit, an online marketplace for personalized 3D design, was already presented at the 3D Printshow in London and New York, but never announced to the public. It features a WebGL powered...
As you might know 9elements is specialized in building digital products. One of the tasks that comes with almost every product is payments - after all you want to earn some money. When it comes to payments there are plenty of options out there and...
In one of our recent projects, we needed to implement the ability to sign automatically generated configuration profiles for iOS and OS X [1] in the backend. If a configuration profile is signed and iOS / OS X successfully verifies its signature, the...
One night, shortly after we moved to our new office, Sascha and me where watching some demos on YouTube. You know those 64K executables you run, and think „how the heck they put all that content into 64K“ ?! Well one major idea is, procedural...
In this article, I will first take a high-level look at modern frontend architectures: In a time where web apps easily surpass 1 MB of JavaScript, what should we try to achieve? Second, based on these considerations, I’m going to argue that...
Last week we released GED VIZ, a tool to create data visualizations for the web. It’s free to use and also open source! See the announcement for general information. GED VIZ is a large JavaScript (“HTML5”) application that runs in modern web...
Good visualisations are more than just fancy graphics. They are a lot about storytelling, shedding light on important issues, and at the same time inspiring us to raise new questions. Building such visualisations can be a very time-consuming effort,...
JavaScript application development is a hot topic and people are wondering which framework they should pick. Русский перевод In this post I’m going to compare two of them. Marionette and Chaplin are frameworks on top of the...
If you are using Core Data, need to change your database scheme but Core Data cannot infer the changes on its own. And you don’t want to dig into the Core Data Programming Guide, you have come to the right place. Custom migration is quite a powerful...
This article explains the set up of a Continuous Integration (CI) environment for Xcode projects that use Kiwi to implement unit tests. It shows how to configure Jenkins to set up the correct Ruby environment for CocoaPods, how to install all...
CocoaPods is a relatively new way to manage Xcode library dependencies like the Facebook iOS SDK et al. If you are coming from the Ruby world you know this kind of workflow from bundler. CocoaPods can be easily installed as a gem via ‘gem install...
There are a lot of awesome jQuery plugins and Javascript libraries out there, and with every new one it gets more difficult to keep track. Some might save you hours of work, others just add that teaspoon of UI love, that little big detail, that...
Building websites today is usually a totally bloated and inefficient process: First, there is a designer who creates layouts and designs in photoshop. After that, the designs are iterated together with clients or teams. Making changes to the overall...
No native code should be used for this application. The building blocks The app is realized as a single-page web application using the popular JavaScript library Backbone.js with Handlebars.js for the templates. The map component was built with the...
Today we’re releasing the application architecture of moviepilot.com into the public: Meet Chaplin! In April 2011, Moviepilot, a successful Berlin-based startup, asked us to help building their new product moviepilot.com. After having established an...
Two years ago, Martin, author of the following post, was about to become a carpenter. Instead, he became our apprentice and a fellow webdeveloper. Needless to say how drastically this changed his perspectives. It was not an easy decision to take...
At Nodecamp 2011, we wanted to present a live tracker built with Node.js. After seeing the popular facebook map by Paul Butler, I was wondering why not create something like that with live data. The appeal of watching the temporal dynamics within...
Most of you might agree that the pace of web-evolution was impressively intense last year. (Yeah, the web is dead, we just haven't found a new name for it yet.) From a business perspective, 2010 was also pretty good, with many services empowering...
There is a potential side-effect of the new facebook "like" button, which has currently not reached public awareness, but it probably should. It starts when you leave the facebook website. I usually don’t log out, my friends don’t log out, and in...
So we've seen a couple of 2010 lists lately, but from a technical perspective, we think they were missing some important stuff. The following list is a snapshot of heated-up discussions in our company about things that could shake up the web...
We are currently working on some interesting project where we have the chance to distribute some video footage with the new HTML5
Click here to launch the experiment! (beware: sophisticated browser needed) HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features...
Why do I need CAPTCHAs? As soon as your web project becomes bigger you will notice that bots are trying to spam your blog and to fake user inputs. When I created a blog with Django for a website with about 60.000 unique users per day I had to delete...
In this post, two possible implementations of the ActiveRecord design pattern will be discussed. With the raise of Ruby on Rails, ActiveRecord became very popular to the IT crowd. by Sebastian To put the concepts of this pattern in a nutshell:...
Firefox really makes you more productive when developing web applications or websites. Not because of its good browser engine - but because of the countless add-ons. I would like to present some of my favorite plugins which are a must have for...
