Categories
Products

Building MagikBanner an AI assisted banner image generator for marketers

I am starting a new project called MagikBanner. An AI assisted banner image generator. I asked a few marketers about where do they get banners and other graphics for their work. Some get it from in-house graphic designers, but most create it themselves using various online and offline tools. Learning those tools can be tricky and it’s also not a marketer’s primary function to create graphics. Especially when you need to create same kind of images for various platforms in various sizes, it can be a real time sink.

Hence, MagikBanner. You can just enter a few words, upload your logo if you wish and press a button and the service will generate a bunch of banner images automatically. It will automatically pick an image or pattern to be used as background, place the caption and logo where it sees fit and add a bunch of other effects and filters. You can select one of the options or generate more banners. Then whatever design you liked you can either tweak it more to your liking or get the design delivered in various sizes.

What kind of banners can be generated with MagikBanner?

  • Facebook and Twitter preview images
  • Facebook and Twitter profile cover images
  • Instagram stories
  • Apple App store and Google Play Store preview images
  • YouTube video thumbnails
  • Blog post featured image
  • Ad banners
  • Pinterest images
  • WhatsApp status images

And more.

Where does the AI come in? I plan on using GPT3 to detect the core theme of the banner and the theme will decide the colors, the fonts, placement of the objects, the image, the pattern. A banner for a CRM tool will have sophisticated business like look and feel, a banner for a cake shop will have informal and pleasing feel to it. Possibilities are endless.

If this sounds interesting, head out to MagikBanner.com and join the wait list to get updates on the progress and get notified when it launches.

Categories
Web Development

WebSocket uses cases and how to implement them with minimal code

I recently built webhooktest.com, it’s a free service to view and inspect the data posted to a webhook URL by a third-party API or service. The website gives you a unique URL which you can use as a webhook and gives you another URL where you can view the data being posted to the webhook URL in real time.

Webhook URL – https://webhooktest.com/some-unique-code

View URL – https://webhooktest.com/some-unique-code/view

The view URL needs to be updated in real time whenever a request is received on the webhook URL. How can we achieve this? The webhook URL makes an entry into a database whenever it receives a request. How can it inform the view URL to fetch the new entry and display it?

One way to do is to have the view URL constantly check the database for any new entries. This is called polling. It is inefficient and resource consuming for obvious reasons. An efficient option is to have the webhook URL notify the view URL about a new request so it can fetch and display the new entry. This can be achieved using WebSocket.

WebSocket is a two way communication protocol and it is natively supported by all modern browsers.

WebSocket is capable of two way communication, so a client can send a message to a server and server can send a message to the client. In my case I just needed the server to intimate the client which in my case is the view page, about the new request that had come.

I have previously implemented WebSocket in ASP.Net, this time since I was working on a Linux server, I have implemented the same in NodeJS.

Whether you are using Node or ASP.Net or any other language, to implement WebSocket you need to handle 4 events – open, close, message and error. Events are same on both the client which is implemented in JavaScript and server which can be in your favorite server side programming language.

Implementing WebSocket server in ASP.Net

If you are working with IIS, you have to make sure WebSocket support is enabled under Turn Windows features on or off.

In .Net you have to implement the Microsoft.Web.WebSockets namespace. Following is the implementation of the WebSocket class in C#.

public class MyWebSocketHandler : WebSocketHandler
{
  public static WebSocketCollection clients = new WebSocketCollection();

  public override void OnOpen()
  {
    clients.Add(this);}

  public override void OnClose()
  {
    clients.Remove(this);
  }

  public override void OnMessage(string message)
  {
    clients.Broadcast(message);
  }

  public static void BroadcastMessage(string message) {
    clients.Broadcast(message);
  }
}

We are maintaining a collection of connected clients. We add to the collection when a new client joins, and we remove the client from the collection when it disconnects. When a message is received from the client, the OnMessage method is called. You can use the Broadcast method of the WebSocketCollection object to send a message to all clients. In the above class I have also created a static broadcast method to be called by external code to broadcast a message to all the connected clients.

Implementing WebSocket server in NodeJS

There are 2 popular packages in NodeJS that implement WebSocket – websocket and ws. I have used ws.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8000 });

wss.on('connection', function connection(ws) {
  ws.on('open', function() {
    console.log('new client connected');
  });

  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.on('close', function() {
    console.log('a client disconnected');
  });
});

Client side implementation of WebSocket is also very easy.

var ws = new WebSocket("ws://websocket-url");

ws.onopen = function () {
  
}

ws.onmessage = function (e) {
  alert(e.data.toString());
}

ws.onclose = function () {
  
}

When a message is received from the server, the onmessage event is called and you can retrieve the message from the event object and handle it as per your business logic.

This is a very short primer on WebSocket. There are many more detailed tutorials available on WebSocket on the web. WebSocket are useful for building real time collaborative apps like live chat, collaborative editing applications like a white board or something like Google sheets. It can be used for one way messaging from server to client like updating prices, numbers or location on the client.

Categories
Web Development

Running multiple websites on your local development machine

There’s no place like 127.0.0.1 or localhost. You know that you can run only one website on localhost. But what if you have multiple projects and while developing you want to run more than one at the same time? One way you can do is by using a different port for each of them so you can access your projects on
http://localhost
http://localhost:8080
http://localhost:8081 etc.

But there’s another way. You can access your web projects like real websites, which they actually are. So you can have http://mywebsite.local
http://local.mywebsite.com
http://mysecondwebsite.yash
or anything that catches your fancy.

This is possible using hosts file.

You see, when you type any URL in your browser’s address bar, the browser runs a DNS query and fetches IP address for the entered domain. Every computer has a local file called hosts file in which you can specify the IP address for a domain and if the browser (actually OS) finds a domain there, it won’t query the global name servers for the IP of the domain. So if you tell your OS that http://local.mywebsite.com is located at 127.0.0.1 then it won’t look for that domain on the world wide web and instead route the requests for that website to your local computer.

In fact, if you are using local.somesite.com – or any valid global TLD (Top Level Domain), then you can simply add an A record for the local subdomain in the domain’s DNS records and point it to 127.0.0.1.

The location of the hosts file
Windows 10 – C:\Windows\System32\Drivers\etc\hosts
Mac and Linux – /etc/hosts

Open this file in any text editor with administrator/root privileges and enter the entry for your local domain in the following format

127.0.0.1 mywebsite.local

Save the file. Now we need to purge the OS’s DNS cache.

On Windows, open a new command prompt and run
ipconfig /flushdns

On Mac, open terminal and run
sudo killall -HUP mDNSResponder

On Linux, depending on which DNS service your distro is running the command is different.
See this post for more details

This is half the work done, you have just pointed the domain to your local machine. Now you need to prepare your local web server – IIS, Apache or Nginx to handle the request.

IIS
If you have already created the website, right click on the website, select Edit bindings. Click on Add.
Select Type = http, IP Address = All Unassigned and Port= 80. Add your local domain in Host name like mywebsite.local or local.mywebsite.com and click on OK to save it.

If you have not created a website in IIS yet, create a website and specify mywebsite.local as host name while creating.

Apache/Nginx
Create a website in Apache/Nginx using their respective config files. Make sure you specify the host name as mywebsite.local. Save the config and restart apache/nginx.

Now your local webserver is ready to serve requests to http://mywebsite.local

Open http://mywebsite.local in your favourite browser and check it out.