Download the PHP package kktsvetkov/assoto without Composer
On this page you can find all versions of the php package kktsvetkov/assoto. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download kktsvetkov/assoto
More information about kktsvetkov/assoto
Files in kktsvetkov/assoto
Package assoto
Short Description Simple assets management for enqueuing your JS and CSS files, your meta tags, etc.
License LGPL-3.0
Homepage https://github.com/kktsvetkov/Assoto
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package assoto
Assoto
Dynamically handles assets inserted into the header and the footer, allowing you to enqueue your JS and CSS files, your meta tags, etc.
What's this for ?
Web performance best practices recommend that:
-
load all your stylesheets in the
<HEAD>...</HEAD>portion of the page. In this way the browser loads stylesheets early and will use them to correctly render the page. If this rule is not followed, you are going to see pages that change their look and layout in the middle of loading - which is when the stylesheets have been loaded. - load all your Javascript at the bottom of the page just before the closing
</BODY>tag. The<SCRIPT>tags block and freeze rendering of HTML by the browser, because potentially the Javascript can alter the contents of the page and modify its structure.
Following these rules, you will often need to prepare Javascript scripts and files, stylesheets and meta tags BEFORE are you ready to render a page. This is what Assoto is meant to help with. It will collect your assets in advance, and then deliver them when you start printing your page.
Stacks
While preparing to render a page, you start accumulating your assets. This happens by stacking them in what is called "stacks". There are two stacks:
- "head" (
Assoto\Stack::STACK_HEAD) for the<HEAD>...</HEAD>portion of the page, - "footer" (
Assoto\Stack::STACK_FOOTER) for the bottom of the page just before the closing</BODY>tag.
Following the best practices Assoto will put all your stylesheets in the "head", and all your scripts at the bottom in the "footer".
To see what's already added in a stack call Assoto\Stack::stack($stack). If you want to reset a stack and empty it call Assoto\Stack::reset($stack).
How to use ?
You start by stacking your assets.
When it is time to render the page, you call to Assoto\Stack::display() to print the accumulated assets in the stacks. Here's an example with a very crude PHP page:
The rendered output will be
That's it. Very simple and straight-forward. This will work with any type of template engine you use, it will just require some additional code to pass the accumulated assets.
Assets
There are several classes with canned methods for adding different types of assets: stylesheets, scripts, meta tags and links.
Under the hood all of them are actually calling Assoto\Stack::add() method. Depending on the type of the asset, these canned method are adding some additional default values, and pointing towards the correct stack.
-
Assoto\HTML::title("Hello World!")- adds<title>...</title>tags to "head" assets stack Assoto\CSS::style("body{background:#fff}")- adds inline<style>...</style>block to "head" assets stack-
Assoto\CSS::stylesheet("my.css")- adds CSS stylesheet "head" assets stack Assoto\JS::inline("console.log(somevar);")- adds javascript inline<script>...</script>block to "footer" assets stack-
Assoto\JS::file("my.js")- adds javascript file to "footer" assets stack Assoto\Meta::link('//assets-cdn.github.com', 'dns-prefetch')- adds "dns-prefetch" link tag to "head" assets stackAssoto\Meta::canonical('http://github.com/kktsvetkov/assoto')- adds canonical link element to "head" assets stack-
Assoto\Meta::icon('favicon.ico')- adds icon link to the "head" assets stack Assoto\Meta::meta('keywords', 'assets, enqueue')- adds meta tag for "keywords" to the "head" assets stackAssoto\Meta::property('og:type', 'website')- adds meta tag with property attribute (used for Open Graph Protocol) to the "head" assets stack
Identifying assets
Each asset added gets an "id". In some cases this identification is used to check if the assets already exists in a stack, and in some cases it is used to make sure that you only have one asset of that type.
You can manually set the "id" when calling the Assoto\Stack::add() method directly. Most of the canned methods also support providing assets "id" as one of their arguments. There are some that methods where the "id" argument is omitted on purpose since those assets can have only one instance - such as Assoto\Meta::canonical() and Assoto\HTML::title()
Let's have few assets stacked:
Both of those assets are assigned to the "head" (Assoto/Stack::STACK_HEAD) stack. Let's have a look at that stack and see the "id" for each of those assets:
Assets that are files (such as stylesheets and javascript files) have their urls used to compose their ids. This works as prevention for adding the same assets file multiple times. You can call as many times as you want to add the same asset, but in the end it will be added only once, and this is achieved by locking to its "id".
To check if an asset exists in a stack call Assoto\Stack::exists($stack, $id). If you want to delete an already added asset call Assoto\Stack::delete($stack, $id).
More Examples
-
Inline favicon image
-
Hreflang alternative link tags
-
Open Graph Protocol
-
Google Site Verification
-
Atom Feed
-
Apple Touch Icons
- Bootstrap Javascript File
