Scrutinizing SPARKLE (Freeway alternative)

Walter, Sparkle doesn’t have any form of plugin. On one hand it’s to be leaner and quicker by avoiding dependencies. On the other hand, app stores really don’t like plugins so that makes it tricky.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Gotcha. So any form of adding data-attributes to individual page elements would have to come through post-processing?

Walter

On Aug 17, 2016, at 10:34 AM, Duncan Wilcox email@hidden wrote:

Walter, Sparkle doesn’t have any form of plugin. On one hand it’s to be leaner and quicker by avoiding dependencies. On the other hand, app stores really don’t like plugins so that makes it tricky.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yeah.

On 17 Aug 2016, at 16:43, Walter Lee Davis email@hidden wrote:

Gotcha. So any form of adding data-attributes to individual page elements would have to come through post-processing?

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Duncan,

Perhaps I should have added a caveat to my question… For example, I recently added flexbox to a FreeWay site that I designed. You can see the result here and here. In each of these situations, the WYSIWYG aspect of FreeWay is limited. But I understand that. I’m asking it to do more than what it is built out of the box to handle. So the trade off I’m making is the visual look of FreeWay is not totally what it is after it’s uploaded, but it is close enough for my purposes.

For beginner FreeWay users, keeping things exactly WYSIWYG is important. It’s too confusing otherwise. But once people get a handle on things, the questions come… “how do I do thus-in-such in FreeWay,” often the answer is either a plugin or special code pasted somewhere.

Sometimes, that code needs to be placed in two places, in the section, or before /head section AND wherever the code is to appear. It was necessary to do this "two place pasting of code on this page for the slideshow, and on this page for the “sticky” nav menu. Those are a couple of examples of what I’m talking about. They were tricky for me to learn the first time, but once tackled, I want to be able to use such elements on future sites. I want to add to my toolbox as I gain more skills as a designer.

Another example is, if I want to add CMS bits of code with Pulse or Perch, or Inlay, can I do that in Sparkle. iFrame is not ideal when it comes to responsive sites and I’ve been trying to avoid it as much as possible for several years. If a bit of Pulse code has to be inside an iFrame for my client to edit their site I’m afraid that would lead to all kinds of problems. In freeway, I just wrapped this special code in a

all it’s own and then moved on with my day. YES, the code does not appear on the FreeWay document itself. I don’t need it to. I just need the ability to paste it where I need it. I know you were getting at this in Walt’s question above, but I didn’t really understand the answer or if it would work for my purposes.

I realize the excessive use of sliders and whatnot can slow a site loading time down. But sometimes that is exactly what the client wants. I’m dealing with that on the slider example I gave you. It’s less than ideal when it comes to loading time, but it is exactly what the client wants and sometimes at the end of the day that is the necessary trade we have to make.

I know Sparkle is trying to keep things simple, but are these more complicated elements supported? Out of the box, Sparkle looks great, but I’m afraid if I can’t stretch it’s capabilities here and there I will feel very limited.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty, I might need to mention again that Sparkle’s focus is to do everything visually, at the expense of possibly not having everything you need right now. You are expressing your needs with a frame of reference of tools of the past. We can do better, nothing you mention is unfeasible via a visual user interface. Again Sparkle isn’t dead and we’re moving ahead at high speed.

Again we can’t support adding arbitrary code anywhere, because whatever you’re latching on to might not exist in a later version of Sparkle, for example a div might not be there anymore, and we don’t want to break documents as we move forward. It’s a can of worms that once opened can’t be re-canned.

The point about performance isn’t whether in absolute terms a page is fast or slow, rather whether given the design you added code that pushes a page off the fast path. In fact probably no page on the web would need more than a fraction of a second to first render in a modern browser, given appropriate server side conditions that are entirely in control of who builds a website. Google page speed has all the details on this, say https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.durangoheritage.org%2Factivities.html

Anyway I’m not sure whether you have given Sparkle a try, but it does have built in image gallery (based on slick.js), image and video lightbox (magnific popup), HTML5 video player (plyr.io http://plyr.io/), stick to top, anchors with smooth scrolling, scroll animations (animate.css), contact forms, youtube/vimeo/maps/twitter/facebook. All in one integrated, tidy package.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks for all your time and explanations Duncan.
Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I might need to mention again that Sparkle’s focus is to do everything visually, at the expense of possibly not having everything you need right now.

Yep. Understood. I’m just trying to get a feel for what the limitations are. There are trade-offs with each and every approach.

Again Sparkle isn’t dead and we’re moving ahead at high speed.

I never meant to imply that it was dead. In fact it has been stated that Sparkle is a much younger product than FW and they can’t be compared apples to apples. I would argue FW for the moment isn’t dead either. For now it works just fine. In Sierra reports are it will work fine. If it comes down to it, I will maintain an old piece of hardware if needed to update old client designs.

However, since this is FreewayTalk and what the users here KNOW is Freeway, comparisons are inevitable. “How do I do this thing I already know how to do if I wanted to in Sparkle?” It’s an understandable, albeit perhaps unfair question. But again, since this is FWT, I hope you can understand where we are coming from. If your answer is “do it in an iFrame” then I will have to pass. If I had come to Sparkle 10 years ago, I would have made different choice, but today, it is too big a step backwards. I don’t want to be limited to only this one image gallery or this one lightbox. I know myself. It will be great for a few months, but inevitably I will want to do more and try something different. There are plenty of people on this forum for whom Sparkle is a fantastic choice, but I don’t think that user is me. And frankly, that bums me out. There’s a lot to like about your program.

Google page speed has all the details on this,

I actually expected you to do this with my page. I invited the critique when I told you it was admittedly slow to load. I just uploaded last night and those fixes are yet to come. When I started in web design I was scared to make a mistake, at this point, I’m realizing that is how I learn. I don’t want an app to protect me from myself, but rather one that will help me grow.

Anyway I’m not sure whether you have given Sparkle a try

Only minimally. I’ve watched videos and downloaded it. While testing the app, I bumped into the questions I had above and that is why I started asking these difficult questions. Thank you for your time and explaining your approach.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I have no “fairness” problems, I’m just saying comparisons with Freeway might make sense from someone who’s been using it for 10 years, but perhaps some of the learned skills are distortions of an insufficiently developed product and need to be unlearned. In fact we’d probably have the same development difficulty with Sparkle if we said “yes” to adding all the things we are asked.

Also I didn’t intend to shame your site specifically, 99% of the web is like that.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

need to be unlearned…

I have no doubt this is true.

Also I didn’t intend to shame your site specifically, 99% of the web is like that.

No offense taken. When I uploaded it I knew I would need to go back and fix it. But the client needed it uploaded and that’s what the client got.

Like I said above, there are trade offs with each and every approach. For me, the purpose of these discussions on FWT is to find the best FW replacement fit for us. There is no one-size-fits all. There is no FW “replacement.” We all have to ask what our non-negotiables are for our work style/skill level and typical client/user base. I’m glad FWT has allowed this forum to remain for the time being as we make our transition.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 17 Aug 2016, 9:50 pm, Duncan Wilcox wrote:

perhaps some of the learned skills are distortions of an insufficiently developed product and need to be unlearned

Wow. Ok… so in Sparkle, how do I do a page redirect? Manage page caching? Do some form validation? Create a popup for a form or navigation? Are rollovers possible? Anyway to prevent mousewheel events/drag scrolling from endlessly zooming/panning an embedded Google Map? I seem to hit the wall on all of these when trying out Sparkle. Hopefully it’s all in there and I just missed it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I can only add to what Doty and Scottin asked by repeating what I said multiple times earlier in this thread. SITE SEARCH.

I’ve spent a lot of time with Walter Davis in the past trying to get my search field to look and work just the way I like it. (Bless you, Walter, for that kind help too!) To do that, I had to add code in Freeway via the HTML Markup dialog and via Walter’s Protaculous2 action (“DOM Loaded Observer” button). Without that action and without HTML Markup in Freeway, I wouldn’t have a search function today. And obviously if I ever build a fully responsive site, I want to not only retain search but make it look modern, something akin to the way Apple implements their search field atop apple.com. (Take a look there right now if you don’t know what I mean. It’s an awesome way to implement search, in my opinion.)

I guess a lot of people don’t add search because it’s either too hard or they feel their site doesn’t need it, but my website users have come to rely on it. In the past I used Atomz, and after Atomz died I switched to Google Custom Search. A bit of a pain to setup, but with Freeway, I accomplished it.

And so, just like everybody else here on FreewayTalk, when I evaluate a “Freeway replacement” I must evaluate it in terms of what I need to accomplish on the web. In other words, the kind of content I have now (site search or otherwise) is the same content I would want to build in a Sparkle website.

But in Sparkle since there are no plugins (I fully understand the reasoning) and since there is no HTML Markup dialog (again, I understand the explanation given), then I am rather stricken with fear to embark on a web design journey with Sparkle. Other people may buy Sparkle to toy with it; but the question is, will Sparkle become their main web design app?

I do not seek to speak disparagingly of Sparkle – not at all. Anyone who read my previous post can clearly see the praise I gave it and the same praise I continue to give it. It’s just that the bottom line is that I need a web design tool that works for me now, not a promise of a better future tomorrow. And so I continue to ponder Sparkle as I ponder my existing sites, realizing some changes and sacrifices must be made, but also realizing that some things cannot be sacrificed. That’s pretty much what Doty was saying and it seems like Scottin is saying the same.

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Scottin, once again Sparkle begins and ends with what you see, that’s both the upside and downside of a visual environment. Some things might be less visible, though a checkbox for preventing map zooming is right there in the map inspector.

I’m sure you’ll always find something missing that could be done with code. There’s no question that with code you can do anything. The point is, and will always be, that a vast majority of people in the world just can’t do it. Today Sparkle’s limited featureset helps many people build their own website without needing to resort to any coding or understanding of what css positioning is. That’s a major win IMHO.

Every passing month we add features, with a visual UI, that raise the bar.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

James, I fully understand that you need site search. It is on our feature list, at some point we’ll add it.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thank you, Duncan.

James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hello all and Duncan in particular.

I have been following this discussion since it began and have found out a lot about the possibilities offered by sparkle.

Its been a generally helpful discussion so thanks to all for that.

Can Duncan confirm if sparkle can create horizontal submenus at all? I gather from reading the documentation that only a menu with one level of submenu is currently possible in sparkle but I didn’t read if this submenu can be assigned to be horizontal or vertical.

Let me know as its a current issue for me with a project and I can’t yet find a freeway solution which works in a responsive site.

Many thanks

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Question for Duncan as well, unless anyone else knows:

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Thanks much!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

redfeather, you are speaking about Freeway’s excellent “pass through image” feature. I’ve done exactly the same thing for all my images for years, whether they be PNG, GIF or JPG. I created/modify in Photoshop, then save the 144ppi retina image in either GIF or PNG or JPG format (whichever is smallest and looks best to my eye), and then I sketch an HTML box in Freeway and import. That tells Freeway not to recompress the image or change the format, but to just export the graphic as is. And the reason why I use Photoshop instead of Freeway to compress my images is because, as you already know, PS does a much better job.

So obviously, we would want the same kind of “pass through image” feature in Sparkle.

Best,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 26 Aug 2016, 3:56 am, redfeather wrote:

Question for Duncan as well, unless anyone else knows:

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Thanks much!

Perhaps something I can answer.

Sparkle guys are here very enhanced. They’re wrapping images in the HTML5 element. Within the picture element, you can use a so called “srcset”. The source set allows you to define images for lower breakpoints.

So say you define your basic image on a width of 1920px, you won’t serve this for tablet and mobile. For tablets and mobile you’d like to serve alternative widths and resolutions (and therefor file-sizes) such as 1200px and 600px.

This is looking something like:

<picture class="img-2">
<source srcset="images/tmkdbooks4x-908-310.png 1x, images/tmkdbooks4x-908-620.png 2x,     images/tmkdbooks4x-908-930.png 3x" media="(max-width:479px)">
<source srcset="images/tmkdbooks4x-908-464.png 1x, images/tmkdbooks4x-908-928.png 2x" media="(max-width:767px)">
<source srcset="images/tmkdbooks4x-908-725.png 1x" media="(max-width:959px)">
<source srcset="images/tmkdbooks4x-908-908.png 1x" media="(min-width:960px)">
<img src="images/tmkdbooks4x-908-310.png" alt="" class="js img">
</picture>

So Sparkle’s core engine is doing something which is (nearby) impossible to re-create in Freeway. In fact very cool - and if a browser doesn’t support the picture element and srcset?

There is the fallback for.

Hope this helps you out.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Can Duncan confirm if sparkle can create horizontal submenus at all? I gather from reading the documentation that only a menu with one level of submenu is currently possible in sparkle but I didn’t read if this submenu can be assigned to be horizontal or vertical.

Hi Anthony,

Sparkle doesn’t currently support horizontal submenus.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Hi Redfeather, as Thomas mentions, Sparkle creates a picture element, or in the case of a box background, Sparkle uses media queries to load a different image at different breakpoints, or in the case in the forthcoming webp support in 2.1, different CSS rules to load different compression formats (webp saves about 25% size and is used by Chrome 25+ and the upcoming Safari 10, and more importantly, their mobile variants).

The gist of it is, like for so many other things, making the appropriate image size in Photoshop and putting it into your web page is something you need to unlearn. It was the recommended thing to do for so many years, but already in 2010 with the introduction of the retina screen on the iPhone 4 it was dubious. In 2016 the picture element and other techniques ensure that in a responsive website each device downloads the smallest image they need to show a crisp image for their pixel density. This means your images folder will contain many image files for each image in your page, and this is a good thing (if you don’t have to prepare them all yourself).

By the way the wording in the documentation may seem to suggest Sparkle resamples the image when enlarging it, this is not the case. Sparkle only creates high resolution variants of an image if the source image has enough pixels in it, otherwise it only leaves the lower resolution version. But by giving Sparkle a high resolution source image you can ensure that your site looks great on my retina macbook pro even if you’re creating it on, say, your non-retina iMac.

Duncan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options