Does anyone here has an advice for me how I can go with very limited html & css knowledge to build my website with several pages (the visual wireframes all exist) in the shortest time in Meteor? The JS part isn’t my worry as learned that through the backend development already. But the frontend development is completely new to me.
Backend is already programmed in Meteor and I need to get the UI done quickly to then work on the pub & sub, reactivity etc. I was looking at visual web development tools like Rapidweaver or Sparkle but none of them seemed to help me getting from a static page to an interactive one with Meteor specifically.
I also looked extensively (tried for more than 12h) at Meteor Kitchen (www.meteorkitchen.com) but also that turned out to be not suited for my level of knowledge as it still requires good understanding of html & css as well as one of their UI frameworks used (Bootstrap3 or Semantic-UI).
While I like how I can quickly get the “stacks” together from Stack3 in Rapidweaver it seems a dead-end as I only get a more or less static website which I still need to “convert” to Meteor to make it fully interactive/reactive and working with my MongoDB backend. Is that correct or am I missing something here? Surely some of the themes look beautiful and they also support fully responsive ones (which is eventually needed for my app) like eg Foundation but as I understand that is built on Angular.js which again would require basically a re-write into Meteor.
I hope those that went along the same problems/challenges can advice me. I know the typical way of becoming a full-stack developer is rather the other way round, a frontend dev learning the backend (which is a lot easier). I just completely struggle with the nested approach of html which has no resemblance to any programming language I know.
Best for me would be a web design UI tool which offers a visual approach like Xojo (https://youtu.be/8krXsdcQyd8?t=1m15s) to build the web app and that would also allow for code updates that would be immediately reflected in the web design tool (so it would allow two-way editing).
Sorry for the long post but I want to give as much information as possible so that we don’t go through a long list of questions and answers (along the likes of “have you tried this, why don’t you do that”). Thanks in advance and looking forward to your responses!
Yes, read most of it and it’s indeed absolutely amazing that he spend more time writing this series of posts rather than to develop the app. But what stops me from following his approach is that he uses Rect.js which to me who is already struggling with html & css is an even bigger hurdle than to try to learn frontend development with plain old Blaze first.
Surely some of the themes look beautiful and they also support fully
responsive ones (which is eventually needed for my app) like eg
Foundation but as I understand that is built on Angular.js which again
would require basically a re-write into Meteor.
Foundation has two products right now. Foundation 5 (called Foundation for Sites) and Foundation for Apps. Foundation 5 is a website oriented CSS framework with typical JQuery dependency. Right now they’re working on its new version, Foundation 6.
Foundation for Apps is a separate product, more or less tightly coupled with Angular. What’s interesting is that people who actually know Angular, don’t really use Angular-related Foundation for Apps features, but try to fit Foundation for Apps into their own code instead. So while some of Foundation for Apps features are real killers, the whole product failed in my opinion.
Personally, I use parts of Foundation for Apps features in my Blaze code, but I can’t recommend this approach for people with limited HTML&CSS knowledge.
Thanks @brajt, I just read on the FB page of “Learning JS properly” that my approach might lead to disaster (or rather a complete waste of time). Someone else tried the same and his well organized piece of html, css and JS turns into “a bloody, messy page”. To quote him:
“Basically, even by simply copying-pasting the files into a directory, or by copying-pasting the files contents into a single big file, the result is a bloody messy page, but I can’t understand why, since the assets are loaded in the correct order, yet, everything is broken: the CSS are apparently ignored, the JS are ignored.”
His question is further answered with this:
“Meteor works on templating principle. You cannot just copy html and get it show up.
Suppose you have a navbar, you got to make a template and render it on the main template.
If it has events, than you got to define an event in that template in js file example: template.templatename.events ({your event logic})”.
So what would be the best (and still fastest) approach for me?
All these “what you see is what you get” website creators are fine as long as you use them for prototyping, not for actual development. To make a good website you’ll need your share of HTML & CSS, with CSS Framework easing a lot the amount of stuff you need to master.
I also looked extensively (tried for more than 12h) at Meteor Kitchen
(www.meteorkitchen.com) but also that turned out to be not suited for my
level of knowledge as it still requires good understanding of html
& css as well as one of their UI frameworks used (Bootstrap3 or
Semantic-UI).
Yeah, I’d say 12 hours spent on learning Bootstrap, Semantic UI or Foundation would be a much bigger gain. If you don’t know HTML&CSS with all their weird behaviours in different browsers or in different devices or just in the context of different HTML elements, going with one of CSS Frameworks is the best you can do.
If it has events, than you got to define an event in that template in js file example: template.templatename.events ({your event logic})
But you do know Blaze, right? If yes, then I don’t see a problem here.
Even if these are just static pages, you should just paste them into templates and than render these templates based on route.
If you have wireframes and dont know HTML/CSS so go to learn it, or hire some1 on any of these freelancer sites to make html/css for you.
But still you NEED to know basics if you want to work on frontend.
Hi @dax, no, my problems already start with the skeleton. How to put up a navbar, do side menu if needed, get the user-accounts modal dialog positioned correctly (the whole concept of how elements are showing up at the right spot is not clear to me - when I use a visual web designer tool it’s easy to position things but like I wrote the nested boxes of “div” are a mystery to me.
I started with Homer for a couple projects. There is a Meteor version. Saves you a whole metric shit ton of time. Take a look at all the interface components. I found it can really accelerate your development time by working with a theme.