Forem: Dídac

WorkDash - Slack Status Changer

Dídac — Wed, 19 Aug 2020 17:13:30 +0000

The other day I decided that I will build something for my desk and I did this:

// Detect dark theme var iframe = document.getElementById('tweet-1295815551642673154-677'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1295815551642673154&theme=dark" }

My idea is to make kind of a cheap DIY version of Elgato Stream Deck and the first version only uses the Slack's API to change my status, but it's a start.

For now, if you are interested to build your own you can check the gist that I've made to make one for yourself:

Follow this series to known what else I will be adding!

Nice banner from Banner build by Liyas Thomas 🦄

Rails webhook integration development with Ngrok

Dídac — Fri, 11 Jan 2019 21:20:01 +0000

All begin when I started using Mollie, it's a PSP (Payment Service Provider) like Stripe and it has a ruby wrapper, but if you want to test payments in a development environment (localhost) you need a valid URL so they can reach you via webhook (if you want to validate the payment, the webhook URL parameter is mandatory).

The solution was easy I just create an ngrok tunnel and I change the default_url_options with an environment variable depending if I was working on something that needed only my local machine or other services.

For running my app with mollie webhooks i needed to do this:

Start ngrok
Change ENV variables for the new ngrok https url
Start my app
Start Sidekiq (for background jobs)

IMO it's not to much but at some point becomes annoying so I decided to make it easier for me, now i only have:

Start my app
Start Sidekiq

Here it is how to did it:

Install ngrok v2+ in your computer
Add ngrok-tunnel in your Gemfile

group :development do
  gem 'ngrok-tunnel'
  # Cool stuff for later but not really needed
  gem 'tty-box'
end

In puma.rb we add this code at the bottom

if ENV["IS_DEV_ENV"]
  begin
    options = {
      # App port
      addr: ENV.fetch("PORT") { 3000 },
      # ngrok system files
      config: File.join(ENV["HOME"], ".ngrok2", "ngrok.yml"),
    }

    # In case that you have a pay plan you can create
    # tunnels with custom subdomains
    options[:subdomain] = ENV["NGROK_SUBDOMAIN"] if ENV["NGROK_SUBDOMAIN"]

    # Region (since I only work in the EU is hardcoded)
    options[:region] = "eu"

    # Create tunnel
    Ngrok::Tunnel.start(options)

    # Create cool box
    box = TTY::Box.frame(width: 50, height: 10, padding: 2, title: {top_left: "<NGROK>", bottom_right: "</NGROK>"}, style: {fg: :green, bg: :black, border: {fg: :green, bg: :black}}) do
      "STATUS: #{Ngrok::Tunnel.status}\nPORT:   #{Ngrok::Tunnel.port}\nHTTP:   #{Ngrok::Tunnel.ngrok_url}\nHTTPS:  #{Ngrok::Tunnel.ngrok_url_https}\n"
    end
  rescue => error
    box = TTY::Box.frame(width: 50, height: 5, align: :center, padding: 1, title: {top_left: "<NGROK>", bottom_right: "</NGROK>"}, style: {fg: :red, bg: :black, border: {fg: :red, bg: :black}}) do
      "I couldn't create the tunnel ;("
    end
  end
  puts "\n#{box}\n"
end

Let's comment this code:

ENV["IS_DEV_ENV"] : Since Rails.env.development? is not loaded (at least in Heroku) in this point of the app we are using an environment variable that is only set in your secrets.yml or application.yml only in the development section and it needs to be set to true.

    development:
        IS_DEV_ENV: "true"

In the options hash we have the app port and the home directory where the ngrok files are located.
options[:subdomain] In case that you are an ngrok subscriber you can have a custom subdomain so I left the code here just in case I became a subscriber one day.
options[:region] This is not in an ENV variable because we are based in the EU and we don't work outside of it, so I just hardcoded EU but you can choose between:
- us - United States (Ohio)
- eu - Europe (Frankfurt)
- ap - Asia/Pacific (Singapore)
- au - Australia (Sydney)
WHAT'S IN THE box ????!!! just to make it cooler (at least for me) it's showing a nice box with the ngrok information.

In case ngrok cannot be connected we use the box to show that we cannot connect

Change the varibles

You maybe don't need this if you just want to test Mollie payments but for me was nice to have.

To change the config dynamically I choose a way that I think it's far from okey but it works (yeah i know it's running on every request). In the application_controller.rb I added this method:

before_action :set_ngrok_urls, if: "Rails.env.development?"

def set_ngrok_urls
    if Ngrok::Tunnel.running?
      # Getting current url
      url = Ngrok::Tunnel.ngrok_url_https

      # Variable hash
      default_url_options = {host: url}

      # Overwriting current variables
      Rails.application.config.action_controller.asset_host = url
      Rails.application.config.action_mailer.asset_host = url
      Rails.application.routes.default_url_options = default_url_options
      Rails.application.config.action_mailer.default_url_options = default_url_options
    end
  end

So what I'm doing here is in case that the environment is development I'm executing the function set_ngrok_urls and checks if ngrok is connected.

Then I get the current ngrok https URL and I create a hash (this hash is needed for the routes and the mailer default URL's) the two first only use the url.

That will be all, hope this works for some people and please if I did something very wrong leave a comment.

Bibliography

Autostart Ngrok With Rails: https://stuff-things.net/2016/10/12/autostart-ngrok-with-rails/

How do you manage Calendars in your company?

Dídac — Tue, 19 Jun 2018 09:36:01 +0000

At the company that I've been working for, since the biginning they have a shared iCloud calendar and it difficult to sync when we have new Android, Linux or Windows devices.

I would like to change it to a shared calendar that can be sync thought any platform, I know Google Apps is an option but we don't use it, we have an email provider.

Do you know any platform that can help to fix this problem?

Thanks.

Mining cryptocurrencies instead of having ads?

Dídac — Wed, 22 Nov 2017 21:58:07 +0000

Today I saw a tweet from @ben that had a dev.to link talking about ads that made me remember something that I saw some weeks ago:

Liquid error: internal

Coinhive

Coinhive offers a Javascript API for mining a cryptocurrency called Monero in your own website so instead of having a tons of ads you ask for some processing power for mining to the user.

Concepts (I got this from their website):

Captcha: We offer an easy to implement captcha-like service where users need to solve a number of hashes (adjustable by you) in order to submit a form. This prevents spam at an inconvenience that is comparable to a classic captcha. All with the added benefit of earning you money.
Shortlinks: If you have an URL you'd like to forward your users to, you can create a cnhv.co shortlink to it. The user has to solves a number of hashes (adjustable by you) and is automatically forwarded to the target URL afterwards.
Javascript API: If you don't like the captcha or shortlinks for whatever reason, nothing is stopping you from implementing your own solution on top of our API.
The JavaScript API let's you associate solved hashes to specific users on your site. Users can solve hashes on your behalf in return for benefits you provide.

I think this super interesting in captcha and short links but I would not like it that much if all my tabs are mining at the same time.

Do you think that this will become the new ads?

Do you know some potential problems that we could encounter as users?

Please share your opinion.

Is a bad idea to use Github Pages for a production ready app?

Dídac — Tue, 14 Nov 2017 11:15:19 +0000

I'm trying to not spend money on hosting for a react app and I found this package:

gh-pages: Publish files to a gh-pages branch on GitHub (or any other branch anywhere else)

By adding this script you can build and push the code directly to gh-pages and publish your app in seconds:

"scripts": {
  "deploy": "gh-pages -d build"
}

Do you think is a bad idea to use Github pages as production?

Talking to a figure

Dídac — Sat, 11 Nov 2017 12:17:09 +0000

From the comments I realized that there is another post in dev.to called Becoming The Duck from Terry Keeney talking about this and there's a name for what I tried to explain Rubber duck debugging.

In 2014 I started my first job as a full-time developer and I have to say I was super nervous I felt that I wasn't good enough to do the job (Impostor Syndrome).

A problem that I had at the beginning is that when I ask for help to one of my colleagues I start explaining my problem and suddenly the answer hits my head (This is still happening to me sometimes).

One day a colleague (that knew that I was about to do the same thing) gave me a little Mario Bros figure from McDonald's and told me:

"Okay, for now on you will explain to this figure your problem and if you don't have the answer when you finish you can ask me"

At the beginning it was pretty weird but I took his advice and I have to say that most of the time explaining the problem to the figure gave me the answer.

I don't use the figure anymore but this changed the way I think about the problems that I find while I'm programming.

If you have the same experience, you don't need a figure but try to explain the problem to yourself (like you are talking to another person or even you colleague).

Please share your opinion.

React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

Dídac — Sat, 26 Aug 2017 23:21:47 +0000

I needed a way to customize Bootstrap 4 from the Sass files making easier to change the variable values.

Requirements

Node.js
$ sudo apt-get install nodejs
Yarn

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Install create-react-app package (you probably need to use sudo) $ yarn global add create-react-app

Create your react app

$ create-react-app bootstrap4-react-app

Adding Sass (This part is from the `create-react-app` package documentation)

Create `/src/styles/` folder

Inside your project folder execute $ mkdir src/styles

Install the command-line interface for Sass, the package to run tasks in parallel and Bootstrap 4.

$ yarn add node-sass-chokidar npm-run-all bootstrap

Add the new tasks in the `package.json`

"scripts": {
  "build-css": "node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles/",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles --watch --recursive",
  "start-js": "react-scripts start",
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

As you can see if you look at your package.json this are the new commands:
build-css: Builds the css from the /src/styles/ directory.
watch-css: Whatches for changes of the .scss files from the /src/styles/ directory.
start-js: Executes the old start command.
start: Runs in parallel whatch-css and start-js.
build: Builds the css and build the scripts.

Create sass files

Now we can create index.scss and _custom_bootstrap.scss in our styles directory (that will create an index.css when it's build).

We use '_' for skipping this file to be build independently from the index file, instead we are going to import the file inside index.scss.

// My Bootstrap configuration
@import 'custom_bootstrap';

// Bootstrap library
@import 'bootstrap/scss/bootstrap';

// Here you can import more .scss files or write scss code.
...

Add custom variables

In `_custom_bootstrap.scss we can overwrite Bootstrap variablesthat we can find in ./node_modules/bootstrap/sass/_variables.scss.

For exemple we are going to change the primary theme color:

`scss
// New color
$new-color: #ad9a5b;

// Array of colors from _variables.scss
$theme-colors: (
primary: $new-color,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
) !default;

Since we don't have some variables you will have to copy them from the_variables.scss`.

The next step is loading the CSS file into index.js adding this line before the import off the App component: import './styles/index.css';

For starting the app just execute yarn start in your project folder and start changing variables, the terminal will tell you if your scss file has some errors and also every time you change something on the file will re-built the index.css and reload the page so you can see the changes,

This is the before and after:

This is my first article, so if you have some input or recomendation is always helpful.

Thanks and I hope this article is useful for you.