Forem: Civan Özseyhan

[Public Beta] Meercode, a beautiful dashboard and monitoring tool for Github Actions.

Civan Özseyhan — Thu, 15 Oct 2020 07:00:45 +0000

The Product

Meercode is a dashboard and monitoring tool for your Github Actions workflows. It lets you visualize the status of running and completed builds, on a clean and beautiful UI. The project started as an internal tool and turned out to be a SaaS product.

Our Motivation

Github Actions is the powerful CI/CD and automation solution from Github. It is simple, flexible, and affordable. Right after it’s launch, it has become the go-to automation tool for our development team.

As the number of managed repositories and workflows grew rapidly, we needed a solution to monitor the status of workflow runs. Unfortunately, no built-in tools or existing solutions provided us the results we expected. So we decided to develop our own plug-in.

The funny name and logo derive from Meerkats, animals famous for their upright postures to watch their environment.

The Challenge

Github exposes a comprehensive API for the Actions product. Our initial version of Meercode started as a React front-end directly consuming this endpoint. On the next iteration, we started to develop our backend service to increase the performance, avoiding the rate-limits of Github API’s and provide customization options to users.

As we decided to share our work with the world as a product, we started with a total redesign of the UI using neumorphistic components. We added critical features like publicly shareable dashboards and responsive layout supporting big office TV’s.

Public Beta

At this stage of product development, we wanted to start a public beta program to let you join our journey and get the most valuable feedback from the DevOps and developers community.
Public beta users will be rewarded with 3-month premium plans, allowing you to get the full experience of the product.

Getting started

Visit meercode.io to signup with your Github account and start adding your repositories and watching your workflows. We greatly appreciate your feedback including bug reports, feature requests, and product ideas. To contact us, you may use the feedback form on the "dashboard" page or leave a comment below.

Server-Side, data-driven animation & video rendering with nodejs.

Civan Özseyhan — Fri, 19 Jul 2019 14:56:16 +0000

In this demo, we created a nodejs application generating weather forecast videos on-the-fly.

The dynamic weather data is loaded as JSON and presented on web canvas with animations. Using the node-canvas library and ffmpeg, the same canvas animation is rendered on server and exported as an mp4 video file.

Edit on 31 Aug 2020:

The demo is now a fully working nodejs library. You can check it out from: https://github.com/pankod/canvas2video

An unified alternative to React Native Picker Component

Civan Özseyhan — Sat, 18 May 2019 06:20:15 +0000

React Native ships with a Picker Component providing bindings to native implementations of this most basic UI element. It renders as an UIPickerView on iOS and as a Spinner on Android devices:

As seen on the demos, the output is totally different on iOS and Android. If you want a consistent look & feel on both platforms, official React Picker component is definitely not the way to go.

Another issue with the stock component is platform-specific props, which causes you to add platform-specific code to your project to make it work on both platforms.

We took an alternative approach and developed a modal-view based list picker component. It renders consistently on both platforms and provides an unified API.

Additionally, the component includes built-in support for text search and alphabetical index which makes it ideal for longer lists not suitable for "wheel pickers":

If you want it give a try, a live demo can be seen on Expo and the full source code with complete API documentation is available on Github:

pankod / react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View

React Native Module to select item picker modal.

Created by Pankod

An alternative to Picker and PickerIOS components with an unified API and consistent look & feel on both plaforms. It's fully configurable and includes built-in support for text search and alphabetical index. Ideal for longer lists not suitable for "wheel-pickers".

Getting started

$ npm install react-native-picker-modal-view --save

$ yarn add react-native-picker-modal-view

Live Demo with Expo

Example

import * as React from 'react';
import { Button, SafeAreaView, Text, View } from 'react-native';
import PickerModal from 'react-native-picker-modal-view';

import data from '../../../top20.json';

export default class Main extends React.Component<{}, { selectedItem: {} }> {

    constructor(props: {}) {
        super(props);

        this.state = {
            selectedItem: {}
        };
    }

    public render

…

View on GitHub

Performance oriented Next.js application boilerplate with Redux, Typescript, Express.js and Sass.

Civan Özseyhan — Fri, 21 Dec 2018 15:02:28 +0000

Next.js is a minimalistic React framework that runs in the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating it is also a straightforward way for developers with React experience to get productive fast.

The advantages of this approach is to be able to create Rich User experiences in a uniform way, without compromising Search Engine Optimisation (SEO) factors that are key to good ranking on Google and other search engines.

We created the production-ready pankod/next-boilerplate to make it easier to get started with a well-structured Next.js and TypeScript application. You may check out our Github Repo for more information.