ivopetkov

Hi folks. I would like to share this library of mine. I've been using, improving and optimizing it for the last year and a half. I think it turns out great. I hope it will be useful for you too. Any suggestions and recommendations are welcome.

Thumbs up. I also use some AWS services, and the results are awesome.

Updates will be manual as the installation itself.

Don't get me wrong. I think PSR standards are great, just not all of the fit into this framework. In PSR-7, for instance, Request and Response objects are immutable. Imagine the framework when this concept is applied to other objects. It will be a much different beast.

Here is another thing that is different from many other frameworks. The Bear Framework API is designed, so you don't write all the time "vendor\", "Vendor::", "use vendor\" and so on. You write "$app->assets->getUrl()", or "$app->data->get()" and we believe this makes your app much more personal. You might even forget that you are using Bear Framework :)

Not sure what you mean. Can you give us an example.

Here are some benefits: - Lighter than most other frameworks (including the so-called micro framework). It's about 40 files. - Fast and memory efficient. There will be benchmarks soon. - Simple API. Perfect for newbies. - Fast installation - just download and run. No installers. - Addons support. - File-based object storage for quick start. - Some nice utilities for assets.

Some PSR standards are taken into account, but not all of them. The goal is to provide simple to use and extendable framework that helps you do projects of any size.

The goal of Bear Framework is to help you start your next web project in less than a minute and help you make it successful. You've got routing, data storage, addons, logging, assets helpers and many more useful tools.

The documentation is available at http://bearframework.com/documentation/

Can you please give us an example user control where: 1. you've got CSS and JS code that goes in the head tag of the result document 2. you've got JS code that stays at the bottom of the body tag of the result document

Currently, there isn't an automatic solution. For now the component developer can use the component id (automatically generated if not specified) to separate styles. You can see such component at https://github.com/ivopetkov/ivopetkov.github.io/blob/master...

Thanks. It really looks a lot like React, RiotJS and WebCompoments (because they are all great) but it's on the server.

Thank you.

There is a WebP support now. Thank you.

Just tested it on latest iOS and worked like a charm. What device and iOS version you got?

Maybe you mean non-minified. You can find it at https://github.com/ivopetkov/responsively-lazy/

It will be great if browsers do this. And yes, the noscript tag is a valid solution.

That will be nice update. Thanks.

The browser support is currently 62% and rising, and a high-quality image can be shown on "not modern" browsers. So in terms of showing quality images the best possible way the support is almost 100% (we already discussed the case with the disabled JavaScript).

If the browser is "modern" the blank image in the srcset will be loaded, not the image. And then nobody will load the correct image version. This is the problem i think.

Its fixable and will be great update. Thanks.

Usually when I am on a slow mobile connection, I open a lot of tabs. In this case, the benefits of lazy loading are clearly visible. I agree it will be great to load all images, and it will be awesome if we can detect in JavaScript there is available bandwidth and preload the images that are below the fold.

Yes. This will be great update.

Thank you.

Thanks.

Actually, it does. If the image size increases, a higher quality version will be loaded if available.

This is the code for the library: <script async src="responsivelyLazy.min.js"></script> No images are visible until the library file loads. If you want you can inline the js code.

If you are using a browser that does not support the srcset attribute, the default image will be loaded, and no magic will happen. Can you please tell me what your device, browser and window width are.

Yes, server languages can do this job easily.

A big drawback of Pufferfish.js is that images are not indexable by Google. That's not the case with ResponsivelyLazy.js. It works great in search engines, social networks and read-it-later tools.

You can read about the padding-bottom technique at http://alistapart.com/article/creating-intrinsic-ratios-for-... It helps you preserve space for the image and prevents reflowing. If you have many images with unknown sizes there will be massive reflowing and the library can be tweaked to support that too if you really want it.