Archive for Tips ‘n Tricks
One of my company’s servers is hosted with Liquid Web. Yesterday one of my co-workers tries to log into WHM and sees the following message:
Brute Force Protection
This account is currently locked out because a brute force attempt was detected. Please wait 10 minutes and try again. Attempting to login again will only increase this delay. If you frequently experience this problem, we recommend having your username changed to something less generic.
He tries to log in a bit later and receives the message again. He contacts Liquid Web’s Heroic Support, and the support person “helpfully” recommend a server reboot to fix the problem. My co-worker asked for another solution, and support said that it was the only way.
My co-worker tells me about the situation, and I tell him that the support guy is an idiot. It takes all of about ten seconds to quickly find a solution to the problem on google. I then tell my co-worker that I’ll fix the problem, so he “thanks” the support guy and closes the chat.
I logged into the box via SSH and had the problem fixed in a couple of minutes.
Continue reading “Fix WHM/cPanel cPHulk Brute Force Protection Lock Out Via SSH”
It is popular to use ul and li elements float them and set them to width:auto in CSS in order to create a horizontal list of self-sizing boxes. These can easily be used to create horizontal navigation or a listing of tabs, and it works very well. However, there is one caveat; given the right mix of CSS this solution doesn’t work properly in IE 6.
To create this scenario, we can simply use something like the following:
<style type="text/css">
ul {
height: 30px;
overflow: hidden;
}
ul li {
float: left;
width: auto;
}
ul li a {
display: block;
height: 30px;
}
</style>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
This will show the problem in IE 6 nicely. The problem is that IE 6 interprets this mix of CSS and decides that each li element should actually expand out to 100% width.
I’ll explain how to fix this issue and provide and example page so you can easily play around with the HTML and CSS yourself.
Today I have yet another entry on HTML and CSS. Today it is how to vertically center content in HTML using CSS.
You’d think that there would be a standard definition of how to vertically center any content by now, but there isn’t. There are a variety of methods out there that do this. I frequently see people using the line-height CSS property to vertically center content. While this appears to work, it isn’t very flexible, only works properly if there is only one line of text, and doesn’t work in all situations.
I found Yuhu’s Definitive Solution with Unknown Height which looks great, works properly with all major browsers, doesn’t have the limitations I’ve seen in other solutions, and is quite simple to implement. Basically all you have to do is have three divs wrapped around the content you wish to vertically center and use specific styling for those divs.
The following code is what does the magic. Replace the comment with the content to be vertically centered, change the height to match the vertical height of the container, and you’re set.
<div style="display:table; height:400px; #position:relative;">
<div style="#position:absolute; #top:50%; display:table-cell;
vertical-align:middle;">
<div style="#position:relative; #top:-50%">
<!-- content to be centered -->
</div>
</div>
</div>
I built a quick example document that shows how I applied the rules via a style block in the head to keep the HTML clean.
As with my taming HTML lists fix, I tested this successfully on the following browsers:
- OS X
- Firefox 3.5
- Safari 4
- Ubuntu (Linux)
- Firefox 3.5
- Google Chrome 4
- Konqueror 4.2
- Midori 0.1.2
- Opera 10
- Windows
- Firefox 3.5
- Google Chrome 4
- Internet Explorer 6, 7, and 8
- Safari 4
Thank you Yuhu for the great solution.
I recently tutored a friend in C coding. Since I hadn’t worked with C in at least 8 years, I really needed to have some references to rely on for syntax and other specifics. Fortunately, there are some easy man pages that can be installed in Ubuntu that offer helpful information that I was able to use to help refresh my memory.
These man pages are easily installed by installing the manpages-dev package. You can install this package via Synaptic or directly on the command line. I like the command line method personally, so I ran sudo apt-get install manpages-dev from the command line to quickly install the package.
After installing the package, I’m able to access man pages for functions such as printf, opendir, and putc. For each function, it shows the valid syntax as well as what library is required to make use of the function.
The information isn’t limited to functions as you can also access information on the libraries, such as stdio or string.
To access any of this information, simply run man [function or library name] such as man stdio.
This package isn’t limited to C functions/libraries. It is a general use Linux development suite of man pages. For a full list of what is installed, check out the file list.
Anyone that works with HTML and CSS will tell you that positioning things exactly where you want them to be is often times difficult. If you want to position something somewhere vertically, it becomes even worse.
I just finished working on a theme where I needed to force the footer of the layout to the very bottom of the page. While logically putting the footer after all the other content is easy, making it sit at the very bottom of the page even when the content doesn’t take up enough space to push it down there is quite difficult.
After struggling with getting this right for a couple of hours, I finally found a site that has done all the hard work for me. CSS Sticky Footer is the site that saved my sanity.
CSS Sticky Footer provides a solution that sticks the footer to the bottom of the page in a cross-browser compliant manner. The site reports, and I can confirm, that it works with Internet Explorer 6 through Internet Explorer 8, Firefox, Google Chrome, Safari, Opera, and Konqueror.
Since the implementation could change, I recommend that you visit the site to get details; however, just in case something happens to the site, I’m going to add the solution here as well.
Continue reading “Pushing a Webpage Footer to the Bottom of an HTML Page with CSS”
It seems that every browser rendering engine has a completely different way of rendering lists. I recently had the frustrating job of getting them all to play nicely together.
The CSS I ended up using is quite simple and works across all the browsers I tested (list at the bottom).
This is the magic bit of CSS:
ul, ol {
list-style-position: outside;
margin: 0 0 0 15px;
padding: 0;
}
ol {
margin-left: 20px;
*margin-left: 24px; /* targeted IE 6, 7 fix */
}
li {
margin: 0;
padding: 0;
}
This CSS forces all the browsers to play by the same rules. The end results are nice and clean.
The left margins are necessary to get all the browsers to not clip part of the bullet/number; however, you can change this left margin on ul/ol elements contained within the primary ul/ol if you need to adjust the indentation of each sub-list.
Each browser that I tested rendered the same thing, albeit with slightly different bullets or padding in front of the number.
The following are the browsers I tested:
-
OS X
- Firefox 3.5
- Safari 4
-
Ubuntu (Linux)
- Firefox 3.5
- Google Chrome 4
- Konqueror 4.2
- Midori 0.1.2
- Opera 10
-
Windows
- Firefox 3.5
- Google Chrome 4
- Internet Explorer 6, 7, and 8
- Safari 4
I had fun writing about how I work with Git yesterday. I thought I’d continue on that thread.
I have a solid set of code libraries that I’ve written that latch into the WordPress themes we produce at iThemes. Each time code is duplicated across different repositories, I break that code out and make it into a separate repository. I then link it back into the project as a submodule. This makes it extremely-easy to keep duplicated code across numerous repositories updated with little or no fuss.
After cloning a repository, simply run git submodule init followed by git submodule update in order to initialize all the submodules and update their container folder with the content of the submodule’s repository. For a long time, this is exactly what I did when I would clone a theme repository to start working on it. However, this quickly wasn’t enough.
The problem happened as soon as I added a submodule to a repository that was also a submodule of other repositories. Doing the submodule init and update process wouldn’t do everything I needed in this case as there would be submodules in some subfolder that haven’t been set up.
I didn’t want to get into a habit of always switching to other directories and doing the submodule processes there as well since I 1) knew that I would forget all-too-often, thus wasting my time, and 2) knew that this would not be the last time that a submodule had submodules. Heck, there is even the possibility that I’ll have a submodule that has a submodule that has a submodule. It was immediately clear that I needed a script to do all this dirty work for me. The rest of this post will be about the script I created.
All of the WordPress themes that I work on for iThemes are managed as Git repositories. Recently, we moved past the 100 repositories mark. That’s a lot of repositories to manage, and unfortunately, too many of those repositories contain duplicated information.
Later on, I might delve into how we use Git to manage our theme repos. For today, however, I’d like to focus on how I quickly and easily pushed up changes to more than a dozen repos in a single, albeit long, Bash command.
I had finished making updates to 16 Flexx repos, and I needed to push all of those changes up. Since I had multiple working repos in that folder, I was lucky that each of these repos began with the text “Flexx”. Also, since they are all part of the same series and need to keep the same version number, that simplified the tagging as all could be tagged as 2.5.0.
Given this information, I simply ran the following command from the directory that contained all the repository directories:
There’s a lot going on here, so I’ll break it up and explain what I’m doing.
Continue reading “Updating Multiple Git Repositories Easily Using Bash for Loop”
In Linux, clicking the middle mouse button (or mouse wheel) pastes the most recently highlighted text from any application. This is useful; however, it has an extremely-annoying side-effect in Firefox. Whenever I middle-click outside of entry fields, I get an annoying pop-up that says: “The URL is not valid and cannot be loaded.” This frustrates me to no end. It usually happens when I accidentally nudge my mouse and miss middle-clicking a link in order to open it in a new tab.
So, why is it doing this? Turns out that, by default, Firefox for Linux allows you to use this middle-click to paste functionality to allow you to navigate to a highlighted URL simply by middle-clicking non-editable portions of the page. When an invalid URL is the result of the paste, the annoying popup appears.
Today, I found out how to get rid of this annoyance.
Open a new tab in Firefox and navigate to “about:config”. This will take you to an interface that allows you to tweak and configure very specific functionality of Firefox.
In the “Filter:” text box, enter “middlemouse.contentLoadURL”. This should present a single entry that lists the option as having a value of “true”. Simply double-click the listing to change the value to “false”. The effect is instantaneous.
Now when you middle-click outside of editable areas in Firefox, it will no longer try to navigate to a URL. This change only modifies the navigation to URL functionality; the middle-click to paste in editable areas still functions.
If you like the middle-click to scroll functionality found in other browsers/operating systems, then search for “general.autoScroll” and double-click the listing to change it to true. Now you can middle-click to initiate scrolling.
Now that I know how to do this, it seems so easy and straight-forward. To change the default application files of a specific type are opened with, do the following:
- Right-click a file that you wish to change the default application for and select Properties.
- Click the “Open With” tab.
- Select the desired application’s radio button.
- Additional applications can be added if the one you want is not listed. Use the Add button to find the desired application.
- You can also remove applications from the list by highlighting the application and clicking the Remove button.
- Adding applications to or removing applications from this list changes which applications are available in the “Open With” option when you right-click a file.
- Click the Close button.
Again, it seems so easy and straight-forward now. Go figure. 