Jump to content

Philipp

Members
  • Posts

    198
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by Philipp

  1. (If you used JPGs) You've set the quality to 100. While the reduced image with might make the image smaller, the higher quality level will render it at a larger size. This can result in larger file size..the problem you've probly encountered. This also happened to PNGs with PW 2.4 but I think it got fixed with 2.5... ?

    You could try to use a lower quality setting (IMO 100 is never useful) or use e.g. the ProcessImageMinimize module linked in my signature :)

    • Like 2
  2. Just for development. It is also not possible (atm) to use your own domain for example.

    But I just want to point out, that all of our services (minimize.pw, lightning.pw, cron.pw, bettereventmanager.com,...) run on DO servers. It is your decision if you want to configure and update your own server or if you want to go the route of "normal", serviced hosting. 

  3. I've created a new Textformatter in the last couple of days:

      
    TextformatterSrcset will add a srcset attribute to all your images inside a Textarea. Depending on your configuration, it will create all sizes for the images, make a double-sized one for HiDPI/Retina devices and you can even create a low-quality placeholder. Read more at Github and make sure that you read the examples.

    textformattersrcset-screen.jpg
     
    It was build to work perfect with the two scripts from Alexander Farkas, respimage and Lazysizes. Do yourself a favor and try them out. They don't require jQuery, they have wonderful fallback and are fast and easy to use. 
     
    More information and downloads on our Github repo.

    This module is currently quite stable and tested against multiple configuration variations. It works Some code improvements are needed, so use with care.

    Feel free to ask any questions you might have.

    • Like 18
  4. We have kind of a similiar procedure. But to be honest, most of the times it is a little bit different.

    •  Get in contact with the client
    • Talk with them about the project and what goals/problems/... they have
    • Make an offer with a fixed price including an hour-based system for extra work
    • They sign the contract and we start working
    • We develope on our servers
    • We move the site to the Clients server/hosting
    • They pay us
    • Everyone is happy

    You've already mentioned the flaw with this kind of a system. The customer pays in the end. Another type we tried this year was a "partnership" agreement with the client. We weren't sure on how many hours we would need, because it was a really large site so we agreed that the client pays us a monthly sum in exchange for about 30 hours of work each month. The time was spent a little bit more flexible but it worked in the end. With this model, we would for example need 4 months for the main site, another month for a special directory on the site and two more months for feature . The client could paid every tree months and both sites could end the contract within 4 weeks.

    I never have heared about something functional in regards of "making money without doing stuff". :lol::biggrin::P
    (at least not for people without some million euros/dollars, - also not for people with some million euros/dollars and with morality) ;)

     
    There is nothing for free, of course. In the best case, your income does not depend on the time you spent. (or be a multiple of it) For example, if you build a store for your customer and you get a 2% cut for every sale they make. While you have some work to setup the store and maybe little maintance cost, you can still get money for a long time out of it. But this also includes more risk and lots of other factors to consider.
     

    if you never offer hosting, doesn't it make things more difficult for those with no IT skills who wants a website? or you tell them how to set up their own hosting?

    We usually recommend another host for them. There is no money in hosting the site ourselves because we are far away from making money by scaling the hosting service. Sometimes, if the site is quite small we host it on our swiss reseller hosting.

    • Like 1
  5. Thank you all!

    The code from horsts first post was nearly the solution. I needed the filename + the extension. With a uploaded file, e.g. example.jpg I've extracted the variation name from the src-attribute (example.321x0.jpg). Making it example.jpg again and then use horst code it worked.

    $tmp1= explode('.',$variationName);
    $meta['imageName'] = $tmp1[0]; 
    $meta['ext'] = $tmp1[count($tmp1)-1];
     
    //Thanks to Horst Nogajski for the following snippet
    foreach($p->fields as $field) {
        if (! (bool) ($field->type instanceof FieldtypeImage)) continue; // if no images field, go on
        
        // find the field that holds the image
        if (!$p->get($field->name)->has('name=' . $meta['imageName'] . '.' . $meta['ext'])) continue;
        
     
    $image = $p->get($field->name)->get('name=' . $meta['imageName'] . '.' . $meta['ext']); 
    }
    
    • Like 2
  6. I'm currently building an Textformatter to embed images with a srcset attribute. In order to do this, I extract images from the string, then search for the image itself and rebuild the <img> before inserting it back into the string.

    My problem is now finding the right image inside a given page. I have

    • The image file name, e.g. dcim_2299.jpg, called $imageName
    • The page of the image, called $p
    • Multiple PageImage fields assigned to one or more templates.

    How can I access/get the right PageImage from the right image field on the page? At the moment I've hardcoded the field name into the module.

    A look at another, similar module doesn't help because there is a bug. When there are multiple image fields assigned to the template, It will always select the first image from the first field. I have no clue why this happens.

    Code from the TextformatterImageInterceptor that is not working as expected. The bug is also reported here.

    				// basename of image.
    				$imageName = preg_replace("/\d+x\d+\./i","", $variationName);
    				// All image fields of the page
    				$imageFields = $p->fields->find("type=FieldtypeImage|FieldtypeCropImage");
    				// find the image object
    				foreach($imageFields as $imageField) {
    				    // if Maximum files allowed, just grab it.
    				    if($imageField->maxFiles == 1) {
    				        $image = $p->$imageField;
    				    // dealing with files array
    				    } else {
    				        $image = $p->$imageField->get("$imageName");
    				    }
                                        if($image instanceof Pageimage) break;				    
    				}
    

    I would appreciate any help. Thanks.

  7. Another month went over and I want to give you a quick update on the lightning.pw project. Thanks so far to all of our users.

    Bad things first: Yes, we face challenges with our FTP service. The daemon is quite fragile and the only helpful solution is to restart FTP every 60 minutes on the server. We're looking into this issue and are trying other programs at the moment. If you have a problem, just drop an email or tweet us on twitter. 

    After over a month we now have 80 users and 136 sites running. Five of those sites are hosted for free as a demo. The Default profile was used the most, followed close by the blank one. Since we started the service, Ryan has pushed 61 versions of ProcessWire (including updates, dev,stables) to the github repo. With lightning.pw it is easy to always have the latest beta ready and running ;)

    We were kind of busy with our other student jobs and with the development of some modules you might have heard of.... Anyways, a Dropbox-Sync is on it's way and we will also integrate the snapshot/recover function with the next update. The user defined profiles still have a high priority. We made updates behind the scenes to improve stability and to fix minor issues. 

    • Like 7
  8. Oh hey, how did I miss this topic? 

    We might have something with lightning.pw that we can call cloud hosting. It is build for ProcessWire and we're working on new features that focus on making development easier. Unfortunately we have to fight against big problems with our FTP service and we did some minor backend improvements. Next up is the Snapshot and own Profile function, then a Dropbox integration and everything beyond is just a point on the roadmap at the moment.

    I just want to remark that lightning.pw is only intended for development. We don't want to handle the hosting of a real live site because. That's why we have those random names and the long domain. A migration tool between a life site and dev would be nice and might be coming in the future.

    _

    Maybe you can find a hoster that doesn't has the "cloud" stuff in their marketing but just offers solid hosting with a snapshot functionality? I could also think, that the backup module from PW 2.5 offers a great way to "save" a site. But that doesn't  help with the staging functions.

    Did you had a look at DigitalOcean?

    • Like 5
  9. New line starts after 100%. 33+33+33=99% so the next one tries to fit within that last 1%. But there is not enough space so it floats into a new visible line. Then the "real" new line starts but repeats again. This is just default CSS behavior;)

    Make two columns 33% and give the third one 34% to fix this. No one will notice the 1% difference.

    • Like 9
    • Thanks 1
  10. Updated my rMBP last week. I have to admit that I like the new look. Most of the stuff works as expected. Some apps needed an Update.

    There are some issues I have (and looking at the Apple Support forums I'm not alone)

    • My Bluetooth Apple Magic Mouse doesn't work. It reconnects every 1-2 minutes
    • WiFi losses connection every few minutes when I have Bluetooth turned on
    • It just changed some settings after update (e.g. activating the guest account)
    • Safari chrashes sometimes (Scrollbug, freezing,...)

    If you don't need to update and can wait another weeek, don't upgrade yet and wait for the first patch.

  11. This is a very basic guide on how to optimize a ProcessWire page for speed. It doesn’t go into the depths of optimization and perfect render paths but will provide you with some proven ProcessWire methods for faster websites. The big problems that are easy to fix are what we aim for. You want quick improvements? Then read on…

    First let's have a look ath the following graph. Those are the areas, we want to improve.

    bildschirmfoto2014-10rbezw.jpg
    Source: http://httparchive.org/interesting.php?a=All&l=Oct%201%202014
     

    Clean up your HTML
    Look at your HTML source code. Are there any unnecessary parts? Remove anything that might not be needed and try to keep your markup as clean as possible.
    Avoid using too many external JS libraries or other tools. It is okay to include jQuery from a CDN, because most visitors will already have cached the file. Too many of those external requests will slow down the page.
     
    If possible, try to avoid render-blocking Javascripts and move your script tags to the end of the page, right before the body. In most cases, your Javascript will enhance your content but doesn’t need to fire before the site is rendered.
     
    Always think if you need to include another library or the fourth webfont on your site.
     
    Minify Markup
    The next step to save some bytes is to remove all whitespaces from your markup. It doesn’t have to look nice, it has to be loaded fast.
     
    We perform this trick with our new super-weapon: The AllInOneMinify module for ProcessWire. Install it like every other module for ProcessWire. Once activated, go to the module settings and tick the checkbox for “Minify HTML” and look at your sites source code. It should be minified.
     
    AIOM can handle conditional browser comments. If your layout depends on whitespaces you could “force” them by putting an   into the markup.
     
    Optimize the CSS
    Now we’re heading for the next larger part of a usual website. We will combine all CSS files and then remove anything not needed (whitespace,comments) from it.

    Before we start, make sure your CSS files only contain rules that you really use. Especially if you’re using a framework like Bootstrap, most of the selectors are never used. Remove them carefully.
     
    We need the AllIneOneMinify module from the previous step again. After installation, open the template file where your HTML header is generated. We will now replace all stylesheet tags with a single file. AIOM needs to know all CSS (or even LESS) files, relative to your template folder. It will then output a link to a single, compressed CSS file. 
     
    You might have this in your HTML head:

    <link href="<? echo $config->urls->templates;?>/css/grid.css "rel="stylesheet" />
    <link href="<? echo $config->urls->templates;?>/css/style.css“ rel="stylesheet" />

     Replace all links to Stylesheets with the single tag like this:

    <link href=”<? echo AIOM::CSS(array(‘css/grid.css’,’css/style.css’)));?>” rel=”stylesheet”/>

    You pass an array with the file names to the AIOM method CSS. It will return a link to the file. AIOM takes care of image urls inside CSS. It will detect changes in the source file and only generate a new file if necessary.
     
    While developing, you might want to turn on the “Development” checkbox in the module settings.
     
    Make JavaScript tiny
    Do the same as you do to the CSS to your Javascript files. First, clean up the code. Then install AIOM and compress all JS files into a single file using the AIOM::JS method that works as the AIOM::CSS method. For best results, think about including scripts like jQuery from a CDN and put your scripts below the content, before you close the body tag.
     
    Also note that the order on how your throw your JS files into AIOM might be important, depending on the code inside.

    Get the right image size.
    ProcessWire comes with great image tools. Use them, to make images exactly the size you need them. You don’t have to serve that little thumbnail with over 3000px length just because the editor wasn’t able to reduce the size.
     
    Example: Your designer wants to have a slider image with a maximum size of 600x320 pixel. To output the image with that exact dimensions, use the API accordingly:

    $sliderImage->size(600,320)->url;

    An even better way would be to use adaptive images or the new srcset attribute combined with a JS fallback. Then your site only delivers the image size as needed.
     
    Hint: Play around with the image quality setting in the config.php. Maybe you don’t need images with a JPG quality of 90+.
     
    Compress the images further with minimize.pw
    To make images even smaller, we can use the minimize.pw service. This service will compress images nearly lossless by using more complicated tools to reduce the size of PNGs and JPEGs. By doing this, you remove bytes from the largest chunk of your website weight.
     
    minimize.pw is free for 2000 images. Just enter your E-Mailadress and receive a free key


    Then you have to install the ProcessImageMinimize module and enter they key. You can now activate the option to automatically compress every image uploaded.  It is fail-safe and will compress images in the background. Please note, the automatic mode only works with images uploaded AFTER you have activated the module.
     
    You can manually select image fields with the ->mz() API method. Just include it before you output the image in your template file:

    $myImage->width(300,300)->mz()->url;

    We've closed the service. You could use something similar like Imgix ( https://www.imgix.com/ ).
      


    Activate GZip compression on your site
    Another method to speed up your site is to activate GZip compression. The server will then send all files compressed to the client. This works with nearly all browsers and the CPU power required is minimal.
     
    You can tell your server to do this, by adding those lines to your .htaccess file in your root directory. Please take care, that you do not overwrite the ProcessWire rules in the file!  For best results add them on the top of the .htaccess file:

    <IfModule mod_deflate.c>
      AddOutputFilter DEFLATE js css
      AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
      BrowserMatch ^Mozilla/4 gzip-only-text/html
      BrowserMatch ^Mozilla/4\.0[678] no-gzip
      BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    </IfModule>

    This was taken from another forum post.
     
    Tell the client to cache stuff
    To make repeating visits faster, we can tell the browser to cache special files for a longer period of time.
    Again, add this on top of your .htaccess file:

     

    <IfModule mod_expires.c>
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 1 year"
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType text/javascript "access plus 1 month"
      ExpiresByType application/octet-stream "access plus 1 month"
      ExpiresByType application/x-javascript "access plus 1 month"
    </IfModule>
     
    <IfModule mod_headers.c>
      <FilesMatch "\\.(ico|jpe?g|png|gif|swf|woff)$">
        Header set Cache-Control "max-age=31536000, public"
      </FilesMatch>
      <FilesMatch "\\.(css)$">
        Header set Cache-Control "max-age=2692000, public"
      </FilesMatch>
      <FilesMatch "\\.(js)$">
        Header set Cache-Control "max-age=2692000, private"
      </FilesMatch>
      <FilesMatch "\.(js|css|xml|gz)$">
        Header append Vary: Accept-Encoding
      </FilesMatch>
      Header unset ETag
      Header append Cache-Control "public"
    </IfModule>

     
    Remember, that this caching might be annoying while developing the site.
     
    Use the internal cache (or ProCache) 
    Another trick to make the site faster is to use a caching system. This will “store” your rendered site so you don’t have to query the database that often.
     
    We can either do this with the internal cache of ProcessWire or use the commercial, official ProCache module.
     
    Using the build-in system, you go the the setting page of a template and open the “Cache” register. You can now set the Cache time and what happens if something changes. The settings depend on the content of the site. Mostly static content can be cached longer and you might not need to reset the cache every time. Dynamic sites will need shorter cache times.
     
    ProCache (buy here) is even faster because it will bypass PHP and the database. Files are served directly as HTML.
     
    Please note, that caching might make the site faster but it can create new problems. Use with care.
     
    Summary
    Keep your code as clean as possible. Remove anything unnecessary and then compress HTML,CSS and JS using the AIOM module.  The largest part of your page weight are images. Keep them small by using the appropriate dimensions and consider services like minimize.pw. In the end, use intelligent caching and buy ProCache.
     
    Following this guide takes not more than an hour but can speed up your site and make your visitors happy.
     
    This was just a quick overview of techniques to optimize your page speed. There is plenty of stuff you can do but the steps above are a good first step. Maybe you can share your favorite methods (or links) to start the discussion.

    • Like 30
  12. To get back to the topic of tools we are using:

    Trello for the general project management. Each customer or projects gets a board.

    Metanet Webhosting for E-Mails to communicate with customers.

    Dropbox so share and sync files in a team folder

    Slack as a tool to combine al possible other channels and to chat together. It's new but we like it.

    Our custom CRM to track customers and make bills/qutations

    2-weekly meetings to discuss and review stuff.

    • Like 2
  13. Hi Neo, welcome.

    Your requirements should be no problem with ProcessWire. Even with a limited PHP knowledge, you will get used to the API quite fast.

    To your questions:

    - Of course it is possible. You need a basic understanding of PHP (loops,ifelse,variables) but nothing more than a usual template language or the WordPress markup would require. Y

    - A higher time because you will have to learn some stuff before. Maybe start with a smaller page as you suggested and then move forward.

    - You could do it this way. Build the HTML/CSS/JS and then replace everything with dynamic content from ProcessWire.

    Did you look at the Cheatsheet already? And maybe this tutorial is interessting to you.

    Hopefully someone will give you a more detailed answer, I have to leave now.

    • Like 7
  14. The "user" is basically just another Page. So you can add a field to the user template and access it from the API.

    1. Create a field for your name, e.g. fullname. Or use an existing one
    2. Go to Site > Setup > Templates and then click on "Filter". Enable that system-templates are shown
    3. Edit the "user" template and add your fullname field. Save
    4. Go to your users profile and enter your name
    5. On the front end side, access the field as usual with $user->fullname

    EDIT:

    Output the "fullname" field of the user, that last modified the page: $page->modifiedUser->fullname.

    • Like 5
  15. Thanks. I really like it here..everyone is soo polite ;)

    Yep. I'm on internship at the UK office of my company from 29.09 until 19.12. so I'll be staying in Croydon/London for the whole time.

  16. Thanks for the feedback. I would also thank Ryan for putting us on the processwire.com/demo page.

    Let me explain the behavior of the default lightning_admin user: This user is created during setup with a super long and random password. We use it for the global login. If you login with your email, ProcessWire finds no matching user. Then our LightningHelper module tries those login data with our lightning.pw service. If there is a user/pw match, then we login the lightning_admin user. To prevent users from locking themselves out, we disabled the "edit user" page for the lightning admin as well as direct login with that user (for security).

    If you need to access the user settings, just create a new user with the superuser role and login. Then you can use everything as expected. 

    • Like 2
×
×
  • Create New...