When working on the front-end development of a website (HTML structure, styling with Sass, style/animation related JavaScript), do you do it already with a CMS (Cake, WordPress, whatever) wrapped around it, or do you first work on the front-end with static/placeholder content?
In case you create all the static HTML/CSS first, and implement the CMS just once you have a nice HTML structure and the stylesheets defined, how THE HELL do you create your templates (header, footer, etc) without PHP?
Just because I'm very attached to some stuff like Gulp, browserSync, Sass, autoprefixer, sourcemaps, jshint, wiring dependencies from bower, etc, and I just can't find a way to use all that with PHP for creating some simple templates, and apparently zero person give a damn about it.
It actually seems to be very easy and I'm kind of close to it, but I can't understand now how wiredep works, and I've had enough of that already, and I'm starting to feel very bad about it, and I'm kind of alone in my desk here and I just can't break free from my stubbornness.
I would love to read you people thoughts on that issue.
Here's my specific question on that:
Gulp-webapp running BrowserSync and PHP
Related
Ive been using wordpress for awhile now and wanted to try something different. Enter in my discovery of the world of static website generates. Now I have my eyes on Octopress which I know to be built on jekyll. Before I start getting dirty in ruby I want to know if its relatively possible to translate my current wordpress theme to a static site.
That's exactly what I did recently:
http://eduncan911.com/blog
I copied a friend's Wordpress theme (with permission) of almost the same design:
http://forgetfoo.com
"I want to know if its relatively possible"
To answer your first concern, the answer is a big ol' YES. That's what make Jekyll so good for these kind of things: it's just raw HTML and css and js in a few directories. Place them anywhere you like, and start cutting away at chunks in includes, wrap some plugins, etc and before you know it, you are rake generate and rake deploy.
Octopress makes it even sweeter by having a large number of plugins, a blog-like template system already structured*** (see below), and bunch of defaults all setup for blogging.
The issue with Octopress' theme is as I said above, it is purely setup as a blogging platform. You'd need to highly modify, or in my case just completely ignore, the template they have and just piggy back on the nice Github Pages, SCSS, and plugins it comes with and roll your own html templates. It's really really really easy.
Where do you start?
/source/index.html
You start here with this YAML file. At the top is a definition of layout, which is used to pick what "wrapper" or layout you want to surround this index.html content with. To make a new template, one like yours, I'd call it layout: fuse_homepage. Then go into source/_layouts/ and create a new `fuse_homepage.html'.
Start with your own theme and format as you want
But see, you don't even have to do that. Hell, just paste your entire homepage HTML right
into that source/index.html to start with (make sure to keep the --- YAML markers at the top, but get rid of the layout). Start there and break things out later when you get tired of coping and pasting the header/footers. Heck, just start there - make a fuse_header.html and fuse_footer.html and just share those for now.
Ignore Octopress' theme layout - it's just for hackers that don't do UX and just want to tweak things. Designers or people that like to control their code will want to roll your own.
It really is that flexible. However you want to break it up, you can. Want a new page, just call rake new_page["title"], which all this does is create either an /title.html, or /title/index.html, depending on your settings in the config file. But see, you don't even have to do that. Just create the file yourself - BAM, it is copied on deployment.
Regrets with Octopress
Trying to force the themes to do my bidding, chasing rabbits
I only regret trying to follow the Octopress' author's format - wasted so much time and got so turned off at Octopress. In the end, I just ignored it and did my own. Much easier, and I know where everything is. I also wanted nice and cleanly formatted HTML - a show that I care about my code. The default Octorpess theme and structure invites so many mis-placed tabs and spaces that it's just ugly. Doing your own, you are in full control, space by little space insert.
Importing posts
There's a huge amount of Google links to help you export your WRX from Wordpress, and to generate a the post files automagically. Be prepared to try several different ones as they aren't all perfect.
import comments into Disqus
Unless you are already using Disqus on Wordpress, you are going to have a horrible time with this one.
I can now claim myself to be an WRX/BlogML expert after my nearly 100 tries of importing and exporting and fixing and so on. There is no documentation on either importer (Disqus nor Wordpress) to tell you of the individual required fields. For example, Wordpress requires wp:comment_id to be set, and unique for each and every post you import whereas Disqus requires an wp:comment_email field, even though say it is optional (it's BS, argh).
Be prepared to hack code. It is a hacker's framework after all
Do note though: it is a lot of work to hack around the static site. Doing your own template will save you so much time. You'll also may want to write your own custom plugins, which I did, to get around the bugs in peoples github repos - it's pretty easy, but does require coding.
I spent about a month off and on until I got my new blog/static site to where I liked it for launch. A lot more than I wanted, but it was "fun" learning new languages (Ruby, Python, installed Debian linux in a VM cause Windows just sucks at that stuff).
If you aren't prepared to write that much, there are a couple more static site generators out there as I blogged about (hey, got to show off my Octopress and custom theme!):
http://eduncan911.com/software/the-static-blog-boom.html
Btw, nice site...
I know things like these have been asked and answered several times before, is it just that I can't grasp the idea easily or too hard to accept that things are really like this and that.
I know that HTML is used for Front-End where the tedious work is done in the Client, and PHP is working behind the scenes (Server-Side). With so many regulations, instruction, standards, so on and so forth.. I believed I have already confused myself with these stuffs, making things (new and old) hard for me to chew and understand especially when it comes to their best uses...
Anyway, I have created a web application based on the concept of MVC tho I didn't used the strong fundamentals of the topic nor a framework, I separated the Logic, Rules and Design concerns by my own.
Unfortunately, I wound up with some issues similar to which is the right way to do the things, how this should be implemented, etc...
I end up needing to template the HTML, however, since I've used HTML as HTML itself, I end up updating/editing each and every affected file (for. eg. a web page header), unlike when I used PHP before, literally a file with a .php extension, where I can fully utilize templating, however, i read somewhere that it is not a good practice because it breaks the HTML.. so which one should I follow and how can I solve my problem, should I move to .php and then create a template page, or is there a way I could do such with HTML? if there is any, how can it be done?
Please for the meantime, don't point me to frameworks available, I want to understand basic things first before studying frameworks...
Anyone, please...
Edit...
so this is just fine and that it doesn't have any drawbacks...
main.php
<?php php stuffs ?>
<html>
<body>
HTML stuffs and some <?php php stuffs ?>
</body>
</html>
HTML has no templating capability.
It has frames and iframes, but they come with significant drawbacks and only provide include functionality.
You should use a proper templating language. This can run on the client, server or build system.
I'd recommend against running it on the client. It adds an unnecessary dependency that your visitors (including search engine indexers) have to fulfil.
PHP will do the job (it straddles the border of being a programming language and a templating language). My personal preference is for Template-Toolkit.
TT can run in your build system via the ttree utility, or you can run it on your server. There is a tutorial covering how to build websites using it.
If, and when, you move to building websites with more demanding server side requirements, then you can continue to use TT as it is supported but most of the web frameworks in Perl land (e.g. the dancer module for TT and the catalyst module for TT. Note that those links go to the hardcode documentation for the modules, and if you plan to use one of the frameworks you should start with a higher level tutorial)
HTML is a markup language - in other words it can mark up text to display to the user.
It cannot do any of the dynamic type functions you might need in a web application - like updating the date, for example.
So it is best to think of HTML documents, just like you might think of a Word document, a load of text that is displayed to the user.
As soon as you want to start using templates to display dynamic information (stuff from a database, maybe), you're going to need a scripting language. PHP is good for this.
I've had good experience with Smarty - a php templating engine.
On a side note, learning a framework can be a really useful part of the learning the basics. Most frameworks force you to do things in a good way, and sometimes the things they make you write in your code may seem a bit strange or illogical, suddenly one day the penny will drop and you'll realise why what you've been forced to do is sound from an engineering point of view.
You can look # javascript templating. I suggest you to give a try to http://mustache.github.com/
Modest is a template system that's supposed to look and feel like HTML.
The most common way to do HTML templating with PHP, is to use one of these popular templating engines :
Smarty
Twig
Latte
Mustache
Alternatively, you can just put placeholders in your HTML that look something like <% variablename %>. Just load your HTML, do a regex do find all placeholders and replace them with the corresponding variables.
Alternatively, you can load your HTML, parse it as a DOM document and then modify your DOM. I created the library DOM Query to be able to do this with a jQuery-like syntax, but you could use vanilla PHP or one of several other libraries as well.
Alternatively, you can do some HTML templating in frontend with JavaScript. If you want to do HTML templating both on frontend and backend, you might want to consider using Mustache, because Mustache templates can be used both in frontend (with JavaScript) and in backend (with PHP).
I've been on a project with a buddy who is leading us with Middleman. We are coding in HAML and SASS and he's obviously a Ruby Dev. I'd like to know if there's ANY type of equivalent for PHP? I'm going to eventually lead a team and I'm much more comfortable with PHP than Ruby.
I'd like to have a layout file (like Zend's layout file)
I'd like to...at one command, convert all of the source files from PHP to static HTML and place those static files in a 'build' folder so we can hand it over to the client.
Anyone know of some cool things out there to make this happen? Thanks a bunch!
A project I work on, www.findbigmail.com, was written completely in PHP to start with and then I did some Ruby/Rails work for a different project, and coming back to PHP was a grind. After using HAML, SCSS and other wonderful things like CSS and JS minify, oh and Compass to build sprites, it was painful to go back to PHP and work again in PHP files with embedded HTML etc.
So, driven by pure slothfulness, I looked around and found MiddleManApp (MM) - after a couple of side trips along the way.
Now we have a very strong separation between what is now a mostly static html site built by MM, with some PHP files that are POSTed to and then redirect back to html pages. Where we need more dynamic behaviour, we've added javascript to the pages and have them call PHP API wrappers around our pre-existing code.
Our site performance has jumped hugely (doh, now its all static html), and its poised to take another jump when the next MiddleMan version comes out with its improved cache-busting abilities inherited from the Rails 3.1 asset pipeline. E.g. we'll be able to reference main.css in our source scripts (which itself is made up of sub-scss files like _index.scss, _pricing.scss) and it will be built with references to main-2348jlk23489kdj.css -- allowing us to set the server to cache for a year and/or deploy many more files to CDN.
Our engineering performance is way up too. We're no longer reluctant to touch UI code for fear of introducing a syntax error into the PHP code. And no more mismatched HTML tags to cause grief. The other PHP developer wasn't familiar with the Ruby/Rails derived toolchain, but has quickly become proficient (though he is a rockstar developer, so that's not too surprising!)
Coming soon is i18n support. Most of that is in MM already and hopefully Javascript support
real-soon-now.
We also explored generating pages from HAML with PHP added to them. We decided it was probably quite simple - e.g. add a ":php" tag to the HAML pipeline and then use .php partials as needed. But, we found that between Javascript and wrapping the existing PHP code as an "engine API", we were able to keep the codebases neatly separated -- which we found we prefer overall.
I hope this helps! Happy to explain more.
There is one for PHP called Piecrust.
I ended up choosing Middleman for the bundled coffeescript, sass, etc., but Piecrust is well done.
http://bolt80.com/piecrust/
PHP can render static HTML from PHP code quite easily:
Easiest way to convert a PHP page to static HTML page
Generate HTML Static Pages from Dynamic Php Pages
PHP - How to programmatically bake out static HTML file?
You could wire up something with existing template systems like Twig or use PHP Markdown to more or less mimic what Middleman is doing and create static HTML pages from your source files.
EDIT: As Hari K T mentioned above, http://www.phrozn.info/en/ does exactly this.
I was having a "discussion" with my manager today about the merits of using PHP includes and functions as a template to build websites more quickly and efficiently. He has been using Dreamweaver templates for years and sees it as really the best way to go. I would like to start using some different and more efficient methods for web creation, because we need to get through our projects faster. I would like to know in detail what would make Dreamweaver dwts better than using code to accomplish the same task, or vice versa.
His reasoning is:
When you change links on the dwt file, it changes links for every page made from that dwt.
Even if you move pages around in directories, it maintains links to images
Everyone in the company should do it one way, and this is the way he chose (there are two of us, with someone who's just started who needs to learn web design from the beginning, and he plans to teacher her the dwt method)
If you edit a site made with a dwt, you can't change anything in the template (it's grayed out), making it safer
If he's building sites with dwt, and I'm doing it with PHP includes, we can't edit each others' sites. It gets all over the place. When we have new employees in the future, it will get all crazy and people can't make changes to others' sites if they're out of the office.
I've been studying PHP these days, and am thrilled with how powerful it is for creating dynamic pages. The site in question which sparked this "discussion" is more or less static, so a dwt would work fine. However, I wanted to stretch my wings a bit, and the code was getting REALLY jumbled as the pages grew. So I chopped off the header, footer, and sidebar, and brought them in to all the pages with a php include, as well as dynamically assigned the title, meta data, and description for each page using variables echoed in the header.The reasons I like this better are:
It's cleaner. If every page contains all the data for the header and footer, as well as the extra tags Dreamweaver throws in there, then I have to sift through everything to find where I need to be.
It's safer. It's sort of like the above reason dwts are safe, except I do all my code editing in a text editor like Coda. So on occasion I have accidentally deleted a dwt-protected line of code because those rules only apply within dreamweaver. I can't chop off part of the header if I can't see it. Incidentally, this makes it easier to identify bugs.
It's modern. I look through source when I see great pages made by designers and design firms I admire. I've never seen dwt tags. I believe by using PHP to dynamically grab files and perform other tasks that keeps me from having to go through and change something on every page, life becomes easier, and keeps things streamlined and up-to-date with current web trends and standards.
It's simple. This should be at the top of the list. Like I said we have to train a new person in how to create for the web. Isn't it much better for her to learn a simple line of PHP and get an understanding for how the language works, rather than learn an entire piece of (not exactly user-friendly) software just for the purpose of keeping her work the exact same as everyone else's? On that note, I believe PHP is a powerful tool in a web designer's arsenal, and it would be a sin to prevent her from learning it for the sake of uniformity.
It's fast. Am I mistaken in my thought that a page build with header and footer includes loads faster than one big page with everything in it? Or does that just apply when the body is loaded dynamically with AJAX?
I did extensive searching on Google and Stack Overflow on this topic and this is the most relevant article I could find:
Why would one use Dreamweaver Templates over PHP or Javascript for templating?
The answer is helpful, but I would really like to understand in more detail why exactly we shouldn't switch to a new method if it's simpler and has more potential. My manager insists that "the result is the same, so if there isn't something that makes me say, 'oh wow that's amazing and much better!', then we should just stay how we are now."
(I do apologize for the length of this question, but the guidelines asked that I be as specific as possible.)
Like I said in comments, without knowing what exactly sites you are working with it's hard to tell which PHP features are most important to showcase. However, I can try and describe the most simple kind of sites I was dealing with, and where and how PHP came in handy. If you work with something more complicated, the need of programming language may only increase.
The simple website may have a few different pages with text and images. I'm assuming nothing interactive (i.e. no inquiry form), no large amount of structured data (i.e. no product catalog), only one design template which is used by every page with no differences whatsoever. Here's the typical structure:
One PHP file (index.php) for handling all sorts of php-ish stuff
One design file (template.php for example) for storing everything html-ish (including header, footer and more. Basically all html with placeholders for text and menu)
One CSS file for, well, the site CSS
Most of the texts are stored in database or (worst case) just txt files. Menu (navigation) is stored in database as well
Images folder with all the needed images
The key features here are:
Simplicity. You only have as many files and code as you really need to keep things organized and clear
Reusability. You can basically copy/paste your php code with little to no changes for a new similar website
No duplicates whatsoever.
Data and design separation. Wanna change texts, fix typos? You do it without as much as touching design (html) files. Wanna make a completely brand new design for your website? You can do it without even knowing what those texts are or where they are kept.
like deceze said, no lock-ins. Use whatever software you like. (Including Dreamweaver)
PHP is responsible for taking texts, menus, design and rendering them all into a web page. If website is in more than 1 language, PHP code choose the right texts for the language of visitors choice.
If texts are stored in database, you don't even need notepad and ftp. You just need, i.e., phpMyAdmin (stored in server) so you can connect directly to database and edit any text you like using only web browser; from anywhere in the world. (I am assuming no real CMS). If you need to add one more page, you connect to database using myAdmin and browser, enter the page name (for menu) in 1 or more languages, enter the text for new page (in 1 or more languages), done! new page created, name placed in the menu, all hyperlinks generated for you. If you need to remove a page, you connect to database and click delete. If you need to hide a page for a while (i.e. for proof reading before publishing), you connect to database and uncheck "published" box.
All this doesn't come with just using database ofcourse, you need to program these features with PHP. It may take about 1 - 3 hours depending on experience and the code is fully reusable for every similar website in the future. Basically you just copy/paste php file, copy/paste database tables, enter new text and menu into database, put placeholders into your html file and done! brand new site created.
Which immediately makes most of the reasoning for DWT irrelevant. You don't move files around because you have only one html file and no directories, you don't need grayed out template because texts/images (content) and template are not even in the same file, there's no such thing as changing links in dwt file because it's PHP that generates them on the fly (these are not real links to real html files but rather links with parameters to tell PHP which exactly page must be rendered.. because remember we have just 1 file). The bottom line is, comparing features of the two side by side is like comparing features of a sword vs machinegun. Sharpness and length of the blade concepts are meaningless in a case of machinegun; while lifetime sword user won't really get the meaning of velocity and caliber before he tries and uses machinegun. And yet, while you can't compare their features one by one, no one brings sword to a gunfight for a reason :)
As for #3, currently there are many more people working with PHP than DWT (in a case you will need more employees in the future, or if other people will need to work with your websites later, etc.) As for #5, you can edit PHP websites with Dreamweaver as fine as DWT websites.
That's just off the top of my head. I wrote this in my lunch break so I likely forgot or missed quite a few things. I hope you will get a proper answer with detailed DWT vs PHP comparison too.
You simply can't compare PHP vs. DWT.
PHP is a programming language, where templating is just one of it's numerous features, and DWT is just a silly proprietary system to build simple web pages.
there is actually nothing to compare.
I would say that using DWT templates over PHP do have some advantages.
It does not need any extra server-side process, like PHP to process the files at the server.
You can serve all files to the user as .html files rather than .php files, though I suspect that it is possible to hide the .php extension. Why should any user see anything other than .html?
You don't have to learn PHP syntax/programming. It is true that you can do more with PHP that plain .dwt files but for plain templating the .dwt files can be just as clean.
It is not true that .dwt files are a lock-in technology. The feature is also implemented by other web editors, e.g. Microsoft Expression Web.
I have a website that I've developed, which includes hand-written php, html, css, and js. I also created the MySQL database.
I've recently brought someone on who is going to make the website look better, but his experience is limitted to working with Wordpress. I'm wondering if it makes sense for him to the the front-end "skin" work with Wordpress and for me to edit the files as needed so they submit data to my php files and connect to my database. If the php generated by Wordpress is reasonable, this seems doable in theory.
The other way would be to take the html genrated by his php and use that as my starting point for hooking into my php processing files and database.
He sent me a dump of the files created after he created a simple webpage and there seemed to be a lot of extra stuff in there.
Can anyone with experience in this comment? I'm hoping there's an easy way to do this.
Thanks.
The default procedure for me that always worked well:
You provide outlines/simple sketchups/your old layout, so the "designer" knows vaguely how you want it to be
You define what the site should do ("there should be a button to...", "there should be a list of..., when you click on it..."). So he knows what happens and what site follows another. That's important! He must understand the site.
The better you do the above, the better the results you get from the designer will be
The designer generates layouts in pure HTML with CSS: Example sites with example data, where everything you said before is integrated.
You cut up the HTML-code and integrate it yourself in your php-code
This procedure has also the benefit, that an external designer does not get in contact with your application's internal php-code (and cannot "steal" it). And you can dry up your internal code when you integrate the HTML you get.