I'm new to this Jekyll business but have tasted the massive potential of liquid - with this test personal website I'm building.
Getting to the point, I'd like rotating quotations, in the right hand box, of the type found at the top right of the veteran Oil Drum blog. (Check it out.)
I already have a stock of quotes separated by blank lines. What do I need to do to get my site to select them one by one and put a different one up every day/week/month?
Imagine the answer will involve some of the {{xx}} style code that is the trademark of the liquid template language, used by Jekyll.
Closest answer I could find was this btw - not satisfactory for my needs.
Cool rotating quote e.g.:
I think you can imitate the posts which are auto listed.
you can customize it by edit the list-make file at _include/JB/ to your wanted form.
And in this way you have to put your quotes to different file.
Maybe you can find exist implement to do it or write the program by yourself.
i'm sorry to make the complex way.
If setting this up with Liquid, the quote could only be changed by rebuilding the site (cron job if self hosting or something).
Alternatively if you need to make it update on it's own, there are JS solutions available. Quick google brought this up which gives a rotation, but it is not time based. https://stackoverflow.com/a/15614495/230449
It will be possible to do a time based solution in JS, but that is not my speciality.
Related
So I've started a web design course about 4 months ago, it's going smoothly and I'm really enjoying it. I'm trying to learn more in my own time and found tag while searching for something similair.
I don't fully understand it, but I think I get the grasp of it, so basically I'm asking if what I think the cords do is correct.
coords="x1,y1, x2,y2"
Does that create a box, which I can then use a so when it's pressed linked to another page?
I think you're a bit confused.
This function won't perform any doing. In fact, all that is a 'string'. Meaning, if you refer to cords, you will just find 'x1,y1, x2,y2' as the value.
If you're interested in linking content, use 'a' tags. Also, if you'd like to create a nice box, you're going to need some styling knowledge. Remember, as a web designer you create content for the web developer to put together. If you're looking into making the sites, look for a course in 'Web Development'.
Please point me to some guides on how to master (X)HTML, CSS with Vim. I preffer to create web pages by hands and I decided to go with Vim.
Any useful plugins, tips & tricks, tutorials, how-tos, books, articles?
Thanks!
You'll "master (X)HTML, CSS with Vim" the same way you'd do with any other text editor or language: by working hard, reading books, watching screencasts and keeping up with the news. The editor you choose is totally irrelevant.
That said, here are a few native features and plugins that helped me a lot:
Omnicompletion is Vim's own autocompletion-like feature, except that it's not automatic.
Hit ctrlp or ctrln to complete with a word contained elsewhere in your document.
Hit ctrlxctrlo to display a list of possible completions based on the language.
BEGIN EDIT
Another very very useful feature is "file-path completion", start typing the path to a file and hit <C-x><C-f> to display a menu with possible completions.
Also, the aforementioned features can be automated with plugins, the one I use is AutoComplPop.
END EDIT
Objects allow you to move, select and perform actions on your code in crazy cool ways.
Say you have <div>word</div> with the cursor on o, dit will delete word, cit will delete word and place the cursor between the tags for further editing and so on…
If you know what d, c or v mean, that i roughly means inside and a roughly means around and that t means tag you already have a very powerful tool, there. Vim has other objects very useful for code editing: ", ', (, [, { etc, type :help objects for more.
For me, this feature alone was enough to justify scraping TextMate.
Blockwise Selection does what it says. :help blockwise-visual for more info.
:normalize or :norm is also very useful to prepend or append something to a group of lines.
SnipMate is a plugin inspired by TextMate's snippets system. You type form then hit tab to expand to a complete boilerplate <form> element in which you can move by further hitting tab to edit values and attributes.
Surround takes the objects business to another level by making it possible to add tag pairs around your selection, deleting them or changing them.
If you take the example above, hit cst<p> to change it in a more correct <p>word</p>. To add a pair of tags to word, select it with v then hit S and type the tag you want.
Sparkup is a pretty awesome plugin. Besides that, I normally use both snipMate and delimitMate, though those are useful for coding in any language.
I do it that way. I haven't found that much support for it, so I wrote a little of my own. I keep it on Google code hosting. I also use a version of Vim with Python embedded, and use some Python to extend some functionality. That's in the pycopia.vimlib package.
There is only a little, but hopefully useful stuff. You can start from there.
Install CSS3 syntax plugin.
Install HTML5 syntax plugin.
Install Syntastic syntax checker plugin.
You'll also have to install CSS Lint's CLI tool, since the syntax checker uses it.
There are a lot more plugins related to general development, which you can find in several questions scattered around this website, but the ones above a specifically related to help writing better CSS & HTML.
Emmet. Which was called zencoding a long time ago, is a nice plugin for several editors (including vim) with many features that enables you to code html and css very rapidly.
For example, you can type div.some span.other<ctrl+y> ans you'll get:
<div class="some>
<span class="other>
(cursor here)
</span>
</div>
tl;dr; install this vim setup https://github.com/jameslai/jvim
James Lai wrote an amazing article on Frontend Vim which was 404'ing when I answered this. It has helped me switch from ST2 to VIM so I'm posting it here.
Why I Use VIM as My Editor of Choice for Front End Development
by James Lai
I’ve been using VIM for years, and I just can’t get away from it. While many people like to use Sublime Text 2, and I can’t help but absolutely encourage that, if you’d like to use an editor that can scale with your knowledge, VIM should be your editor of choice.
Easily edit content within tags
As FED’s, we’re constantly editing content within tags. VIM makes this easy with its “tag” text object - t. Here’s a common scenario, you have source code that looks like:
<div>Some content within here</div>
In VIM, to replace the content within that tag, you merely need to press cit. This will change the inner tag and you’ll be left with this:
<div></div>
Easily replace HTML attributes
Similar to the above, we deal with content within quotes all the time, often as attributes within our HTML. You may have something that looks like:
<aside class="one-third author box">
In this scenario, just hit ci". Perhaps the neatest part about this trick, if this was the only content on that line, you don’t even need your cursor anywhere near the quote itself! VIM is intelligent enough to simply empty out the content of the quote regardless of its position in the line, and you’ll be left with:
<aside class="">
Jump back and fourth between where you’ve edited
As FEDs, we are constantly jumping back and fourth between places we’ve previously edited. VIM maintains a “jump list” which is easily navigated by Ctr+O (jumping to previous locations) and Ctr+I (forward). This makes our routine of editing many files simultaneously incredibly painless.
More information on jumps
On a mac? In VIM, you’ve got a proper delete key again
Mac keyboards don’t come with a normal “delete” key - we essentially have a backspace key but it’s labelled delete. Sure, you could reach for funcdelete, but that function key is sure out the the way. Instead, hit x!
Move CSS like a master
Often I’ll need to refactor some CSS and move properties between selectors. With VIM, I can move content from various lines to my cursor position with a simple:
:<linenumber>,<linenumber>m
Common operations like these are made laughably easy with VIM.
Jump to the end or beginning of a line
This is unusually common in my workflow - needing to jump to the end of a line. Perhaps I forgot a semicolon at the end of a CSS property or line of Javascript. To jump to the end of the line, simply hit A and you’re in insert mode at the end of the line. Need to edit at the beginning (not counting tabbing)? Use I.
Edit at the speed of thought
One of the staple concepts of VIM is to prevent needing to reach for your mouse. When I’m in my flow, I never reach for the mouse unless its to interact with a web page I’m working on. Getting good at VIM means your ability to edit and manipulate text nearly approaches how fast you can think of the problem. Because of the concept of text objects, thinking “I want to delete this line” becomes a trivial dd, or deleting a word with daw. As you think about the problem, you more often then not have a easy command to describe to the editor. The ability to get into your flow with VIM is, in my opinion, higher than most other editors.
Easy split windows
Something that completely changed how I developed was learning how to really leverage split windows in VIM. Yes, VIM has split windows, and they’re amazing! Some editors come with this functionality, but it can be cumbersome to use, or difficult to remember to use.
Spits are powerful because we’re often addressing the same item in a number of places. If you’re addressing an element, you’ll often want the HTML file up. If you’re applying styling to it, you’ll want the CSS up, and if you’re applying behaviors, you’ll want the Javascript up as well. Seeing them all at the same time has saved me literally countless headaches in editing. The flow feels very “natural”, not to mention just how awesome your editor will look. Often I’ll have at least 4 splits going at any one time.
A great way to get started is by typing :Vex. This opens a Vertical exploration window. From here you can browse to whatever file you want to, and that file will appear in the split. There’s also the always salacious :Sex command, which will open a horizontal split explorer window.
Vertical Split Windows
More information on splits
More information on the file explorer
Your setup, anywhere
Perhaps one of the most compelling features is the ability to have your customized setup very quickly. I keep my VIM configuration in a GitHub repo, meaning regardless of what machine I’m on, I’m about 2 commands away from having my complete setup ready to go.
…even on remote machines
Front end developers will inevitably work on a remote server at some point. Heck, many of us have local linux boxes in a VM replicating our server environments. You’re going to need an editor, and rather than either fumble around in VIM due to not knowing how to actually make it dance, or using a basic and underpowered editor like nano, getting good at VIM client-side means you’re going to be a master server-side.
Final thoughts
VIM is an amazing editor, and although you may think it’s old, it’s actually more than up to the task for today’s editing. No matter what new editor hits the market, I may try them out to see what innovations are out there, but in the end, I always come back to VIM for all my editing, and I love it.
I use a lot zencoding, so, if you're used with zen-coding try the zenCoding plugin for Vim find it here
If you want to learn more about zen-coding you could read: zen coding vim tutorial
I remember reading a while back on some random website about a program that would look at multiple pages on an HTML site and detect the differences/similarities between the pages to automatically detect which parts were template "boilerplate" and which parts were new content, and then based on this, automatically spit out just the parts that are content.
Unfortunately, I didn't remember enough details about this utility to actually find it on google, so I wonder if any of you guys have run across anything like this, and CAN remember the name of it.
Thanks.
Murphy's Law (or is it some other law) has stricken, and I've found it just moments after I'd given up and posted this question. The project I am thinking of is this:
http://code.google.com/p/boilerpipe/
Thanks.
I'm learning web dev and I am already stucked at some point..
How do I convert a PSD template to a html/css website ?
I've cropped all part of the image and saved them in .gif separately, but then ? Do I have to manually place them in a dreamweaver empty template ? I thought there was an automated way to do so..
Also, I've tried "Save for web and devices.." but when saving, it creates a .html file and a single image which contains every element ?! I expected several images so that I could rearrange them in dreamweaver.
While certain applications advertise/provide automation of the "conversion" process from composite graphic to web layout you want to avoid using those features. They will cause you more trouble than they are worth. Especially if you are going to use CSS for layout (which I strongly encourage). Thats not to say those features dont have some limited valid usages (more on this in point 2) it just that they arent going to magically generate your site from a graphic.
In order to use "Save for Web..." you need to use the Slice tool to slice down the image into the different images you need for layout. Then when you do save for web and deices with html it will export the html/css and the images. Again this isnt magic and chances are youre going to have to completely redo most of what its done for you - making it useless for anything more than slicing a certain area of the layout (say a single menu).
There isnt a fully automated way to do this, generally speaking because depending on what you need the layout to do you have to go about laying things out in different ways and while its theoretcially possible to account for all the possible potential requirements in a nice little export GUI its not really feasible.
The bottom line is to do this you have to learn HTML/CSS. And the more you learn the more you will hate Dreamweaver (at least in "layout view"). Garaunteed.
Yea, web design doesn't work by magic. The proper way to do is to manually write the actual code that positions the elements, not just smack them in place in Dreamweaver. There's plenty of good tutorials out there, check these out for example:
http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
http://www.devwebpro.com/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/
Welcome to reality.
You'll have to slice and dice yourself (well, slice and dice the image yourself, but don't slice yourself no matter how much you want to), and then place each individual part in your HTML or template.
There are a number of automated services that convert PSDs for you:
http://converxy.com
http://psd2htmlconverter.com/en/
http://www.psdtoweb.de/
http://csshat.com/
However, you might also want to consider a service-based approach as well. There is a thriving community of professional slicers out there (just google "psd to html" and you'll see what I mean).
You might also try to redesign from a program or framework such as:
http://html.adobe.com/edge/reflow/
https://webflow.com/
http://www.ekomobi.com/en/home.html
http://macaw.co/
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
It really depends on your budget, your timelines and your skillset.
I'm a big proponent of understanding something really well before trying to automate it. So, like the other posters have said, slicing by scratch (handcoding) is very valuable, especially if you don't already understand it well. However, you might just not care to invest the time needed to achieve a good understanding of the subject. And, that's perfectly okay too.
I think that ad the end of the day, there is no "correct" solution. Different people have different requirements which will change the choice.
This may help you, it walks you through the process.
[This question is somewhat related to this question, but the answers are not...]
I have always used relative paths in HTML and scripting languages (PHP/ASP/JSP) to refer to EVERYTHING. I think the justification had to do with 'what if the website gets hosted in some weird subdirectory.' But my coworker has started throwing absolute paths into a PHP site we're working on. At first I was appalled, but then I thought, "why not? We'll never be hosted in a subdirectory." Nowadays, getting hosted in the root is not an uncommon necessity. Is it still necessary to "code" (markup, really) with relative paths? I think it's probably an antiquated practice by now.
Definitely. You never know where your code is going to end up, or for what purpose.
Suppose you build a new version of a site, but to help your users transition, you move the old version to a "/classic" subdirectory. The same often happens the other way around where sites will host a beta version of the new redesign in a "/new" directory.
Building it properly the first time shouldn't be a hassle, and you'll thank yourself for it one day.
Well, it's probably not the end of the world but it's building in a dependency that you don't need.
If for example you ever want to put a number of versions in subdirectories in a test harness, or subdirectories help to work around some other issue (such as combining this with some other app that insists on being in the root), you may find it harder.
Sure, you can probably always work around it in some other way - but the problem is you now have to.
Edit: Killed my opening paragraph as it was based on a miss-interpretation of the referenced article.
I always use an absolute path for the following reasons:
Includes:
1. When you use a templating system, you never know the directory structure that a document is going to have when it's calling the include.
2. If documents are going to be moved around, you can be pretty sure it's going to be the documents themselves rather than the includes. If it is the includes, then they're being moved my someone who knows what going on. Added to this, if it is someone not familiar with absolute/relative path, they'll understand absolute a lot better than relative.
css: (as well as the items above)
1. When editing with Web Developer, relative backgrounds disappear when your style sheet isn't in the same directory as the doc.
2. By spec, when you put something on the 'Net, it should be there for the duration. When I'm building something new, I build it in a new folder, or with a new file name and leave all the old docs alone.
If you're using dynamically-generated pages, dynamically generate your URLs. For example, with JSTL use <c:url>. Not only does this allow you to move your pages in the future, it also ensures that your URLs will be properly escaped (tell the truth: how often do you build query strings with &? if you want the W3C validator to accept them, you need to).
For my personal website, which uses PHP to build pages, I've created several methods: insertPageRef(), insertCodeRef(), and so on, that create valid HREFs. As a result, I don't hesitate to re-arrange my site structure as it evolves.
The case of being moved to a subdirectory is fairly unusual, I'd say. Far more usual is being hosted on different servers: you create your site for testing on "dev.yourcompany.com" then go live by moving it to "www.yourcompany.com". In that case, you need to use relative links for obvious reasons.