DEV Community: Amirul Asyraf

Deleting all data from a table in Ruby on Rails

Amirul Asyraf — Thu, 05 Aug 2021 00:08:37 +0000

If you need to refresh your database, you might find that you need to delete every row from a specific table during development.

That is slow 🐢. Freaking slow 🐄.

Glad Rails have many small tricks to solve everything 🌈 (but still not documented properly 😂).

There are several ways to achieve this. I will rank it from the slowest/scary/bad to the simplest and yet powerful solution.

Let's go !!!

3) Drop the whole database and bring it back up again

We can achieve this with rake:db:drop, then rake:db:setup.

Wuuu, drop the database then create a new one, load the schema, and initialize it with the seed data.

Slow & Expensive !!! 🐢

2) destroy_all

Destroys the records by instantiating each record and calling its #destroy method. Each object's callbacks are executed (including :dependent association options).

Records are instantiated and it invokes before_remove, after_remove , before_destroy and after_destroy callbacks.

Examples

# 1
Person.where(sex: "male").destroy_all # 😂

# 2
class Author < ActiveRecord::Base
  has_many :books
end

author.books.size # => 3
author.books
# => [
#       #<Book id: 1, name: "Sapiens", author_id: 1>,
#       #<Book id: 2, name: "The Artist's Way", author_id: 2>,
#       #<Book id: 3, name: "Remote", author_id: 3>
#    ]

author.books.destroy_all

author.books.size # => 0
author.books      # => []

Book.find(1) # => Couldn't find Book with id=1

Note: Instantiation, callback execution, and deletion of each record can be time consuming when you're removing many records at once. It generates at least one SQL DELETE query per record (or possibly more, to enforce your callbacks).

1) delete_all 👑

If you want to delete many rows quickly, without concern for their associations or callbacks, use delete_all instead.

Boot up a console and call delete_all on your model:

% rails c
> Book.count
# => 1200 
> Book.delete_all
# => 1200
> Book.count
# => 0

Deletes the records without instantiating the records first, and hence not calling the #destroy method nor invoking callbacks.

This is a single SQL DELETE statement that goes straight to the database, much more efficient than destroy_all.

You need to be careful on two things:

1- As .delete_all method does not instantiate any object hence does not provide any callback (before_* and after_destroy don't get triggered).

2- Be careful with relations, in particular :dependent rules defined on associations are not honored. Returns the number of rows affected.

Post.where(person_id: 5).where(category: ['Something', 'Else']).delete_all

Both calls delete the affected posts all at once with a single DELETE statement.

If you need to destroy dependent associations or call your before_* or after_destroy callbacks, use the destroy_all method instead.

See if User is online using Devise in Ruby on Rails

Amirul Asyraf — Mon, 02 Aug 2021 23:55:53 +0000

Recently, I needed to figure out if a user was active(online) on my site. Because I hadn't done this before, I Googled for inspiration 🌈 but found little success 🙃. The majority of posts on Stack Overflow and blogs were variations of the same solution:

1) Add a `last_online` timestamp column to your User model, then define a scope for user called `online_now`.

Meaning, add new column to store on every timestamp the user is active/online. Then make a query(scope) from database which user that last active 2-10 minutes ago and display to the view.

This may take up some of your app's resources if you have many users who are logged in, because this will execute(update column & database query) before every controller action requested by someone who is logged in.

I think this process is slow.

2) devise_lastseenable Rubygems

Pretty old gems.

3) When someone has `logged in`, you can push him into an array, if someone has `logged out`, just remove him from the array.

I think last time I use this trick is on my Computer Science studies 😂 at universities long time ago.

4) WebSocket & Redis

If you're bothered by making a trip to database on every. single. http. request. only to have some small window where you can sort of assume that a user is online; There have an alternate solution.

Using websockets and redis it's possible to reliably get a user's online status up to the millisecond without making a billion costly writes to disk.

Unfortunately, it requires a good bit more work and has two additional dependencies.

There is one article that explains well how to use this solution if you are interested.

But probably not my choice for a simple project.

So, What else ?

Well, this solution is related to Devise.

When we create a User Model based on Devise;

rails generate devise User

Devise will create updated_at column with a datetime data type.

This is good tho. We can utilize already column from Devise instead of creating a new column like previous solution.

Whenever the current_user does any action, his updated_at will be set as Time.now.

#application_controller.rb

after_action :update_user_online, if: :user_signed_in?

private

def update_user_online
  current_user.try :touch
end

And we will just say that the user is online if he was updated_at during the last 2.minutes or 1.minutes

#user.rb

def online?
  updated_at > 2.minutes.ago
end

Now we can get true or false if we make a call like @user.online?

#users/show.html.erb

<%= @user.online? %>

This is one of the best and simple solution I get when doing research and a little bit of experimentation.

I am very happy 😇 if you can share to me other tricks that is better than this.

The end

resources:

1 2 3 4 5

Rails ActiveRecord Data Types

Amirul Asyraf — Tue, 27 Jul 2021 00:23:38 +0000

I usually curios to know about Data Types for ActiveRecord, but the Active Record Migration documentation itself does not have that information.

So, I do some Google search and here is the TL;DR.

The ActiveRecord data types available in Rails 6;

:primary_key
:string: short text
:text: long text
:integer: whole numbers [-4, 0, 9, 772]
:float: double-precision floating-point numbers [3244.90]
:decimal: high-precision floating-point numbers [3244.2342343789212]
:datetime
:time
:date
:binary: 1 / 0
:boolean: true or false

These data types are used in instances such as migrations.



def change
  create_table :categories do |t|
    t.string :title
    t.boolean :is_subcategory
    t.string :permalink
    t.timestamps
  end
end

Specific DBMS Data Type

MySQL Data Types



NATIVE_DATABASE_TYPES = {
        primary_key: "bigint auto_increment PRIMARY KEY",
        string:      { name: "varchar", limit: 255 },
        text:        { name: "text" },
        integer:     { name: "int", limit: 4 },
        float:       { name: "float", limit: 24 },
        decimal:     { name: "decimal" },
        datetime:    { name: "datetime" },
        timestamp:   { name: "timestamp" },
        time:        { name: "time" },
        date:        { name: "date" },
        binary:      { name: "blob" },
        blob:        { name: "blob" },
        boolean:     { name: "tinyint", limit: 1 },
        json:        { name: "json" },
      }

PostgreSQL Data Types



NATIVE_DATABASE_TYPES = {
        primary_key: "bigserial primary key",
        string:      { name: "character varying" },
        text:        { name: "text" },
        integer:     { name: "integer", limit: 4 },
        float:       { name: "float" },
        decimal:     { name: "decimal" },
        datetime:    {}, # set dynamically based on datetime_type
        timestamp:   { name: "timestamp" },
        timestamptz: { name: "timestamptz" },
        time:        { name: "time" },
        date:        { name: "date" },
        daterange:   { name: "daterange" },
        numrange:    { name: "numrange" },
        tsrange:     { name: "tsrange" },
        tstzrange:   { name: "tstzrange" },
        int4range:   { name: "int4range" },
        int8range:   { name: "int8range" },
        binary:      { name: "bytea" },
        boolean:     { name: "boolean" },
        xml:         { name: "xml" },
        tsvector:    { name: "tsvector" },
        hstore:      { name: "hstore" },
        inet:        { name: "inet" },
        cidr:        { name: "cidr" },
        macaddr:     { name: "macaddr" },
        uuid:        { name: "uuid" },
        json:        { name: "json" },
        jsonb:       { name: "jsonb" },
        ltree:       { name: "ltree" },
        citext:      { name: "citext" },
        point:       { name: "point" },
        line:        { name: "line" },
        lseg:        { name: "lseg" },
        box:         { name: "box" },
        path:        { name: "path" },
        polygon:     { name: "polygon" },
        circle:      { name: "circle" },
        bit:         { name: "bit" },
        bit_varying: { name: "bit varying" },
        money:       { name: "money" },
        interval:    { name: "interval" },
        oid:         { name: "oid" },
      }

Rails data types mapping to different DB data types:

It is important to know not only the types but the mapping of these types to the database types, too:

The easy way ✌️

You can access this list everytime you want (even if you don't have Internet access) through:



rails generate model -h

The end

resources;

1 2 3 4 5 6 7

How to create a transparent navbar with CSS

Amirul Asyraf — Fri, 23 Jul 2021 06:44:49 +0000

Last week, I look at the Gumroad website to know how to Add Made By at the bottom corner of the website (Pssst, read that article, Pretty cool stuff 🔥).

This week, when I look at the Super.so website, I notice new interesting CSS stuff :P.

Check the Super.so website.

Notice the slightly transparent navbar. How cool is that?

I already see this kind of design on other websites too !!!

Other examples;

✅ Obsidian

✅ Mikkel Malmberg

Pretty cool right 🌈. So, how are we gonna make it ??

Code Snippet

Try to scroll.

When I inspect the navbar on Super.so website, they already setup for Webkit (Safari) & Moz (Mozilla Firefox).

The main thing to implement this trick is;

✅ backdrop-filter

Without any explanation, try to change the blur(20px) to blur(10px) or blur(50px).

Do you notice the transparent blur is changed?

That is the main ingredient to implement this trick ✌️.

✅ background

If you remove the background, the text that appears behind the navbar seems ugly.

It is kinda a glitch when you remove the background CSS. So, add it.

Make the color or text visible behind the navbar a little less obvious by adding a background.

✅ position

As always, for any navbar anywhere in the world, we must place sticky to keep the navbar at the top when we scroll the website.

✅ top

Usually, people place the navbar at the top. I don't know if you want to put it at the bottom?? 😂

✅ z-index

You can put any value more than zero to the z-index . You put it n index from the root floor of the page.

Imagine a house with five floors, 3 on top and 2 on ground level. The root floor is located on the Ground floor, which is 3 floors from the bottom. You want the navbar to be more obvious, so you place it on the third floor, the highest floor, and not on the lower ground floor.

That's it. 🌈

The End

Resources:

no resources as I just use DevTool 😆

How to add "Made By" at the bottom corner of the website?

Amirul Asyraf — Fri, 23 Jul 2021 06:41:07 +0000

hey 👋 , I still haven't figured out what the title should be. Comment if you find a well-suited title after reading this article. You're awesome :P

Last week, I look at the Basecamp website to know how to Change the underline color Tricks in CSS (Pssst, read that article, Pretty cool stuff 🔥).

This week, when I look at the Gumroad website, specifically all of the product pages, I notice new interesting HTML stuff :P.

Check this example product page.

Notice the Powered by Gumroad floating stuff(I don't know what to call it 😂). That is cool actually. I have already seen this trend on many websites nowadays.

Free marketing. It makes your brand stands out. 🦄

Other examples;

✅ Webflow

✅ Stripe

✅ mmm.page

If you have a side project, you can show: "Made by asyraf" too!!

Examples:

✅ MakerReads

✅ No More Google

✅ Begreate.me

✅ chart2site.com

Pretty cool right 🌈. So, how we gonna make it ??

I have two ways for you;

1) Inspect DevTool

Honestly, this is easy. You can just open your DevTool and inspect the element. Most of the view is written in HTML & CSS. Pretty easy right. Don't bother to think of React or Vue or Svelte or other stuff.

Go and try to inspect the element. Use the utilities that Google has been given to you(that's why I love using vanilla things).

If you already forgot how HTML & CSS is, I'm here to help you. Keep reading :P

2) Code Snippet

There are two variations I came across here. One is like a Gumroad, and the second is like Pieter Levels.

Gumroad

Pieter Levels

The main thing here is:

a tag: to wrap the floating stuff, the text & the logo
left or right: either you want to put it on the left/right/bottom
position: set it to fixed as you want it to be sticky when you scroll the page and stick it at its position.
logo stuff
decoration stuff; border-radius, text-decoration, box-shadow ......

That is all my friends. Don't forget to mention me on Twitter if you put it on your website. Happy to see the variation of your guys' creativity 🌈.

The End

Resources:

no resources as I just use DevTool 😆

How to Get Values From Array With Specific Range in Javascript

Amirul Asyraf — Thu, 01 Jul 2021 05:08:29 +0000

Ruby World 💎

In Ruby, I can get the specific range from an array like this;

>> myArray = ['a','b','c','d','e','f','g', 'h', 'i']
>> myArray[0..4]
=> ['a','b','c', 'd', 'e']

However, since I am not using Ruby on this project and am using vanilla Javascript, I wonder how to achieve the same result.

Turns out that it's extremely easy to do !!!

Javascript World 🌈

You can use `array.slice(begin [, end])` !!!

var myArray = ['a','b','c','d','e','f','g', 'h','i'];
var sliced = myArray.slice(0, 5); //will contain ['a', 'b', 'c','d', 'e']

Easy right.

If you notice, the last index is different from the Ruby implementation.

This is because the last index is non-inclusive; to mimic ruby's behavior you have to increment the end value.

So, in Ruby;

myArray[m..n]

in Javascript;

myArray.slice(m, n+1);

the second argument to slice in Ruby is the length, but in JavaScript it is the index of the last element.

Other stuff

1) You can also pass a negative number, which selects from the end of the array:

var myArray = ['a','b','c','d','e','f','g', 'h','i'];
var lastThree = myArray.slice(-3);  //g, h, i

2) If end is omitted, slice extracts through the end of the sequence (arr.length).

var myArray = ['a','b','c','d','e','f','g', 'h','i'];
var noEndInSlice = myArray.slice(5);  //f, g, h, i

which indicate that the end value is optional

The End

Resources:
1 2 3

Ruby Hash Method 101

Amirul Asyraf — Fri, 25 Jun 2021 01:56:16 +0000

What the heck is Ruby Hash ??

You can think of Ruby Hash is kind of an Array without the numerical indexes. You access the Hash values with Keys. A Hash is a data structure used to store data in the form of UNIQUE key-value pairs.

A Hash has certain similarities to an Array, but:

✅ An Array index is always an Integer
✅ A Hash key can be (almost) any object

We are gonna dive 🤿 into the Hash world in Ruby. But not too deep, just at the level where most people dive in :p.

note: I encourage you to open irb in your favourite terminal app. Make sure you get your hands 🙌 dirty.

TL;DR

1️⃣ Hash Data Syntax
2️⃣ Common use case of using Hash
3️⃣ How to Create a Hash
4️⃣ How to create or update a Hash value
5️⃣ Values in a Ruby Hash
6️⃣ Hash Entry Order
7️⃣ How to delete a Hash entry
8️⃣ How to Access Values From a Hash
9️⃣ Extract a nested Hash value
🔟 Hash Keys 101
1️⃣1️⃣ Default Values
1️⃣2️⃣ How to Merge Two Ruby Hashes
1️⃣3️⃣ Multiple Hash values for one key
1️⃣4️⃣ Get All Keys and Values From a Hash
1️⃣5️⃣ Check if key exists in hash
1️⃣6️⃣ How to change a Hash to Array

✅ Hash Data Syntax

Hash has three Syntax style as Ruby 3.0.

1) hash rocket =>

hashy = {:foo => 0, :bar => 1, :baz => 2}
hashy # => {:foo=>0, :bar=>1, :baz=>2}

2) JSON-style syntax

hashy = {foo: 0, bar: 1, baz: 2}
hashy # => {:foo=>0, :bar=>1, :baz=>2}

note: The Hash key become a Symbol

note: You will get an error if you use the key that's not a bareword or a String

# Raises SyntaxError (syntax error, unexpected ':', expecting =>):
hashy = {0: 'zero'}

3) String

hashy = {'foo': 0, 'bar': 1, 'baz': 2}
hashy # => {:foo=>0, :bar=>1, :baz=>2}

note: same like number 2. But the key is change to the String, instead of symbol.

And you can mix the styles;

hashy = {foo: 0, :bar => 1, 'baz': 2}
hashy # => {:foo=>0, :bar=>1, :baz=>2}

Back to the top

✅ Common use case of using Hash

1) Give names to objects

book = {author: "Daniel J. Levitin", title: "This is Your Brain on Music}"
book # => {:author=>"Daniel J. Levitin", :title=>"This is Your Brain on Music"}

2) Give names to method arguments

def some_method(hash)
  p hash
end
some_method({foo: 0, bar: 1, baz: 2}) # => {:foo=>0, :bar=>1, :baz=>2}

3) initialize an object

class Book
  attr_accessor :author, :title
  def initialize(hash)
    self.author = hash[:author]
    self.title = hash[:title]
  end
end
book1 = Book.new(author: 'Daniel J. Levitin', title: "'This is Your Brain on Music')"
book1 # => #<Book: @author="Daniel J. Levitin", @title="This is Your Brain on Music">

4) Get the frequency from a list of numbers

numbers = [1, 1, 1, 2, 4, 65, 55, 54, 55]
freq_hash = numbers.each_with_object(Hash.new(0)) { |number, hash| hash[number] += 1 }

puts "#{freq_hash}"
# {1=>3, 2=>1, 4=>1, 65=>1, 55=>2, 54=>1}

Another tricks is using tally method.

numbers = [1, 1, 1, 2, 4, 65, 55, 54, 55]
numbers.tally
# output
# {1=>3, 2=>1, 4=>1, 65=>1, 55=>2, 54=>1}

note: This is for Ruby 2.7+ only. :P

5) Specify routes in Ruby on Rails

This is a line from the config/routes.rb file, the Router in a Rails application:

# defines a GET route mapped to the new action in the PostsController

get '/posts/new', to: 'posts#new'

The example of the above could be rewritten as:

get('/posts/new', { to: 'posts#new' })

The Hash is the second parameter passed to the get(...) method.

Back to the top

✅ How to Create a Hash

Here are three ways to create a Hash:

1) Method Hash.new

You can create a Hash by calling method Hash.new

h = Hash.new #Define empty hash
h # => {}
h.class # => Hash

h[:first] = 10
h[:second] = 20
h[:third] = 30

puts h # => {:first=>10, :second=>20, :third=>30}

2) Method Hash[]

You can create a Hash by calling method Hash[].

Create an empty Hash:

h = Hash[]
h # => {}

Create a Hash with initial entries:

h = Hash[foo: 0, bar: 1, baz: 2]
h # => {:foo=>0, :bar=>1, :baz=>2}

3) Literal form {}

You can create a Hash by using its literal form (curly braces).

Create an empty Hash:

h = {}
h # => {}

Create a Hash with initial entries:

h = {foo: 0, bar: 1, baz: 2}
h # => {:foo=>0, :bar=>1, :baz=>2}

Back to the top

✅ How to create or update a Hash value

We can use instance method []=:

h = {foo: 0, bar: 1, baz: 2}
h[:bat] = 3 # => 3
h # => {:foo=>0, :bar=>1, :baz=>2, :bat=>3}

h[:foo] = 4 # => 4
h # => {:foo=>4, :bar=>1, :baz=>2, :bat=>3}

Back to the top

✅ Values in a Ruby Hash

Values can be any Ruby Object. Including:

Strings
Integers & Floats
Arrays

note Keys are unique, you can only have one :foo key, or one :bar key. When you add the same key twice, the latter will override the former value.

Back to the top

✅ Hash Entry Order

A Hash object presents its entries in the order of their creation.

A new Hash has its initial ordering per the given entries:

h = Hash[foo: 0, bar: 1]
h # => {:foo=>0, :bar=>1}

New entries are added at the end:

h[:baz] = 2
h # => {:foo=>0, :bar=>1, :baz=>2}

Updating a value does not affect the order:

h[:baz] = 3
h # => {:foo=>0, :bar=>1, :baz=>3}

But re-creating a deleted entry can affect the order:

h.delete(:foo)
h[:foo] = 5
h # => {:bar=>1, :baz=>3, :foo=>5}

Back to the top

✅ How to delete a Hash entry

The simplest way is using instance method delete:

h = {foo: 0, bar: 1, baz: 2}
h.delete(:bar) # => 1
h # => {:foo=>0, :baz=>2}

Back to the top

✅ How to Access Values From a Hash

Hash value/element are access by particular key.

The simplest way to retrieve a Hash value is using instance method [] :

h = {foo: 0, bar: 1, baz: 2}
h[:foo] # => 0

We also can use fetch method. It does same as the square bracket lookup [], but it will raise an error if the key is not defined:

$ irb
> dictionary = { "one" => "satu" } #Malay language 🇲🇾
> dictionary.fetch("one")
=> "satu"
> dictionary.fetch("two")
KeyError: key not found: "two"

We can prevent this error using the default value.

Back to the top

✅ Extract a nested Hash value

dig is handy for nested Hash.

h = { foo: {bar: {baz: 11}}}

h.dig(:foo, :bar, :baz)   # => 11
h.dig(:foo, :zot, :xyz)   # => nil

g = { foo: [10, 11, 12] }
g.dig(:foo, 1)            # => 11

note: This is only for Ruby 2.3+

Back to the top

✅ Hash Keys 101

Hash Key Equivalence

From Documentation: Two objects are treated as the same hash key when their hash value is identical and the two objects are eql? to each other.

irb> g = {foo: 1}
=> {:foo=>1}
irb> h = {foo: 1}
=> {:foo=>1}
irb> g.eql?(h)
=> true

Modifying an Active Hash Key

Modifying a Hash key while it is in use damages the hash index.

This Hash has keys that are Arrays:

a0 = [ :foo, :bar ]
a1 = [ :baz, :bat ]
h = {a0 => 0, a1 => 1}
h.include?(a0) # => true
h[a0] # => 0
a0.hash # => 110002110

Modifying array element a0[0] changes its hash value:

a0[0] = :bam
a0.hash # => 1069447059

And damages the Hash index:

h.include?(a0) # => false
h[a0] # => nil

You can repair the hash index using method rehash:

h.rehash # => {[:bam, :bar]=>0, [:baz, :bat]=>1}
h.include?(a0) # => true
h[a0] # => 0

A String key is always safe. That's because an unfrozen String passed as a key will be replaced by a duplicated and frozen String:

s = 'foo'
s.frozen? # => false
h = {s => 0}
first_key = h.keys.first
first_key.frozen? # => true

Back to the top

✅ Default values

By default, accessing a key which has not been added to the hash returns nil, meaning it is always safe to attempt to look up a key's value:

my_hash = {}

my_hash[:name] # => nil

Hashes can also contain keys in strings. If you try to access them normally it will just return a nil, instead you access them by their string keys:

my_hash = { "name" => "asyraf" }

my_hash[:name]    # => nil
my_hash["name"]   # => asyraf

You can retrieve the default value with method default:

h = Hash.new
h.default # => nil

You can set the default value by passing an argument to method Hash.new or with method default=

h = Hash.new(100)
h.default # => 100

h.default = 99
h.default # => 99

Back to the top

✅ How to Merge Two Ruby Hashes

I think you can guess the method name :p. Tadaaaa, we will use merge method.

defaults    = { a: 1, b: 2, c: 3 }
preferences = { c: 4 }

defaults.merge!(preferences)
# {:a=>1, :b=>2, :c=>4}

Notice that because keys are unique, newer values overwrite older values.

Back to the top

✅ Multiple Hash values for one key

Malaysia = {
  food: [
    "Nasi Lemak",
    "Roti Canai"
  ],
  city: [
    "Kuala Lumpur",
    "Malacca City",
    "George Town"
  ]
}

Malaysia[:city][1]

Where Malaysia[:city] gives you an array & [1] gives you the 2nd element from that array.

The key is a symbol & the values are arrays. When you access the hash, you get an array back which you access normally, like any other array.

Back to the top

✅ Get All Keys and Values From a Hash

If you want a list of all the keys, good news, there is a method for that!

Here it is:

{ foo: 1, bar: 2 }.keys
# [:foo, :bar]

There’s also a method for values:

{ foo: 1, bar: 2 }.values
# [1, 2]

Back to the top

✅ Check if key exists in hash

If you want to know if a key exists in a hash, use the key? method.

hash_data = {'Country'=>"Malaysia",'Food'=>"Nasi Lemak",}
puts hash_data.key?("Country") #true
puts hash_data.key?("Code") #false

Back to the top

✅ How to change a Hash to Array

We can do Hash 🔁 Array. Converting a hash of key/value pairs into an array will produce an array containing nested arrays for pair:

{ :a => 1, :b => 2 }.to_a # => [[:a, 1], [:b, 2]]

In the opposite direction a Hash can be created from an array of the same format:

[[:x, 3], [:y, 4]].to_h # => { :x => 3, :y => 4 }

Similarly, Hashes can be initialized using Hash[] and a list of alternating keys and values:

Hash[:a, 1, :b, 2] # => { :a => 1, :b => 2 }

Or from an array of arrays with two values each:

Hash[ [[:x, 3], [:y, 4]] ] # => { :x => 3, :y => 4 }

Hashes can be converted back to an Array of alternating keys and values using flatten():

{ :a => 1, :b => 2 }.flatten # => [:a, 1, :b, 2]

Back to the top

Super cool

Pretty cool, hah... 😎

There are other cool stuff on Ruby Hash. But as i said, this is just a level of most of people dive in.

Maybe for specific tricks like Hash iteration, sorting and other methods for future articles :P.

And probably this is my notes about Ruby Hash, I will add new stuff as I get new knowledge or experience with it.

Thank you for traveling with me 🚀, I hope you enjoyed the journey 🔥.

The End

Resources:

1, 2, 3, 4, 5, 6, 7

How to Change Link Underline Color with CSS

Amirul Asyraf — Thu, 24 Jun 2021 04:05:54 +0000

Last night, when I look at Basecamp website, I notice an interesting CSS stuff.

When I hover the Nav link at the header, there will be a nice yellow highlight appear below the link. This is cool, tho .

When I inspect the a tag, they used text-decoration stuff.

I do a quick research and found this awesome, simple CSS magic to change the underline color.

I already do the research, you just need to grab the popcorn 🍿 and enjoy the journey 🚀.

By default, the color of the underline is set the same as the text color of the link. If the link is blue 🟦, the underline also a blue color 🟦. But, you know right, because of human's creativity(cough, cough...)😆, sometimes we want to give the underline a different color from the text of the link.

There are two ways I found to make this happen. One is using the text-decoration stuff, the second one is using the old border-bottom trick.

personally, I prefer text-decoration over border-bottom. The right tool for the right job. I donno.

✅ `text-decoration`

text-decoration is the most straightforward way to underline text.

`text-decoration-color` is what we needed

a {
    text-decoration: none;
    color: blue;
}

/* show underline on hover */
a:hover {
    text-decoration: underline;
    text-decoration-color: red;
    -webkit-text-decoration-color: red;
}

note: -webkit is for Safari.

This is the only thing you needed. If you want to customize more, read more :P

🌈 `text-decoration` properties

text-decoration works fine by itself, but you can add a few properties to customize the way it looks:

1) `text-decoration-color`

text-decoration-color lets you change an underline’s color separately from its text color.

2- `text-decoration-skip`

This property will skip the edgy alphabet like g, p, f. It didn't go through it. Examples :

3- `text-decoration-style`

text-decoration-style give you a free underline design using different values. No need to add SVG.

Here are the available values that you can use:

dashed
dotted
double
solid
wavy

note: This example is from Mozilla MDN. You also can seperate the text-decoration into text-decoration-color and text-decoration-style.

a {
 text-decoration: underline;
 text-decoration-color: red;
 text-decoration-style: wavy;
}

4- `text-underline-offset`

This is quite cool. It can be used to define how far the line is from the initial text.

5- `text-underline-thickness`

This property is used to tell how big the underline is.

✅ `border-bottom`

disclaimer: if you happy with the first trick, just go with it. This is just another same trick.

If we want to use border-bottom trick, first we need to remove the underline with the text-decoration property value of none. Then we add the border-bottom property with 3 short-hand CSS values of 3px solid red.

3px = Variable of the underline width in pixels

solid = Border style (solid, dotted, or dashed)

red = Color code. Hex also can, like #999999

I add this cool trick into my blog

I also add this awesome tricks into my own blog. I implement it on every a tag or any link-related tag.

Pretty cool, hah... 😎

Thank you for traveling with me 🚀, I hope you enjoyed the journey 🔥.

The End

resources:

1 2 3 4 5 6 7 8

How to add Video in README.md file?

Amirul Asyraf — Mon, 19 Apr 2021 23:24:10 +0000

Recently, the CEO of Github, Nat Friedman share some small improvements made to Github that hopefully improve our life just a little bit.

There are 5 cool improvements, but I want to highlight one that is even cooler 😎.

So, what is it ??

Video files that you drop onto markdown files are now `automatically embedded`! 🤘

To me, it is cool tho. You just drag your video file on your laptop or pc to the markdown file in Github. Done.

Easy peasy.

Before this, I can embed the video either change it to the gif or create a new file and reference it to the README file.

Thanks, Github 🚀.

If you try it, the result will be like this;

I created this repo as an example so you can look at the raw or markdown file.

The end :p

Follow me on Twitter 😉

How to add Dropdown in Markdown ??

Amirul Asyraf — Tue, 23 Mar 2021 01:09:58 +0000

Ever wonder how most of the project's README file does this stuff ??

When we click, it will open the dropdown.

Cool, let's learn that stuff. Btw, the syntax is so freaking easy 😂.

Code

Ok, now copy this code;



<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>

To give it a try, use this online markdown editor. Then, come back to this post for more information 😊.

So far so good ??

Easy right. The basic syntax is just;

<details> for the dropdown wrapper
<summary> for the dropdown title
The dropdown contents

Here are another tips 👇👇👇

1) How to start with the dropdown shown instead of close?

This one is simple. You just need to add open after the details word. For example;



<details open>
<summary>I automatically open</summary>
<br>
Waaa, you see me. I thought I would be hidden ;p .
</details>

It will automatically open the dropdown.

2) You do it wrong !!!

If you try this code;



<details>
<summary>Heading</summary>
    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>

You will get a weird result. Not what you expected. So, you instead do it in HTML syntax.



<details>
<summary>Heading</summary>
<ul>
<li> markdown list 1</li>
<ul>
<li> nested list 1</li>
<li> nested list 2</li>
</ul>
<li> markdown list 2</li>
</ul>
</details>

It works but I just want to tell you that you do it wrongly 😂. You just need to add space between the <summary> tag with the dropdown content. No need to add HTML stuff. Like this;



<details>
<summary>Heading</summary>
<!--All you need is a blank line-->

    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>

😉

3) You also can nested the dropdown 🔥



<details>
<summary>Well</summary>

<details>
<summary>Try this</summary>

 <details>
 <summary>The other one</summary>

   <details>
   <summary>Ok, try this</summary>
   You got me 😂
   </details>
 </details>
</details>
</details>

4) Add Code into the dropdown 🚀

Same as the usual markdown.

The above image will get this;

5) Make a `Collapsible Content`

The way we want to do this is a little bit different. This is the result;

When we click it, the collapsible content is superb ;p

You can see this gist to look at the code.

6) Add Bullet list into the Dropdown

This is easy. YOu just add + before the list to make a bullet list.



<details>
<summary>Heading1</summary>

some text
+ <details>
    <summary>Heading1.1</summary>

    some more text
    + <details>
        <summary>Heading1.1.1</summary>
        even more text
      </details>
   </details>
</details>

The result will be like this;

Use Case

Recently, I create an awesome-list repository about Hotwire stuff. YOu can see the project here

1) Auto open dropdown

I use the auto-open dropdown to show the Hotwire stack.

2) Long list

The second one is for showing the long list of Websites, Open-Source, and Resources. I just want to make my README clean. Try to open it ;p.

The End

resources;

1 2 3 4 5

How to add Caption to your HTML Image Tag ??

Amirul Asyraf — Wed, 17 Mar 2021 00:48:16 +0000

Today I learned that HTML has a specific Tag that can help us doing caption stuff on our <img> tag.

Usually, I will do caption like this;

<div>
  <img src="https://wallpapercave.com/wp/wp6761049.png"
       alt="BigSur wallpaper">
  <center>MacOS BigSur Walpaper</center>
</div>

MacOS BigSur Walpaper

This is ok tho. The caption is there below the image. But there is a problem here:

there is nothing that semantically links the image to its caption, which can cause problems for screen readers.

For example, when you have 50 images and captions, which caption goes with which image?

HTML has a special tag for this purpose. Introducing to you <figure> and <figcaption> tag 😃. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption.

Cool. So, we can rewrite our above example like this;

<figure>
  <img src="https://wallpapercave.com/wp/wp6761049.png"
       alt="BigSur wallpaper">
  <figcaption>MacOS BigSur Walpaper</figcaption>
</figure>

MacOS BigSur Walpaper

Super cool 🚀. Another thing that I learned is it doesn't have to be an image. A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

`Code Snippet`

<figure>
  <pre>
class PrivateData
  def initialize
    @secret_key = [1,79,427].sample
  end
end

data = PrivateData.new
puts "Can I have your secret_key? #{data.secret_key rescue 'nope'}"

puts "BUT I WANTZ IT!!!!"

puts data.instance_variable_get(:@secret_key)
puts "MUHAHAHAHAHA"
  </pre>
  <figcaption>instance variables get</figcaption>
</figure>



class PrivateData

  def initialize

    @secret_key = [1,79,427].sample

  end

end

data = PrivateData.new

puts "Can I have your secret_key? #{data.secret_key rescue 'nope'}"

puts "BUT I WANTZ IT!!!!"

puts data.instance_variable_get(:@secret_key)

puts "MUHAHAHAHAHA"

instance variables get

Quotations

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

Edsger Dijkstra:

If debugging is the process of removing software bugs,
then programming must be the process of putting them in.

resources;
1 2 3 4

How to add a link to the image in HTML

Amirul Asyraf — Mon, 15 Mar 2021 00:18:49 +0000

Do you ever wondering how to add a link to your already
HTML image tag ??

Awesome, let us get into that 🔥

The following example is the usual stuff we do to display image in <img> tag.

<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" 
     alt="cannot sleep">

When you click the image above, it will zoom in, instead of open the image link. This is the expected result 😅.

But how to add a link to the image ??

Easy peasy 😉

This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <img> tag inside the <a>.
You should make the alternative text describe the resource the link is pointing to as if you were using a text link instead.

<a href="https://www.thecoderpedia.com/blog/programming-memes/">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
       alt="Visit Meme site">
</a>

Try to click the above image and you will direct to the source link.

The End ;p

resources;
MDN

DEV Community: Amirul Asyraf

Deleting all data from a table in Ruby on Rails

3) Drop the whole database and bring it back up again

2) destroy_all

1) delete_all 👑

See if User is online using Devise in Ruby on Rails

1) Add a last_online timestamp column to your User model, then define a scope for user called online_now.

2) devise_lastseenable Rubygems

3) When someone has logged in, you can push him into an array, if someone has logged out, just remove him from the array.

4) WebSocket & Redis

So, What else ?

Rails ActiveRecord Data Types

The ActiveRecord data types available in Rails 6;

Specific DBMS Data Type

Rails data types mapping to different DB data types:

The easy way ✌️

How to create a transparent navbar with CSS

✅ Obsidian

✅ Mikkel Malmberg

Code Snippet

✅ backdrop-filter

✅ background

✅ position

✅ top

✅ z-index

How to add "Made By" at the bottom corner of the website?

✅ Webflow

✅ Stripe

✅ mmm.page

✅ MakerReads

✅ No More Google

✅ Begreate.me

✅ chart2site.com

1) Inspect DevTool

2) Code Snippet

How to Get Values From Array With Specific Range in Javascript

Ruby World 💎

Javascript World 🌈

You can use array.slice(begin [, end]) !!!

Other stuff

Ruby Hash Method 101

What the heck is Ruby Hash ??

TL;DR

✅ Hash Data Syntax

✅ Common use case of using Hash

✅ How to Create a Hash

✅ How to create or update a Hash value

✅ Values in a Ruby Hash

✅ Hash Entry Order

✅ How to delete a Hash entry

✅ How to Access Values From a Hash

✅ Extract a nested Hash value

✅ Hash Keys 101

Hash Key Equivalence

Modifying an Active Hash Key

✅ Default values

✅ How to Merge Two Ruby Hashes

✅ Multiple Hash values for one key

✅ Get All Keys and Values From a Hash

✅ Check if key exists in hash

✅ How to change a Hash to Array

How to Change Link Underline Color with CSS

I already do the research, you just need to grab the popcorn 🍿 and enjoy the journey 🚀.

✅ text-decoration

text-decoration-color is what we needed

🌈 text-decoration properties

1) text-decoration-color

2- text-decoration-skip

3- text-decoration-style

4- text-underline-offset

5- text-underline-thickness

✅ border-bottom

I add this cool trick into my blog

How to add Video in README.md file?

Video files that you drop onto markdown files are now automatically embedded! 🤘

How to add Dropdown in Markdown ??

Code

So far so good ??

1) How to start with the dropdown shown instead of close?

2) You do it wrong !!!

1) Add a `last_online` timestamp column to your User model, then define a scope for user called `online_now`.

3) When someone has `logged in`, you can push him into an array, if someone has `logged out`, just remove him from the array.

You can use `array.slice(begin [, end])` !!!

✅ `text-decoration`

`text-decoration-color` is what we needed

🌈 `text-decoration` properties

1) `text-decoration-color`

2- `text-decoration-skip`

3- `text-decoration-style`

4- `text-underline-offset`

5- `text-underline-thickness`

✅ `border-bottom`

Video files that you drop onto markdown files are now `automatically embedded`! 🤘

5) Make a `Collapsible Content`

`Code Snippet`