I am excited to introduce Usetix, the simplest way to sell tickets for your events. After building software tools for developers with Sunnybox, I wanted to create something that anyone can use. No coding or design skills required.

Why Usetix?

Event organizers shouldn’t need to be developers to sell tickets online. Most ticketing platforms are either too complex, too expensive, or both. Usetix strips away the complexity and lets you focus on what matters: your event.

What You Get

• Conversion-optimized ticket shops that are beautiful, fast, and mobile-friendly
• Stripe payments for secure, trusted payment processing
• Digital wallet passes with Apple Wallet and Google Wallet integration
• QR code scanner to check in attendees quickly
• Sales analytics to see how your tickets are selling in real-time
• Two-factor authentication to keep your account secure

Simple, Fair Pricing

No setup fees. No monthly fees. You only pay when you sell: €1 per ticket. That’s it. No hidden costs, no credit card required to get started.

Get Started

1. Head over to Usetix.io
2. Create your first event
3. Start selling tickets in minutes

I’d love to hear your feedback! Drop me a line at bijan@screenisland.com or find me on Twitter.

Let’s make event ticketing effortless.

Bijan

In the ever-evolving landscape of web development, the quest for efficient, scalable, and maintainable styling solutions is perpetual. Among the myriad of frameworks and methodologies, utility-first frameworks like Tailwind CSS have gained immense popularity for their ability to streamline the development process with their atomic classes. However, with the advent of CSS variables and the upcoming feature of scoped CSS, there’s a burgeoning alternative that promises a blend of flexibility, performance, and maintainability that could rival, and in some aspects surpass, utility frameworks.

See the experiment (Chrome only)

Please note that as of now only Chrome supports @scope selector. The soon to be released Safari 17.4 will also start supporting it soon leading to broad adaption having the two biggest engines (webkit and blink) on board.

The Power of CSS Variables

CSS variables, also known as custom properties, are pivotal in creating a dynamic, maintainable, and themable styling system. They allow developers to define a value once and reuse it throughout the stylesheet, facilitating ease in making global changes. For instance, a primary color can be set as a variable – changing it updates the color scheme across the entire project seamlessly. This not only reduces redundancy but also enhances readability and maintainability.

CSS variables shine in their ability to be manipulated in real-time through JavaScript, opening doors to interactive and responsive designs that adapt to user inputs or environmental changes without the overhead of additional classes or inline styles.

Scoped CSS: A Leap Towards Modular Styling

Scoped CSS, a feature eagerly awaited by developers, introduces the ability to limit the scope of CSS styles to specific components or sections of a webpage without the risk of global style leakage. This encapsulation ensures that styles are localized, reducing unintended side-effects and making components more reusable and easier to manage.

The combination of scoped CSS with CSS variables presents a compelling narrative for developers seeking a balance between global theming and local component styling. It enables a modular approach where components are styled independently yet adhere to a unified theme through shared variables.

A Great Alternative to Utility Frameworks

Utility frameworks like Tailwind CSS have their merits in rapid development and enforcing consistency. However, they often lead to bloated HTML with extensive class usage and can obscure the semantic meaning behind the markup. The alternative approach using CSS variables and scoped CSS addresses these concerns by keeping the styling separate from the markup, leading to cleaner, more semantic HTML.

This combination promotes a design system that is both scalable and maintainable. By leveraging CSS variables for theming and scoped CSS for component-level styles, developers can create a cohesive look and feel while maintaining the integrity of modular components. This approach also potentially offers better performance by reducing the number of classes and the overall size of the stylesheet.

Conclusion

As we look towards the future of web development, the emergence of CSS variables and scoped CSS as alternatives to utility frameworks like Tailwind CSS represents a shift towards more semantic, maintainable, and efficient styling practices. This paradigm encourages a balanced approach, leveraging the best of both global theming and local encapsulation, fostering a development ecosystem that is both dynamic and robust. As these features become more widely supported, they promise to redefine the standards of web styling for better.

Introduction

Real-time updates in web applications are a common requirement. Whether it’s a chat application, a dashboard, or a game, users expect to see changes in real-time without having to refresh the page manually. This can be achieved using WebSockets, but it often requires a lot of boilerplate code and can be difficult to implement correctly. In this blog post, we will explore how Go, WebSockets, HTMX, and DOM Morphing can make it easier to build real-time applications.

The Problem

Traditionally, real-time updates using WebSockets involve sending raw data from the server to the client, which then updates the DOM accordingly. However, this approach can be inefficient and may require refreshing the entire page. We wanted to find a more efficient way to handle real-time updates, inspired by the concept of DOM morphing. DOM morphing involves sending a new DOM from the server to the client, which then surgically applies the necessary changes to the existing DOM. This approach is more efficient because it only modifies what is necessary and leaves the browser state intact.

HTMX: Simplifying DOM Morphing in Go

HTMX is a powerful library that simplifies the implementation of DOM morphing in Go applications. It handles all the details of managing the WebSocket connection and applying the changes to the DOM. With HTMX, developers can easily build real-time applications without having to write complex WebSocket code or worry about managing the DOM updates manually.

Building a TODO App with Go, WebSockets, HTMX, and DOM Morphing

To demonstrate the feasibility of this tech stack, we built a simple TODO app using Go, WebSockets, HTMX, and DOM Morphing. The app allows users to create and update tasks in real-time, and it supports multiple users, ensuring that changes made by one user are reflected in the UI for other users. You can see the app in action here:

The source code for this tech-demo is available on GitHub: https://github.com/gobijan/go-htmx-todo

Why Choose Go for Real-Time Applications?

Go is an excellent choice for building real-time applications for several reasons. First, Go is known for its simplicity and efficiency. It has a small and concise syntax, making it easy to read and write code. This simplicity translates into faster development cycles, allowing developers to deliver high-quality solutions in a shorter timeframe.

Second, Go’s performance is exceptional. It is a compiled language designed to be fast and efficient. Go’s lightweight goroutines and built-in concurrency support enable developers to handle high loads and scale applications easily. This makes it an ideal choice for building robust and scalable real-time applications.

Additionally, Go has a strong standard library and a vibrant ecosystem of third-party packages. This provides developers with a wide range of tools and libraries that can accelerate development and enhance functionality. Whether it’s handling HTTP requests, working with databases, or implementing authentication and authorization, Go offers the necessary tools to build secure and reliable real-time applications.

Work With Us

At Screen Island, we have extensive experience in building APIs and backends using various tech stacks, including Go, WebSockets, HTMX, and DOM Morphing. We believe in using the best tools for each project based on its specific requirements and constraints. Our diverse skill set, which includes expertise in Ruby on Rails and C# with Dotnet, allows us to make informed decisions and deliver optimal solutions.

If you’re looking for a team with extensive experience in building real-time applications using Go, WebSockets, HTMX, and DOM Morphing, Screen Island is here to help. Contact us today to discuss your project requirements and let us bring your ideas to life.

It’s been two weeks since Rails World 2023 took place in Amsterdam, and I’ve finally found time to share my key takeaways from visiting the event.

Rails Renaissance

The economy has shifted significantly over the past three years. The era of abundant, cheap funding is over, and this change is manifesting itself in the tech industry. It’s now more crucial than ever to focus on developer productivity and impact. DHH kicked off the event with a thought-provoking slide showing a correlation between cheap funding and the rise of technologies like React, Webpack, and GraphQL.

Picture of DHHs Opening Keynote showing fed rates and ‘unproductive tech’ correlation

This hits hard, especially when seeing tweets like this here where a developer mourns about the complexity of sending 5 simple form fields to a backend using React:

You’d be shocked how complex a web form can be.

I’m looking at a simple web form with 5 fields that uses:

useState
useEffect
Redux
React Query
React Hook Form

I’m trying to trace the data flow and my head is spinning.

— Cory House (@housecor) October 18, 2023

I’m not saying React is bad technology by any means. But I do believe that it’s overkill for many applications that are more or less just a CRUD interface.

The One-Person Framework

When building Sunnybox.io, I weighed different tech stacks. With more than 15 years of experience in web application development, I had a lot of options to consider. I ultimately chose Ruby on Rails for the same reasons many in the community do: it enables me to build a complete product solo. I can manage everything — from API, OpenAPI documentation, job backend, to user handling, payment integration and automated tests & easy deployment — within a single, majestic monolith, without the need for a rigid frontend-backend division.

Going Forward

Rails 7.1 was released on the day of the keynote, and I’ve already upgraded Sunnybox. While the update brings several quality-of-life improvements, the Rails World conference also previewed upcoming framework features. One of the most exciting revelations was the forthcoming DOM morphing capability, similar to what Phoenix Live View offers. This will significantly reduce the overhead for real-time updates that maintain scroll position and site state. For a sneak peek at what Turbo 8 will offer, check out this link:

Dev 37signals Turbo 8 Preview

Closing Thoughts

It was exhilarating to finally meet so many members of the Ruby on Rails community in person. Betting on Rails has proven to be a sound decision, and I look forward to continuing to build with this “boring,” stable, and highly productive technology.

Me and a dear Ruby friend at Rails World 2023

Cheers,
Bijan

Hello, wonderful community! After months of hard work and invaluable feedback (huge shoutout to Lars and Michael 🙏), I am thrilled to unveil the Public Beta of Sunnybox. This is your opportunity to be among the first to experience what I’ve been working on and help shape its future.

🌈 What is Sunnybox?

Sunnybox is a SaaS (Software as a Service) platform that I created to make your email interactions as seamless as possible. It wraps around IMAP and SMTP protocols and offers a JSON:API-compliant interface, complete with OpenAPI v3 documentation. Forget the intricacies of email protocols—jump straight into coding!

🤔 Why Do You Need Sunnybox?

Simplify Email Integration

Email communication is critical for businesses. However, there’s often a gap between the informal nature of emails and the structured data in ERP or CRM systems. That’s where Sunnybox comes in, providing a simplified pathway to integrate email data.

Accelerate Development

No need to parse emails manually, scan for attachments, or juggle MIME types. Sunnybox gives you access to structured email data with minimal effort.

AI-Ready

With the growing role of AI in data analytics, I designed Sunnybox to make it easy to integrate email data into your AI workflows.

📝 What Does “Open Beta” Mean?

I’m launching this Public Beta because I’m extremely interested in your feedback. I want to refine and enhance the service further, and your experience could be invaluable in that process. Rest assured, the API comes with comprehensive OpenAPI v3 and JSON:API documentation.

🛣️ What’s on the Roadmap?

Here’s what I’m planning to roll out next:

• Webhooks for real-time notifications 🛎️
• AI triggers to make your workflows smarter 🤖
• Third-party integrations like n8n, ChatGPT, Zapier and more 🧩
• Auto-generated SDKs for popular programming languages 📚

💵 Pricing and Special Offers

While I’m still finalizing the pricing, here’s the deal for now:

• Free Tier: You can connect up to two IMAP accounts for FREE during the beta.
• Promo Code: Use the code sunnyboxbeta to explore other tiers for free for one month.
• Early Adopters: If you join me early on this journey, special discounts will be available later on.

🙋‍♀️ How to Get Started?

1. Head over to Sunnybox.io and sign up.
2. Dive into the API documentation.
3. Connect your IMAP accounts.
4. Start coding and let the sun shine on your projects! 🌞

I can’t wait to hear your feedback, issues, or any feature requests you might have. Feel free to share them on our community forum, public issue tracker or email me directly at bijan@screenisland.com.

Let’s make email integration effortless, together! 🌬️

Bijan

PS: Here are a few screenshots.

Screenshot of Sunnybox Start

Screenshot of Sunnybox Provider View

Screenshot of Sunnybox API Keys View

When I started developing Sunnybox as an email client I soon realized that it’s quite annoying to handle emails. The IMAP protocol is quite different from what you expect modern APIs to look like.

I cracked it but thought it would be a good idea to make it easier for others to build email integrations. Out of this idea came the Sunnybox API.

It’s a REST API that allows you to send and receive emails with more analytical features, AI integration and webhooks on the way.

Screenshots of Sunnybox API

Right now it is in developer-preview and you can see landingpage here: https://sunnybox.app

I gave some friends access to the API and they are already building some cool stuff with it. If you want to join the developer preview, please send me an email to hello@sunnybox.app

Cheers Bijan

I almost died under an avalanche of emails when working at corporates, startups, and as a freelancer. Fed up with the conventional options for email and on the brink of declaring “defeat” on my inbox - I decided to tackle the problem head-on. 🏴‍☠️

I’m building a new mail experience: Sunnybox. It offers a fluid workflow, leaves the heavy-lifting to AI and does content aggregation. It thinks ahead for you and defuses the mines in your inbox while ensuring nothing falls through the cracks. Come as you are - Sunnybox supports @gmail.com, @me.com or @your-domain.com.

With Sunnybox, you own your data. It stays true to the IMAP standard while wrapping around and supercharging the default inbox.

I’m building this product because I want it to exist. I want something that I enjoy using and hope you might too.

I will use this blog to deliver progress updates.

You can further find more information on Sunnybox here:

https://sunnybox.app

Cheers Bijan

In this tutorial I want to show you how it’s possible to create a Ruby on Rails To-Do backend that is serving JSON via API and communicates changes in realtime to all connected clients via web sockets.

Let’s create a simple todo API. I will on purpose neglect all the other aspects like (authentication/authorization/validation) to keep this as pure as possible.

Setup

First of all let us create our sample application:

rails new todos-api --api

Now let us create our todo model:

rails g scaffold todo name completed:boolean
rails db:migrate

I added two todos to our seeds.rb:

Todo.create(name: "First Task", completed: false )
Todo.create(name: "Second Task", completed: false )

Now seed the database and start the server:

rails db:seed
rails s

Congratulations we now have a simple todos API backend up and running that returns an array of our two seeded todos:

curl http://localhost:3000/todos

Setting up the channel

Now we want to communicate changes to our todos as soon as they happen to connected JavaScript clients written in React, Ember, Angular, Svelte, Vue or any other fancy frontend-framework.

First we need to mount our websocket endpoint in our rails app. Therefore we modify our development.rb file and add these two lines. We don’t cover testing and prod here but you get the idea.

config.action_cable.disable_request_forgery_protection = true
config.action_cable.mount_path = '/websocket'

Well done. We expose now this websocket endpoint:

ws://localhost:3000/websocket

Now let’s create a channel we use to publish changes to our todos:

rails g channel Todos

We keep this channel very simple:

class TodosChannel < ApplicationCable::Channel
  def subscribed
    stream_from "todos"
  end

  def unsubscribed
    puts "We lost a client."
  end
end

The subscribed method is invoked whenever a client connects. It sets the key the connected client is notified on. Here we simply chose “todos”.

You know what? We can now transmit data over the websocket to our connected clients:

ActionCable.server.broadcast("todos", {data: "hello world"})

Watching the Todo model and broadcasting changes

There are many ways we could go here but I promised to keep it simple. ActiveRecord Models in Rails have callbacks for CRUD and we make use of these callbacks now to transmit the changes. We want to broadcast to every established websocket connection.

class Todo < ApplicationRecord
  validates :name, presence: true

  # Hook into the create lifecycle
  after_create :broadcast_create

  private

  # We broadcast that a new todo was created.
  def broadcast_create
    ActionCable.server.broadcast('todos', {
      data: {
        event: "created",
        todo: self.as_json
      }
    })
  end
end

Now our live server is done. Time for a minimal frontend to consume our API.

Connect a frontend with plain websockets

I just created a plain html file with javascript that outputs the received data:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Bijan Rahnema">
  <title>Screen Island Rails Todos API Demo-Frontend</title>
</head>
<body>
<script>
  const onOpen = (ws, store, code) => evt => {
    console.log("WS OPEN");
    const msg = {
      command: 'subscribe',
      identifier: JSON.stringify({
        channel: 'TodosChannel',
      }),
    };
    socket.send(JSON.stringify(msg));
    console.log(msg);
  }

  const onClose = (ws, store) => evt => {
    console.log("WS CLOSE");
  }

  const onMessage = (ws, store) => evt => {
    const data = JSON.parse(evt.data);
    if (data.type === 'ping') {
      return;
    }
    console.log("WS MESSAGE");
    console.log(data);
  }

  const url = 'ws://localhost:3000/websocket'
  socket = new WebSocket(url);
  socket.onmessage = onMessage(socket);
  socket.onclose = onClose(socket);
  socket.onopen = onOpen(socket);
</script>
</body>
</html>

Open your dev console and you can inspect incoming messages etc.

That’s it for this tutorial.

Wrap-Up

1. Create a Rails channel.
2. Hook into model lifecycle event.
3. Consume event’s in your new realtime JSON API.

Cheers @BijanRahnema

A site relaunch was long overdue. In fact over the last years we’ve been busy working on customer projects. So the website didn’t get the priority it deserved.

This new site is built with Jekyll, our own version of Tachyons (with support for darkmode) and hosted on GitHub Pages.

When creating a website nowadays there are tons of low- or no-code options available with a plethora prebuilt of themes. As a software company we believe though that the process of creating your own site is something very personal that deserves more than a default theme.

We wanted something that is integrating with our own workflow and aligns with our sustainable tech stack mentality.

Jekyll fits in nicely here as it was developed by GitHub’s Co-Founder and is written in one of our favourite languages Ruby. The first release was in 2008 and it is still actively maintained today. As Jekyll renders static HTML files one does not depend on any special server technology. In fact these pure HTML files will probably be readable till the end of the Internet.

You see? Very sustainable technology.

Same goes for Tachyons. The godfather of utility css frameworks. Yes we also considered Tailwind and we like tailwind but we felt for this site Tachyons is what we wanted. Something that is basically finished, can be easily extended and doesn’t need any further tech (compiler etc.).

Stay tuned for more content as we will blog regularly here.