    
|
|
|
|
|
When I’m designing themes for WordPress, I find that working remotely can be a little troublesome at times; particularly when using stylesheet preprocessors such as LESS or SASS. I’ve been developing a number of WordPress themes recently, and to ease the load on my remote server, speed up the theme-building process, and receive an all-round smoother WordPress experience, I’ve found that working from a local installation gives me the edge.
So here’s my quick and easy way on how you can set your WordPress site to run from your home computer, too.
In this guide, you’ll learn the following:
Using this technique, you can set up a local WordPress site for your home network — perhaps a family blog, or personal diary. It’s also a great way to build and customise your themes quickly and efficiently whilst retaining the advantages of speed and flexibility that developing locally can provide.
How do you develop WordPress sites? What tips would you add? Let us know in the comments.
Featured image/thumbnail, local image via Shutterstock.
| FOCUS: Photo Editor for Mac – only $7.99! |
 |
 |
For a few years, Smashing Magazine has been my first tab to start every browsing session (right after checking Gmail and Facebook). Assuming that the company was based somewhere in the US, I was quite surprised to discover that its headquarters are — from a global perspective — just around the corner from me. I was halfway through a “reasonable” degree in philosophy, politics and economics and still could not get the passion for Web design out of my head.
Aside from being a pure designer or developer, I had no idea how one could pursue a career in that field, and I needed some inspiration. With Smashing Magazine being so close, I emailed Vitaly and was kindly invited to visit the Smashing crew. I dropped by the office in October 2011 and gained many insights into the roles and backgrounds of the team members. I left Freiburg motivated with many ideas and plans for the future.
A week later, coincidentally, a tweet popped up announcing that Smashing Magazine was looking for interns in 2012, and I applied instantly. I had other plans for 2012 and was not sure this would be the right decision, but in waiting anxiously for a reply, I realized that I really wanted this position. The confirmation came a few days later, and my plans for 2012 were postponed to 2013.
It is amazing how fast six months pass by. I started my internship in April 2012, when the final touches were being put on the Smashing Book 3 and the whole office was super-busy. Nevertheless, I was welcomed with flowers and a greeting card, and everyone made an effort to show me around and answer my questions.
Having to carry out many different tasks made it possible for me to work with nearly everyone on the team and to get to know my colleagues beyond work. This was also enabled by the little office parties we had and the Friday lunch tradition. From the first day, I was warmly welcomed and felt like a full member of the company. Having experienced other work environments, I know this is not a given, and it makes Smashing Magazine — and the team behind it — very special!
The team comes together for Friday lunch.
I knew my way around InDesign, Illustrator, Photoshop as well as HTML, CSS and WordPress before starting this internship. However, working at Smashing Magazine, I always had an incentive and a responsibility to extend my knowledge and improve my workflow — including in my familiar fields of interest. Smashing Magazine is never satisfied with half-finished results. This puts you under reasonable pressure at some stages, but it also maximizes your learning and prepares you well for the future. Describing all of the tasks I carried out would take me beyond the scope of this article, so I will touch on just a few.
My first task was to create a GIF animation to promote the new book — something I had never done before. Together with team members Talita, Jan and Stephan, I was able to acquire techniques in film, animation and relevant software, and I learned how much effort it takes to produce such a tiny movie. We experimented with stop motion and with a GIF technique inspired by Jamie Beck.
One version of the GIF, after experimenting with many approaches.
Contributing to the Smashing Newsletter was also fun. You come across so many interesting topics, and knowing that your text will be read by over 50,000 subscribers is just a blast. At first, writing two decent paragraphs took me ages. But noticing myself become faster and better with every new topic was great.
One task I loved was developing the first in-house magazine, which I named SmashPost. The idea was initiated by cofounder Sven Lennartz and caused some psychological stress from me — not because creating an internal magazine is such a huge challenge, but because producing a document for such a creative environment and at the high standard that I imposed on myself felt like a real challenge. The first issue was finally published and got very positive reviews from the team. I enjoyed developing content for subsequent issues more and more.
Cover samples of the in-house magazine, SmashPost.
SmashPost features in-house coverage of happenings at Smashing Magazine’s office. It introduces new team members, announces organizational changes within the company and informs everyone about closed and ongoing projects and new ideas. For every issue, I tried to find a current theme (like the European Football Championships or the Olympics) and mixed in-house content with cartoons, graphics, jokes and fun facts related to the theme. I also implemented ongoing features like “The Sheldon Quote” and quotes, like this one, from “Star Wars: Family Guy Edition”:
Soldier 2: Hold your fire. There are no life forms aboard.
Terry: Hold your fire?! What, are we paying by the laser now?
Soldier 2: You don’t do the budget, Terry. I do.
The “Redesign the Web” contest was another stressful yet exciting task. This time, I was challenged to develop an effective technique of organizing hundreds of emails and files and keeping track of everything. Being the first one to see all of this creative talent and to be directly in contact with the Smashing community was amazing. It also felt great to be entrusted to communicate independently with the participants and to be included in the selection process.
A selection of entries in the “Redesign the Web” contest.
The absolute highlight was definitely the first Smashing Conference. In conducting interviews, I got to know popular speakers such as Andy Clarke, Paul Boag and Jeremy Keith, and I had many interesting conversations about topics both related and unrelated to the Web. Seeing them now online is great; you can view my interviews with Stephen Hay, Rachel Andrew and Jeremy Keith, and with Brad Frost and Andy Clarke.
As a member of the organizational team, I always had a reason to talk to participants and to get to know many interesting people. Meeting the Smashing community in the flesh was also great, and I hope to see some of them again in the future.
Me at the first Smashing Conference, in September 2012.
Another highlight was revealed two months after I had completed my internship at Smashing Magazine. During the summer, the editorial team was working on a new book publication titled The Mobile Book. Vitaly asked me to come up with some ideas for the book’s layout. He was aiming for a modern yet classic look that was different from the usual Smashing Books. After many drafts and revisions with the illustrators, designers and layouters, we developed a quite satisfying result. Just before Christmas, my copy of the book arrived, and I was more than stoked to find my name in the imprint. Seeing your name printed and your ideas captured in something as lasting as an actual book — or, as Jeremy Keith puts it, “an artifact of [this] time” — is absolutely amazing!
I also enjoyed my many other tasks, such as creating the eBook covers, implementing the Smashing Media website and so on. The best thing about the internship was definitely the abundance of very diverse tasks.
I am really grateful for my time at Smashing Magazine. It was a challenge I would not trade a second of. While working at Smashing Magazine, I was given a lot of freedom to find my own solutions to challenges, but there was always support and constructive feedback when I faced difficulties and got stuck. I was always encouraged to give my honest opinion and to initiate new projects. Furthermore, the various tasks enabled me to express and develop my skills and interests in very different ways.
Before starting at Smashing Magazine, I was a little concerned about whether I could live up to the high standards. But I got very positive feedback for my work and gained a lot of confidence in myself and my abilities. I am now back at university completing my degree, and my future after graduation is still completely open. However, I am now confident that I am on the right track and that the right opportunity will open up when the time comes.
Smashing Magazine is always looking for talented trainees to join the team. Usually, two positions are available starting in May and October for six months. I certainly enjoyed my time in Freiburg, and if you are looking for a great experience, too, apply now!
© Melanie Lang for Smashing Magazine, 2013.
]]>Forums user McAsh wondered how they might code up a design in which there was a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc).
The post mockup was this:
I coded up one way to do it which works, but isn't quite perfect. I figured I'd post it here and you all could chime in with better ways if you can think of them.
If the background was a solid color, this would be fairly easy. Apply the lined background to the subhead and center a span in the middle with a bit of padding and a background color to match the solid background. We don't have a solid background color here. Perhaps some trickery using the same background image but fixing the background position would work, but I didn't go there.
Instead, I used the ::before and ::after pseudo elements to create the left and right set of lines. The text is still in a span, which is relatively positioned. The right set is a pseudo element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent.
The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}Example:
Check out this Pen!
There are two things I don't love about this.
Neither are that huge of a big deal but little things that probably could be cleverly fixed.
Line-On-Sides Headers is a post from CSS-Tricks
]]>In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about JavaScript Tours and Pull Quotes.
Trip.js
http://eragonj.github.com/Trip.js/
Pull Quotes with HTML5 and CSS — miekd
http://miekd.com/articles/pull-quotes-with-html5-and-css/
jQuery Pin
http://webpop.github.com/jquery.pin/
Using SVG | CSS-Tricks
http://css-tricks.com/using-svg/
DevTools Extensions For Web App Developers
http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/
Almost Flat UI
http://websymphony.net/almost-flat-ui/
Practical Tips from Top WordPress Pros
http://wp.smashingmagazine.com/2013/03/20/practical-tips-top-wordpress-pros/
Zurb Foundation 4
http://foundation.zurb.com/
The post JavaScript Tours and Pull Quotes | Treehouse Show Ep 35 appeared first on Treehouse Blog.
]]>Like the little handle on range inputs. You can style that, but it's different in all the major browsers. It's either ::-ms-thumb, ::moz-range-thumb, or ::-webkit-slider-thumb. Obviously an area that would benefit from standardization.
Direct Link to Article — Permalink
List of Pseudo-Elements to Style Form Controls is a post from CSS-Tricks
]]>