Blog

We’ve all been there — that feeling of urgency, when everything seems to be moving at a fast pace, and you just want to catch up. A few months ago, I had an experience that perfectly encapsulates the dangers of rushing into decisions because of the fear of missing out, or FOMO. It wasn’t in the stock market, but in a seemingly innocent situation: taking the bus.

It was a typical busy day. I was heading to my friend’s place in Deccan Bommanahalli, and I was waiting at Silkboard bus stand. In my hurry, I boarded a 360 number bus that seemed to be heading in the right direction, but in reality, it was headed somewhere entirely different — straight towards Electronic City through flyover where i cannot get down in middle of 10 kms straight, and went far from my destination. After realizing my mistake, I had to disembark and catch another bus to my friend’s place, losing valuable time and money. This seemingly small mistake was a big lesson in why rushing into things without thinking can lead you in the wrong direction.

This story mirrors my experience with FOMO in the stock market.

“A few months ago, I found myself staring at my phone screen, watching as a stock I had been eyeing for weeks surged to new highs every week. Everyone around me seemed to be making money, posting their success stories, and I felt same – the fear of missing out. In that moment, I decided to make my move. But little did I know, that decision would be a lesson in how FOMO can wreck even the most well-intentioned investing strategies.”

Stock name was Kalyan Jewellers

i bought around 700 and started to think strategically that wedding season has begun and till next May , stock will move strongly upwards but ended losing 300 per share when i sold in febraury.

In the stock market, FOMO can manifest when you see others talking about a stock’s rise, sharing screenshots of their portfolios, or posting success stories. You think, “I have to get in now, or I’ll miss the chance!” But without a clear strategy or solid reasoning, these snap decisions can lead to unwanted outcomes.

Conclusion:

My experience at Silkboard was a small but powerful reminder that rushing into decisions, whether it’s catching the wrong bus or investing in the wrong stock, often leads to unwanted outcomes. FOMO can be a powerful force, but the key to long-term success — in both travel and investing — is to stay calm, do your research, and follow your own path.

Just as I eventually found my way to Deccan Bommanahalli after a few detours, your investment journey is filled with opportunities. Don’t let FOMO lead you off course.

Recently, i worked for an ecommerce project where i should display product details in popover or dropdown box for information and buying in multiple entries within a table structure.

So, I come with the idea of dropdown menu from bootstrap wrapping within table for flexibility shown below in example.

Here is a CodePen example.

See the Pen Bootstrap table responsive with btn dropdown-menu wrapping within table by Arun-Htamilan (@imarun) on CodePen.

If you are not familiar with javascript language, you will not understand how the Gulp works. But Javascript knowledge is not mandatory to use Gulp, you can get started easily from this link.

Note: Continue if you tried Gulp using above Css-tricks link or other.

Everybody knows Gulp is used to

• Compile Sass/Less to CSS,
• Reload the webpage automatically after saving HTML, Less/Sass, JS files,
• minifying images, stylesheets, scripts,
• and many more which someone knows…,

but if you want to use Gulp in non-Sass/Less projects, then this post will be useful for you.

In the beginning, as i am not a good Js programmer, i was struggling how to just tweak the code to watch the change for css files alone. I googled for an answer, but not able to get it so then after some days, finally i figured it out. This is a very simple one actually.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('directory/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML, JS, CSS files change
  gulp.watch('directory/*.html', browserSync.reload); 
  gulp.watch('directory/js/**/*.js', browserSync.reload);
  gulp.watch('directory/css/**/*.css', browserSync.reload);  
});

As i added just one line of code in line number 7,  whenever you save browserSync module will apply your changes in HTML. You can use this code in your gulpfile.

I linked with my Gist Github page for full Gulp file.

I am publishing my Sublime text editor settings and shortcut keys which are very much helpful in getting my work done easily.

User Settings:

{
"font_size": 14,
"tab_size": 2,
"word_wrap": true
}


Shortcut Keys:

ctrl + r – to find css classes/IDs easily in a css file
ctrl + j – to align multiple lines into single line . mainly useful for single line css
ctrl + L – Select a line.
ctrl + D – Select a word/ duplicate a word or line(s)
ctrl + P – find any file on your project folder in fraction of second
ctrl + space – autocomplete for codes respectively
ctrl + / – comment purpose
ctrl + F – for normal search
ctrl + shift + F – Advanced search
ctrl + shift + G – wrap a text or codes
Alt + shift + W – also wraps text or codes
crtl + shift + a -Selecting Everything Inside an HTML Tag
ctrl + shift + k – Deleting Lines
ctrl+shift+up/down – while arrange html tags it will be useful

Misc:

• If you are working on more than 1000 lines of code, and if you want to check some code in multiple parts of the same file, you can use Go to File -> New view into File so that you can have multiple views of same file in tabs and toggle between them for easy reference.
• for sublime packages, refer this link.

For further more settings and shortcuts, refer sublime documentation.

 

From Bootstrap 12 grid column classes , take the one column class col-xs-1 / col-sm-1 / col-md-1 / col-lg-1 which has width: 8.33333333%; and break that one column into half size column where you will get 8.33333333% divided by 2 => 4.16666665%. This is called half size column in bootstrap grid classes.

This half size column is useful when you are in a situation where you need to code as per design requirements in which width of one part is less than one column width like the one i got here.

The above image is the design i got and if you see 1) and 2) , they are select option tag and search input tag respectively.

Size of select tag is 115px around and i cannot able to code in one column size or two column size where both are small and big respectively. Hence i searched in google and got these links http://www.bootply.com/128927  , http://www.bootply.com/125321. But while using these codes makes extra html inside the column, i.e coding another div class=”row” and splitting again. So i created my own custom half size column class.

.col-lg-onehalf {
  width: 12.5%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

I divided the one column width of 8.33333333% by 2 resulted in 4.16666665% and added to the same 8.3333% width so it becomes 12.5%. That’s how i created col-half(half column). I created a sass @mixin which is useful dynamically for all grid column sizes.

@mixin col-half($number){
width:(8.33333333% * $number) + 4.16666665%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

Here you can put the number of columns in argument $number and result will be yours.

Here is a CodePen example.

See the Pen Half size column grid size in bootstrap by Arun-Htamilan (@imarun) on CodePen.

After writing this post , i found a better solution  http://www.anklebootstrap.com/
Actually the creator of anklebootstrap really puts very extraordinary effort to document the whole site for Half column bootstrap only. Hats off 🙂

Enjoy cheers. Hope you understood.