There are some excellent resources on the CSS property shape-outside that should be studied to understand how it works and how you can use it. This new property now enjoys a lot of browser support and it’s something you can generally apply without worrying about how it looks in non-supported environments, so it’s good to use in production now.
When I started playing around with it I did stumble over a couple of things. I figured I would write down some additional tidbits and tips that aren’t covered explicitly elsewhere. First, do read up on shape-outside on MDN, from the wonderful Sara Soueidan at ListApart and Robin Rendle’s working with shapes article on css-tricks.com. Michelle Barker also has a nice article on experimental layouts using shape-outside, including advice on using inverted shape techniques.
Tips
Floated elements only
Shape-outside can only be applied on floated elements right now, so knowing how floats work is very important to be able to understand how to implement an effect using shape-outside. There are some limitations and quirks that you might bump against. And the way the shape area is implemented might surprise you.
How to get a shape to fill the height of its parent
not with position absolute
One of the first things I’ve tried to implement was a shape that expands along with the content and this proved to be pretty difficult. Shapes can be defined using relative units, but a floated element can’t be given dimensions which respond to the content around it. If you want your shape to be the length of the content it’s supposed to affect, tough luck getting it to expand and shrink in an elegant way. One way to get a floated element to stretch in either direction to match the height of the container’s contents is to use position absolute and set top/bottom/left or right, but position absolute will also destroy the intended behaviour, as the contents won’t flow around it.
probably not with height: 100% either
Setting a proportional height such as height 100% will only work if the height of the container has been set. In most cases this won’t be workable, if you’re working with an unpredictable length of content it’s unlikely you want to set an absolute height on its container element and using a relative height is not enough.
using javascript
I’ve found no way to make a floated element fit its container with css only, so the alternative is some javascript. Here’s an example I wrote that adds height attributes to elements inline. It recalculates automatically when the viewport is resized.
How the shape area relates to the bounding box of the floated element
The shape’s locus of influence sits within the dimensions of the bounding box of the floated element. The shape you define can never expand beyond the dimensions you specify on the floated element. So your shape may have dimensions that are larger than the floated element, that shape will simply clip at the edges of your floated element.
Floats, shape-outside and clipping
A floated element may escape beyond its container (demo). There are different ways to deal with that behaviour. You can force the container to expand to fit the floated element. You do that by setting overflow: hidden on the container. You can also let the float clip, while hiding it by stacking it behind subsequent elements using z-index.
The shape-area does not observe your stacking instructions!
The clipped portion of your shape, i.e. the part that exceeds the container it’s floated in can’t be stacked below other elements. And this can be a bit of a surprise. As text in subsequent elements even outside the container of your floated element may wrap around your shape-area. Here is a demo to demonstrate. For further reading it’s worth reading up on w3.org.
This green floated element is higher than its container and it breaches adjacent containers. The ellipse shape it defines continues to affect the contents of elements down the page. (The handles you see are from the Firefox dev tools control). 
The orange div here has a z-index of 2, which obscures the green floated element’s contents and background color, but you see that its own contents is still wrapping around the ellipse shape.
You can use pseudo :before and pseudo :after to created floated elements
The cool thing is that floated elements can be pseudo elements, which in turn can have shape-outside defined on them. That means you won’t have to add a physical element in your markup to insert your shape effect.
You can use a transparent png to define the shape-area
Just note that when you specify the url in your shape-outside property, it’s not actually going to display your image, it’s going to compute the area of the image and redirect words and elements around the resulting shape. To have the image display you have to do so separately.
(Check here if you have issues getting transparent pngs to work as a shape)
Firefox has a very nifty shape editor in its developer tools console
To access it, look at the rules panel while you’ve selected the floated element. For the shape-outside property you’ll see an icon which you can click on. It will highlight the shape in the browser while letting you manipulate the points.
If you’re moving your WordPress sites to Rochen hosting, here are some potentially useful tips if you’re doing things manually.
First I recommend using All-in-One WordPress Migration plugin to export your existing sites into an export file. This plugin is very smooth with large packages, but does come with a maximum size limit before you have to upgrade to premium. They don’t tell you this until you try to import a package that over 512mb, so it can take you by surprise. Annoyingly, the plugin doesn’t give you a way to filter out unwanted file types (like large zips that may be floating about), so you don’t have a meaningful way of reducing the file size without manually removing stuff. They also use a self-created file format that you can’t open with normal software like 7zip, so you’ll have no luck removing large files manually from there either. However as a workaround, you can adjust the file size limit by modifying the constant ‘AI1WM_MAX_FILE_SIZE’ in constants.php. Set it to 4 >> 28 to get a 1gb file limit.
You could also use the Duplicator plugin. This is another excellent free solution, but the actual import process is not drag and drop. With All-in-One WP Migration all you have to do is install the plugin on the new site and drag and drop the exported file to import. With Duplicator you have to manually upload its files and run the installer outside of WordPress.
Rochen’s panel doesn’t make it immediately obvious how to add apps/sites to your package. If you go looking for a ‘create new site’ or ‘add app’ button somewhere you won’t find it. Provided you opted for a multi-site plan, you can add new sites at no extra charge by going to the manage hosting section. Adding a new site works by selecting the Create new account option from that screen. Once you do this a new site with accompanying cpanel will be provisioned.
You have the option of automatically installing WordPress on the create account step, but it’s useful to know that it’s fixed to use the domain without www. This can be a bit of a gotcha if your exported site is expecting a www based site, as you’ll get a redirect loop when you try to access the site after importing the WordPress database as is. This means you have to manually go into phpmyadmin to change two of the top entries in the options table that define the site/home/installation url just to get to your WordPress admin again (else you may get stuck in a redirect loop). If you are moving a site that defaults to using www, you might as well skip the automatic installation option because you want to preserve the www behaviour in most cases (if Google indexes your pages using the www subdomain, you want to keep it that way). Instead go through the scriptalicious WordPress installation screen from the cpanel after provisioning the site. From there you have options to set the site url. You can easily choose between http:// http://www and https:// and https://www from a drop down menu.
That brings us to SSL certificate installation. This is very easy at Rochen. Find the Let’s encrypt button on the Cpanel screen. From there you can initiate certificates by pressing the ‘issue’ button. It will take you to a screen where you can set what areas will be covered. If you are managing your DNS settings with Rochen this should be all quite automatic. If you are managing things through another service (like Namecheap’s managed DNS for instance), you may have to make adjustments and additions to your domain’s DNS settings. Always give it some time whenever you change a DNS setting before things take effect.
DNS settings are pretty easy, you just have to point your A records to the IP of your Rochen server, which you can find in your control panel. On some of my sites I was using URL redirect records (which Namecheap lets you do) to automatically redirects one domain to the next so I could send people to the www version of the site if they tried using the site without www. I found this messed with the SSL certificate issuing step mentioned above (it insists on installing a certificate for the non-www version), so I changed those entries into standard CNAME records instead.
Shape-outside is a revelatory addition to CSS, allowing designers to creatively bend text around shapes and since Firefox version 62 it enjoys over 80% browser support. There are several excellent resources on applying shape-outside but not that many articles demo the ability to use transparent PNGs. I was having trouble getting it to work initially, but there’s a couple of reasons why the effect might not show. Here are some tips:
- Did you check that your element has width/height set?
- Did you apply float to the element?
- Did you double check that the PNG you are using uses transparency?
- Is your PNG much larger than than the element itself?
If the effect still isn’t showing, maybe there is an issue with how the PNG is being fetched. Try replacing the url with a data URI instead and see if that makes a difference. If it now works, there is an issue fetching the PNG from your image url. For that see the notes on CORS and Shape-outside urls on MDSN.
Vue is a very attractive framework for building interfaces that has rapidly become an alternative to other popular tools like React & Angular. It’s lean, it’s fast and it’s actually fun to use while making code easier to read and reason with. It’s beginner friendly while also providing every foundation needed to build out the most complex of apps and websites. It’s great for individual coders but also allows works well in large teams of collaborators.
Why Vue Works Great in WordPress Projects
In a WordPress setting Vue.js is a suitable solution for small pieces of functionality as well as entire themes because it is a small payload. Vue uses html templates that are easy to understand. Unlike some other frameworks, you don’t need tooling to get started. You can include Vue on your page and start creating components without ever touching webpack, node.js or configuring a transpiler without any noticeable dip in performance. Those tools are only required if you want to take the development approach up a notch.
Vue compares favourably to other ways of building interfaces. If you’re just using plain javascript or leveraging jQuery, Vue will help you write less onerous code that is more efficient. More sophisticated tools such as React and Angular have arguably a higher barrier to entry by comparison. Working with css and creating transitions also is easier in Vue. Vue allows you to work with ‘single file components’ where you can easily organize and reason with the different parts that make up a component; javascript logic, html templating and css are kept separate, yet come together in the same file. If you already have mastered any one of these languages, working with Vue may feel much more comfortable to you than working with similar components written for other frameworks.
Another benefit of Vue is that any additional tools you might choose to compliment Vue with are pretty easy to chose. For additional state management help you can add on Vuex, for routing there is vue-router and vue-resource provides a bunch of goodies when making web requests. You don’t have to endlessly research and compare the merits of different competing 3rd party projects like is the case in the React ecosystem (a disadvantage of React’s more sprawling ecosystem).
Learning Vue and Complimentary Tools
The home of the Vue project is noted for its excellence and is the best place to learn the ins and outs of Vue, go visit it here:
Vuex is a complimentary library that is useful for non-trivial projects that use Vue that you might like. It also comes with excellent documentation from the project’s creator:
Video tutorials:
Vue.js 2 – Getting Started is a free video series on Youtube by @Maxedapps. If you like the instructor, he also has a paid course on Udemy that is excellent value.
Vue.js 2.0 in 60 minutes by Traversy Media.
Learn Vue2: Step by Step is a free(?) video series on laracasts.
Books:
Learning Vue.js 2 by Olga Filipova
Vue.js 2 Cookbook by Andrea Passaglia
Vue.js 2 Basics: Learn the basics of vue.js and earn your blackbelt by Tony Lea
WordPress Guides & Tutorials
Tutorials by Paulund that cover Vue usage in WordPress.
Josh Pollock wrote one of the first Vue tutorials for WordPress over at TorqueMag, describing how to work with Vue & the REST API.
Here’s is another write up by Josh Pollock on using Vue inside of the admin while taking advantage of ES6
Here you can learn how to create a Vue plugin from Ramsay Lanier, in it he demonstrates a content parsing solution for WordPress use cases.
WordPress Projects Using Vue
Riad has set up a limited experiment for Gutenberg the WordPress editor project which uses Vue instead of React.
Bill Stavroulakis has worked on an offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps.
Wyvern provides WordPress theme boiler plate for a Vue project.
RtCamp have created Vue Theme, a starter theme which uses Vue as the basis.
WordVue is starter theme that helps you set up a workflow for a Vue powered WordPress theme
RxDB is a tool for setting up a reactive database which in turn uses PouchDB, which in turn offers a variety of adapters that can build different types of databases with solutions like indexeddb and websql. It wasn’t altogether clear to me whether it would work nicely in an Electron app, and a nuxt.js driven one at that. Installation was a right nightmare.
To get setup you probably want to use sqlite / the websql adapter in pouchdb/RxDB. This involves configuring node-gyp and a bunch of dependencies. It won’t run properly out of the box until you tailor it to the version of electron you are running. To get sqlite3 running you will need a bunch of other dependencies installed as well, such as python 2.7. On Windows the most convenient way to do is to install windows-build-tools.
Here are some helpful tips if you have trouble installing windows build tools
If you get errors like “electron-v1.3-win32-x64\node_sqlite3.node module missing” you can try performing the manual steps outlined here and here. The important bit is that you need to tie your sqlite3 package to the specific version of electron that you have running in your project.
I also was getting webpack errors (unexpected character # at 1:0) relating to js files that open with a # hash/shebang directive. To fix that you can install the shebang loader and run it on the js files (like this) in question as a loader in your webpack configuration. In a nuxt project you configure your webpack config modifications in the nuxt.config.js file!
If you fail to get things running like I did for 3 days (until I got it working), there are alternatives like lowdb, nedb or realm but it really depends on what kind of setup you need in your project.
Update
So it turns out the hardest part of setting up RxDB with sqlite3 is due to webpack not working well with native add-ons. There are a whole slew of build/parsing errors you will encounter by the dependencies that are introduced via node-gyp, node-pre-gyp and sqlite3. The errors are very similar to ones mentioned in this webpack related thread. Some examples:
SyntaxError: Unexpected character '#' (1:0)
the request of a dependency is an expressionModule not found: Error: Cannot resolve module 'node-gyp'node-pre-gyp/~/tar/tar.js
Module build failed: SyntaxError: Invalid number (108:10)
Workaround
Because nuxt.js uses a SSR approach you’re kind of stuck with webpack for all your components. However, RxDB can work just fine with sqlite3 (via the pouchdb-node-websql-adapter) on the client. This offers one way of working around webpack: just load up RxDB as a script asset on the client and access it inside a Vue instance. You can configure a header script in your nuxt.config.js file. You may want to set webSecurity to false to be able to load the script as a local file.
The customizer is one of the newest and most fast developing areas in WordPress. It’s also one of the tougher APIs to code for because there are a lot of moving parts and to get the most out of it you really need to be proficient with the javascript based API as well as the PHP based API. Here is an evolving list of resources that go beyond the Codex pages to help developers out as they build out their own customizer functionality.
Code Examples For Working With the Customizer API by the Theme Review Team
Various examples of working with the Customize API, such as creating simple and advanced panels/sections/controls/settings. But it’s mostly PHP and doesn’t touch much on the client side of things.
Code Example For Creating a Postmeta Based Customizer Setting
This is a working example of a postmeta based customizer setting by Weston Ruter. Note that some of this code won’t transfer seamlessly to, say a custom post type scenario without some adjustments, because it hardcodes for a post type of post.
The Complete Guide to the WordPress Theme Customizer
Daniel Pataki does a good job walking through a more complete tour of what you might be able to accomplish with JS driven logic.
Dependently-Contextual Customizer Controls
Weston Ruter guides you on creating Customizer controls that instantly toggle on or off depending on state using client-side logic. (see related gist)
Resetting the Customizer to a Blank Slate
A useful starting point if you want to create a dedicated customizer setup that is separate from the default experience.
Customizer tutorials and documentation
An older post by Justin Tadlock grouping some guides and articles on the customizer
And lastly two streams of resources of new guides and updates on the customizer are here:
XWP’s Make Blog Covering The Customizer
And the Make blog covering the customizer on WordPress.org:
Make Blog posts Tagged with Customizer
If you decide you want to commit a project you have hosted on your machine into BitBucket and you’re using Sourcetree to manage it, you’ll find that there is no straightforward way to do that. When you try to create a new Repo inside Sourcetree, it demands that the project starts in a new, empty folder. There is no option to setup a new repo from existing files. This means it’s actually stupidly impossible to commit existing project files into a fresh repository in one smooth operation.
People have posted alternative ways of getting around this but the simplest way to do it goes like this:
- Create a repo inside BitBucket
- Create a new folder on your machine which will act as a placeholder
- In SourceTree go through the new repository dialogs and link it to the repo on Bitbucket and the folder you created in step 2.
- After completing step 3 there will be a .git folder in your placeholder folder, move it to where you actual project files exist
- SourceTree will automatically figure out that the folder was moved, you can delete this bookmark
- Re-add the project by dragging the folder containing your project files and .git folder into SourceTree
- Now you can commit your files into BitBucket from SourceTree
It’s the easiest way because it takes advantage of the fact that .git folders can be easily moved without messing things up in SourceTree.
Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.
Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.
I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.
here’s an example of how a (css) code snippet looks on the front-end:
[codeshower ui_state=”” language=”text%2Fcss” code=”.excited%20%7B%0A%09font-weight%3A%20bold%3B%0A%09font-size%3A%203em%3B%0A%7D”]
And here is a screenshot of how it looks inside the familiar WordPress post editor:
This shows the live preview inside the WordPress editor displaying my css code snippet
And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.
This is a pop dialog that shows when adding or editing a code snippet inside the editor.
There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.
If you have created a commercial or private plugin or theme and want to provide automatic updates for your product a number of solutions are available to you. With so many different avenues, which one is best for your project?
Code your own updater
There are a few guides out there that show you how to write the code for a basic plugin/theme updater. Notable sources:
Professional WordPress Plugin Development – a foundational book that you should have read if you are serious about WordPress development, it includes a section that shows you how to code an updater.
A Guide to the WordPress HTTP API: Automatic Plugin Updates – a tutsplus article
The benefit of coding your own is that you can keep things nice and simple. If you are needing more sophisticated features, you might find your time is better invested by using an existing solution instead.
Use an existing free updater framework
There are a couple of freely usable frameworks out there that you can get up and running very quickly, notable sources (all can be found on github):
1) W-Shadow has a plugin & theme updater as well as a server script to act as a repository. The server code is not dependent on WordPress, which is both a pro and a con, although it can be easily integrated into a plugin. You can quite easily customize it if you are open to getting your hands dirty with code (if you want to add in your own authentication protocols for example). The code isn’t formatted to WordPress guidelines which can be a bit jarring if you are customizing it. One perk is the ability to parse a zip package and extra all the meta information out of it so you don’t have to type this information out redundantly through an interface or in a script.
2) Automatic Theme & Plugin Updater for Self-hosted themes and plugins by Jeremy Clarke. This I haven’t tested and doesn’t appear to be maintained.
3) Reaktiv Remote Repo. This was created by Aaron Norcross, a reputed and trusted developer. It’s simple, easy to read and integrate. What’s not to love.
Purchase an off-the-shelf self-hostable solution
There are a couple of turn-key commercial solutions
Easy Digital Download has a commercial licensing add-on for software. EDD itself is free and this is a paid add-on, the developer is of a high standard and has managed to create a community around his products.
Woocommerce Software Add-on. It is pricey for an add-on, but it runs off the most popular e-commerce solution for WordPress.
Auto Hosted. The most cost-friendly of the bunch and also the most feature complete.
Sign up to a Hosted Updater Service
There are some pros and cons to using a hosted service.
Pros: you don’t have to maintain the relevant code, it’s all taken care of you. You don’t have to worry about your server going down. There are quite a few extra features that you get.
Cons: you have to worry whether the service sticks around and if the service goes down that can affect your customer relations. The cost grows with time when you pay per month. You have less control over the process. Most importantly though is that you are handing out data to another party and entrusting them to manage it responsibly. If a hosted service is compromised it could send malicious updates. Another business concern is the analytics you give them. By letting them handle your product updates you effectively share your sales data with another company that could bed used or shared in undesirable ways.
WP-Updates. It looks to be a very streamlined and easy to implement solution and also very price friendly. The company behind it is Dev7Studios (which appears to be run by a pair of developers) which has quite a portfolio of products. This is both a good sign and a bad sign. Good because they are likely to stick around long and bad because they might be(or become!) your competitor with one of their products and you would be arming them with valuable analytics.
SellWP is a fully featured solution that also takes care of a shopping cart and all of the other components need to sell WordPress products. It really is designed to get you selling your product as soon as possible. Unlike any other product, the pricing is based on sales and not on a fixed monthly or yearly fee. I think this is great and it’s especially good for those starting out. SellWP is run by a single developer; this might mitigate some of the concerns I have with having another commercial entity have access to valuable analytics, but it’s also a potential risk when a single person is a point of failure. If you are running an appreciable amount of business it would be important to have a plan B in place just in case.
So this is an issue I have from time to time and it had me dumbfounded. I would lose a handful of windows of programs I had open and running. The usual trick to retrieving lost windows, or windows that have gone ‘off’ screen is to try one of these:
- hit alt + tab, click the program thumbnail to select it, then use a keyboard shortcut to move it back on screen
- hit windows + left arrow key or windows + right arrow key will move a window from left to right. Pressing this repeatedly will move this across screens in a multi-monitor setup
- hit windows + d to show all windows, or windows + shift + m to restore windows
- right click the windows taskbar and choose one of the windows display options from the menu
This wasn’t working for me because the application windows in question weren’t being recognized. If you check the task manager (navigate to it with control + alt + del) and you see the program in question running in the processes tab, your program is in fact still running. Then you can try this:
Solution:
- Install process explorer (a free tool hosted by Microsoft)
- Run it
- Select the relevant program and right click to open up a menu, select “window”, click “bring to front”
Applies when:
- When you have lost an application window while the application is still running (verify it is running with task manager)
- When the application is not visible as an active program in the windows task bar and can’t be navigated to with alt + tab
- When you can’t restore the window by interfacing with its system tray interface (if applicable)