DEV Community: nurgasemetey

I made a tool which analyses your Github star history

nurgasemetey — Mon, 18 Jan 2021 18:15:49 +0000

Hi everyone!

I always wondered what my github star history could tell about me. So decided to analyze star history by month.

In Github, you can assign topic to repository.

For example, material-ui has following topics:

By using Github API, I fetched all my star history and grouped by month.

And here is the result:

You can also view your own top topics from the following link:

https://top-topics-by-github-stars.netlify.app/

Here is the source code: https://github.com/nurgasemetey/top-topics-by-github-stars/

How I wrote Ulauncher extension for most used timedate macros

nurgasemetey — Wed, 25 Nov 2020 21:37:45 +0000

Why?

I wrote a lot. And in my writings I use timestamps, dates, times, time-ranges.

I use following datetime formats

2020-11-01
15-18
14:58

For them I used custom bash scripts which were copying to clipboard the date formats I wanted. These scripts were manually added to Linux's custom shortcuts.

Example of bash script:

#!/bin/sh
alias setclip='xclip -selection c'
alias getclip='xclip -selection clipboard -o'
printf $(date +"%Y-%m-%d") | setclip

Initially, I was really happy but after some time number of custom scripts increased. I had difficulties with remembering them.

How?

I stumbled to Ulauncher and it is downed on me that I could create extension for these timedate scripts.

For people who don't know, Ulauncher is application launcher to which many developers write many extensions.

Some examples:

emoji extension
process murderer
google translate
spotify player

Here is the tutorial link for extension development.

About my extension

Ulauncher requires that extension must have manifest.json file to operate.

Example of manifest.json

{
  "required_api_version": "^2.0.0",
  "name": "Timestamp macros",
  "description": "Copy to clipboard the most used timedate formats",
  "developer_name": "Nurgazy Nazhimidinov",
  "icon": "images/icon.png",
  "options": {
    "query_debounce": 0.05
  },
  "preferences": [
    {
      "id": "time_kw",
      "type": "keyword",
      "name": "Timemacros",
      "default_value": "tm"
    }
  ]
}

It says that if you write keyword Timemacros, extension will be on launcher(WARNING not clicked).

if you write Timemacros and click

write tm and SPACE, then KeywordQueryEventListener(EventListener) will invoked.

Here is the code:

class DemoExtension(Extension):

    def __init__(self):
        super(DemoExtension, self).__init__()
        self.subscribe(KeywordQueryEvent, KeywordQueryEventListener())

class KeywordQueryEventListener(EventListener):

    def on_event(self, event, extension):
        items = []
        logger.info('preferences %s' % json.dumps(extension.preferences))
        logger.info(event.get_keyword()) # gives the keyword 'tm'
        items.append(ExtensionResultItem(icon='images/icon.png',
                                         name='YYYY-MM-DD',
                                         description='{0:%Y-%m-%d}'.format(datetime.datetime.now()),
                                         on_enter=CopyToClipboardAction('{0:%Y-%m-%d}'.format(datetime.datetime.now()))))

        items.append(ExtensionResultItem(icon='images/icon.png',
                                         name='HH:mm',
                                         description='{0:%H:%M}'.format(datetime.datetime.now()),
                                         on_enter=CopyToClipboardAction(
                                             '{0:%H:%M}'.format(datetime.datetime.now()))))

        items.append(ExtensionResultItem(icon='images/icon.png',
                                         name='YYYY-MM-DD HH:mm',
                                         description='{0:%Y-%m-%d %H:%M}'.format(datetime.datetime.now()),
                                         on_enter=CopyToClipboardAction(
                                             '{0:%Y-%m-%d %H:%M}'.format(datetime.datetime.now()))))

        return RenderResultListAction(items)


if __name__ == '__main__':
    DemoExtension().run()

As you can see KeywordQueryEventListener(EventListener) and on_event is run and RenderResultListAction(items) is returned and presented to user.

Our items would be

YYYY-MM-DD
HH:mm
YYYY-MM-DD HH:mm

Here is the screenshot of items:

Code for item:

items.append(ExtensionResultItem(icon='images/icon.png',
                                         name='YYYY-MM-DD',
                                         description='{0:%Y-%m-%d}'.format(datetime.datetime.now()),
                                         on_enter=CopyToClipboardAction('{0:%Y-%m-%d}'.format(datetime.datetime.now()))))

Explanation for ExtensionResultItem:

name - title shown to user, look at screenshot above

description - subtext which is also shown to user, look at screenshot above

on_enter - most important part, says what to do if user clicks on this items. In my case, it is CopyToClipboardAction action which copies data to clipboard.

Summary

At the end, I developed extension with enabled me to discard my custom bash scripts and forget about keyboard shortcuts for them.

Source code on Github

Deprecated bash scripts 😄

From personal blog: https://www.nurgasemetey.com/2020/extension-ulauncher/

How I used Amazon SES with MJML to create email templates in my side-project

nurgasemetey — Fri, 06 Nov 2020 19:10:36 +0000

How it started

I wanted to send emails to my users on https://weekhabit.paraboly.com.

First attempt: mail sending services

Of course, I started with mail sending services like SendGrid, Mailchimp, SendInBlue. They are awesome services but I faced with various difficulties:

one was asking to buy a block of emails while I wanted to fly in free limits because user base is small now.
in one I couldn't even register
one had small UX error where I couldn't test my mail template because I removed sender but I couldn't understand it from error.

Another attempt: Amazon SES

For introduction, Amazon SES

is email service, supporting sending emails from CLI and SDKs.
doesn't have template editor to create template. All templates must be created by users.

As any programmer, I wanted to code this mail sending. 😀

Here is ther overview of CLI(AWS CLI must be installed and made login) commands for SES(more information can found in SES docs)

aws ses list-templates
aws ses get-template --template-name simple-template
aws ses create-template --cli-input-json file://simple-template.json
aws ses update-template --cli-input-json file://simple-template.json
aws ses send-templated-email --cli-input-json file://simple-template-single-user.json
aws ses send-bulk-templated-email --cli-input-json file://simple-template-bulk-users.json

Example of simple-template.json

  {
    "Template": {
      "TemplateName": "simple-template",
      "SubjectPart": "Greetings, {{name}}!",
      "HtmlPart": "<h1>Hello {{name}},</h1><p>Your favorite animal is {{favoriteanimal}}.</p>",
      "TextPart": "Dear {{name}},\r\nYour favorite animal is {{favoriteanimal}}."
    }
  }

Example of simple-template-single-user.json

  {
    "Source":"WeekHabit Team <week-habit-team@paraboly.com>",
    "Template": "mjml",
    "ConfigurationSetName": "ConfigSet",
    "Destination": {
      "ToAddresses": [ "someuser@gmail.com"
      ]
    },
    "TemplateData": "{ \"name\":\"Alejandro\", \"favoriteanimal\": \"alligator\" }"
  }

Note: ConfigSet must be created in Amazon SES console otherwise email will not be sent.

Problem

Did you notice that HtmlPart is very simple and more suitable for system emails where style is not important.

Also Amazon SES doesn't have template editor, so how to create responsive and stylish email?(One of many advantages of email services)

mjml - responsive template framework

The mjml is tool which allows create responsive email. It has nice editor where you can design email template.

Standard workflow for generating email template html:

Create template in editor https://mjml.io/try-it-live
Copy to file, let's name simple-template.mjml
run(I assume that you installed mjml)

./node_modules/.bin/mjml -r simple-template.mjml -o simple-template.html

Copy new-template.html to HtmlPart part of simple-template.json described above.
Update template by running

aws ses update-template --cli-input-json file://simple-template.json

Example:

From personal blog: https://nurgasemetey.github.io/2020/amazon-ses-mjml-email-template/

Express-jwt and Keycloak: how I didn't use Keycloak's official library

nurgasemetey — Fri, 30 Oct 2020 18:56:41 +0000

Problem

We have many microservices that run on multiple deployments. I wanted to add security by using Keycloak with the help of JWT.

Solution

One of the earliest solution was to use Keycloak Js Adapter. Yet, Keycloak JS adapter requires following:

var keycloakConfig = {
    clientId: 'nodejs-microservice',
    bearerOnly: true,
    serverUrl: 'http://localhost:8080/auth',
    realm: 'Demo-Realm',
    credentials: {
        secret: '62c99f7c-da55-48fb-ae4e-a27f132546b7'
    }
};

which seems cumbersome way of doing this.

I thought there must be more simple way, I just wanted to validate requests.

That's why I liked Spring Boot approach which is:

include package

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
</dependency>

add one line config

spring.security.oauth2.resourceserver.jwt.issuer-uri = http://localhost:8080/auth/realms/appsdeveloperblog

At start, it fetches makes request to issuer-uri which has response like this

{
  "realm": "appsdeveloperblog",
  "public_key": "...",
  "token-service": "http://localhost:8080/auth/appsdeveloperblog/master/protocol/openid-connect",
  "account-service": "http://localhost:8080/realms/appsdeveloperblog/account",
  "tokens-not-before": 0
}

and stores public_key which is used to validate JWT tokens. It doesn't make request each time to verify JWT.
As result, any request is validated and working out of box.

So I wanted to replicate this on NodeJS.

I started with express-jwt and simple example was like this

var jwt = require('express-jwt');

app.get('/protected',
  jwt({ secret: 'shhhhhhared-secret', algorithms: ['HS256'] }),
  function(req, res) {
    if (!req.user.admin) return res.sendStatus(401);
    res.sendStatus(200);
  });

//Or with public key, shortened

var publicKey = fs.readFileSync('/path/to/public.pub');
jwt({ secret: publicKey, algorithms: ['RS256'] });

However it was problem for us to provide public key because

we have multiple deployments
each deployment has its own Keycloak.

We couldn't maintain this so I decided to implement like in Spring Boot.

With the help sync-request package:

const res = request('GET', 'http://localhost:8080/auth/realms/appsdeveloperblog');
const response = JSON.parse(res.getBody().toString());
const publicKey = `-----BEGIN PUBLIC KEY-----\r\n${response.public_key}\r\n-----END PUBLIC KEY-----`;

app.use(jwt({ secret: publicKey, algorithms: ['RS256'] }));

I achieved on-start fetch of public key without cumbersome settings on NodeJS.