PoP Blog

on 10 Nov, 15:43

Leo will present PoP in WordCamp Kuala Lumpur 2017!

Leo will present PoP in WordCamp Kuala Lumpur 2017!
Blog

Leo has been chosen to be speaker in the upcoming WordCamp Kuala Lumpur 2017, to take place on Saturday 25 November 2017 at the Royale Chulan Bukit Bintang:

How to Make a Decentralized WordPress Website

PoP is a framework which aims to break the information monopoly of large Internet corporations by linking autonomous WordPress websites together, allowing them to interact with each other and become part of a wider network composed of different communities. Users from different websites can interact among themselves, without the need to join a centralized service. This way, website owners can keep control of their own data, storing it on their own servers.

We will explore the technical features of the framework, how it works, how to create a website with it and how to integrate it within an ecosystem.

The slides have already been uploaded here:

If you are around KL, come say hi!

on 29 Oct, 12:12

New feature: code splitting

New feature: code splitting
Blog

We have added code-splitting capabilities on PoP. Code splitting allows to only load the assets which are needed for the requested page and nothing more. We have initially implemented it for javascript (.js) and javascript template (.tmpl) assets, and we will implement it for stylesheets (.css) assets soon.

By not delivering any javascript code that will not be needed immediately, loading the first page in the website gets a significant performance boost, primarily on mobile phones, since their javascript engines are slow and may time significant time parsing javascript code. Additional javascript code is then loaded on demand, when needed.

In order to be able to identify which are the needed assets for each page, we need to create a map of dependencies of all assets in the website, so that loading an asset will also load its dependencies and so on. There are external tools to accomplish this, such as Webpack, however it works on the context of a purely javascript driven application, but not in a framework like PoP, which works on top of WordPress. For this reason, PoP had to implement its own functionality. However, this proved to be an advantage, since PoP can infer the map of dependencies automatically, just from analyzing the javascript codebase. Then, adding code-splitting to a PoP website does not need extra configuration, making it a breeze for the development process.

As usual, enjoy!

on 30 Aug, 22:29

We are launching Verticals—a venture to provide decentralized social networks to anyone

We are launching Verticals—a venture to provide decentralized social networks to anyone
Blog

The PoP team is very proud to announce the launch or Verticals, our own venture to provide decentralized social networks, and clusters of niche websites, to anyone:

verticals-logo

We decided to call this venture Verticals, because it specializes on providing vertical portals. Our focus is on empowering communities, providing them the tools needed to be autonomous online (i.e. not dependant on any mainstream platform), and enabling them to connect to all related communities. Our objective is to foster the decentralization of the Internet.

So, what is Verticals about?

Launch your vertical portal, and combine the effort of your community

vertical portal is an online community in which those people looking for a certain topic can meet up online. It is a unique access point to a certain industry, market niche, or area of interest.

Verticals creates decentralized vertical portals — information is accessed from a central point, which gets all data from a cluster of niche websites. The niche websites are autonomous: they can be accessed on their own and under their own URL, be owned by different people, and be attached to/de-attached from the vertical portal at any moment.

How a decentralized vertical portal works:


1. The vertical portal fetches its content from a cluster of niche websites, which provide their data in real time


2. Browsing inside the vertical portal, clicking on a link from the niche website will open the page inside the portal


3. User interaction with the niche website (such as liking a post, or adding a comment) takes place directly within the vertical portal

The user experience is always the same — the user can be made unaware that the data is coming from a different website

How decentralized online communities are created:


1. Niche websites are autonoumous websites (they exist under their own URL) which specialize on a certain aspect of the vertical portal’s area of interest


2. By combining niche websites, vertical portals allow users from all different websites to interact with each other, while making all content of their interest available at one central point of access


3. Vertical portals can thus become decentralized social networks for their specific topic of interest, bringing together all actors in their community

The niche websites may or may not have the same owners as the vertical portal — what websites are part of what portals can be agreed upon by both parties.


Needless to say, all vertical portals and niche websites are implemented using the open source PoP framework. An example of a vertical portal, composed by multiple niche websites, is our concept website SukiPoP:

sukipop-logo

To find out more, please head over to Verticals. Or as always, please contact us.

on 30 Aug, 21:17

We have launched SukiPoP, a concept of a decentralized social network

We have launched SukiPoP, a concept of a decentralized social network
Blog

The PoP framework’s slogan is “Break the information monopoly”. Today, we are finally able to showcase our vision of what can be achieved through PoP, with the ultimate goal of decentralizing access to information on the Internet.

We have launched SukiPoP, a concept website demonstrating what we call a decentralized social network:

sukipop-logo

All content in SukiPoP is fetched, in real time, from several other websites/social networks, namely:

  • MESYM, a social network on environmental issues from Malaysia
  • Agenda Urbana, a social network on political activism from Buenos Aires, Argentina
  • SDG-SSE, a content showcasing information related to the Sustainable Development Goals and the Social and Solidarity Economy

(These websites have been chosen randomly to be part of SukiPoP, with the only objective of demonstrating the concept; there is no common topic among them)

When visiting SukiPoP’s homepage, we are presented with a calendar of events (must click on the title to open the calendar). It can be seen how all events from all different websites are all displayed all together, in one single place, with different background colours to differentiate all websites:

sukipop-calendar

Similarly, when scrolling down, we have the content feed, which is gathering content from all websites. To show it clearly, we visualize it as the list format and showing 3 items:

sukipop-list

And when clicking on any external link, it opens the external page directly within SukiPoP:

sukipop-post

The content aggregation takes place all throughout the website:

  • when searching for information (for both content and users), the search will be performed on all websites, and the results will be displayed in one single place
  • when viewing a hashtag’s page, it will show all content with that hashtag from all websites
  • all events are shown on one single events map
  • etc

The decentralization also works for posting content

Fetching content on real time is not the only feature: whenever we interact with the content coming from any website, such as adding a comment, recommending a post, or following a user, the operation will be directly executed on the original website (that is, either MESYM, Agenda Urbana or SDG-SSE), and not on the aggregator (in this case, SukiPoP).

However, the user experience is always the same, and the user can be made unaware to be interacting with external content. For instance, clicking on the “Add comment” link on a post from an external website, it opens the “Add comment” window as it would normally:

sukipop-comment

After filling in the comment, clicking on “Submit” will save the comment on the original website (in this case, MESYM). If the user is not logged into that website, a message will appear prompting the user to log in to MESYM, all within SukiPoP:

sukipop-login

In other words, SukiPoP handles the user session for all of its aggregated websites, and makes sure users are logged in to the appropriate website whenever they need to post content there.

Even more, uploading files will also be done on the original website. After logging in, in that same “Add comment” window, we click on the “Add media” button, which will allow to insert images from, and upload images to, the original website (always MESYM):

sukipop-media

And when clicking on the external post’s author “Send message” link, we can send a message to a user from MESYM all from within SukiPoP:

sukipop-sendmessage

The end goal is to allow any user from any website, to be able to interact with all content and users from other websites, without having to be part of a centralized platform.

What comes next

SukiPoP is a work in progress, we are already working on incorporating the following elements:

  • An overview of all external websites, having a unique style to represent them throughout the aggregator (always same background colours for all content from each website), and clearly visible to the user
  • The possibility to filter content from specific websites (clicking on a checkbox next to the website name, it will show/hide all its corresponding content all throughout the website)
  • Addition of a marketplace to each website, to create a decentralized marketplace (users will be able to buy products from different websites/shops, all at the same time, from a central place)
  • Addition of categories, to classify all aggregated websites under common topics (eg: category ‘sports’ will show content from websites ‘football.com’, ‘tennis.com’ and ‘basketball.com’)
  • The possibility to select, on runtime, from which subset of websites to show content from (eg: for a decentralized marketplace, select those websites whose shops are located near the user)
  • The possibility to launch customizable social networks within SukiPoP for any visiting user; these social networks are to be hosted under SukiPoP’s cloud infrastructure, and feed its content directly to SukiPoP, in addition to being an autonomous website all by itself

As always, enjoy!

on 9 Aug, 22:54

New feature: multi-domain components (almost) ready!

New feature: multi-domain components (almost) ready!
Blog

The great potential of PoP is materializing: the ability to fetch data from different domains, and combine it all inside a single component (such as a calendar, a map, a list of posts, a news feed or a marketplace), is almost ready!

If you check the homepage of this website, and click on item “Decentralized”, you will see an events calendar, fetching data and displaying the corresponding events from several different websites:

multidomain-calendar

All of those events, whose background-colors are different, are being fetched from different domains, all in real time. Moreover, clicking on any event, either local or from an external domain, it will always open the event locally, and not in a new tab.

For instance, when doing right click => “Open page in a new tab” on any external link, such as event World Rangers Day 2017 (from website MESYM), the new tab opens the external website:

multidomain-originalevent

However, if we just click on it, as usual, then lo and behold!, it opens locally:

multidomain-clickevent

While the link is pointing to https://www.mesym.com/en/events/world-rangers-day-2017/, the browser URL bar is updated as https://getpop.org/en/external/?url=https://www.mesym.com/en/events/world-rangers-day-2017/.

It works for posting content too!

And this works not only for GET request, but also for POST operations. So we can interact with the source website, all from within the aggregator website. Actually, anything that can be done there, such as following users, recommending content, posting events, adding comments, etc, can also be done through the aggregator website, and it’s all transparent to the user. Even media files can be uploaded to, and accessed from, the external domains.

All interactions always present the same interface to the user, either performed locally or on an external domain. For instance, adding a comment to an event, either local or from another website, will open the same small window on the bottom-right of the page:

multidomain-addcomment

More developments are to be finished soon

There are still some things left to do, to complete the implementation of this feature:

  • Cache external data with Service Workers, following the Offline First strategy
  • Route external data through their own Content CDN
  • Implement discoverability and autonomy, so that domains can announce that they are alive and want to join an aggregator website, and make their configuration information publicly available

We expect to have these features developed by the end of August 2017.

As always, enjoy!

on 12 Jul, 16:49

New feature: automated emails

New feature: automated emails
Blog

Our latest implemented feature is a great one: all content in the website, either general content open to the public, as much as personal content that only logged in users can see, can also be sent through email, with no extra effort or duplicated work, because the email html code can be produced from the same source as the website pages. This is indeed code reusability to the extreme: creating a webpage can be used in both front and back-end (through server-side rendered html), and now also in emails sent to the users.

Even more, there is no need even to convert CSS to inline styles for the emails, since this is already taken care of automatically using library PHP CSS Parser (there is a limitation though: it only works for single-level classenames (eg: .btn); there is no support for other forms in the css, such as concatenated classnames (eg: .btn.btn-info), nested classes (such as .btn.btn-info), or html elements (eg: input[type="submit"]).

Digest with personal notifications, sent daily to the users

Digest with personal notifications, sent daily to the users

This way, it is now possible to create email digests with any content shown in the website, such as:

  • Personal daily notifications
  • Daily digests of new posts
  • Daily digests of upcoming events
  • Reminder emails to the users attending an event, on the day of the event (“Attend event” functionality must still be implemented #7)
  • Feedback emails to review the quality of the service sent to a user buying a product, after it has been delivered (the market place must still be implemented #14)
  • Others

All implemented new code can be found under wp-content/plugins/pop-frontendengine/library/css-to-style-conversion and wp-content/plugins/poptheme-wassup-automatedemails.

As always, enjoy!

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.


Sign up to our newsletter: