We're growing into something new. Read More

Vinny Fonseca

Themebulk Logo

We wanted something simple, geometric and memorable. This is what we came up with. www.themebulk.com (sly advertising). All feedback is welcome. Thank you.


Anchor CMS Installation Walkthrough

![Picture](https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1778/anchorcms.png) This past year has seen some change for bloggers and blogging platforms. As WordPress continues to mature and its adoption as one of the world's most popular web publishing, blogging and portfolio tools is distributed for free, some of its competitors have either been acquired only to be retired. Smaller free online blogging and web publishing tools such as Posterous and Jux have shared the fate of going dark. Twitter, which acquired the cloud-based Posterous platform last year, retooled its web publishing model to compete more directly with Tumblr, but ultimately killed it entirely shutting it down at the end of May 2013. The smaller startup Jux which had been only around for a year or so will be dimming the lights by end of August this summer. One of the bigger news items around blogging clients and publishing tools in recent months was Yahoo!'s purchased of the popular Tumblr platform for $1.1 billion. Yahoo!, reenergized with a buying streak, struck a deal in a bid to buy Tumblr recently, which, in turn, sent droves of Tumblr users to vacate the platform and transition over to WordPress sending a surge of new user accounts spiking. Meanwhile, former Twitter co-founders Ev Williams and Biz Stone -- who are now with startup incubator The Obvious Corporation -- have started a new blog platform called Medium that possibly offers an alternative to Posterous, Tumblr and WordPress. Launched less than a year ago, Medium has now become its own company and remains in beta and user accounts are queued by-invitation-only. Quietly in the shadows, newer platforms are starting to take off. One of these is Ghost, a UK-based open-source blogging application that has completed a round of crowd funding via Kickstarter. Set to launch later this summer, Ghost looks to be an exciting blogging tool that will also feature an analytics console. Its user interface promises to allow for focused blog writing. In the interim, another tool from the UK called Anchor CMS is available for free, and to the delight of some, it is much more agile and lighter-weight than code- and plugin-heavy WordPress. The emphasis is on simpler content presentation, not the number of modules, carousels and galleries to tack on to a site. Anchor CMS is designed for bloggers who would like an uncluttered content editor that concentrates on writing, not a platform offering a distracting number of design choices. Anchor CMS does offer third-party themes, but the design stays with the mission for a clean and minimal appearance. These are also responsive and mobile-friendly across device. Getting started with Anchor CMS is a bit tricky, however, and helps to have some domain administration and programming skill to set up. This Anchor CMS Installation Walkthrough is designed to help deploy Anchor CMS which is still in a less than 1.0 version. 1 - To get the latest version (currently version 0.9.1), download Anchor CMS as a zip file here: http://anchorcms.com. 2 - Unzip and upload Anchor CMS via your favorite FTP client under the domain public_html root directory. 3 - In the FTP client, set the permissions to Read/Write (777) by right-mouse clicking on the Anchor folder. 4 - Access your site's domain control panel, i.e. cPanel, and determine the version of PHP you have. Check to see if it's version 5.3. If it's not PHP version 5.3, you will need to change a few lines in the.htaccess file. If you're hosting your Anchor CMS blog at HostGator, for instance, you will need to update the PHP version from 5.2 to 5.3 this way. To do that, open the .htaccess file and add the following lines: *# Use PHP 5.3* *AddType application/x-httpd-php53 .php* 5 - Open a browser pointing to your Anchor CMS and configure the settings and metadata to finalize setting up Anchor CMS. Refer to the following screen captures. **Installin' Anchor CMS:** *LANGUAGE AND TIMEZONE* On the first tab (not pictured) labeled Language and Timezone, select your language and timezone for your blog. *DATABASE SETUP* ![Picture](https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1779/installin-anchorcms-edit_02.png) Complete all of the fields for setting up your Anchor CMS database: Database Host (localhost or; Port (3306); User Name; Password; Database Name (e.g., username_anchordb); Table Prefix (e.g., anchor_); and Collation (e.g., utf8_general_ci). After completing these fields, click on Next Step button. *SITE METADATA* ![Picture](https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1780/installin-anchorcms-03.png) Complete these fields to identify your Site Name and Site Description. If you installed Anchor CMS under the site domain root, add a forward slash ("/") in the SIte Path field. If your Anchor CMS is under a down-level folder, you will need to include the path to that folder here. *YOUR FIRST ACCOUNT* ![Picture](https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1781/installin-anchorcms-04.png) Lastly, complete the following fields to finalize Anchor CMS set-up: choose a Username (e.g., admin), an E-mail address and Password. Click on Complete, and that's it. Voila, you'll be up and running with Anchor CMS! Looking for an Anchor CMS theme? Find one here at AnchorThemes.com: http://anchorthemes.com.

Pinkfroyd Theme

A theme that I am working on for www.themebulk.com, a new website that provides a platform for both buyers and sellers to access. Themes will be built upon the Twitter Bootstrap, Zurb Foundation and HTML5Boilerplate softwares. I could use some feedback on the legibility here, is there enough contrast, do I need to make the pink sections slightly darker? Also, the colours of the circles attached the the services, I think they could use some work, but I'm unsure of what might compliment the theme best. Thanks in advance.

Pixels Flat UI

Designed By Mansoor MJ Pixels Flat UI is a web elements kit which is inspired by FLAT UIs By using Pixels Flat UI you can easily customize your webpage which allows to easily change colors, re size elements and also edit texts. Buy On : http://crtv.mk/qHOs This kit comes with following elements : -Video Player -Music Player -Equalizer -Behance Flat UI Profile -Calender -Weather -Youtube Flat UI player -Create an account -Date -Time -Image Slider -Color Selector -Twitter Flat UI Profile -Google Maps -Tags -Sliders -Pagination -Price table -Setting box -Dashboard -Carousel Menu -Notices & Alerts -Radio Buttons -Check Buttons -Icons -Social Icons Buttons -Iphone Flat - White & Black -Ipad Flat - White & Black Buttons: -Register -Sign In -Sign Up -Download -Upload -Add comment -Post a comment -Love It -Share -Reply -Buy -Favorite -Load More -View -Post Fonts : HelveticaNeueLT, Montserrat, Tw Cen MT. Note : 1. This kit is divided into two PSDs :- PSD 1 and PSD 2. 2. I dont own the images used in this kit. View on my Behance : http://www.behance.net/gallery/Pixels-Flat-UI/9089347 Buy On : http://crtv.mk/qHOs

Flat Counter

Graphic design trends are continuously evolving. The latest trend seems to be the flat design. You are going to notice more and more flat designs in the coming days. Today I’m going to share with you a flat counter psd template. It can be used for ‘coming soon‘, ‘under construction‘ or ‘launching soon‘ pages. Hope you’d like it and share your feedback. Download the psd: http://www.freebiesgallery.com/flat-counter/

Regular expressions for pros

Regular expressions are powerful string-manipulation tools, though chances are you probably don't even know half of what is possible with them. Before touching some of the PCRE awesomeness, make sure you're quite familiar with regular expressions already. Though you probably won't use any of the below on a daily basis, you should definitely be aware of their existence. The exact syntax might've slipped your mind by the time you get to use some of these, but I guess you can always come back to refresh your memory once you need it, right? If you know all about the stuff in the [basics tutorial](http://blog.mullie.eu/regular-expressions-basics/) already, dive in! # Back references [PHP Docs](http://www.php.net/manual/en/regexp.reference.back-references.php) Say you're attempting to match XML tags, both the opening and closing tags. Obviously, you'll want to find the closing tag matching the opening tag, not the closing tag of another element. The PCRE toolset provides you with: back references! Yet another escape sequence. Using back references, you can define that a certain part in your regular expression needs to exactly match an earlier part of your regular expression. This earlier reference point has to be a subpattern and you can just point to any given subpattern by escaping the subpatterns index number, starting from 1. Up to 99 back references in 1 regular expression are possible. ## Example In the [basic tutorial](http://blog.mullie.eu/regular-expressions-basics/), we've already created a regex to find all link URLs inside an HTML source. The pattern we had created looked like `/href="(.*?)"/is`. We ignored that fact that HTML attribute are not always enclosed in double quotes though: single quotes are equally valid. This basically means that the opening enclosing character should be either `"` or `'`, and the closing character should match that opening character. The improved regex looks like: `/href=(['"])(.*?)\1/is`. **Caution**: because the PHP regular expression functions expect the regex to be tossed in as a string, do not forget to apply the regular string-escaping rules applicable in PHP. If the string is enclosed by single quotes, all single quotes within it should be escaped & we should also escape the regex' backslash. This example would finally look like this in PHP: `preg_match_all('/href=([\'"])(.*?)\\1/is', $test, $matches)` # Advanced subpatterns [PHP Docs](http://www.php.net/manual/en/regexp.reference.subpatterns.php) Subpatterns are really fun. They're like those tiny little "regular expressions inside a regular expression" and unlock so many neat features. $text = 'Hi, this is some text'; $pattern = '/(.*)/is'; if(preg_match($pattern, $text, $match)) { var_dump($match); } The output of this code will be: array 0 => string 'Hi, this is some text' (length=41) 1 => string 'p' (length=1) 2 => string 'Hi, this is some text' (length=21) The first value (index 0) is the result of the full regular expression, the other 2 values (index 1 & 2) are the result of the 2 subpatterns, making it really easy to grab specific data right from the results. This is also the index they're available at for back referencing. Let's bring some order to this chaos, though. # Non-capturing groups The results can be fine-tuned even better though. Since subpatterns can be used for other purposes as well (e.g. alternation), we might not want all subpatterns showing up in the match-array. To not capture a certain subpattern, you simply precede the instructions in the subpattern with `?:`. This will also render the subpattern inaccessible for back referencing. ## Example $text = 'Hi, this is some text'; $pattern = '/(?:.*)/is'; if(preg_match($pattern, $text, $match)) { var_dump($match); } The output of this code will be: array 0 => string 'Hi, this is some text' (length=41) 1 => string 'p' (length=1) Notice how the second subpattern no longer shows up in our match! # Named subpatterns But the manipulation of the subpatterns doesn't stop there. Not only can we control which subpatterns are being captured but we can also give them any given name by prepending the subpattern's instructions with `?P`, `?` or `?'name'`. Back referencing a named pattern can still be done by index, or by name: `(?P=name)`, `\k` or `\k'name'`. ## Example $text = 'Hi, this is some text'; $pattern = '/(?P.*)/is'; if(preg_match($pattern, $text, $match)) { var_dump($match); } The output of this code will be: array 0 => string 'Hi, this is some text' (length=41) 'tag' => string 'p' (length=1) 1 => string 'p' (length=1) 'content' => string 'Hi, this is some text' (length=21) 2 => string 'Hi, this is some text' (length=21) Now that we have descriptive keys mapped to our values (instead of indices), your database abstraction layer or template engine may even accept your data-array as-is, without having to loop it over once more just to "pretty-format" it. Caution: by default, you're limited to using 1 particular name only once per regular expression. It is possible to enable support for multiple subpatterns having the same name though, by adding `(?J)` at the beginning of your regular expression, like: `/(?J)(?P.*)/is`. This may come in handy in an alternation, where both alternate branches have a subpattern whose result you'd like to capture by the same name. # Conditional subpatterns [PHP Docs](http://www.php.net/manual/en/regexp.reference.conditional.php) Conditional subpatterns provide if-then(-else) constructions withing a regular expression: if a certain condition is matched, only then should a certain pattern be executed (and optionally, otherwise another pattern should be executed). `(?(condition)yes-pattern)` or `(?(condition)yes-pattern|no-pattern)` The condition can either be a back reference, where *condition* is the index of the referenced subpattern, or an assertion (see next chapter). ## Example The more complicated these concepts get, the harder it becomes to come up with a plausible example. Let's pretend we're trying to match CSS @import statements, which can come in both of the below forms: $test = ' @import url("path/to/my/first/style.css"); @import "path/to/my/second/style.css"); '; Both with and without `url()` enclosure constitute a valid @import statement, which makes is slightly harder to match the patch in a single regex. Let's try though: if(preg_match_all('/@import (url\()?"(.*?)"(?(1)\))/', $test, $matches)) { var_dump($matches); } What the above regex does is first start by matching the *@import* statement. After that, it'll search for an **optional** subpattern that will match *url(*. After that, we're looking for an opening double quote (ignoring that this may also be single quotes) and capturing the path to the imported CSS file, followed by a closing double quote. Then the interesting stuff happens: the conditional subpattern will check for condition **(1)** (back reference to first subpattern, which was the optional *url(* – note that this back reference does not need to be escaped): if that was matched, we'll require a closing parentheses. There is no else-statement in this example. The result of $matches will look like this, with index 2 holding the paths to both imports. Index 1 is the result of the optional subpattern that was used as a condition to check if we need to look for a closing parentheses. array 0 => array 0 => string '@import url("path/to/my/first/style.css")' (length=41) 1 => string '@import "path/to/my/second/style.css"' (length=37) 1 => array 0 => string 'url(' (length=4) 1 => string '' (length=0) 2 => array 0 => string 'path/to/my/first/style.css' (length=26) 1 => string 'path/to/my/second/style.css' (length=27) # Assertions [PHP Docs](http://www.php.net/manual/en/regexp.reference.assertions.php) By now, we've got quite a serious toolbox to perform complex pattern matching. But all of the existing trickery will still result in sequential parsing of your regular expression. Some day, you'll just want to instruct "hey, I only want to match ABC, if it is preceded by XYZ, but I don't want XYZ to be part of this match", or "… it should not be followed by DEF." That's where lookahead and lookbehind assertions come in to play. Without actually being part of the pattern to be matched, they will provide additional instructions that will influence what actually will be captured. To better illustrate the concept, let's pretend we're looking for all currencies mentioned in a text. In order to be certain that the character is a currency, we'll need it to be immediately followed by a number (otherwise, we could find a lot of US Dollars in PHP documentation, where variables are prefixed with $). We're only looking to match the currency signs, but there is an additional constraint we need to look for (but it's out of the scope of what we're looking to match). There are 4 assertions: positive lookahead (= followed by a certain pattern), negative lookahead (= not followed by a certain pattern), positive lookbehind (= preceded by a certain pattern), and negative lookbehind (= not preceded by a certain pattern). Assertions are not being captured, and as a result can not be referenced. ## Lookahead * Positive: `(?=pattern)` * Negative: `(?!pattern)` ## Lookbehind * Positive: `(? string '€' (length=3) # Comments [PHP Docs](http://www.php.net/manual/en/regexp.reference.comments.php) I very much encourage you to write documentation for your regular expressions. Regular expressions are sufficiently hard to create already, but they're even much harder to decipher without sufficient context. Comment them correctly though: there is no need to split them into several separate strings and concatenate them in PHP, only to be able to add PHP-style comments. Perl-style comments can be added inline, in a regular expression, via the use of the PCRE_EXTENDED pattern modifier. The use of this modifier will result in unescaped whitespace being ignored in your regex. / # match currency symbols for USD, EUR, GBP & YEN [$€£¥] # currency symbols must be followed by number, to indicate price (?=[0-9]) # pattern modifiers: u for UTF-8 interpretation (currency symbols), # x to ignore whitespace (for comments) /ux Everything following the # will be regarded as a comment, up until the end of the line/regex. The x-modifier will ensure that the tabs before & newlines after the comments are also ignored. # End If you just can't get enough, you might want to check out this presentation I uploaded on [SpeakerDeck](https://speakerdeck.com/matthiasmullie/regular-expressions-101/). It's nothing more than a compact version of the information in both the [basic](http://blog.mullie.eu/regular-expressions-basics/) and this advanced tutorial, albeit with some other examples. I guess by now you've learned to appreciate the power that regular expressions harness. You'll now always have your enhanced regex-knowledge to save your ass when dealing with complex structured data, but don't be blind for other solutions. Though the possibilities are endless, depending on your specific task, other solutions may be far superior, like a DOM/SAX-based parser for XML. *Please note that the code examples were centered around accurately explaining a specific subject, and may not cover all edge cases. For the sake of clarity, the @import-regex is ignorant of whitespace and single quote delimiters, and the XML nodes ignores self-closing tags.* *This post originates from my personal blog, at http://www.mullie.eu/regular-expressions-advanced/*

Square Cash mobile app

I'm obsessed with Square Cash, a new service from Square. So much so that I designed/built a stand alone web app so I can send cash without going into my email app. I think it makes sending cash feel even more meaningful by having a dedicated interface to do so.

Forrst Redesign | Add Post With Rich-Text Editing

Hey Forrsters, We're still plugging away at the Forrst redesign. We've been working on creating a better posting workflow that includes rich-text editing. Now we want your feedback on how you'd use it. Take a look: