Blocs and inserting code from other sources

A few years ago I used Freeway for web design, but if you ever needed to insert code from another source it took nothing to break the formatting in other parts of the page.

I was just wondering how well separated and protected the various Blocs are if you want to insert code that is not from the Blocs app itself? Let’s say I wanted to include a countdown timer or some sort of widget with a local weather report. Is this likely to be a problem?

Try something in a new file, you won’t break anything, as long as the HTML portion is just plain HTML.

You can add the HTML portion via the HTML Widget Bric which needs clean standard HTML code (you will see the warning). Then add the other related CSS & JS libraries, classes, code resources, etc, via the Page Settings. Then it’s all depending on the setup and usage of whatever you are hoping to use.

OK I’ll try this at some stage. I have an old site that was hand coded by a friend with a beautiful gallery slideshow, but it’s not responsive. I haven’t updated the site for ages because I’ve never found an alternative with the same sort of polished smoothness that will work properly on mobile etc.

I was going to look around and see if I can find a suitable image gallery option that could somehow be used in this way on a Blocs site.

@flashman
Since Norm gave us the beautiful possibility to add javascript at the bottom and add our own CSS and JS in the header of the pages everything is possible.
What a great program it is :smiley: BUT, you need to know what you are doing, ( CSS .JS basics) if not, keep away.

My goal is always to keep .blocs file like blocs is exporting them and keep the .blocs file always editable and clean. (Meaning NOT to edit after export.)

If you check out this website, ( its a 100% .blocs file ) you see, I inserted a bootstrap-datepicker field and the one field checks the other one as well to have the date updated.
This works pretty strait forward.

http://www.pmd.gr/datepicker

the source information about the fields and how to use it you can find on this website
http://www.eyecon.ro/bootstrap-datepicker/

there ar many gallery scrips around, just give it a try
good luck

Sandy

1 Like

Thank you @sandy that’s very informative and I’ll have to look at options here. This is not something I have had to try myself, since using Freeway and I remember that was nearly always a problem.

I am hoping that the different Blocs are essentially in their own compartments so that coding from another source can be imported and effectively isolated, so it does not cause problems elsewhere on the page. Over time, as Norm creates more Blocs with different functions, we should be able to build many sites without ever needing to import code from other sources.

What would happen in Freeway Pro? Just curious I never used the app.

The only thing in Blocs that may happen regarding interference, would be trying to use improper maligned HTML that it does not support, vs the clean HTML that it requires. Or perhaps using 3rd party CSS or JS that has namespace conflicts / specificity with Blocs CSS, using the wrong order in which 3rd party libraries are loaded, etc., typical issues even in standard development.

Overall however you should be fine, if you come across something let us know I would be interested regarding this and what would become an issue.

There is an abundance of commonly used open-source CSS and JS libraries that could be utilized, to allow further features via Blocs / Brics. Thus allowing the core of Blocs users whom don’t wish to interact with code directly, the ability to build more feature rich sites.

Time will tell, but I am sure more will come eventually @norm.

Freeway was pretty good as long as you used Freeway’s own generated code, but if you found something that it couldn’t achieve directly it would easily break the page formatting. Rapidweaver with Stacks is much easier in that sense because the code is isolated into different parts, so even if a plugin does some ugly things it’s pretty rare for it to cause formatting problems on other parts of the page.

I asked the original question just to have a sense of what is possible with Blocs and it appears to be fairly flexible if you have the right knowledge.

1 Like

Ok - thanks for the insight, I never used it. Sounds like you are trying out a lot of apps since. :wink:

I always struggled with Freeway and I’ve worked with Rapidweaver for a couple of years, however that has been very frustrating recently, due to a series of rather poor updates that have made it practically unworkable at times. Rapidweaver can also be very slow and I just have more faith in the general direction of Blocs at the moment.

1 Like

@Flashman: Dito

1 Like

Like Flashman and probably a lot of others I am coming to Blocs from Softpress Freeway. I am finding my way slowly but beyond the basic blocs and bricks provided for making a practical working site - I struggle with code - my background is graphic design so I can do the nice logo and prepare nice images form photoshop etc.

All along, even with Freeway I had problems getting external add ons to work - it was always a battle to get things to work.

What I mean is, if I need to add something extra that involves adding code into the html brick BUT it is where the other parts go and identifying them that is the problem.

For example - if I wish to add a countdown timer for an event or end of offer I am completely lost.
There is html code that will go into the html brick - that is fine but there will be code that need to go into the /head, jQuery, etc.

I recently took about a week with a lot of help on this forum to get a responsive table to work.

I do like Blocs but also need to be able to add some blot ons with a bit of ease. A tutorial is what I need.

So, how for example would I add a countdown timer? If I had a practical example of how to get it to work in Blocs perhaps I could start to understand how similar things should be placed. Can anyone help out please.

Trevor

1 Like

I abandoned Freeway a couple of years ago when I saw the writing on the wall in terms of development and actually deleted it from my computer over a year ago.

There were very few Freeway sites I found graphically exciting and a large part of the problem was the way it choked when you introduced any coding from another source. The timer is a very good example of this, but it could be any number of features we take for granted on websites these days.

I agree 110% with Trevor that the lack of tutorials and documentation is a major hurdle towards developing advanced sites in Blocs if you come from a non coding background like Freeway users. I am reluctantly redesigning a site this weekend in Rapidweaver with Foundation that I had originally hoped to do in Blocs. This is no fun at all but at least I know how to do the job and if I hit a hurdle there is extensive online documentation with examples.

One of my goals for 2017 is to start developing small sites for clients using Blocs. These are generally local businesses with very low budgets, where the slowness of using Rapidweaver has become a problem. It would be a real game changer if I could produce small attractive sites in hours rather than days.

I just searched the web for a html counter and found several sites that generate the code for you. It’s really a simple copy and paste the code in the Bloc.

Create a new Bloc, say a simple one with just a centered area. Put a html brick widget in the Bloc. Then look to the sidebar and you’ll see edit code. Click on the edit code and a box will pop up. This is where you will paste the html counter code.

Casey

@Flashman I think once you get used to Blocs you will be able to make the type of sites your talking about. I’ve used Blocs from the beginning and it’s come a long way. I think there’s such a fine line on giving the advanced features some web designers want and the simplicity that other need.

There are a lot of good examples of great looking websites designed using Blocs.

Like any other programs, it’s only as good as you know how to use it. I’m sure @norm is working on creating better docs with examples for up coming releases. Until then we just have to help each other in this forum.

Casey

1 Like

One of the major setbacks on documention right now is the speed in which Blocs is advancing. It’s changing extremely fast in comparison to a lot of the apps in this space, this should start to calm down after 2.4, at that stage the docs will get a huge, well needed boost, mainly because they won’t go out of date at this stage.

2 Likes

I totally agree Casey. The big limitation on my developing sites with Blocs is me rather than Blocs itself, but it’s been a slower start than expected, primarily due to the lack of documentation.

As an example, if I want to add 5 points of padding to the left side of an item in Rapidweaver I click the padding option and add 5 points as shown in the screenshot. With Blocs I search on Google and hope I’ll find the answer on the Blocs website.

In some ways it’s more of a challenge moving from another design app than starting from scratch, due to past habits and preconceived ideas, but that is all the more reason why good documentation is needed if you want to bring over users from competing software.

I’ll get there in end and Blocs is clearly improving all the time. Norm’s point about the speed of progress is part of the problem at present, since I can go to Youtube and find a review of the features on Blocs 2, but the interface and options are radically changed in 2.3, so I guess this should be viewed as an early teething problem.

Just to be clear, I am not criticising the pace of development with Blocs, just slightly frustrated at present by my inability to find the information I want. All my comments are intended as constructive feedback.

@Flashman I came from using Dreamweaver and was looking for another program that made mobile friendly websites without using Wordpress. I have the Adobe Photographers subsciption but just can’t justify paying for the whole Adobe Creative Suite.

I work with small local businesses and non-profits that really can’t afford the high dollor website. I have a stable of about 10 sites… This year a took all of them and redid them using Blocs. My customers were very satisfied with the updates. (still working on updating one)

I’m retired so the money is not a big issue for me. It’s more about helping people that know very little about designing websites. Some of the non-profits wouldn’t even have a site.

With @norm introducing classes the program has really grown. The simple things that may be in the other programs are accomplished in Blocs using classes. Very powerful, yet can be frustrating for a non programer.

I hope you stick with Blocs, if you get stuck the easiest way to get help is just post in the forum. There are a lot of users that are always welcome to help.

Here’s a couple of websites I’ve made with Blocs.

Casey

1 Like

Thanks for your input guys. I do believe that Blocs is a great app. :grin:

I did rely on the Freeway forum for a lot of help and it is good to know that others can and do take time to help those of us with less knowledge in the code department.

I too have a few sites to repurpose from static to responsive. I am pretty confident that I will be able to do this with Blocs. One thing I do miss is the folder convention for pages. A site with a few pages: home - about - contact - services etc is no problem it is just when you get to site that has lots of pages in different categories then the file system helps loads.

Meantime I could, I suppose use a method like accessories_a.html, accessories_b.html etc. unless anyone has a better solution for naming?

casey 1823 - thanks too for your input - would a countdown timer be as simple to paste just into the html brick? Could you post a link to an example please.

Any I have seen have html, a “call to”, jQuery, css or scripts etc. a different language to me - but I am willing to learn and experiment!

What is need is just a nice looking, clean countdown for days, hours etc. that I can use for end of special offer etc.

I am currently just experimenting with solutions to things I will need for a few upcoming sites. As a given - I do thank all the Blocs users on here for help - and to @norm thanks for your dedication to what is already a good app and will improve. Norm will always check when he can or offer advice which is top rate after sales!

Looking forward to any comments!

Trev

@casey1823 It’s far too premature to suggest giving up on Blocs at this stage. I haven’t made a serious attempt at building a single site yet and I’m confident that given time it will mature into a very capable design tool.

At the moment I don’t have a lot of time to guess or search for how things should work and I just want to complete any sites quickly, so any tutorials and documentation will be very welcome when they arrive.

I don’t want to create the impression that the grass is always green elsewhere because that is not the case. There are certain performance issues in Rapidweaver and key plugins that remain unresolved for year after year that must have cost me countless hours in lost productivity.

@flashman Select the object, type a class name in the class field (sidebar) ‘my-special-pad’ or whatever, It will create a class tag, now click this tag and the class editor opens, bottom of the main metrics options is the padding and margin. Select the areas you want to define and input values.

Now when you need that same style again on another element just enter ‘my-special-pad’ in the class field and those styling options will be added to the next object. Blocs uses classes as it’s much more powerful and means they can be used on multiple objects.

All the good customisation options come with classes. Just think of them as re-usable styles you need to give names too in order to identify them.

Stick with Blocs, it may be a little more fiddly in this respect but its actually teaching you the basics of web design by forcing class use. It’s extremely simple once you get the basic hang of it and it’s how front end devs build sites so it’s knowledge you can apply to coding sites if you move to that stage. Using Blocs as your spring board as many more advanced users do, then building the code out more in a code editor.

2 Likes