The simplicity and scalability of PW for front end dev?

[kathep]

Hey all

I'm on the search for a front end dev workflow that is as dreamy to use as PW is for backend stuff. Call me picky, but I am not into the div-bloat of Bootstrap and Foundation, especially for simple sites that don't use much of their functionality.

I've been playing around with a new front end dev software called Blocs. So far, I like it. It is based on Bootstrap, but simplifies the code, and adds a drag-and-drop UX that is very nice. Also, it seems to be hard to make ugly things in this dev model. Always a good thing

I tried Macaw, and really wanted to love it, but just couldn't get into it.

I'm curious... has anyone else tried Blocs in combination with PW?

And if not, what is your preferred front end dev of choice for PW installs?

In a perfect world we would all hand code our sites, but there are so many great lazy front end tools (I'm looking at you @Joss ) that I do this less and less.

[renobird]

Hi kathep,

I haven't tried Blocs, but it looks nice. I've been keeping my eye on Pinegrow.

I think with either of those it would be pretty easy to design your static pages and then hook the HTML/CSS/JS up to ProcessWire.

[pwired]

Don't learn the new way of the day. Stick with 1 worthy system, became specialized in it

and you can accomplish any website.

[Soma]

Alwaystrynewthingsandgetbetteroralwayadothesameandstaygood.

[renobird]

Soma, is that German?

Looks like a Finnish word actually.

[kathep]

@renobird Thanks for the link. Pinegrow looks interesting.

@pwired Trying new things lead me to PW. I will not apologize!

@soma YES.

[diogo]

Alwaystrynewthingsandgetbetteroralwayadothesameandstaygood.

Maybeyoustaygoodforsomeyears-withtimeyouwillgetlousyeven

[pwired]

Don't get me wrong, I tried a dozen cms'es that eventually made me land in processwire,

a system that saves me a lot of time and headache, compared to the others.

From what I read in your post I was referring to time.

The more you get specialized in one way/tool/language, the less time

you need to accomplish something with it. The question is: will a new way/tool

save you more time than the time you save with getting more specialized in

a specific way/tool.

[kathep]

Ah @pwired I understand. Yes, time is a priority, but so is elegance. I prefer an elegant (code) solution that will be manageable and pleasant to work with in the long run, instead of a clunky one.

For example, I have no motivation to become expert at wordpress, even if devoting myself to it and getting good would ultimately save me time.

[Beluga]

Soma, is that German?

Looks like a Finnish word actually.

I guess you mistook it for kumarreksituteskenteleentuvaisehkollaismaisekkuudellisenneskenteluttelemattomammuuksissansakaankopahan.

[renobird]

So yeah… *hoping to flip back to the original topic*

Blocs looks cool. Would be interested to hear how it goes if you build a ProcessWire powered site with it.

[kathep]

@renobird I'll keep the forum posted on progress with my front end experiment.

[qtguru]

Wow i really love the concept, I don't mind using it however I have to agree to what @pwired is saying but I will add my opinion, I don't fancy drag and drop systems, why ? most of the time the issue is flexibility, however it seems this gets exported in HTML and Bootstrap 3.0 so it would only increase productivity and save me time. But if you don't know HTML my advice is grasp that and use this to enhance your productivity. There would be times where this app won't be able to handle much specific layouts by clients but for simple site it suffices. and Yes you can use this with Processwire, Processwire is an API driven platform, it gives you the data, its up to you to reformat that data the way you want it.

This is no different than using a basic site to Processwire.

Disclaimer: The views of Sephiroth on the forum does not reflect the views of Sephiroth in real life. 

[Soma]

I think I stoped reading on when it said it's using Bootstrap 3. Nonetheless, I tried the tryout and it's not something I would use for building anything other than your typical Bootstrap layout page without knowing anything. Don't like the UI at all and it crashed after 2 min.

[qtguru]

I think I stoped reading on when it said it's using Bootstrap 3. Nonetheless, I tried the tryout and it's not something I would use for building anything other than your typical Bootstrap layout page without knowing anything. Don't like the UI at all and it crashed after 2 min.

 What's wrong with Bootstrap 3 ? its good in my opinion though am open to better ones.

[Joss]

I must admit that I have moved away from using fully fledged frameworks and instead have created myself a sass based toolkit.

So,,,,,

I have a default templates folder I use with the following jammed into it:#

scss directory filled with things like Pocketgrid, bourbon, meyer-reset, mq.scss and so on.

I have little sub directories in there where I have created some of my own starters like typography, colorscheme, a handful of useful grid bits to go with pocketgrid and some blank files for custom functions.

I then gather that lot into a site.scss file.

I also have a selection of javascript like respond.js. response.js, enquire and some other bits. 

Lastly, I have a lot of this included into head and foot scripts.

When it comes to developing, I have it all enabled, but then chuck out what I don't end up using. Because it is all individual bits, that is easy to do. So, my started templates folder is pretty well stuffed, but unless I have gone mad, the production version is cut right down.

So, that is the way I am going .... for the moment!

[LostKobrakai]

 What's wrong with Bootstrap 3 ? its good in my opinion though am open to better ones.

If you job consists of doing custom websites, then any framework which does include styles in any way is just an obstacle. You can framework functionality, but you can hardly framework design, if it's supposed to not look like each other.

[renobird]

Don't get me wrong, the last time I used any kind of tool like this was the original Dreamweaver in 1997, and I don't use any of the major frameworks.

I do like Foundation though.

I think it's important to evaluate new tools. Are they worth adding to your toolbox? In the case of an application like Blocs, I could see using it to build something small and quick. A lot of projects don't have the budget to hand code a fully custom design. Tools like Blocs could be a good alternative to using a pre-made template.

Of course, you can also invest some time in creating snippets, setting up macros or using toolkits like emmet.io in your code editor. You can build sites pretty quickly that way. Joss mentioned a few of these above — if you haven't already, checkout bourbon, neat, bitters, refills. Those thoughtbot folks make good stuff.

I agree with the idea of focusing on something and becoming an expert—but just up a few levels from the topic of tools.

Specialize in web design/development. The tools you use to accomplish that are going to constantly evolve. You don't have to trade your tools for the latest shiny new fad, but you should explore things — sometimes they aren't just a fad. 

[kathep]

@everyone wow, there are some great js resources listed here so far. Thanks for the tips. I am off to check them all out as soon as I finish this post.

@Sephiroth Full disclosure... I have been hand coding html and css for over a decade (yes, css2 was terrible - moving on...). I know what I'm doing with them. The advice to learn HTML is noted, but not relevant in my case. I know my way around js better than php, but that is not saying much I can make js work, but I can't hand code it. I'm not looking at these tools as a way to get around poor coding knowledge.

I'm looking for lazy tools. I love coding, but its not part of my main job, so I don't work on sites regularly (except my PW one, because it turns out I've become obsessed), and I don't remember every little trick I did last time to get everything to work together super smoothly.

The main things I like about these kinds of software and frameworks is:

1. They handle browser compatibility & responsiveness issues for me - excellent for lazy coders

2. Default templates on the good ones (Foundation & Blocs) incorporate a bunch of UX recommendations by default, meaning that you have to actively go out of your way to create a website that is hard to use. I value UX standards, but I don't have anywhere near the amount of time I would need to honor them in every hand coded site. Another win for lazy.

3. All the js works together all the time without me thinking about it.

4. Speed of prototyping.

Some of the things I hate about them relate to the things I love:

1. Ugly, ugly, div-riddled code.

2. Overkill on the js - all the frameworks include at least one script that I cannot imagine anyone using well.

What I like about the Blocs proposal is:

1. Fast prototyping

2. Not ridiculous code - therefore I can easily and painlessly work with it after prototyping

3. Extra hard to make something unusable - this software is made by a guy who is VERY into UX standards. And I like that. He is into them so I don't have to be 

@Joss, I like your system, but I'm kind of disappointed. From your excellent lazy field suggestions, I was hoping you would have tracked down some really lazy, perfect front end system. It sounds like you have.... but you had to build it yourself! Not my idea of true lazy 

@renobird I'm with you. I like to peruse the new offerings - sometimes you find a gem. 

[dazzyweb]

Web development is moving fast, well more than fast, lightening speed.

I think the days of hand coding everything from scratch will soon come to an end if it hasn't partly already.

Not that it is not the best way to do things but when dealing with clients it is about time and money unless the client wants to pay for something really unique and doesn't mind waiting.

When I first started out I wanted to hand code everything  even if it already existed but as soon as building websites turned into something that I made a living from then money divided by time pushed me to find new ways to be efficient and if a tool helps me to do that then great.

[kathep]

If you job consists of doing custom websites, then any framework which does include styles in any way is just an obstacle. You can framework functionality, but you can hardly framework design, if it's supposed to not look like each other.

I disagree. You can DEFINITELY framework some parts of design. Good usability doesn't mean everything has to look the same.

[LostKobrakai]

@kathep

Usability is of course a part of design, but for me it's much related to functionality than to look and feel, which is what I meant to convey. I've yet to find a framework which doesn't restrict me in styling while still doing a great job of providing solid building blocks for the web. OOCSS or inuitcss kinda go in a way which I can see really useful. But something like bootstrap never appealed to me.

[Joss]

@kathep

Well, I like to have a little bit of work to justify getting up in the morning.

My workflow kind of goes like this:

I copy my default of installation of processwire. It has SEO built in, a half built mini-blog/news system in there and the complete tool kit (that list is only the minimum, there is lots more).

I then have a folder called elements which has bits of layout ready to go - wide panels, multiple boxes and that sort of thing. It gains bits occasionally.

I start up sublime and Prepros and a web browser.

I then sit down, pour a coffee and say, "what am I going to copy and paste today?"

Then I go and write some music for someone. I think I might have concentration issues.

[kathep]

@LostKobrakai Ever heard of Aesthetic Usability Effect, Scanning, or Visual Hierarchy?

'Look and feel' is central to usability. They cannot be separated in practice (although people do it in theory all the time).

@Joss when you put it like that, I bow to your superior laziness.

[adrian]

Love your research Kathy - we might need to chat at some point I'll have to give you some background to that statement in a PM at some point when I find some time.