Find other software


  • practice tests design details css question answer pick better solution left or right
  • similar to design questions, here is examples of do and donts also tutorial
  • tailwind questions
  • fastclick
  • zeroclipboard to copy some text on click
  • jsPDF pdf generator examples preview pdf in browser in rails there is gem 'pdfjs_viewer-rails' but check for domain is enabled so there is an error Related rails issues (gem also uses old pdfjs version). Better approach is to copy from examples



    <%# %>

    <%= stylesheet_link_tag 'plugins/pdf_viewer', media: nil %> <%= javascript_include_tag 'plugins/pdf_viewer_build' %> <%= javascript_include_tag 'plugins/pdf_viewer' %>

    cp web/viewer.css to app/assets/stylesheets/pdf_viewer.scss and replace all

    url with asset-url(‘pdf_viewer/image.svg’) # note that for

    pdf_viewers/grab.cur there is double quote

    copy all web/images to app/assets/images/pdf_viewer/

    cp web/viewer.js and build/* to app/assets/javascripts/pdf_viewer/

    add your domain to HOSTED_VIEWER_ORIGINS viewer.js.erb:1547

    update to point to worker script

    workerSrc: {

  • value: ‘../build/pdf.worker.js’,
  • value: ‘<%= asset_path ‘pdf_viewer/pdf.worker.js’ %>’, ```

For error Message: Failed to fetch (console error Access to fetch at '' from origin 'http://localhost:3004' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.) you need to add cors to a bucket

  • number input field spinner
  • toggle checkbox: bootstrap switch

    bower install bootstrap-switch
    //= require bootstrap-switch/dist/js/bootstrap-switch.js
     *= require bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css
    • abpetkov/switchery
    • animated smile checkbox
    • bootstraptoggle only for bootstrap 3, for B4 use
      $('[data-bootstrap-toggle').each ->
        # this class will enable vimium
        style: 'demo-button'
  • trigger a function on scroll to an element waypoints
  • drag and drop elements

Alerts and notifications


jbox notifications, modals, tooltips, images and confirm windows. You need to install plugins that you use

yarn add jbox

// app/assets/javascripts/application.js
//= require jbox/src/js/jBox.js
//= require jbox/src/js/plugins/jBox.Notice.js

// app/assets/javascripts/
  // add tooltip to all elements with title <a title='Hi'>
  new jBox('Tooltip', {
    attach: '[title]'

// app/assets/javascripts/
# <%= button_tag 'Edit', 'data-modal': new_admin_role_path, 'data-modal-title': 'Edit role', class: 'btn' %>
$(document).on 'click', '[data-modal]', (e) ->
    url: e.currentTarget.dataset.modal
    title: e.currentTarget.dataset.modalTitle
    width: e.currentTarget.dataset.modalSize
  console.log "data-modal #{e.currentTarget.dataset.modal}"

// app/assets/javascripts/plugins/
window.openModal = ({url, title, width = 'auto'}) ->
  modal = new jBox 'Modal', {
    title: e.currentTarget.dataset.modalTitle
    ajax: {
      url: e.currentTarget.dataset.modal
      reload: 'strict'
      setContent: true
      complete: ->
        # we need to reposition when ajax returns
    onCloseComplete: ->
  console.log "data-modal #{e.currentTarget.dataset.modal}"

window.initializeJboxTooltip = ->
  # note that this will remove title attribute
  new jBox 'Tooltip', {
    attach: '[title]'
    theme: 'TooltipDark'

// app/assets/stylesheets/application.sass
@import 'jbox/src/scss/jBox.scss'
@import 'jbox/src/scss/plugins/jBox.Notice.scss'

# app/controllers/application_controller.rb
  after_action :_add_flash_message, if: -> { request.xhr? }
  after_action :_add_js_plugins_initialisations, if: -> { request.xhr? }

  # rubocop:disable Metrics/AbcSize
  def _add_flash_message
    return unless request.format == 'application/javascript'

    response.body += "flash_alert('#{view_context.j[:alert]}');" if[:alert].present?
    response.body += "flash_notice('#{view_context.j[:notice]}');" if[:notice].present?
  # rubocop:enable Metrics/AbcSize

  def _add_js_plugins_initialisations
    code = 'initializeJboxTooltip();' if response.body.match? /title=/
    return unless code.present?

    response.body += if request.format == 'application/javascript'

# app/views/layouts/application.html.erb
      <div class="d-none-not-important" id='notice-holder'><%= notice %></div>
      <% if notice %>
          flash_notice('<%= j notice %>');
      <% end %>

      <div class="d-none-not-important" id='alert-holder'><%= alert %></div>
      <% if alert %>
          flash_alert('<%= j alert %>');
      <% end %>
  <% end %>

# app/assets/javascripts/
window.flash_alert = (message) ->
  flash_message message, 'red'

window.flash_notice = (message) ->
  flash_message message, 'blue'

window.flash_message = (message, color) ->
  # says that we need to wait for
  # ready for page load, so we use setTimeout
      new jBox 'Notice',
        autoClose: 10000
          x: 'right'
          y: 'bottom'
        stack: true
        content: message
        color: color
    50 # tried with 0, 1, but it was triggered before page load and not working

Input mask

  • jquery form validation to validate only part of a form, you can use element but the problem is that you do not know if it is changed

Select something

  • selectize and selectize-rails
  • multiselect nice way to select multiple items from opened select box. If you show in popup with different data, then call select.multiSelect('refresh'); after you initialize multiSelect.
    • if you want to keep order keepOrder option shows nice order, but submitting the form do not preserve order. You can use this solution issue
      keepOrder: true,
      afterSelect: function(value){
        $('#templates-select option[value="'+value+'"]').remove();
        $('#templates-select').append($("<option></option>").attr("value",value).attr('selected', 'selected'));
    • keepOrder does not work for preselected items, solution could be to manually select (not already select: selected):
    $.each(selectedTemplateIds, function(index, template_id) {
      select.multiSelect('select', [String(template_id)]);
  • multiple select it creates ul lists, if inside overflow: hidden you can use container and dropWidth: '100px' options


This nice select2 examples works.

  • problem is when you have animations (like in modal, or collapsed-box) select can calculate full width. solution is to set inline style="width:100%" or to call with

      $('#customer-name-select').select2({ placeholder: 'Search by Customer Name or Username', width: '100%'});
  • to make it inline you can wraps inside inline-block element and set some size with style='width:100px' on select element (select2 will use that to calculate size).

    # app/assets/select2.sass
      display: inline-block
      // by default .select2-container is block, which move it slightly to the top
      // and then it is not inline with other inline text or buttons
        display: inline-block

    one solution to make select wider is to use select_tag :id, '', include_blank: 'Long sentence that make select width wider'

  • options like dropdownParent could help

You can use data-(any option) so for example you can use data-placeholder="Please select" to set select2 placeholder, or data-tags="true" to enable tagging (also need multiple: true for select to accept multiple options)

I use this initializer data-select2-initialize (do not use data-select2 since it is used already) and if you use turbolinks and have all select elements on main page

# app/assets/javascripts/
$(document).on 'turbolinks:load', ->
  console.log 'turbolinks:load'
  $('[data-select2-initialize]').each ->
    options = {}
    if $(this).attr 'placeholder'
      # select_tag :id, options, include_blank: true, placeholder: 'Choose one'
      options['placeholder'] = $(this).attr 'placeholder'
      options['placeholder'] = '<%= I18n.translate 'please_select' %>'

    options['language'] = determine_language()
    $(this).select2 options

or without turbolinks or if you have select elements on some ajax responses, you can manually call <script>initializeSelect2()</script>)

# app/assets/javascripts/
@initializeSelect2 = ->
  $('[data-select2-initialize]').each ->
    if $(this).attr 'placeholder'
      placeholder = $(this).attr 'placeholder'
      placeholder = "Please select"
      placeholder: placeholder
  <%= :customer, options_from_collection_for_select(Customer.all, 'id', 'name_and_username'),  { include_blank: true }, 'data-select2-initialize': true, 'data-placeholder': 'Select customer' %>
# default options for all select
# issue when select2 is used in modal or other elements that fades in
$.fn.select2.defaults.set("width", "100%")

Problem is when select2 is inside modal with tabindex="-1" example

To select item on select2 with ajax source, you need to initialize with data and keep ajax source

      data: [{id: selectValue, text: selectText}],
      ajax: {
        url: $(selectTarget).data('select2AjaxInitialize'),
        dataType: 'json'

or for all

$(document).on 'turbolinks:load', ->
  $('[data-select2-ajax-initialize]').each ->
    url = $(this).data('select2AjaxInitialize')
    options = {
      ajax: {
        url: url
        dataType: 'json'
    $(this).select2 options
    # using label for select does not open select2 on focus, so on label click
    # we should trigger open
    $(this).focus ->

Search not only on text but on custom data attributes I tried to add hidden divs to <option> but it seems that there could be only the text as inner object. So I add title and copy matcher function from Select2 and add

# app/assets/javascripts/
matcher = (params, data) ->
  # ... copy from original matcher ...
  title = stripDiacritics(data.title).toUpperCase()
  # check if title exists and contains the term
  if title.indexOf(term) > -1
    return data

@initializeSelect2 = ->
  $('[data-select2-initialize]').each ->
    # we need to remove tabindex attribute from modal if exists
      matcher: matcher

Install with stimulus

Calendar date and time picker

  • calendar

  • Best option is daterangepicker it can be used for singleDatePicker, dateTime picker
    • download with bower install bootstrap-daterangepicker --save (git should be
    • autoApply (can’t be used when timePicker enabled)
    • autoUpdateInput (when you want to parse user selection, custom format)
    • it can contains predefined ranges (Last 7 days)
    • note that is uses data-daterangepicker so use with your own data-bootstrap-datarangepicker It has some problems with module as CommonJS (AMD works fine) since you need to pass jquery
      // let moment = require('moment')
      // use from vendor until pull request is accepted
      // require('./vendor/daterangepicker')(moment, $)
  • pickdate
  • jquery ui datepicker Error on chrome if you use type=date link so use type=text
  • bootstrap-datepicker
  • time picker

  • “One minute ago” can be updated automatically in this timeago plugin. Similarly, jquery.countdown for future dates

Image file upload drag and drop crop

For file input you can show preview file using FileReader

# app/assets/javascripts/
$(document).on 'ready page:load', ->
  # file image preview
  $("[data-image-preview]").each ->
    return unless typeof FileReader != "undefined"
    $preview_target = $($(this).data('imagePreview'))
    $(this).change ->
      regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.png)$/
      if regex.test $(this).val().toLowerCase()
        reader = new FileReader()
        reader.onload = (e) ->
          $preview_target.html $('<img />', src:
        reader.readAsDataURL this.files[0]

# app/views/users/_form.html.erb
      <div class="admin-image-preview">
        <div class="admin-image-preview__thumbnail" id='preview-book-cover-picture'>
          <% if f.object.book_cover_picture.present? %>
            <%= image_tag f.object.book_cover_picture.url(:medium) %>
          <% end %>
            <%= f.file_field :book_cover_picture, 'data-image-preview': '#preview-book-cover-picture' %>

Rich text editors wysiwyg


  • wiki with cards with editor
  • fireEdit
  • ckeditor for 4.1 you can add your own style rails integration
    // app/assets/javascripts/cheditor/config.js
    CKEDITOR.stylesSet.add('default', [
        // Block-level styles
      { name: 'Blue Header', element: 'h2', attributes: { 'class': 'blue-marker', style: 'color:blue' } },
  • counter how many characters left
  • quill


quill examples You can edit by selecting content bubble

Usually you do not need any additional styles when you want to show html (bold, italic, h1, quote, code, list). Color and background colors are defined inline with style attribute so it works (unless you use rails sanitize which remove inline styles). Other styles requires quill classes (center, right, direction, align, indent, large, huge, fonts) so you need to inlude that css and to wrap output inside ql_editor class (or you can use inline style but it seems )

  <div class="ql-editor">
    <%= raw @location.about_html %>

You can load in head section

<!-- app/views/layouts/application.html.erb -->
<script src="//" type="text/javascript"></script>
<link href="//" rel="stylesheet">

or you can load dynamically using this helper

# app/assets/javascripts/
# all files will be loaded defered so you can use callbak
window.alreadyLoadedFiles = []
window.loadFile = (filename, callback) ->
  if callback and filename in alreadyLoadedFiles
    console.log "File #{filename} already loaded"
  if filename.slice(-2) == "js"
    fileref = document.createElement('script')
    fileref.setAttribute("src", filename)
    fileref.onload = callback if callback
  else if filename.slice(-3) == "css"
    fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  if (typeof fileref!="undefined")
    alreadyLoadedFiles.push filename
    console.log "Adding file #{filename}"

and use it with loadQuill('editor-content', 'editor-container');

# app/assets/javascripts/
window.loadQuill = (editorContent, editorContainer) ->
  loadFile "//"
  loadFile "//", ->
    console.log "Loading quill editorContent=#{editorContent} " +
    # stripped example from
    # so we do not need to load quill classes
    options =
      # debug: 'info'
        toolbar: [
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }]
          ['bold', 'italic', 'underline']
          ['blockquote', 'code-block']
          [{ 'list': 'ordered'}, { 'list': 'bullet' }]
      theme: 'snow'

    $editorContainer = $("##{editorContainer}")
    quill = new Quill($editorContainer.get(0), options)
    toolbar = quill.getModule 'toolbar'
    toolbar.addHandler 'link', (value) ->
      if (value)
        href = prompt('Enter the URL')
        href = "http://#{href}" if href.substring(0,4) != "http"
        this.quill.format('link', href)
        this.quill.format('link', false)
    quill.on 'text-change', ->
      newHtml = $($editorContainer).find('.ql-editor').html()
      $("##{editorContent}").val newHtml

You can also get html on form submit

# app/assets/javascript/
$(document).on 'ready page:load', ->
  options =
    debug: 'info'
      toolbar: [
        ['bold', 'italic', 'underline']
        ['blockquote', 'code-block']
        [{ 'header': 1 }, { 'header': 2 }]
        [{ 'list': 'ordered'}, { 'list': 'bullet' }]
        [{ 'script': 'sub'}, { 'script': 'super' }]
        [{ 'indent': '-1'}, { 'indent': '+1' }]
        [{ 'direction': 'rtl' }]
        [{ 'size': ['small', false, 'large', 'huge'] }]
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }]
        [{ 'color': [] }, { 'background': [] }]
        [{ 'font': [] }]
        [{ 'align': [] }]
    theme: 'snow'
  syncHtml = ->

  $('[data-quill-editor]').each ->
    editoContainer = $(this).get(0)
    quill = new Quill(editoContainer, options)
    $targetInput = $(this.dataset.quillEditor)
    quill.on 'text-change', ->
      newHtml = $(editoContainer).find('.ql-editor').html()
      $targetInput.val newHtml
<%# app/views/admin/pages/show.html.erb %>
<div data-quill-editor="#editor-content">
  <%# you can test with raw content but sanitized is safer %>
  <%= sanitize @page.content %>
<%# app/views/admin/pages/_form.html.erb
    <div id="editor-container">
      <%= sanitize @location.about_html %>
      loadQuill('editor-content', 'editor-container');


Font awesome FA icons are very usefull for quick icons. Look for examples

  • color can be set with bg-red
  • spinner <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
  • in FA 5, by default should be used fas (solid), far (regular) and fal (light) is only for pro, but some icons like window-close is free for regular
  • size can be with setting style='font-size: 2rem' or using class fas fa-2x
  • padding between icon and text is with margin, and center with fixed width <i class='fas fa-tasks fa-fw mx-1' aria-hidden='true'></i><%= t('home') %>

Other free fonts can be found on where you can select icons and download only that batch of icons.


  • free images photos high resolution and free online sample images
  • free stock photos
  • free photo
  • free
  • sample placeholder
  • free vector images kajak pictogram
  • flags
  • create passport photo id card needs flash plugin so open in chrome
  • free animations



  • for rails you can use (which uses Chart.js)
    # for graphs
    gem 'chartkick'
    gem 'groupdate', '~> 6.1'
    # in view
        <%= line_chart, height: '400px', width: '99%' %>
  • graphs gallery and slider people parallel and the best is grafana
  • d3 for charts
  • google charts can be curved but can not be area in the same time
  • highcharts $500
  • echarts free
  • chartjs. Labels and datasets should be inside data attribute. Labels are for all charts.

    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['2018-1-1', '2018-1-2'],
        datasets: [
          data: [1, 2],
          label: 'Tavan',

    To add new data you can push to datasets and labels

  • arrows and grouping

  • To draw diagrams and graphs Define elements with array of {data: { id: 'a' }}. Edges have data: { id: 'ab', source: 'a', target: 'b' }. Alternativelly you can define elements as objects of nodes: [{data: {id:'a'}}], edges: [{data: {id: 'ab', source: 'a', target' b'}}]. When you want to group inside squares (compound) than use data: { parent: 'a' } (in this case a will become square). Layout
    layout: { name: 'grid' }

    Style is array of selectors style keys:

    style: [
        selector: 'node',
        style: {
          'label': 'data(id)'

    Events like dragfree tapdrag You can get position

  • draw sketchy hand drawn styled charts

Email services

User tracking services


  • create tracking plan that defines each event and its properties (name and type: string, number, boolean), In plan we should define: Event name, description, why this event and for each property: property name, property description, property type, why this property
  • call identify when user signup, or if there are existing users, when the logs in, or use the app
  • you can also send push notifications from mixpanel collect customer data

  • is free version that stores data in our db

User support services

User intro tour

User navigation to website with help tips should be only one, when user clicks something (so help is to interactivelly show tips, not on page load). Users will not remeber if you show them 8 steps for the page they just arrived.

  • introjs commercial lincence after 2.1
  • source
    • intersting value is backdrop: true so element is highlighted reflex: true so click on target element dismiss page tour
    • if you want to repeat tour you can use yield and content_for
      <%# somewhere in support dropdown menu %>
      <% if content_for? :page_tour_script %>
          <%= yield :page_tour_script %>
          <a href="#" onclick="startTour()">
            Start Page Tour
      <% end %>
    <%# on a page where we need tour %>
    <% content_for :page_tour_script do %>
        function startTour() {
          var tour = new Tour({
            storage: false,
            steps: [
              element: "[data-target='#publish-location-package-modal']",
              title: "Publish Package",
              content: "You can publish package using this button",
              placement: 'right',
              backdrop: true,
              reflex: true,
          // Initialize the tour
          // Start the tour
    <% end %>

Visitor user analytics

To find new customers you can find sites that link to similar content. For example in google will give all sites that links to You can scrape them to find admin contact email and suggest them to add your content that will be interesting to their audience

Do you feel it could be a good fit for your audience? Might be worth a mention :) Here is the Link: I’d love to know what you think! Sincerely,

Opensource heatmaps

  • example how to to track with firebase and how to show results with example js is here



Error tracking

  • airbrake
  • sentry




  • yml_gtranslate automatic generate translated yml locale files for rails localisations using google translate for f in $(find config/locales/ -type d);do yml_gt en rs $f;done. Also usefull when want to grep only en.yml grep -i catar config/locales --include *.en.yml -R

Rails realworldrails opensource rails more are using rspec than test: cd real-world-rails/apps and find . -name spec -maxdepth 2 | wc -l # 134 and find . -name test -maxdepth 2 | wc -l # 52

Those are nice to explore:

  • crowdsourcing catarse tilt is not actually opensource, since their api should be used
  • sharetribe opensource market peer-to-peer marketplace
  • diaspora
    • when you run localy, you can import new contacts and their posts, for example: [email protected]
  • openstreetmap
  • http status live site check if site is down using simple url ping
  • chat support intercom


Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox 1st Edition By Mark Pilgrim. Google book, some pages are missing To create a script click on Tampermonkey firefox extension icon and ‘Create a new script’

// ==UserScript==
// @name         New Userscript
// @namespace
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

Index of scripts:


Slither io

  • bots


Free illustrations kits

  • index of various sources

Email templates guides


  • news menu
  • click to copy css effects for buttons and inputs
  • shikoba effect on button
  • checkbox in css
  • rotate and shake on hover
  • radio button animation
  • link underline animate
  • create your own logo cvg animation in _posts/2015-08-22-svg-css3-transforms-and-animations.markdown
  • animate images flip load


  • scrolling and changing the content
  • menu active item changes when you have long text and scroll to sections
  • scroll whole page, not stuck at the middle of the slide, it is using
    html {
      scroll-snap-type: y mandatory;
    section {
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: flex;
      align-items: center;
      justify-content: center;

Nice design and ui tools

  • split cards
  • cards which you can click (mobile) or hover (desktop)
  • nice project portfolio showcase
  • nice example site sith custom drawings
  • animations
  • red bull
  • project portfolio animated
  • menu rotate on round image
  • menu icon hamburger animation
  • menu isometric
  • menu in css, select sibling and opacity on all but the one being hovered
  • menu slidey navigation
  • carousel slider
  • carousel alternative with expanding flex cards

Fonts and icons

Web framework based on

Static analysis

  • shellckeck static analysis tool for shell scripts

Mockups and wireframes

  • trial one month
  • free up to 300 objects
  • free for public one page

To create mockups you can use: Invision, Marvel, Baslamiq, Sketch. There is one opensource free mokup tool: Pencil Project

Continuous integration

see [ci cd post] /2018/04/10/continuous-delivery-integration-ci-cd-pronto/)


  • duckdns install
  • to run on ubuntu just sudo apt-get install ddclient and provide config params (or update /etc/ddclient.conf) and it will run every hour Example installing ddclient on ubuntu for cloudflare ```


    use=web,, web-skip=’IP Address’ # found after IP Address

CloudFlare (

## protocol=cloudflare,,
[email protected],

debug with

ddclient -daemon=0 -debug -noquiet

I got no SUCCESS or FAILED (just DEBUG and WARNING) response

ddclient -daemon=0 -debug -noquiet DEBUG: proxy = DEBUG: url = DEBUG: server = DEBUG: get_ip: using web, reports

but when I remove cache

rm /var/cache/ddclient/ddclient.cache

it works

SUCCESS: – Updated Successfully to

# Duckdns

Problem with dynamic dns is that their servers (hosted on AWS) sometime fails.
Currently it shows correct ip

dig +noall +answer 60 IN A

but sometimes it resolves to `` or
``, and errors is raised:

Mysql2::Error::ConnectionError: Access denied for user ‘cablecrm_staging_user’@’’ (using password: (redacted)))


A Neo4j::Core::CypherSession::ConnectionFailedError occurred in chats#show:

Faraday::ConnectionFailed: Couldn’t resolve host name

Best way is to use static ip address.

# Find alternatives


* twilio gem

# Jira

* use smart commit messages. Email of author must match email of user
  * `Support small devices APP-123 #comment Added a media query form small dev`
  * `Message APP-123 #done`

# Status page

* on rails
* others
* opensource alternative to google drive
  Official on ubuntu is for apache
  for nginx config

sudo su wget unzip -d /usr/share/nginx chown www-data:www-data /usr/share/nginx/nextcloud/ -R

mysql create database nextcloud; create user nextclouduser@localhost identified by ‘your-password’; grant all privileges on nextcloud.* to nextclouduser@localhost identified by ‘your-password’; flush privileges;

copy configuration from instructions to /etc/nginx/sites-available/nextcloud

systemctl reload nginx

Initial configuration

sudo vi /usr/share/nginx/nextcloud/config/config.php

you can see that data folder inside installation, but we will move up

‘datadirectory’ => ‘/usr/share/nginx/nextcloud-data’,

Backup google drive is done with downloading with
or with

* pihole on nginx

vi /etc/pihole/setupVars.conf

Block porn sites by simply goind to Settings -> Blocklists ->

# Time tracking

* harvest
  It contains a cli

gem man hcl

  Issue with status so you need to update

gem open hcl lib/hcl/commands.rb # change http:// to https://

* is old unmaintained
  Install linux brew

/bin/bash -c “$(curl -fsSL”

  Than install gtm
  brew tap git-time-metric/gtm
  brew install gtm

  Use in your project

gtm init

gtm status gtm report -last-month -format summary

* approximate based on git commit times

git-hours # yesterday or 2021-01-01 yesterday git-hours –since lastweek

*  Glass

  Download and create links in your `/usr/local/bin` and run `sudo glass install`

  glass init
  glass status
  git commit -am "Work"
  git log -n 1 --show-notes=time-spent

  To disable adding commit message use space (not empty)

  cat >> /var/lib/timeglass/timeglass.json << HERE_DOC
    "mbu": "1m",
    "commit_message": " ",
    "auto_push": false
* paas like dokku captainduckduck caprover

* tor browser can use proxy in any country, on mac edit

vi “/System/Volumes/Data/Users/dule/Library/Application Support/TorBrowser-Data/Tor/torrc”

and add folowwing lines

EntryNodes {us} StrictNodes 1 ExitNodes {us} StrictNodes 1

and restart tor browser

* gdpr in rails
* create image with command line generate image email

magick -gravity center -size 100x20 -font /System/Library/Fonts/Times.ttc caption:”[email protected]” email.png && open email.png ```