Blog

Think before you speak. Read before you think.

Developers manual for advanced WordPress development

No Comments 4037 Views0

Pick a virtual server option

  • Windows users can choose from http://www.wampserver.com/en/ or https://www.apachefriends.org/index.html
  • Mac users could pick https://www.mamp.info/en/
  • Universal solution would be go with a combination of https://www.vagrantup.com/ and https://puphpet.com/

Using Vagrant has a learning curve in the beginning when you have to configure everything and make sure you understand what is going on. So with a little bit of persistence you gain huge advantage. Having a virtual server for development is really great. You don’t need to mess with your computer settings and you can start over when things go south.

Install Git

Go to https://git-scm.com/ and install Git. It’s key to any development work.

  • You have to be able to work with your colleagues
  • When you are a single developer it’s equally important to back in history and see what has changed in your codebase

Install Node and NPM

You will need NodeJS and NPM. You can get them here: https://nodejs.org/en/. NPM comes with Node so no need to install it separately. It would be useful to understand what NPM does and where to get help – https://docs.npmjs.com/getting-started/installing-node

Install Bower and Gulp

Go and read it here: http://bower.io/ and here http://gulpjs.com/. Those should be installed via NPM using command line.

Sage is the final piece

Go to Roots page and get Sage: https://roots.io/sage/. It’s important to read on what is Sage and what it does. Then download the archive to your computer and keep it there for a while.

 

Getting everything to work together

  • Go get and download WordPress https://wordpress.org/download/
  • Set it up in your server and go trough installation process
  • You should have default installation of WordPress running on your local server before you continue. You should be able to login as a admin, manage everything and so on.
  • We want to install our new theme (Sage) to WordPress. We go and extract the contents of Sage archive into WordPress themes folder /wp-content/themes/.
  • When that is done we should be able to see our new Sage theme in admin theme settings. Let’s go ahead and activate it. After doing so we could check how does the page look and see that it has no styles and only default WordPress content.

We want to add Git to our theme so we could track our changes. So in the directory /wp-content/themes/sage/ trough the command line we do:

git init

We want to install all javascript libraries with Bower:

bower install

We want to install all the packages needed for Gulp to work:

npm install

Let’s launch Gulp:

gulp

At this point if we would check the browser again we should see styles and structure. The page should still be quite empty but we have a great starting point for Advanced WordPress Development.

Responsive images solution

Solution to responsive images problem

No Comments 2637 Views2

There is fair amount of challenges that arise when dealing with responsive images. All of the websites we build have to be responsive. And our lives as developers are not getting any easier as the number of different devices and potential screen resolutions increase. The high-resolution arms race seems to be never-ending as vendors try to top one another with innovations in laptop and mobile device screens. New devices such as TVs and smartwatches are entering the market, making the race even more complex.

Responsive images solution

Some clients only require the images to be responsive. Some focus on the looks too much and some do not care at all. It’s our job to inform the client about possible solutions to the problem. So this is the article we dedicate to our beloved web designers who could find this tool invaluable. We are certain that by being on the same page we’ll be able to work more efficiently and produce better results.

Issues with responsive images:

  • One size for all
  • Too many different image versions
  • Now there is a great tool which we recommend for our clients and we use it ourselves. Responsive image breakpoint generator. The tool allows you to process your images, which is useful if you have a reasonable amount of statically uploaded images. To generate breakpoints for images uploaded by users, you need to programmatically generate them from your code. For each uploaded image, you probably need to call an API to generate the breakpoints, store or cache them on your side and then build your HTML5 or CSS snippets according to these breakpoints. You can specify settings such as the width range, file size step, maximum number of images and request one or more image transformations to apply on the original image. Such transformations include aspect ratio-based cropping, face detection-based cropping and applying various image effects, filters and optimisations.

    Junior Web Developer

    No Comments 2944 Views0

    We are currently seeking a Junior Web Developer to help us with our expanding client base and company growth. So if you’re a passionate, detailed, talented junior, who’s full of energy and enthusiasm, with a desire to develop in a positive and creative environment, then you could be exactly what are we looking for!

    Minimum Skill Requirements:
    – Good HTML/CSS skills
    – A basic knowledge of JavaScript or jQuery
    – Basic PHP skills
    – You must have a passion for the web – it’s a tough industry that’s constantly changing so you need to keep up.

    Beneficial Skills:
    – WordPress experience
    – CSS pre-processing – you’ve used a pre-processor e.g. Sass or Less
    – MVC Framework – you’ve used a framework such as CakePHP, CodeIgniter or Laravel

    Agile Vs. Waterfall: Pros And Cons

    No Comments 4006 Views0

    Agile software development is a group of software development methods in which solutions evolve through collaboration between self-organizing, cross-functional teams. It promotes adaptive planning, evolutionary development, early delivery, continuous improvement, and encourages rapid and flexible response to change.

    The waterfall model is a sequential design process, used in software development processes, in which progress is seen as flowing steadily downwards (like a waterfall) through the phases of conception, initiation, analysis, design, construction, testing, production/implementation and maintenance.

    Agile software development

    PROS

    Agile might be described as freeform software design.

    Software developers work on small modules at a time.

    Agile offers an incredibly flexible design model, promoting adaptive planning and evolutionary development.

    Customer feedback occurs simultaneously with development, as does software testing.

    This has a number of advantages, especially in project environments where development needs to be able to respond to changes in requirements rapidly and effectively.

    CONS

    With a less successful project manager, the project can become a series of code sprints. If this happens, the project is likely to come in late and over budget.

    As the initial project doesn’t have a definitive plan, the final product can be grossly different than what was initially intended.

    Waterfall software development

    PROS

    The emphasis of Waterfall is the project plan and therefore before beginning any kind of development there needs to be a clear plan and a clear vision in order.

    You can also estimate timetables and budgets more accurately, which definitely tends to please clients.

    Because the Waterfall method requires upfront, extensive planning, you can launch software fairly quickly.

    CONS

    Waterfall methodology relies heavily on initial requirements. However, if these requirements are faulty in any manner, the project is doomed.

    If a requirement error is found, or a change needs to be made, the project has to start from the beginning with all new code.

    The whole product is only tested at the end. If bugs are written early, but discovered late, their existence may have affected how other code was written.

    Additionally, the temptation to delay thorough testing is often very high, as these delays allow short-term wins of staying on-schedule.

    The plan doesn’t take into account a client’s evolving needs. If the client realizes that they need more than they initially thought, and demand change, the project will come in late and impact budget.

    Laravel 5.1 is released

    No Comments 2507 Views0

    Laravel has just announced the immediate availability of v5.1. This marks the first release in Laravel’s history to offer long-time support.

    Long Term Support

    Since originally launching in 2011, Laravel has always followed the “release early, release often” mantra which is popular in open source applications. With the historic rise in popularity of the framework, it was time to start focusing on the needs of large organizations and mission-critical applications that need security fixes but can’t upgrade quickly. Laravel 5.1 will now include 3 years of security fixes.

    The long-term support is arguably the biggest feature in 5.1, but it includes several other new features.

     

    laravel-5.1-released

    How we do code review and why it’s important

    No Comments 2474 Views0

    What is code review?

    Code review is systematic examination (often known as peer review) of computer source code. It is intended to find and fix mistakes overlooked in the initial development phase, improving both the overall quality of software and the developers’ skills.

    Why is it important?

    • We all are human beings. You may do some mistakes irrespective of your experience in a particular technology or module. If you just review your code by a second eye, those mistakes might caught at that time only. This way you can reduce the number of bugs reported by the testers or end users.
    • If you are working in a geographically distributed team, your coding conventions may differ and if you have some strict coding guidelines, this code review process will make it possible to recheck the standards in the code that you have written.
    • There are some possibilities of repetitive code block which can be caught during a code review process. Refactoring can be done based on that.
    • Unused code blocks, performance metrics etc. are some additional check points of doing a review.
    • If you are new to development, this code review process will help you to find out your mistakes and help you to improve them. This is a perfect knowledge sharing mechanism.
    • Find out the defects and correct them at the beginning before it commits to the source control system.

    How we do code reviews?

    • Don’t micro-manage: Don’t force your team to review every changeset, nor to follow a rigid process during the code review. Remember: agile code review is mostly about knowledge sharing! All other things are good side-effects.
    • Encourage asynchronous reviews: Code review meetings take your developers away from their work, breaks their flow and will be met with resistance. A better approach is to enable them to review code when it’s convenient, the same way they read email, RSS feeds, etc.
    • Actively share interesting findings, constructs, design decisions via code review – be the champion: Build an easily accessible knowledge base from your code reviews.
    • Treat code review as yet another state in your project workflow: Don’t wait for code review until the end of the iteration. Late code review is often worse than no code review at all – it’s often tool late to react to the findings. Instead, treat code review as one more step between ‘To Do’ and ‘Done’, so that it happens constantly throughout your iteration.

    Google AI Now Self Learning

    No Comments 2796 Views0

    Logo_2013_GoogleGoogle scientists and engineers have created the first ever computer program that is capable of learning a wide variety of tasks completely independently, in what is a giant leap towards true general artificial intelligence.

    The AI, or as Google refers to it the“agent”, has learnt to play almost 50 different retro computer games, and came up with its own strategies for winning completely without human input. The same approach could be used to control self-driving cars or personal assistants in smartphones.

    This research was conducted at a British company the Google acquired a few years ago called DeepMind.

    Usability checklist

    No Comments 2179 Views0

    Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.

    Usability is defined by 5 quality components:

    • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
    • Efficiency: Once users have learned the design, how quickly can they perform tasks?
    • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
    • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
    • Satisfaction: How pleasant is it to use the design?

    Go and make a usability checklist.

    WMFUI-Affinity_horiz

    Prestashop 1.6.0.11 launched

    No Comments 1868 Views0

    logo_prestashop

    PrestaShop includes an out-of-the-box theme so you can welcome customers the moment you set up. Easily customize the PrestaShop theme by changing fonts and colors with the Live Configurator.

    And the update is here that contains a lot of improvements:

    • Exclusively improved rounding & tax management
    • Feature to manage the back-office orders effectively in catalog mode is available
    • Upgraded Wishlist module with substantial options
    • Substantially better specific price reductions and associated prices’ management excluding/including VAT

    See the change log here.

    Unit Tests are not enough

    No Comments 1944 Views0

    As one guy put’s it: “you should start with having functional tests first and only then drilling down to writing unit tests. And perhaps if you manage to cover over 80% of your codebase with functional tests you may find it fitting to skip unit tests altogether in some cases.” Read more.

    Anyway the point is that Unit tests are needed in modern web application. Here’s why:

    1. Unit Tests allows you to make big changes to code quickly. You know it works now because you’ve run the tests, when you make the changes you need to make, you need to get the tests working again. This saves hours.
    2. TDD helps you to realise when to stop coding. Your tests give you confidence that you’ve done enough for now and can stop tweaking and move on to the next thing.
    3. The tests and the code work together to achieve better code. Your code could be bad / buggy. Your TEST could be bad / buggy. In TDD you are banking on the chances of bothbeing bad / buggy being low. Often it’s the test that needs fixing but that’s still a good outcome.
    4. TDD helps with coding constipation. When faced with a large and daunting piece of work ahead writing the tests will get you moving quickly.test
    5. Unit Tests help you really understand the design of the code you are working on. Instead of writing code to do something, you are starting by outlining all the conditions you are subjecting the code to and what outputs you’d expect from that.
    6. Unit Tests give you instant visual feedback, we all like the feeling of all those green lights when we’ve done. It’s very satisfying. It’s also much easier to pick up where you left off after an interruption because you can see where you got to – that next red light that needs fixing.
    7. Contrary to popular belief unit testing does not mean writing twice as much code, or coding slower. It’s faster and more robust than coding without tests once you’ve got the hang of it. Test code itself is usually relatively trivial and doesn’t add a big overhead to what you’re doing. This is one you’ll only believe when you’re doing it.
    8. I think it was Fowler who said: “Imperfect tests, run frequently, are much better than perfect tests that are never written at all”. I interpret this as giving me permission to write tests where I think they’ll be most useful even if the rest of my code coverage is woefully incomplete.
    9. Good unit tests can help document and define what something is supposed to do
    10. Unit tests help with code re-use. Migrate both your code and your tests to your new project. Tweak the code till the tests run again.
    • Page 1 of 2
    • 1
    • 2