I keep seeing some pretty wonderful effects over at https://codepen.io where code is posted by developers and made freely available. In theory it should be very easy adding this in Blocs, allowing users to go far beyond the basic features, but in practice I am struggling.
The examples invariably include some JS, CSS and html. I’ve tried adding the JS and CSS as page attachments, then added the html to code widgets inside structure blocs, hoping to see the expected effect gloriously reproduced in the desired location, but it never works… At best I only see partial changes.
Is anybody using Blocs familiar with introducing external code like this and making it work?
I do this all the time although I never add the CSS and JS as page attachements.
What I do, is that I add the CSS styling in the Page settings under Header and the JS settings under Footer. Of course you need to add the and the tags (sometimes not… just need to check).
Then you add the HTML code in a code widget.
But sometimes it is easier to recreate with DIVs the actual HTML structure - it all depends on the pen. Also some pens are written in LESS or SASS so you need to tidy them back to CSS (if available).
This is maybe not the correct procees but it has worked for me so far. You obviously need to ajust some coding in most cases.
Thank you @MDS I shall give that a go because I feel like I’m only using a small fraction of what could potentially be done with Blocs right now.
Although there is help documentation for this as I linked to above, it suggests adding them as header attachments and that isn’t working for me at all so far, plus there is no example showing how it works in practice with an actual implementation.
The help documentation has always been rather minimal with Blocs, whenever I want to learn something new and it would benefit from some real world examples, showing how things work in practice. This would save users a lot of time, while no doubt cutting down on support requests or repeated questions on the forum.
It’s similar with the page on custom data attributes that is also linked to external code, but gives no real idea how it can be used in practice. So far I’ve only used it to add title tags on links, but no doubt it is far more flexible and powerful. Could it be used to add structured data? I have no idea.
My understanding has always been that Blocs “let’s you create responsive websites without writing code”, just as advertised.
This is true - you can have a nice site without any coding, but like any software you need to learn how to use it and I feel that the documentation is okay for that purpose.
People always want more, such as possibilities to customise, and that’s fair enough.
However, they buy ready-to-wear which they want to appeal as haute-couture at no cost in terms of effort.
Blocs as I see it, not only provides the ready-to-wear with no coding but also enables another audience who want to take it one step further to achieve haute-couture and this is what I believe makes Blocs such appealing app.
For haute-couture results, the documentation may not be sufficient, however haute-couture is intended for a different audience ready to make the effort such as learn a bit of coding or already have a coding background.
I am sure that for coders, Blocs does not have that many secrets and the opposite is true for non-coders.
That said, if you have a pen you’re interested in implementing, let me know and I will give it a try.
If successful I’ll then be glad to explain how I implemented it.
My Two cents:
This seems to be the case more and more. I wish users, especially new ones, would take the time to learn how to use Blocs as a non-coder. It’s very powerful. That said some of the more experienced designers want and need more. I’ve already used several of your header styles.
As I think about all the requests on the forum for these haute-couture results I like to step back and ask myself 1. Is this really needed?
2. Does this make my site better for the end user?
3. Will my site suffer from not having this?
I’ve been using Blocs from version 1 and as it has progressed, so has my skill level. That said I’m always learning more.
I look at it this way. You have apps like Rapidweaver where you can be really unskilled but throw down some dollars to buy a stack plugin for a pretty effect that makes you look clever. That side is not sufficiently developed as yet in Blocs, so we are forced to look at external sources and add code. I am not opposed to that, because I think it will make me a better designer. All I’m asking for is documentation that makes this step easier to understand.
The issue I see with Rapidweaver is that you are constantly buying new stacks and have to make sure they are always up-to-date and continuously maintained compatible with every new version and at the same time do not really learn or improve your own skills.
I think that the forum at least as I like to imagine it, is to share also some of what we learned and try to assist others in improving their own skills.
To be honest, I would not like Blocs to become as Rapidweaver, with so many plugins. I had rather @Norm continue to provide new elements such as recently the custom attributes. Nevertheless, I agree that some more documentation for those who want to give that extra effort would be helpful. That said, I would not be surprised that if @Norm had any statistics on the level of use of the online support documentation, it would be little.
One thing would be to start sharing customised blocs or brics… which I intend to do in the near future.
I agree completely about RW being a bottomless money pit of endless expenditure and I spent a few years going down that road, often purchasing products that turned out to be buggy or cause conflicts.
The instant leap towards stacks for every feature tends to hold users back over the longterm, instead of encouraging them to learn more, so I always think that spending time with Rapidweaver teaches you a lot about how to use stacks in Rapidweaver, though not much else. It’s also worth pointing out that Stacks itself is a third party plugin you have to buy.
On a broader note, I have no objection to third party developers bringing in genuinely useful brics or a CMS for example and charging for them if it solves a real problem. I think the aim is to make Blocs very capable by itself and I doubt we’ll ever see 1000+ commercial brics, because so much can be done via custom classes.
To repeat my earlier point, all I was really asking for is better documentation to assist those who want to go a step further. The simple fact that you have had to add external code via different means than shown in the help docs shows this area needs improvement. If it had worked for me as described I wouldn’t have needed to ask on the forum.
Custom blocs will become incredibly powerful and we’ll be able to save specific configurations easily for future use. I see that as ultimately more useful than template pages.
The fact that I implemented it differently than the help docs does not mean that they need to be improved. It is not that I have had to but more in the lines that I find it more practical this way for the pens I wanted to implement.
But again adding external code is already in my view part of the haute-couture process.
Anyway I believe we all agree that there is space for improvement with the support documentation. In any case let me know if you need help.
Thank you I will. I basically treated Blocs 2 like a learning process, simply to see how Blocs works in preparation for Blocs 3. The new version is so much more capable that I want to take off the training wheels and raise my skills to produce some much more advanced websites.
Pens can have external libraries as dependencies. Sometimes it’s not obvious that a pen has a library dependency. If it does that library must also be included in Blocs… except jquery of course.
A Pen’s CSS is often written in SCSS or Less. You can use the dropdown menu to select the compiled version. Browsers can’t read the preprocessor files, these get compiled before adding them to your website.
CSS in Pens will often contain some styles that you don’t need. These styles may be used for the presentation of the demo, but may not make sense when you add them to you site. This is more common than you might think. You are trying to get core functionality and styles sometimes that takes a bit of selective omission.
General Tip:
If you’re not debugging with Chrome Developer Tools or similar you should. You’ll know if your scripts and stylesheets have actually loaded and if you have js errors and conflicts.
I can see I’ll have to throw myself into this and just play around to see what works. It just seems like a goldmine of fantastic resources if you learn what is involved and how to make some adjustments, so it works in Blocs.