Robust Session Storage in Phoenix Live View Sessions
Persistently storing session info in Phoenix Live View to it survives reloads and live navigation
Read more about Robust Session Storage in Phoenix Live View Sessions
The 9elements Blog
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design.
Building the Perfect Logo Strip
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.
Responsive bar charts in HTML and CSS
Building flexible data visualizations for international sites
Speed vs. Duration - A use case for mixed unit division
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.
Building a Rock Solid Auto Grid
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.
Hosting a ComfyUI Workflow via API
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
Stress testing Svelte until your browser breaks down crying
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
Blending AI and Artistry: A Journey in Digital Creation for a Fictional Movie Poster
Exploring the fusion of AI and traditional digital art to design a unique movie poster.
9elements x DISROOPTIVE x AI: Revolutionizing Workflow Efficiency
A Brief History Of Augmenting An Existing Application With LLM
AI Glossary
Glossary for terms and concepts in world of Artificial Intelligence for everybody
Enhancing video search & discovery in a Rails application by using Whisper and ChatGPT
Building a video search engine based on transcribed video content
A JavaScript Testing Journey
Testing full-stack web applications thoroughly
Using symbolic logic for mitigating nondeterministic behavior and hallucinations of LLMs
Using LLMs to translate human input to be used in predicate logic programs
variables2css – Writing a Figma plugin
I have released my first Figma plugin. But how did this journey begin, and what obstacles have I encountered along the way?
From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry
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.
My Thoughts on CSS Day 2023
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...
Building a combined CSS-aspect-ratio-grid
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...
More productive through less bullshit
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...
Testing Angular applications
Angular is an excellent framework for building enterprise-grad JavaScript single-page applications. How do take advantage of Angular’s testability?
Digital Agency goes Beauty
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.
Maintaining JavaScript applications in the long term
How we enhanced and refactored a client project over six years.
The Devil's Albatross
Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout.
Telegram Service for Ethereum 2.0 Staking
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...
Developing on Windows with WSL2
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...
Gradient angles in CSS, Figma & Sketch
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 might be the iPhone moment for AI
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...
What We Learned From Going 100% Remote As A Digital Agency
"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.
Create Diagonal Layouts Like It's 2020
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.
Ethereum 2.0
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...
Volatile downloads with Elixir and Phoenix
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...
Sizing Blocks or Areas using CSS Custom-Properties
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...
Track-switching in a large Elixir web application
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...
Maintaining large JavaScript applications
Lessons we have learned from maintaining large JavaScript applications in the long term.
CSS Border-Radius Can Do That?
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.
Maintainable test setup with scenario pipelines
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.
Aus alt mach’ neu!
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.
Top 13 Websites to Learn How to Code in 2019
Don’t worry, I´ve got you covered. This article is about the best sites (mostly free) that teach you how to code.
The 100 Ether Rooftop
Our story begins in July 2015, when the Ethereum project released the genesis block, the very first block of the ether blockchain.
Creating an animated SVG Neon light effect
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...
On the Future of Web Development
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...
Building a responsive image
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...
First Facebook Developer Circle Ruhr
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 - a Rails platform to give children a brighter future
#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...
Kickoff of the Facebook Developer Circle Ruhr
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...
Streaming downloads in Elixir: a protocol love story
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...
Elixir child specifications became a lot easier
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...
Elixir & Phoenix, mp4 and the Safari
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...
Ethereum - The world computer
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...
Why we bet on Elixir and Phoenix
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...
Babel, Rails 5 and Sprockets 4 with Sprockets Commoner
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,...
Retrospect RuhrJS
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...
Install "Let’s Encrypt" with NGINX and Phusion Passenger
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...
Changing versions of Elixir and Erlang
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...
Quit your fucking Job! - Why we need to rethink German Company Culture
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...
An Ember.js application with a Rails API backend
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...
Project launched: WEF Inclusive Growth Report 2015
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...
The ethereal Frontier
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...
German Valley Week Review
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...
Go in Production
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...
Using qt-pods to share your code
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...
New project: OECD Data Portal
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...
Our First Experience with Swift
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,...
External bundles with browserify and gulp
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...
Visual storytelling using WebGL
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...
Stripe vs. Paymill
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...
Signing Configuration Profiles with OpenSSL In Pure Ruby
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...
Webbzeug - procedural texture editor for your browser
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...
Why JavaScript web applications should embrace traditional URLs
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...
How we built the data visualization tool GED VIZ
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...
GED VIZ: An HTML5 data visualization tool
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 MVC frameworks: A Comparison of Marionette and Chaplin
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...
Customizing Core Data Migrations
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...
Continuous Integration of iOS Projects using Jenkins, CocoaPods, and Kiwi
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 Best Practices
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...
A Box of Javascript Chocolates (part 1)
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...
Help us to create the best tool for publishing anything online.
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...
Falk Mobile relaunch, the HTML5 way
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...
Chaplin – an Application Architecture based on Backbone.js
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...
The digital carpenter.
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...
Live is beautiful.
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...
Next decade: The big bang technology.
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...
Facebook's watching you, brother.
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...
The most epic tech-battles in 2010
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...
Make OGG Video work with Rails
We are currently working on some interesting project where we have the chance to distribute some video footage with the new HTML5
HTML5 Canvas Experiment
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...
Integrating Captchas with Django
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...
Traits for ActiveRecords next TopModel
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:...
Pimp my Firefox - The right way!
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...
