DEV Community: Mario

How I Created MailtoUI.js to Modernize Mailto Links

Mario — Fri, 14 Jun 2019 16:58:36 +0000

From Idea to #1 Product of the Day on Product Hunt

This is the story of how MailtoUI.js came to be.

A few years ago I found out that it was possible to create a link that would initiate a new, blank email message on Gmail. As it turns out, it's also supported in most browser-based email clients. At that point I thought it would be a good idea to simply use this type of links instead of using the plain old mailto links. I don't use a local email client app. I use a browser-based email client. And I suspected most people did. The problem is this: You click on a mailto link on a web page, only to have it open the local default email app, which you don't use. So then you have to close it, go back to the page, copy the email address, go to your browser-based email client, compose a new email message, and then finally paste in the email address. Annoying to say the least.

So I created what would become the precursor to MailtoUI. A simple modal with text links to Gmail, Outlook, and Yahoo, which was triggered by clicking on a mailto link. It was primitive, simple, and of course, it was all hard coded so it only worked on my site.

A few years went by, and I never shook off the thought that I could one day convert that little thing into something that could be dynamic enough to be useful to other people.

Should this be a paid service?

I eventually came back to this, and began playing with the idea of turnging it into a paid service. I created a prototype made up of two components: an API written in Laravel that would serve the UI as a widget into the requesting page, and a client page consuming the API. But as I surveyed the land and talked to people about it, it became clear that creating it as a paid service was not the way to go. No one would pay for it. But I wanted this to exist. I wanted to put something into the world that would alleviate the issue of the annoying mailto links.

An open source project

The mailto link issue is mostly a problem for people who use a browser-based email client on desktop environments. So I wanted to test my assumption that most people use a browser-based email client. I created a Twitter poll to see what would happen, and the results pretty much confirmed my assumption, albeit this is not conclusive evidence. It nonetheless gave me some confidence to proceed.

So I decided to create MailtoUI as an open source project. Make it available for free to anyone who wants to make those pesky mailto links smarter and a little less annoying. The idea was to provide a script that can simply be dropped on a page and, with very little effort, would automatically provide options to the user when they click on a mailto link. In other words, the idea was to make it easy for web developers to modernize mailto links and provide a better user experience.

This would be the first open source project of my own, and since this has to happen client side, it would have to be written entirely in JavaScript. This would give me the opportunity to learn more advanced JavaScript than I had in the past.

Requirements

I came up with a set of requirements and constraints to frame the project:

Written entirely in JavaScript
Works with top 3 browser-based email clients (Gmail, Outlook, Yahoo)
No dependencies to keep it simple and lean, so it must be written in vanilla js
Must be customizable
Easy to install and use
Must work with multiple mailto links on a page
Support the mailto URI scheme (subject, cc, bcc, body)
Accessible and responsive
Must provide full documentation

Development

It took about two months of working on MailtoUI, an average of 2-3 hours a day and a bit more on weekends. Here are some of the most notable development obstacles I encountered.

The alpha version of MailtoUI was a bit clunky. The way I structured my code required that the <a> tags containing mailto links had the id property set with a unique ID. I quickly realized that this went against my requirement that MailtoUI be easy to install and use, because now users would have to come up with a unique id for each mailto link on the page. I removed this requirement in a subsequent version.

Another thing I had to refactor early on was the modal component. In the early versions, a modal component was created and embedded on the page for each mailto link found on the page. So this meant that if the page happened to have many mailto links, many modal components would be created and embedded. Not very good for performance. I resolved this issue by embedding one generic modal component that gets rehydrated with data from the mailto link that was clicked. This way, no matter how many mailto links there are on a page, only one modal exists which gets reused over and over.

The earlier versions of MailtoUI did not provide proper npm support. I had created an npm package but failed to add a proper mechanism to load the library and run MailtoUI manually. In order to do that, I needed to find a way to detect if MailtoUI is being loaded via the <script> tag or via npm. Again, one of the goals was to make it easy to install and use, and I wanted this to happen automatically, without requiring the user to take any extra steps. MailtoUI now provides proper npm support and can be loaded and used properly with JavaScript frameworks like React and Vue.

Soft launch

At the point that MailtoUI was functional and for the most part working properly, I released it to a limited audience. I mainly announced it to my network of peers, developers, designers, other indie makers like myself, and on Twitter. I don't have a lot of followers on Twitter, so the reach there was very limited. The response was overwhelmingly positive. People expressed how frustrating it is when the default local email app opens after clicking on a regular mailto link.

From this early soft launch I was able to gather valuable feedback from folks who tried it. They reported a few bugs and suggested some areas where it could be improved. Armed with this feedback I went ahead and improved MailtoUI to get it ready for a wider public release.

Launch on Product Hunt

I took some screenshots to be used on the Product Hunt post, but I felt this was not enough to accurately showcase the product. So I decided to record a quick screencast as a MailtoUI demo to show how it works. I selected royalty-free music from josephmcdade.com for background. I used QuickTime to record, and iMovie to edit the video, add the music, and in less than two hours I had a nice little demo video to go with the PH post.

The PH post was scheduled to go live on April 26, 2019 at midnight. I woke up around 4am, and to my surprise, MailtoUI was already #1 at the moment. Throughout the day I was encouraged by the comments that folks were posting on PH. Everyone was supportive and had kind words to say about the product. All in all, it was an exciting and memorable day. It was amazing to see something I worked on and put out into the world, be recognized and be designated the #1 Product of the Day on Product Hunt.

Thank you to all who have provided feedback, suggestions, retweets, likes, upvotes, and have helped in one way or another to make MailtoUI a success.

How to Install and Enable Imagick for PHP 7 on Ubuntu 16.04

Mario — Wed, 17 Jan 2018 08:00:00 +0000

Imagick is a PHP extension that allows you to manipulate images. Some libraries or packages require that Imagick be installed on your server. However, because Imagick is optional, it’s not installed with PHP by default. Here’s how to install and enable Imagick on your Ubuntu server.

Installation

First thing, download and install Imagick. In Terminal, run the following commands. This will install Imagick for PHP 7:

$ sudo apt-get update
$ sudo apt-get install php-imagick

Verify that Imagick is now installed. This command should output the word imagick if it was installed successfully:

$ php -m | grep imagick

imagick.so

Find out the directory where your PHP extensions are installed. This command should output the path to that directory (example: /usr/lib/php/20170718, your path may be different):

$ php-config --extension-dir

Verify that the file imagick.so exists in that directory:

$ ll /usr/lib/php/20170718

Edit php.ini

Now we need to edit the php.ini configuration file. To find out where this file is located, we need to look at the current php configuration. To do that, create a php info file that you can access from your browser. You may call it info.php:

// info.php
<?php phpinfo(); ?>

Load that file in your browser and look for the Loaded Configuration File setting. It should have the path to the php.ini file we need to edit (the path to your php.ini file may be different than what’s shown in this example):

Open that php.ini file:

$ sudo pico /etc/php/7.2/fpm/php.ini

Add the following line (you may add it at the end of the file) and save it:

extension=imagick

Restart

If you’re doing this in your local development environment, restart your computer or virtual machine. If you’re doing this on an actual server, restart it. You may want to try restarting your web server only (apache, nginx, etc), but this may not work. It’s more effective to just do a restart on the machine so that all the changes take effect.

After restarting, verify that Imagick is available by loading your info.php file in your browser again, and this time you should see in it many references to the Imagick extension.

A Goal Without a Plan is Just a Wish

Mario — Wed, 10 Jan 2018 08:00:00 +0000

This is the first post of The Plan publication, and it coincides with career plans I’m making for the new year. The title is one of my favorite quotes of all time from one of my favorite authors. One that continues to remind me that if I want to accomplish something, I need to have a plan for it. Just having a goal is not enough.

“A goal without a plan is just a wish” — Antoine de Saint-Exupéry

As I look back at what I was able to accomplish as well as the things that did not work out in 2017, I’m also looking forward to the possibilities in 2018. Even though this is not a year-in-review post, I can’t help but to briefly reflect on the past to look ahead into the future.

For many years I had been a web developer working in the dark, isolated, not sharing anything, and not interacting. One of my goals in 2017 was to begin to change all that. I set out to increase my visibility online by blogging, working on side projects, and helping new devs in any area that I could such as mentoring and answering technical questions. Another goal of mine was to begin learning about marketing my side projects so I can eventually quit my job and work for myself, making a living from the products I create.

I made significant progress in all those areas, except for the blogging part (I only wrote one article the entire year, the 2017 year in review). Also my Conferify project idea was not validated successfully. But I did have some tiny wins in 2017, I joined an awesome online community for makers which has been very helpful to not work in isolation, I created and launched a free online video course: Level Up with Markdown, and I launched a barcode API SaaS application: BarcodeThis.io. I also shared a few web development tips on Twitter and increased my Twitter following by about 100 users. But I still haven’t achieved my ultimate goal of making a living from the products I create.

So what’s the plan for 2018?

I started the year by taking a concrete step towards putting more emphasis on creating rather than consuming. This is what I did:

Deleted all social media from my phone to reduce consumption and distraction. It feels good! You should try it sometime.
Unsubscribed from non-essential newsletters and other email subscriptions.
Created this Medium publication to share my plans and share the process as I work on my projects.
Shifted my daily schedule to allow at least 10 hours/week for working on my side projects.

I’d like to continue my quest to become an indie entrepreneur by focusing on the following areas:

Freelancing
Product Development
Writing/Sharing
Helping
Learning

Freelancing

I’ve decided to actively pursue freelancing as a way to gradually detach my self from being an employee. The first project of the year will be redesigning my website to reflect this change. As part of that, I will be moving my site from mariorodriguez.co to mariorodriguez.me. It just feels better to have a .me domain for my personal site.

Product Development

I have several product ideas on my list, and I will attempt to validate at least three of them by creating a landing page and pursuing different ways to drive traffic to them. I will not write a single line of code until I’m able to determine that it is a viable product, which has attracted enough interest to make it worth working on it. It’s one of the time-saving lessons I learned the hard way in years past.

Writing/Sharing

I will be writing more frequently on The Plan and on my personal blog. While my blog contains everything I write, The Plan publication will contain only those posts related to planing and sharing the process of the work I do. One of the obstacles to writing I’ve observed, is that my blog is a static site (currently Jekyll). It discourages me from writing because every time I want to blog, I have to launch the project in my local dev environment and then deploy the site.

To encourage myself to do more writing on my blog, I will convert my site from a static site to a dynamic site written in Laravel. I could go the WordPress route but I don’t like how bloated WordPress has become and I like to have full control of what I can do with the site in terms of design and functionality. All in all, this will allow me to simply log in to my site whenever I want to write, save drafts and just publish whenever I’m ready.

Helping

I really enjoy helping others. There are a lot of folks out there just getting started in their journey to becoming web developers. Some people have zero background in web development, others are junior devs, and others know a little bit here and there but need guidance for next steps. It’s been very rewarding to be able to help/mentor a few of them and I’d like to continue doing more of that.

Unfortunately, up until now helping others has consisted of answering questions via Twitter, which is not the most ideal environment to do that. It’s time consuming and sometimes I’m not able to respond in a timely manner. To alleviate that, one of the projects I plan to work on, is to create a community for new devs where they can interact, help each other, and grow together as developers. This would allow me to better scale my efforts to help more people in less time.

Learning

I will continue to learn as much as I can on marketing my products. However, at this point I feel that I’ve learned a lot and I don’t want to continue to listen to the same advice over and over. At some point, it’s time to act more, create more, and learn by doing. That time for me is now.

I will also expand my learning by going back to reading for pleasure. It’s been a while since I’ve read a good book. I’m a fan of both, fiction and non-fiction. I have a strong feeling that reducing my social media consumption will certainly help with this.

Of course, I will post updates here on everything I’m working on.

That’s the plan.

2017: A Look Back

Mario — Sun, 31 Dec 2017 08:00:00 +0000

2017 was a year full of challenges and stressful moments, but also joyful celebrations at a personal level and tiny wins at a professional level. These are some of the highlights.

Bought a House and Moved

My wife (fiancee at the time), and I decided to buy a house ahead of our wedding so we could have a place of our own to call home after the wedding. After many months of searching and going through the motions of home buying, we finally closed escrow the second week of January. Which means we started the year with a wonderful event, but also with all the stresses related to buying a house, which of course also included moving. And with our wedding date set for August, we had many months of wedding planning stress ahead of us. Anyone reading this who is married surely knows what I mean.

Attended Laracon Online

I’ve never been able to attend Laracon (Laravel Conference), so I was excited to be able to attend the first Laracon Online back in March. All the talks where interesting. It was fun to be part of it and learn from people I like and follow in the Laravel community. I already got my ticket and looking forward to Laracon Online 2018.

Joined MegaMaker Club

It’s been a great experience to be part of the MegaMaker Club, formerly known as the Product People Club. It’s an online community for indie makers that provides a friendly environment to learn, help, ask, bounce ideas, and just overall interact with other fellow makers in our quest for indie entrepreneurship. Especially for a solopreneur like myself, having access to this community has been great. It’s given me the opportunity to interact with other like-minded people, and not work in a vacuum.

Got Married

And before we knew it, the big day had arrived. So had many relatives traveling to California from out of State and out of the country to join us for our wedding. We had relatives traveling from Canada, Germany, Austria, and from Oregon, North Carolina, Alabama and Arizona. The weeks leading to the wedding were filled with a rollercoaster of emotions. Being surrounded by loved ones, some of whom we had not seen in a long time was very special. We were blessed to have everything go according to plan. We had the perfect weather for an outdoor ceremony and reception. The happiest day of our lives!

Launched Level Up With Markdown

I managed to finish and launch my free video course Level Up With Markdown. This was my first time creating a video course (or any course). Working on this course took me outside of my comfort zone, but I really enjoyed the process. Although challenging at times, it allowed me to learn a few things about planning the course, screencasting, sound quality, video quality, and more. But the most valuable thing for me –aside from the fact that it will hopefully help some people– is that I was able to break free from the fear of recording and putting myself out there. And by the way, about 110 people have signed up for the course to date. So, if you’ve always wanted to do something similar but have been afraid or hesitant because you’re shy, just do it. Or in @mijustin’s words, just fucking do it! It’s a great learning and empowering experience. It may be a little difficult in the beginning but it gets easier with practice.

Launched a Landing Page for Conferify

I had this project idea to create a community around the topic of tech conferences. I call it Conferify. The original idea has been to create a space (features) for three audiences: attendees, speakers, and organizers. I created a landing page to validate this idea before writing a single line of code. There seems to be some very limited interest in this idea, but not nearly enough to consider it successfully validated. As of right now I’m considering reducing the scope of the project to focus only on conference speakers. Besides making it so much easier to work with, it may generate more interest that way. So, that’s something I’m planning to tackle in 2018.

Launched BarcodeThis.io

BarcodeThis.io is an HTTP API for web and native app developers, that allows you to add barcode generation capabilities to any app in no time. I thought it would be a nice little challenge. The goal was to create an API that allows you to easily generate a barcode image by simply providing the necessary values in the API request. Working on this little side project was fun but it took a little longer than I anticipated. It was about three and a half months from idea to launch. So far, no subscribers yet.

Looking back at 2017 also makes me look forward to 2018 and the things I’d like to accomplish. So many decisions to be made, and I haven’t figured out anything yet. But one thing I know, is that I want to continue chasing my dream of becoming an indie entrepreneur. I don’t have everything flushed out yet, but I think my plan is to focus on three important areas: community (helping others), education (creating courses), and product development (creating apps/services).

The Rise and Fall of Gigsprout

Mario — Fri, 23 Dec 2016 08:00:00 +0000

In the Summer of 2011 I was actively searching for a new gig as a web developer. I did what most of us do these days, go online and start searching for a great opportunity in the job boards out there. The experience was frustrating to say the least. Most of the job boards I came across, well-known and little-known, had very annoying features, like pop-ups, advertising, and useless “career advice.” If I didn’t want ads, I had to get a paid account. Some required me to create an account to either search or apply for a job. And others even had ads disguised as job listings. Most of these job boards didn’t have a user-friendly interface, and forget about them being mobile-compatible.

I’ll Create My Own

I saw an opportunity to create an enhanced, focused user experience without distractions when job searching online. As a web developer, I love to build things, so why not build something better? A product of my own? I thought about it for a few days. I’ve worked on many projects throughout my career, but I almost always worked as a member of a development team. This would be the first time developing a full-blown commercial application from beginning to end, all by myself (technology wise). I pitched the idea to my long-time girlfriend and now also business partner, Ingrid. She really liked the idea, encouraged me to build it and offered me her much needed help. Team TeclaWorks was born.

Development

After many weeks of breaking our heads to come up with a name for our job board and a URL that wasn’t already taken, we finally landed on Gigsprout, as in “where job opportunities sprout.” We proceeded to do tons of research, I focused on the technology aspect and Ingrid on the business aspect of things.

We wanted to do everything by the book and there was so much to learn and to figure out. Articles of incorporation to form a company, tax and accounting issues, technology issues, development frameworks, hosting solutions, cloud vs traditional hosting, marketing, social media, customer service, minimum viable product, and the list went on and on.

Building Gigsprout was quite the adventure, spending countless hours of development, slowly building it on the side while working our full time jobs. Lots of sacrifices were made, which I won’t get into here. I don’t want to sound like I’m whining about it. I experimented with three development frameworks, including my own, which I ditched back in 2012 in favor of a much more established one, a relatively new framework at the time, known as Laravel. Through it all we learned a lot and with perseverance and dedication, we overcame many challenges to make Gigsprout a reality.

The Tech Stack

I designed and engineered Gigsprout to run on the cloud. It was fully hosted on AWS (Amazon Web Services). The back-end was written in PHP with the awesome Laravel framework (the first viable version was written with CodeIgniter). The database was MySQL. Full-text search was made possible by the Elasticsearch engine. Git for source code version control. On the front-end, a highly modified version of the Bootstrap CSS framework and jQuery.

Launch and Shutdown

Gigsprout was a job board for the tech industry. It was designed to be free to job seekers, with no ads and no pop-ups. Job seekers did not need to create an account to search or apply for a job. Employers could enjoy a simple, affordable pay-per-post pricing. At least, that was the plan. Gigsprout had a limited set of features but the idea was to add many more based on our road map and feedback from our users once we launched.

But launching presented the classic problem of “the chicken or the egg.” We couldn’t attract job seekers because there weren’t any jobs to search for on our site. And we couldn’t attract employers to post jobs because there were no job seekers coming to our site. So how do we launch? We decided to solve this problem by offering all job posts for free to employers. This was a limited time offer to give employers an incentive to post their jobs on Gigsprout.

In the Fall of 2015 we finally launched. I setup an account with Google AdWords and began to pay a decent daily amount for advertising. The ads announced Gigsprout and the free job posts offered to employers. We began to get some traffic but employers were not signing up for a while. Then finally, after a few days we began to get some signups. However, we quickly realized that most of the signups and jobs they were posting were questionable and/or in violation of our terms of use. Some job posts were clearly of a “pyramid scheme” nature, some where click bate or offers to “make tons of money from home by only working a couple of hours a day” disguised as job listings. Only a few of the posts we received were legitimate. We exercised our right to remove posts that were in violation of our terms of use and closed the accounts that posted them.

After a few weeks of this, we decided to change things up a bit. Once the free offer expired, we decided to offer a 50% discount on all posts. The idea being that, a payment was required via credit card and only serious, legitimate employers would sign up. A little more advertising in Google AdWords and Twitter brought some traffic but no signups. Advertisement costs mounted and we were forced to stop it. After a year of footing the bill to keep Gigsprout running, but without generating any revenue, we were forced to make the decision to shut it down.

Lessons Learned

I’ve learned a few lessons from this experience, and I want to share them here in the hopes that doing so will help others who may be planning to launch a product of their own.

1. Don’t Incorporate Too Early

If you’re in the development phase of your first product, don’t incorporate too early (for example in the US, form a Corporation or LLC). Working on a product on the side, while working your full-time job and juggling commitments with family and friends, can take a very long time. Once you incorporate you must begin paying taxes. If development takes a long time, you’ll start paying taxes and other expenses without even having a chance to generate any revenue. Wait until you’re about to launch your product and then incorporate.

2. Start Small

Some ideas begin with the need to “scratch your own itch.” Others begin with people, and the need to solve a problem for them. In either case, before you start working on your idea, test it with a small version of it. Check if your idea generates interest among your friends and family and/or the people or community your product will benefit.

3. Set Deadlines

Concrete deadlines will help you set specific goals. Every deadline represents a milestone that will keep you focused on a target and moving forward towards it. Be realistic when you set those deadlines and try your best to keep them.

4. Share the Process

Share with others what your working on and post updates of the progress you’re making. This will hopefully generate more interest in your product. Some people may be interested in your product even more, if they are part of the process of creating it. This may help you with my next point.

5. Build a Following

Don’t launch to crickets. By sharing the process of building your product you have a chance to build a following. Also share your knowledge, blog about your projects and share what you learn. Over time you’ll build a following. It should be easier to launch a product when you have built some following ahead of time, than launching it to the sound of crickets.

6. Maximize Time

I don’t know about you, but for me, two or three hours of work with solid focus go a long way, much more than eight hours of work with constant interruptions. Find a space where you can concentrate while you work, turn off social media and other distractions for two or three hours a day, and you will make progress.

7. Get Enough Sleep

I know it’s hard to stop when you’re wired in and you’re on a role coding, working through the night. But the night is for sleeping and your body needs it. I know everyone’s needs are different and this may not apply to you. But I find myself more alert and able to better focus and concentrate during the day, when I’ve had enough sleep. I’m more productive that way.

8. Outsource and Get Help

You may have heard the phrase “you’ve got to spend money to make money.” In some cases, that’s true. Chances are you’re not an expert at every aspect of developing your product. You may be a fantastic developer, but you may need help at marketing, for example. When I was working on Gigsprout I wanted to do everything, to keep expenses at a minimum. I’m a coder first. Even though I know enough to be dangerous with Photoshop and Illustrator, I’m not an expert graphic designer. I created the Gigsprout logo and saved some money. But between learning the tools more in depth to do it and creating many prototypes, it took me forever to get something I was satisfied with. If you’re not qualified to get something done, hire someone who is. They’ll get it done in a fraction of the time it would take you, and you’ll save yourself some time and frustration. This will help you to launch your product sooner, which is my next point.

9. Launch Early

Your product doesn’t have to be perfect when you launch. It just has to be useful. If you think about it, your product will never be finished anyway. Put it out there as soon as possible so you can begin to receive feedback from your users. They are the best source of guidance to improve your product. The sooner you launch, the sooner you can begin to improve it based on feedback from the very people who are and will be using it. And if you don’t get any users or any feedback, then you’ll know early on that something needs adjustment. Figure out what your MVP is, the Minimum Viable Product. Your MVP should have enough features to be useful, but small enough so you can launch it early. The sooner, the better.

10. Free Isn’t Always Good

Depending on the type of product/service you’re launching, a Free offer may not be the best thing. It may attract the wrong audience for your product. So, do some research and figure out any alternatives to create an incentive to attract paying customers.

I hope the lessons I’ve learned with this project, are helpful to you if you’re planning to launch your own product/service. Always strive to succeed, but remember that it’s OK to fail sometimes. This stuff is not easy. If it were, anybody would do it. Failure is valuable if we learn from it. And what we learn, will help us to succeed in the future. If you fall, get up, dust off and try again applying the lessons you learned. Best wishes.

How to Use Real Constants in Laravel

Mario — Fri, 14 Oct 2016 07:00:00 +0000

I’ve read several posts around the web suggesting the use of config variables as constants in Laravel. The issue I see with that, is that those are not real constants. They are variables. If you need to use real constants in Laravel, there are a couple of ways you can load your own constants. Let me show you how I get it done.

First, create a file called constants.php inside the bootstrap folder of your Laravel application. Define your constants in this file so they are all nice and cozy in one place. For example:

constants.php

<?php
define('COLOR_ONE', 'blue');
define('COLOR_TWO', 'red');

Now, there are a couple of ways you can load this file so that the constants are available for use throughout your application. These are in no particular order. You can choose whichever method you prefer.

Method 1: autoload.php

Modify the file bootstrap/autoload.php by adding the following code at the end of it:

<?php
//Load custom constants.
require __DIR__.'/constants.php';

When you run your app, this line of code will load your bootstrap/constants.php file with all your constants as part of the Laravel bootstrapping sequence.

Method 2: composer.json

Alternatively, you can use composer.json to load the bootstrap/constants.php file by adding the following code to the “autoload” section, like so:

"autoload": {
    "files": [
        "bootstrap/constants.php"
    ]
}

Before this change can take effect, you must run the following command in Terminal to regenerate Laravel’s autoload files:

$ cd path/to/your/project
$ composer dump-autoload

Once you run that command, your constants will be automatically loaded when you run your app.

That’s all there is to it. It’s not too difficult to define and load your own real constants in Laravel.

Was this post useful? Any issues or questions? Let me know on Twitter.

Set Up PHP Coding Standards Fixer for Sublime Text 3 on OS X

Mario — Thu, 07 Apr 2016 07:00:00 +0000

You can save yourself quite some time by running a simple command to automatically format your PHP/Laravel code to follow the PSR-1 and PSR-2 standards. Let me show you how you can set it all up to work with Sublime Text 3 on OS X.

Install php-cs-fixer

You must have at least PHP 5.3.6 on your system. Check with php --version.

Run the following commands to download php-cs-fixer:

cd ~/Downloads
wget http://get.sensiolabs.org/php-cs-fixer.phar -O php-cs-fixer

If you don’t have wget installed, follow these instructions to install it. Inspect this page so you can get the latest version.

or use curl:

curl http://get.sensiolabs.org/php-cs-fixer.phar -o php-cs-fixer

If you prefer a different download method such as composer or homebrew, check out these instructions.

Now that you’ve downloaded php-cs-fixer, make it executable:

sudo chmod a+x php-cs-fixer

Move it to a global location:

sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

Check that it works by running:

php-cs-fixer

If everything is fine, you should see the version and usage information.

Configure a Build Command in Sublime Text 3

Open Sublime Text
Got to Tools > Build System > New Build System…
Enter the following command and save:

{
    "shell_cmd": "php-cs-fixer fix $file --level=psr2"
}

That’s it. When you run this command, php-cs-fixer will apply psr-2 standards to the current file you have open.

Run the command by pressing Command + B.

Cheers!

Create a Quote Box with HTML and CSS

Mario — Thu, 24 Mar 2016 07:00:00 +0000

I came across a site that displayed a quote in a box, you know, the one with a little triangle thing at the bottom to indicate dialog or something. I’ve never worked on a project that required me to style a quote in this way, so I was curious to know how to create one. Here’s a preview of what I came up with:

HTML

First, I needed some markup to set the whole thing up. I wrapped everything in a container class just to control the size for this demo:

<div class="container">

</div>

Then I added a wrapper class for the quote, I called it quote-box:

<div class="container">
    <div class="quote-box">

    </div>
</div>

And then the actual quote split in two areas, quote text and name, styled by the classes quote and name respectively:

<div class="container">
    <div class="quote-box">
        <div class="quote">
            <blockquote>
                "The secret of getting ahead is getting started. The secret of getting started is breaking your complex overwhelming tasks into small manageable tasks, and starting on the first one."
            </blockquote>
        </div>
        <div class="name">
            Mark Twain
        </div>
    </div>
</div>

CSS

I applied some styling to the quote text and the name:

/* Contain demo size */
.container {
    width: 400px;
}

.quote {
    background-color: #6b936a;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
    margin: 0;
    padding: 20px;
    font-size: 20px;
}

.name {
    background-color: #333;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

/* Reset */
blockquote {
    padding: 0;
    margin: 0;
}

Nothing special so far. Here’s what will transform this box into a “quote” box. The following CSS creates a triangle looking thing by taking advantage of the way borders behave. I do that by creating an element after the quote that has no width or height but has a thick border. Styling the border color strategically creates a triangle. Then I positioned half of this triangle just below the quote and done! The position is relative so it can “move” with the box for responsiveness:

blockquote::after {
    border-color: transparent #6b936a transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 20px;
    top: 40px;
    content: " ";
    display: block;
    right: 75%;
    position: relative;
}

Here’s the whole thing put together. Feel free to change it around and make it yours.

See the Pen yObrMv by Mario Rodriguez (@mariordev) on CodePen.

Happy coding!

Create a Dynamic Go-to-Top Button

Mario — Wed, 23 Mar 2016 07:00:00 +0000

Remember the “Back to top” links sprinkled between the content of a page back in the day? Yeah, those… Here’s a quick way to create a modern alternative, a floating dynamic “Go-to-Top” button. The button appears only after the user has scrolled down the page and it disappears once the user scrolls back up. I find a go-to-top button useful especially on mobile devices, where content is compressed in a smaller screen, making it taller and more tedious for the user to scroll back up to the top.

We only need some basic HTML, CSS and a bit of JavaScript to get a nice dynamic go-to-top button working. Check it out:

See the Pen Go-to-Top Button by Mario Rodriguez (@mariordev) on CodePen.

NOTE: This CodePen is loading jQuery for me, so just remember to load jQuery before the js code shown here.

Cheers!

Jekyll BoilerPack

Mario — Mon, 21 Mar 2016 07:00:00 +0000

Last week I released a Jekyll boilerplate I call BoilerPack. After creating a few Jekyll projects I got tired of having to set everything up from scratch every time. It’s usually the same stuff that needs to be set in place, so I created Jekyll BoilerPack, a repo that contains all the usual boilerplate stuff to start a new Jekyll project.

BoilerPack comes pre-configured with the following tools so you can hit the ground running:

Bootstrap 3 (Sass port)
Font Awesome (loaded from CDN)
Autoprefixer
Grunt

It also has the following features right out of the box:

Static navbar
Sticky footer
Old-browser warning notification
Disabled-javascript notification
Site-wide custom notification
Dynamic go-to-top button

You’ll find detailed installation instructions and usage documentation on the GitHub repo. Feel free to copy and modify as you please. I hope it’s as useful to you as it’s been to me.

Cheers!

Host a Static Site on AWS S3

Mario — Mon, 08 Feb 2016 08:00:00 +0000

If your site is static, like a one pager or a simple site that only requires HTML, CSS, and JavaScript, you can host it on Amazon Web Services S3 at a very low cost. S3 is typically used for storage purposes, but you can run a full blown static site just as easily. This blog is running on S3. Let me show you step-by-step how you can do that.

AWS Account

The first thing you need is an AWS account. If you don’t have one, head over to AWS and create an account.

Log on to your AWS Account and select the S3 Service under Storage & Content Delivery in the AWS Dashboard:

Create Buckets

Buckets are containers to store objects (files and folders). You need to create two buckets: one for the root domain of your site and one for the www subdomain. Give buckets the same name as your domain, like so:

Bucket for root domain: yourdomain.com
Bucket for www domain: www.yourdomain.com

The default permissions on a new bucket are such that only the owner has access, no one else.

Redirect

You need to redirect traffic from yourdomain.com to www.domain.com. You could do it the other way around if you want to, but in this example we’ll stick to redirecting from the root domain to www. Follow these steps:

Select the bucket yourdomain.com
Select the Properties button
Expand the Static Website Hosting section
Select the option titled Redirect all requests to another host name
Redirect all requests to: www.yourdomain.com
Select Save button

Enable Website Hosting

Now you need to enable website hosting for the www.yourdomain.com bucket. The steps are similar to the previous ones:

Select the bucket www.yourdomain.com
Select the Properties button
Expand the Static Website Hosting section
Select the option titled Enable website hosting
In the box titled Index document enter index.html
Select Save button

Permissions

Let’s allow Read-Only access to the www.yourdomain.com bucket:

Select the bucket www.yourdomain.com
Select the Properties button
Expand the Permissions section
Select the Add bucket policy button
Enter the following policy (be sure to replace yourdomain.com with your actual domain):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yourdomain.com/*"
        }
    ]
}

This gives anyone the permission to “get objects” from the www.yourdomain.com bucket, including any of its folders.

Upload

While you’re still in the www.yourdomain.com bucket, you can upload your index.html file (and all your site files):

Select Upload button
Follow instructions on the Upload screen

At this point your site should be accessible through the default endpoint URL: http://bucket-name.s3-website-AWS-region.amazonaws.com

For example:

http://yourdomain.com.s3-website-us-west-2.amazonaws.com

or

http://www.yourdomain.com.s3-website-us-west-2.amazonaws.com

Using Your Own Domain

To use your own domain, you need to set up your DNS records. For this, we’ll use the Route 53 service, so go back to the dashboard and select the Route 53 icon under Networking.

Follow these steps:

Select Hosted zones
Select Create Hosted Zone button
Domain Name: yourdomain.com
Type: Public Hosted Zone
Select Create button

Create an A record for yourdomain.com:

Select Create Record Set button
Name: nothing (leave it blank)
Type: A-IPv4 address
Alias: Yes
Alias Target: yourdomain.com (under – S3 website endpoints –)
Routing Policy: Simple
Evaluate Target Health: No
Select Save Record Set button

Now create an A record for www.domain.com:

Select Create Record Set button
Name: www
Type: A-IPv4 address
Alias: Yes
Alias Target: www.yourdomain.com (under – S3 website endpoints –)
Routing Policy: Simple
Evaluate Target Health: No
Select Save Record Set button

Update DNS Servers on Your Domain Provider

You’ll notice that you have an NS record that was created by default when you created the hosted zone. This NS record has four DNS servers. These are the DNS servers you need to enter in your domain provider records to direct your domain’s traffic to AWS. So, head over to your domain provider, log on to your account and update your DNS servers there.

You’re done. It’s just a waiting game now. Once propagation has completed throughout the world’s DNS servers, traffic will be properly directed to S3 and your site will be accessible via your own domain.

For more information on hosting a static site on S3, check out the AWS Docs.

Cheers!

Load a Random Background Image on Page Load in Jekyll

Mario — Wed, 03 Feb 2016 08:00:00 +0000

In one of my Jekyll projects I wanted to load a random background image every time the page loaded. Backstretch is a nice jQuery plug-in to display a large background image “jumbotron” style. So I got it to work by combining Backstretch with a little bit of JavaScript and Jekyll Liquid. I’ll show you how.

Backstretch

On your Jekyll layout, load the Backstretch plug-in.

...
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
</body>

Javascript

Add this to your Jekyll layout after the script tag that loads the Backstretch plug-in. This will select a random image and display it. Like so:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script>
        // Image pool to select from
        var images = [
            'image1.jpg', 'image2.jpg', 'image3.jpg'
        ];

        // Pick a random image
        var maxImages = images.length;
        var rand = Math.floor(Math.random() * maxImages);
        var image = images[rand];

         // Set image as background
        $(".jumbotron").backstretch(
            '/assets/img/' + image,
            {
                centeredY: false
            }
        );
    </script>
</body>

Note: Be sure to replace the image file names and path with your own.

HTML

Use the Bootstrap jumbotron class to display the background image on your page or post and you’re done!

<div class="jumbotron">
  <div class="container text-center">
          <h1>Hello World!</h1>
  </div>
</div>

More Flexibility

If you want to have the flexibility to override the random image with a specific one determined on a page by page basis, you can just add a few modifications:

Front Matter

In your page’s front matter, add a variable with the image name, like so:

---
layout: your_layout
...
image: your_image_file_name
---

Head

On your layout, add a meta tag so we can pass the image file name from Jekyll to JavaScript.

<head>
    ...
    {% if page.image %}
        <meta name="backg-image" content="cliff.jpg">
    {% endif %}
</head>

Javascript

Add a Liquid condition to run the appropriate JavaScript code:

{%if page.image %}
    <script>
        // Use image file provided by the page
        var image = $('meta[name="backg-image"]').attr('content');
    </script>
{% else %}
    <script>
        // Image pool to select from
        var images = [
            'image1.jpg', 'image2.jpg', 'image3.jpg'
        ];

        // Pick a random image
        var maxImages = images.length;
        var rand = Math.floor(Math.random() * maxImages);
        var image = images[rand];
    </script>
{% endif %}

<script>
     // Set image as background
    $(".jumbotron").backstretch(
        '/assets/img/' + image,
        {
            centeredY: false
        }
    );
</script>

That’s it. Load and reload your page and you should see the image changing randomly.

Happy coding!