My organization has early access to Microsoft Planner through our Office365 account, and I’ve been able to evaluate it compared to what we currently use: Trello. Spoiler alert: This post is fairly critical of Planner — in a Planner vs Trello head-to-head, trello wins hands down.
1. Broken Comments
The first thing I tried in Microsoft Planner was to leave a comment on a card. It broke. Bad first experience.
2. No Markdown support anywhere
Markdown syntax is not supported in comments, descriptions, or checklists.
3. Only 1 person can be assigned to a card
A key feature of Trello for my team is that multiple people can be assigned to a card at any given time. This fits our workflow. Forcing a 1-card-1-person relationship arbitrarily enforces a workflow on users.
4. Bugs in other browsers
Microsoft Planner doesn’t seem to play nice in Safari. It is compatible with IE/Edge… perhaps that is what it was developed for as well.
5. Cannot Edit Comments
Once comments are posted in Microsoft Planner, it is impossible to edit them.
6. No Card Numbers
There are no visible card numbers in planner. While they are also hidden in Trello, there are multiple plugins and options to surface them to the user.
7. No plugins or extensions
While this is technically not a failure of Microsoft Planner, community support does matter. Trello has thousands of community developed extensions that enhance and customize the interface to make it perfectly suited for a given team.
8. Character Limit in Checklists
Don’t plan on being verbose in your checklists in Microsoft Planner — there is a 100 character limit per item.
9. No 3rd Party Integrations
An important part of my Trello workflow is integration with Slack. Trello has 100’s of integrations with other services. Microsoft Planner is still new to the game, and there are no integrations yet.
10. Access tied only to Office365
I have personal and family trello boards, as well as work related boards, all linked together under the same account. The only access point a user can have with Microsoft Planner is with your organizations Office365 — meaning that vendors or contractors which aren’t part of your organization are out of the loop.
11. Limited Labels
Microsoft Planner seems to have a hard limit of 6 labels for a board. This is a pretty small set, and totally unusable if — like my team — you support dozens of applications.
12. Moving Cards Between Boards
It is impossible in Microsoft Planner to move cards between boards or projects. This is an essential function of Trello which allows us to move items between different teams boards, if the ownership of projects change, or cards are escalated to different groups.
13. Archiving Completed Tasks
In Microsoft Planner, “completed” cards are hidden, but still listed in each section. There is no “archive” section where you can move completed tasks to remove them from your board.
14. Board Customization
There doesn’t seem to be a way in Microsoft Planner to customize the board in any way, such as background colors or other branding.
15. Multiple Checklists
Trello allows you to have multiple checklists per card, breaking up tasks into groups. Microsoft Planner only has one checklist per card
Make your webpage blazingly fast! This beginners guide includes 14 performance tips (from simple to complex) that will help you speed up any site.
Above is a video version of this guide. It goes in-depth into many of the topics, and includes a few more. The presentation was given to a group of web developers at The Church of Jesus Christ of Latter-day Saints, as is slightly tailored to some of their web properties. Enjoy!
This guide is loosely arranged in order by bang-to-buck ratio, so simpler optimizations are listed first (that generally have a immediate impact).
It’s not uncommon for an image straight from photoshop or a digital camera for weigh several megabytes. Large and unoptimized images can be the number 1 cause of slow loading pages. Luckily, this may be the simplest optimization as well.
This vacation image (right from my digital camera) is 12.8m. It is also 4000×6000 — which is far too large for a webpage. Reducing the pixel size in photoshop to 1000×667 takes the file size down to 480.7kb. This is still far too large. In the Photoshop Save For Web menu, we can usually reduce the jpeg quality to between 60%-70% without noticing any artifacting or degradation. My rule of thumb is to move the quality sider down until I notice a difference, then take it up by a third. I’ve reduced the jpeg quality on this image to 62% and the new file size in 145.9 kb. This is still large for the web, but more acceptable for a photograph.
We can further reduce the size by using other image optimization tools, such as ImageOptim. This tool reduces image file size by making imperceptible quality adjustments, as well as by removing EXIF and other metadata from the file.
2. Don’t use images
Images are only really needed for displaying photos, screenshots, or other graphics. With the advance of CSS3 support, there are almost no situations were image files are necessary for page layout or design.
linear-gradient alone have reduced the need for most of our image dependancies.
Icons were another common image use-case. We can now replace these with the more semantic use of icon fonts or svg “sprites.” Icomoon is an excellent tool for creating both icon fonts and svn icons. Chris Coyer puts icon fonts and svgs in a informative cage-match that excellently lays-out the pros and cons of both methods
Finally, the One Less JPG movement reminds us that “before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.”
3. Lazy-load images
There are many expertly programmed lazy-load images scripts, so I’ll just outline the logic here:
isthe current element top near the bottom of the viewport?
set the background style tothe data-background value
remove the element from the set of lazy-background elements
The order and placement of CSS files and Scripts is important. CSS should be placed in the head element. As soon as the styles are downloaded and parsed, they can be applied to their DOM element matches — increasing perceived load time.
5. Load scripts asynchronously
If a page is built with progressive-enhancement in mind, most scripts should be loaded asynchronously, or after the page itself. These scripts will enhance the experience of the users, and won’t be missed for the split-second before they are loaded.
Your code can get a little more verbose when iterating over a set of elements:
Ditching the library isn’t a hard-and-fast rule. There are many things that jQuery provides that are difficult to achieve with out.
For example, jQuery’s event binding interface can be overloaded to provide event delegation — binding an event handler to an element’s parent in order to allow dynamic loading or modification of new child elements without losing the event handler.
//Adds a event handler to tables, listening to clicks on children tr elements
Here is a native event delegation function I wrote to add this functionality natively:
document.getElementById("log").innerHTML+=".child was clicked</br>";
As you can see, much of the native implementation deals with the inconsistencies in browser implementation. jQuery and other libraries “pave over” these differences, and provide a consistent API for developers. Additionally, library implementation code has been tested by many users over many browsers. Library usage benefits from thousands of hours of bug and edge-case fixes.
When deciding whether or not to ditch the library, you need to carefully assess the needs of your site. Are there complex requirements or compatibility needs? Do you have time to write and test native implementation? There are certainly use cases where a library is not needed, but consider carefully before you make that decision.
7. Minify and Concatenate
Minification is the process of compressing files, removing unnecessary whitespace, line-breaks, and comments. It is often coupled with Uglification, which transforms code by renaming variables, and refactoring functions into the most compressed format. Any CSS or JS that makes its way to an end user should be both minified and uglified.
Concatenation is the process of combining multiple files into one. This reduces the number of requests, and is especially useful when optimizing for mobile networks where latency is often the bottle-neck.
There are many good stand-alone minification and concatenation tools, but I recommend integrating both of these processes into your build-step, using Grunt, Gulp, or similar.
8. Take advantage of browser caching
Asset caching is controlled via to headers sent with the file:
ETag. These headers are sent by the server with the file response.
Cache-Control defines how, and for how long the individual response can be cached by the browser and other intermediate caches. To learn more, see caching with Cache-Control.
ETag provides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested. To learn more, see validating cached responses with ETags.
There are different ways to set these headers depending on your website platform. This guide to caching headers does a good job of explaining the different options available for the header. Ultimately, you will need to use a method that is correct for you specific platform.
9. Enable compression
This is a simple optimization, and comes enabled on most servers by default. By enabling gzip compression, assets served are run through a compression algorithm and decompressed by the client. The details of how to enable gzip compression are different for each platform, so find a guild that is specific to your technology to install or enable it.
10. Take advantage of server caching
As dynamic pages are built, there can be many database requests for each page. Consider the typical blog: the article content, related stories, and comments are each separate database queries. The comments will be updated frequently, but the article itself and the related stories will not change once published. We can save the results of these queries in memory or on the disk for future use (saving a expensive database query). Like browser caching, the implementation will vary from platform to platform, but the theory is the same. Each platform will have it’s community recommended caching solution, and honestly, the bang-to-buck ratio of creating your own is slim.
The logic of server caching is generally:
receive request for"page-2"
does"page-2.html"file exist on the file system?
Build"page-2"page from database andtemplates
save thisas"page-2.html"on the file system
This pseudocode saves the cached page to the file system, but you could just as easily store data in memory or in an object-store. Google “caching in [your system]”, or read up on Varnish, memcached, redis for more information.
11. Optimize database queries
Expensive database queries can add hundreds of milliseconds to the lifecycle of a request. Optimizing queries is the process of:
Identifying expensive database queries
Identifying expensive queries
In general, look for queries that ask for more then they need. This can take the form of
SELECT * , when all you actually need is
SELECT first_name . Any query that returns more than you need, JOINs with more than is needed, or contains correlated subqueries should be suspect. Every database system is different, so there is silver-bullet when it comes to identifying bad queries.
Once bad queries are identified, use the database tools to understand the workings of the query. Many databases support an
EXPLAIN keyword that returns information about how a query is interpreted and executed by the database engine.
With the help of EXPLAIN, you can see where you should add indexes to tables so that the statement executes faster by using indexes to find rows. You can also use EXPLAIN to check whether the optimizer joins the tables in an optimal order. – MySQL Documentation
12. Separate static assets onto a different domain
You don’t necessarily need to host your static files on a different server, or even in a different application. You can configure most servers to use a separate path and domain for a folder using the rewrite rules system for your particular platform.
13. Use a Content Delivery Network
Content Delivery Networks, or CDN’s, store contents of your website on servers that are more physically close to the end users location. When a request for an asset is made, the CDN will look on it’s servers to see if it has a cached copy. If so, it will return that to the client — avoiding any traffic to your servers completely. If the file is not available, the CDN will request the asset from the server, store it, and then send it to the user. Not only does this decrease load on your server, but it speeds up the request by delivering the asset from a physically nearby server.
Akamai, and AWS both have very popular commercial offerings. However, you don’t have to be Facebook-scale to use a CDN. One company, CloudFlare, offers free CDN access for websites that server under a certain amount of traffic. Cloudflare’s product setup is relatively simple: you edit your DNS to point to their nameservers, and all traffic is routed through their network. Assets are cached as they are requested, and served to users from their servers around the world.
14. Flush partial responses
Some background: during a request lifecycle, there are three main functions that take the majority of the time to build a page:
Network transmission time & latency
Building the page on the server
Rendering the page on the client
Often, as each part of the cycle is busy working, the other two are idle. We can perform this optimization to utilize the other two, and reduce the total time of the request.
Consider a request for “page-2”:
the request is sent from the client
the server receives and routes the request
page renderer is found
database queries are made
page is built
page is sent to the client
page is received by the client
client renders the page
client makes requests for linked assets
Now, during step 4-6, the network and client are not utilized. Flushing a partial response means starting to send data over the network to the client before the entire response is ready. Segmenting a response in this way “pipelines” the process and decreases the time a client waits to receive the first response packet.
Each platform is different, but this pseudocode shows the general theory:
Flushing the output of the page in this way allows the client to receive the header before the entire page has finished building, and it may start rendering immediately.
I administer a Windows server which runs multiple instances of WordPress. Today I needed to install another instance, but the Gallery Installer through IIS kept failing. I resorted to installing manually, and wrote up this guide to installing WordPress on a Windows server manually. Hopefully this is what you are looking for!
Locate and extract the .zip file (named “wordpress-[versionnumber].zip” to the location of choice. Typically this will be in your “inetpub>wwwroot” directory. Rename the default folder “WordPress” to your site name.
3. Add site in IIS
In IIS, right click on your server name in the treeview, and choose “Add Web Site…”. Enter your site name and path into the Add Site window. The important inputs here are the path and site bindings (domain name).
4. Create & Configure Database
Open the MySql command line tool, and log in using the admin credentials. First create a new database for WordPress to use:
CREATE DATABASE databasename
Next, add the admin user to the new database:
GRANT ALL PRIVILEGES ON databasename.*TO"username"@"localhost"IDENTIFIED BY"password"
Note: this code does include the quote marks
5. Set up wp-config.php
Wp-config.php is the file that contains all the critical settings for WordPress including database connection information. Locate wp-config-sample.php and rename it to wp-config.php.
Open wp-config.php using your IDE of choice, and make the following changes:
/** MySQL database username */
/** MySQL database password */
/** MySQL hostname */
6. Final Configuration
Browse to the new WordPress installation. If your domain is not already pointing to the site (bound in step 3), the easiest way to open your site is to add an entry to the windows hosts file. The hosts file is located at “Windows > system 32 > drivers > etc”, named “hosts.” Open this file using notepad (right click, run as administrator), and add the following entry
Once this is saved, browse to the new WordPress installation using your browser of choice, and follow the onscreen prompt to create a user, name your site, etc.
As one of the web designers here at MyMark, I spend quite a bit of time with my head in code. In fact, “System.out.print()” makes a lot more sense to me than “Quoth the Raven.” However, in my travels around the web, I have noticed many things that you can do to drive away pesky visitors. Six of the most popular are:
6. If a feature exists, use it.
As a web designer, I remember a time when people just weren’t afraid to use every tool for every job. There seems to have fallen a shroud of arrogance where we are too good for all the features the web makes available to us.
This individual has put together a really nice example of what a website should look like:
When this website opens, our senses are immediately greeted, not only with three separate background colors, but a page title that scrolls back and forth. We then are amused by an animated background that looks like little bubbles on the page. These are only to be topped, however, by a wonderful blast from the speakers of the William Tell Overture — played in full MIDI glory.
There are so many options the web has given to us over the last 15 years:
Auto-Playing Sound and Video
Why not use them all?
5. Spelling and Grammars takes too much time.
We won’t spent much time with this because it’s relatively simple:
Churning out content takes a lot of time, and any time we can cut from the process is well worth the cost. After all, our goal isn;t to make it perfectly readable, just readable enough to get them to click on the ads.
4. More color equals better.
Time and history have consistently proven that more color equals better.
Like most aspects of our physical world, this principal translates quite well into the online world. When designing your site always try to include as much color as possible. These colors may be complimentary, tertiary, binary, obfuscatory, etc. The important thing to keep in mind is just to get as much color in there as possible.
One website the makes excellent use of this principle is
This website really goes above and beyond! Not only do they manage to get ALL the colors in on one page, they somehow manage to scroll them across the screen at a high rate of speed — which ties into the next tip:
3. Rely on flash, images, and animation.
When that writers block hits — and it eventually will — nothing can mask it better that using more graphics to spice up your content. These will distract your readers from the lack of meaningful content, and distract them until their eyes skim to the next part of the page. The thoughts sound a bit like this: “Nice banner, hmm… menu. Oh, nice picture! words, words, words, and here’s the link I was looking for.”
Keep in mind that these images don’t necessarily need to be related to your post, just mildly interesting. For example:
A young child blowing on a dandelion
An attractive business woman
A portrait of a smiling family with the sun behind them.
An older dog, usually in sepia tone
This technique also works well for non-static imagery, like a GIF animation, or small flash object.
Let’s do a case study:
Company XZY knows they need a website — in fact they have been hearing about them for years. After getting together the momentum and resources, they purchase a domain name and hosting space with a pre-installed web template. After typing in thier mission statement, “XYZ’s Mission is to scout profitable growth opportunities in relationships, both internally and externally, in emerging, mission inclusive markets, and explore new paradigms and then filter and communicate and evangelize the findings,” XYZ company realized their site needed a little more “POP” to it.
How could we help XZY company? Instead of plain text “XZY Co.” and their logo, this could fly-in from the left of the page, and screech to a halt just before the right margin. To spruce up their mission statement, we could insert a photo of a multi-ethnic business team standing in a large glass rotunda. We could also have chosen a rotating globe with their employees silhouettes in the foreground.
If these techniques do not immediately work, there’s always the “funny-picture-of-a-cat-with-a-badly-misspelled-caption” trick. This is nearly guaranteed to work.
2. Buzzwords are the key to good content.
It is generally well known that the purpose of text on a website is to provide search engines something to find you by. Therefore, thorough and repetitive placement of industry relevant buzzwords greatly enhances the SEO (search engine optimization) of your particular web page, and will launch tagging you into the blogosphere of our post Web 2.0 world. Note, however that these keywords do RSS not have to be particularly relevant to your industry — any hip industry will do.
Any finally, the best way to ensure your visitors never come back:
1. Meet your needs, not theirs.
Its is Your website after all! When writing your content, it is important to ask yourself the following questions:
How will this make me look?
What can this post do for me?
What would be the popular thing to write?
Be very careful not to consider these questions:
What is relevant to my readers?
Can I solve a readers problem?
Is there a pressing issue or concern I can help with?
These later questions can steer you away from your true goal: to meet your own needs.