Adding PHP Twig syntax to Sublime 3

I needed to start working with Twig recently so I had to add syntax highlighting to Sublime for it. Pretty easy and the best tutorial I found was here:

http://stackoverflow.com/questions/26294305/twig-syntax-highlighting-sublime-text-2

1. Download

The files can be downloaded from

https://github.com/Anomareh/PHP-Twig.tmbundle/archive/master.zip

or you can also clone them with:

2. Installation

To install this bundle in Sublime Text, a few extra steps are required.

a) Open Sublime Text and in the Preferences menu click Browse Packages.

b) In the directory that was just opened, create a new directory PHP-Twig/.

c) Copy the content of the repo you downloaded into the directory you just created.

d) Move the contents of the PHP-Twig/Syntaxes/ directory to PHP-Twig/ (one directory up).

e) Restart Sublime Text.

3. Apply

To apply syntax highlighting on your Twig HTML files : Open a .html.twig file Go to View menu → SyntaxOpen all with current extension asHTML (Twig).

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Sublime Text 3 most powerful shortcuts

If you are just starting with Sublime or are a long-time user, you can still benefit hugely from getting to know the shortcuts. For me Photoshop is a software I cannot use without a keyboard, and Sublime being a text editor can be deceivingly simple. The interface is extremely clean but it has incredibly powerful hidden functionalities and they are available through shortcuts. Continue reading

Facebooktwittergoogle_plusredditpinterestlinkedinmail

The most useful articles on getting started with React.js and Redux

This article will be a live thread – I will keep updating it. The idea is to have one central place for all the useful information, not every single article on the subject out there, but the ones I found personally useful:

Redux

One of the most useful and well written articles when it comes to explaining Redux and how it works: https://css-tricks.com/learning-react-redux/

Redux’s documentation is great, make sure you read it (play with the examples as well if you struggle in your own implementation): http://redux.js.org/docs/introduction/index.html

A huge list of articles, add-ons and tutorials to get you started – Awesome Redux: https://github.com/xgrommx/awesome-redux

React.js

A very good article to start learning the basics of React quickly: https://css-tricks.com/productive-in-react/

This is also a good start if you know javascript and jQuery: http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

Once you have a read through the above you can create a simple app with React following this tutorial by Tyler McGinnis: http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

Use this react boilerplate to setup a working environment quickly: https://github.com/christianalfoni/react-app-boilerplate

A must-bookmark-list of useful resources: https://medium.com/@sapegin/react-and-redux-single-page-applications-resources-22cd859b0c1d

JSX – a year in: https://gist.github.com/chantastic/fc9e3853464dffdb1e3c

ES6 & Babel

Understanding ES6 modules with Babel: http://bradwestfall.com/articles/javascript-es6-modules-with-babel

Mozilla docs – exporting modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Mozilla docs – importing modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Courses on React:

https://frontendmasters.com/courses/modern-web-apps/

https://reactforbeginners.com/

Facebooktwittergoogle_plusredditpinterestlinkedinmail

WordPress – Create a landing page template within your theme that has no navigation

I thought this will be a nice little guide on how you can create a page template inside your theme to assign to pages that you want to use as a landing page.

Landing pages have become an extremely powerful tool in the world of marketing to test different ideas about products and engagement. A landing page is simply

A page that has no menu or sidebar, i.e. any distractions that would lead the user away from the page. It goes from top to bottom and each part of the page gives more information about the subject the page is designed for. Normally a landing page has a call to action at the bottom which can be a button, a subscription form or a “buy now” link.

Now that we know why you would want a landing page, lets find out how to create a new page template for your existing theme.

Creating the template

Before we get the template, I want to stress that you really should be doing this in your child theme folder and not in your main theme folder. If you don’t know what the difference is then please check this page.

Now, in your main theme folder you will have a /main-theme/page.php file. Copy it across to /child-theme/page.php. Then rename the file to /child-theme/page_landing.php. If you are not sure about the naming of files and why it is using a “_” instead of “-” please read this article. In my example the page_landing.php looks like this:

/child-theme/page_landing.php

Notice at the top we have a template name. This name will be shown in the WordPress page admin, so it should make sense. I’ve named mine:

If you go to the page admin on the page that you want to become your landing page on the side you would most likely see:

Screen Shot 2016-02-26 at 17.02.46

If you click the “Template” drop-down the “Landing page” should be there. Select it.

Screen Shot 2016-02-26 at 17.02.58

The header

Now, if you refresh the page it should look no different to what it was before (a lot of work for nothing??). Please bare with me. What just happened is that now we have our own page template and we have absolute control over that page and how it looks.

Most of the page should be as it is, we can edit the content from the admin, but what we want now is to remove the navigation from the header. For this go to /main-theme/header.php and copy it over to /child-theme/header.php. Now rename the file to /child-theme/header-landing.php. Edit the file and remove the code for the navigation, this is how it looked for me before and after:

/child-theme/header-landing.php BEFORE:

/child-theme/header-landing.php AFTER:

Nice, if you refresh the page now though you would still see the menu! Why? Because our page_landing.php doesn’t know about the existence of header-landing.php. Go back to the /child-theme/page_landing.php and change:

to

Notice we have the get_header( ‘landing’ ); ?>. This tells our new landing page to use the updated header. Save and do a refresh, now you should have no navigation in your header and you can continue working on the content of your landing page.

Moreover, editing those two templates you can adjust any other styling, add HTML and make any changes you wish to tailor the way your landing page looks. Also, you can re-use the template by assigning it to any new pages from the:

Screen Shot 2016-02-26 at 17.02.58

I hope that helps, if you have any questions, please write in the comments below.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Smarty – How to assign a variable into a variable in the template

Recently I needed to assign several variables into one smarty variable inside the template.

Here is the basic rules for the example:

  • You have a text that says “Your registration expires in # days”;
  • You want The text “in # days” to change to “today” if the # days is 0.

Here’s a way you can do this with smarty variables inside the template (whether you should do this in the template is not a discussion for this post).

The key here is that when you want to include a variable as part of the value of another variable you need to use value=”$in_days. Notice the ` before and after the variable name inside the double quotes. You can use this method to include variables inside value statements anywhere in smarty templates and make modifications of those included variables.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Sublime Text 3 – Configuration for front-end development

Recently I switched to Sublime Text 3. Previously I had been using Adobe Dreamweaver for about 10+ years. And no, I didn’t use adobe’s built in browsers, “Design preview”, etc. It was a simple text editor, with highlighting, tag closing and build in FTP support. Simply, it was the first editor I used after Notepad and I never felt I needed to switch. Why did I move on to Sublime Text 3? Because Dreamweaver became too heavy, slow and just felt like an ancient piece of software.

On my way to a new editor I tried Atom a really cool web-technology (JS) based text editor. I liked it, but it didn’t have the FTP support with which I had grown so used to. And to be honest, I didn’t spend enough time using it as well.

Next I went onto Sublime. I loved it immediately! Simple, clean design, FAST, fast fast! After a while though I realised it didn’t have everything I needed, so I got on ready. Not long and I had a few “packages” that extended its functionality to the basics I needed. Now I cannot even consider switching back to Dreamweaver.

Dreamweaver is not cheap, and considering you have to pay for every freaking new version it is too much for what it provides. Sublime on the other hand is merely $70 for a lifetime license. Oh, and you can use it for free, but will occasionally get a popup asking you if you want to buy the license. For such a brilliant tool, that you can do most of the things you need (for front-end development, not sure about backend) I think it is more than worth it’s price. Below is my setup with simple instructions to install the same themes/packages:

Looks

Theme: Brogrammer.sublime-theme
Colour-scheme: Oceanic Next (SL).tmTheme

Install using Package Control

  1. Press CMD + Shift + P (Mac)
  2. Type “install” and select “Package Control: Install Package”
  3. Type “oceanic” and select “Oceanic Color Scheme”
  4. Repeat 1) and 2)
  5. Type “brogrammer” and select “Theme – Brogrammer”

Final User Settings:

One of the main reasons I like the Oceanic colour scheme is because it has JSX highlighting support:

Packages / Plugins

SFTP

An FTP client that allows you to work from a local copy and as you save your files to upload them straight to a remote server – invaluable

  1. Press CMD + Shift + P (Mac)
  2. Type “install” and select “Package Control: Install Package”
  3. Type “sftp” and select “Sublime SFTP”

Sublime Linter

Framework for interactive code linting within Sublime 3 (not for V2)

  1. Press CMD + Shift + P (Mac)
  2. Type “install” and select “Package Control: Install Package”
  3. Type “sublime linter” and select “Sublime Linter Framework”
  4. Then repeat steps from 1 to 3 and at the last one instead of selecting the framework install the linter packages – CSS, JS, etc.

Babel

Sublime syntax ES6 definitions with React JSX

  1. Press CMD + Shift + P (Mac)
  2. Type “install” and select “Package Control: Install Package”
  3. Type “babel” and select “Babel”

Oh and it has GIT support!

EDIT 8 December 2015:

CSS3 Syntax

  1. Press CMD + Shift + P (Mac)
  2. Type “install” and select “Package Control: Install Package”
  3. Type “CSS” and select “CSS3 -The most complete CSS support for Sublime Text 3.”

Do you use any other packages that you find invaluable?

Facebooktwittergoogle_plusredditpinterestlinkedinmail