News for hackers. Stuff that matters.
Re:Brackets, a code editor by heydenberk on Thursday February 06, 2014 @05:42PM (#7193412)
>> Live HTML Development >> As you code, HTML changes are instantly pushed to browser without having to save or reload the page.

Who actually writes non-templated HTML any more?

Re:Brackets, a code editor by tinco on Thursday February 06, 2014 @05:48PM (#7193441)
Frontend developers? Isn't a very weird workflow, you first design your page in Photoshop or whatever, then you build out the page in css and html, then you break the page up into templates to be integrated in your app.

If you're a full stack dev, then it might happen that you do all these steps at the same time, so you never work on pure html, but if you're not I imagine this is how you work.

Re:Brackets, a code editor by Tloewald on Thursday February 06, 2014 @07:29PM (#7193949)
We use bog standard HTML with custom data- attributes (whose intention is pretty much obvious) and our binding library automagically populates it. So the learning-curve for people joining the project is basically... "do you know HTML?"

Want a span to show the live content of foo.bar.baz? <span data-source="foo.bar.baz"></span>.

Re:Brackets, a code editor by michaelbuddy on Friday February 07, 2014 @10:24AM (#7196604)
great idea here. love it. is there an example out there of these 'bindings' that somebody with strong html / css but weak javascript skills would be able to grasp and implement into a site?
Re:Brackets, a code editor by sourpoi on Saturday February 08, 2014 @03:17AM (#7200664)
Re:Brackets, a code editor by Tloewald on Saturday February 08, 2014 @11:35PM (#7204392)
Our system is intentionally much simpler than this -- the idea being that if it becomes like a "language" people will do stupid things in it that need to be debugged.
Re:Brackets, a code editor by Tloewald on Saturday February 08, 2014 @11:34PM (#7204389)
We're supposedly open-sourcing our codebase (it's for a Federal government project) but the process of deciding the licensing seems to be interminable (yes, shocking I know).
Re:Brackets, a code editor by jenius on Thursday February 06, 2014 @07:23PM (#7193916)
I've gotta agree with you here. If you are a professional developer and are still writing non-templated html, I'd be surprised. I think it's crazy that all these tools keep coming out for handling vanilla html and css, while the development community is busy shooting miles ahead with far more powerful preprocessing. I'm working very heavily on convenience tools for advanced dev workflows, hopefully these will bring a similar level of excitement for devs who preprocess.
Re:Brackets, a code editor by mogosselin on Thursday February 06, 2014 @10:38PM (#7194679)
On big projects I work on, front-end developers start from the PSD and do the HTML first (they just do some templates, not the whole site obviously).

Then the JS is either made by them (depending if they know JS) or by a JS specialist.

Then the programmers integrate the HTML in the "code/templates" (CMS, whatever).

We develop in different web technologies and front-end developers don't learn how to code server side code (either they don't want to, don't have time, whatever).

Depending on the templating engine and programming language and final product (CMS, etc), they can or cannot edit or fix their CSS right in the final code.

Sometimes they need the programmers to tell them where the templates that they want to change are, etc. Imagine a big projects with hundreds of different templates made by a programmer, the front-end dev doesn't necessarily know where to change his stuff and if he's going to cause a problem elsewhere.

Re:Brackets, a code editor by Raphmedia on Friday February 07, 2014 @08:30AM (#7196131)
Front-end developer here. Yes, that is what I do. We have some really talented developers who design some awesome images of what the websites should like. (Hopefully as a photoshop file. Or at least, something that let me get exact measures and layers.)

If it's a small project, made to be beautiful, they will do the whole design of all the pages. If it's a huge Agile project, they would instead give me a style guide.

Then, I quickly turn everything into reusable HTML blocks and do the CSS (using LESS). If needed, I'll make custom jQuery (or pure Javascript, but that never happens, really) modules for the template. It's very quick. A full page templates takes me about 1 to 2 hours, if it's very, very complex I may take up to 4 hours.

While I'm working on those, the back-end guys are working of making the CMS work correctly. Sometimes, I give them the templates before they program the page, but most of the time I end up attacking the page after them. I then simply use the building blocks they gave me (and turn all the divs they made into the right HTML5 tags).

We use a lot of different CMS and some of the websites have custom backend (no CMS). We develop in both PHP and .Net.

I know PHP, and I'm comfortable developing Drupal websites. However, I don't get a lot of fun making the backend. The only time I would do it if we are working on a one pager or something like that, since it's faster if I do both back and front for project that are not complex.

I prefer working on the front-end. And I do mean front-end development. Not simply mindlessly slicing a PSD into an HTML page or adding content from a Word document.

Re:Brackets, a code editor by imdsm on Friday February 07, 2014 @03:49AM (#7195366)
Who would think it? That someone would do something differently to us? That some people out there, on the internet, have different workflows than us.
Re:Brackets, a code editor by ryan-allen on Thursday February 06, 2014 @07:55PM (#7194094)
I'm sure it wouldn't be a stretch to write an extension for Brackets that allows you to handle templates more effectively.

On another note, you'd be surprised how many people are still doing pure vanilla. Preprocessing isn't usually part of a beginners toolchain, you gotta learn the underlying part first before you start grafting on the preprocessors used in larger projects.

Re:Brackets, a code editor by ianstormtaylor on Thursday February 06, 2014 @08:51PM (#7194338)
We've actually stopped using all pre-processor for everything we do for Segment.io[1] as well, and we're not beginners.

One of the biggest problems with them is that you immediately eliminate a huge portion of the people who are willing to contribute to your code if you select a pre-processor they aren't fond of. It's fine for app internals, but for sharing small[2] open-source[3] components[4] it's not a good idea—whether it's Sass or CoffeeScript or Jade or whatever.

The other problem with CSS pre-processors specifically is that they only work well with the monolithic app mindset. All of your CSS files inside the same `styles` folder, and all of them required by the "top of the monolith" `main.sass` file. Instead, using something like component[5] you get true dependency trees, so you don't have to go monolithic anymore. And trying to get Sass to work across a component-ized codebase is a real pain. Instead we use Myth[6] to "post-process" the built CSS.

Pre-processors are a leaky abstraction that comes back to bite you at random points the way all leaky abstractions do, and the ways are usually hard to foresee and thus hard to argue against when the benefits seems so clear.

[1]: https://segment.io

[2]: https://github.com/segmentio/toggle

[3]: https://github.com/segmentio/sheet

[4]: https://github.com/component/tip

[5]: https://github.com/component/component

[6]: http://myth.io

Re:Brackets, a code editor by myhf on Friday February 07, 2014 @12:35AM (#7194966)
Preprocessors aren't incompatible with components. I usually structure my frontend code like

    components/
        widget-one/
            template.html
            script.js
            style.css
        widget-two/
            template.dust
            script.coffee
            style.styl
And then the style file for a component is completely scoped to that component's main class:

    .widget-two {
        .widget-two-control { color: blue; }
    }
The build script can handle each component separately and stitch the results together. Just because SASS/compass encourages a monolithic style doesn't mean it's necessary.
Re:Brackets, a code editor by ianstormtaylor on Wednesday February 12, 2014 @12:05AM (#7222613)
Yeah, the problem comes in when you want to share pre-processor variables between your components.
Re:Brackets, a code editor by willtheperson on Thursday February 06, 2014 @07:26PM (#7193933)
Front-end-wise, if you are jumping between projects, it's often easier to just build a static 1page of what you are trying to build instead of having it run through some kind of framework.

If you have an established project, then sure, you probably already have your views setup.

It would be really cool if Brackets could detect that you are working on a partial and inject that back into the page somehow

Re:Brackets, a code editor by mikeryan on Thursday February 06, 2014 @05:54PM (#7193475)
There's still a lot (a lot) of folks (non-startups) who don't do everything soup to nuts so they outsource things like the design and development of the front-end to outside shops. These folks tend to build out the HTML without any CMS integration then delivery the full HTML for the client to integrate into their CMS/tools/templates.
Re:Brackets, a code editor by scott_karana on Thursday February 06, 2014 @05:47PM (#7193428)
Template writers? Proof of concept websites? Quick-and-dirty one-offs?
Re:Brackets, a code editor by specialist on Friday February 07, 2014 @10:20AM (#7196586)
"Who actually writes non-templated HTML any more?"

Me.

My martini untemplate engine is a code generator that inputs HTML and outputs Java.

This creates a one-way flow of work. Designer creates the HTML, I create the backend. When the design changes, the backend (e.g. data binding) breaks during the generation and compile steps. Not in the browser.

Martini isn't ready to demo yet. It will be open source. But documentation and examples take more time that I have right now. Sorry.

Re:Brackets, a code editor by dubcanada on Thursday February 06, 2014 @06:16PM (#7193591)
Me, and all my coworkers.
Re:Brackets, a code editor by jmnicolas on Friday February 07, 2014 @02:04PM (#7198059)
Maybe desktop developers that want to learn web development from the ground up ? (my case ;-)

After a really bad encounter with Javascript 7 years ago I chose to forego web development completely.

Now I have a web-app project and I discovered with horror that not only Javascript is not dead, but it's even more prevalent than before !

I'm gonna have to suck it up and start learning it, but maybe not to the point of choosing Node.js as my server side technology :-)

Re:Brackets, a code editor by reeses on Thursday February 06, 2014 @06:21PM (#7193625)
I find it much easier to pixel-hawk and correct layout issues when I save an offensive generated page and then edit it in an HTML editing environment (Lighttable is good for this with JS/CSS weirdness as well).

I can do the same with the various web dev plugins, but I rather like being able to save the intermediate result and not have to worry about a refresh changing the underlying state of my view.

Re:Brackets, a code editor by quadyeast on Thursday February 06, 2014 @07:49PM (#7194054)
What kind of templates do you mean? e.g. Wordpress? Underscore? Bootstrap?
Re:Brackets, a code editor by idProQuo on Friday February 07, 2014 @01:11AM (#7195050)
Jinja2, ERB, Haml, Jade, etc. Any system where the thing you're editing could not be immediately served as an HTML file.
Re:Brackets, a code editor by BlackDeath3 on Thursday February 06, 2014 @05:50PM (#7193447)
Any time I've ever written HTML (which hasn't happened often) it's always been in a text editor, raw. Then again, I'm clearly not exactly a web developer.
Re:Brackets, a code editor by sejje on Thursday February 06, 2014 @06:19PM (#7193611)
That's a different thing.

Templated, as in "this html isn't coming from a rails partial" etc.

Re:Brackets, a code editor by BlackDeath3 on Thursday February 06, 2014 @06:20PM (#7193618)
I think I'm in over my head now. I've never even used Rails and know almost nothing about it.
Re:Brackets, a code editor by doginabathtub on Thursday February 06, 2014 @06:36PM (#7193694)
Templated, I think, as in a page is not using PHP or some other language to pull content from several files or a database.
Re:Brackets, a code editor by BlackDeath3 on Thursday February 06, 2014 @06:59PM (#7193799)
OK, that makes sense to me. Thank you.
Re:Brackets, a code editor by coldtea on Friday February 07, 2014 @02:16PM (#7198121)
>Who actually writes non-templated HTML any more?

For one, everybody who designs the original HTML to be templated. Some start with a PSD and then do a full HTML page, others start directly by doing a full HTML page. Only AFTERWARDS its made into a template.

Second, ever since Enhydra (Java) and TAL (Zope) at least, there have been template engines that use full, plain, HTML code, marked with special attributes (repeat, inject value here etc).

Re:Brackets, a code editor by ahuth on Friday February 07, 2014 @08:03PM (#7199836)
Brackets is actually a very good code editor. I never use live preview.

I do, however, do rails with it. This includes everything: ruby, erb, CSS, sass, JavaScript/coffeescript, and even handlebars.

Live development is it's least useful feature (for me), and Brackets should get more credit for the rest of it.

Re:Brackets, a code editor by meerita on Friday February 07, 2014 @03:48AM (#7195361)
I do code in an separate enviroment. Only HTML/CSS and LESS. No assets compilations, no rails requests, just heel in all his power. It's confortable and faster than anything and it's a good way to develop in an abstract way.
Re:Brackets, a code editor by interstitial on Friday February 07, 2014 @03:57AM (#7195395)
Why experiment when frameworks make hard-coding so sexy?