WordCamp PWA : An update

This is an update about plans to enhance the WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe website as a Progressive Web App for the 2019 Camp. Plans were first announced in this post in February 2019:
https://make.wordpress.org/community/2019/02/13/wordcamp-pwa-plugin-proposal-and-designs/


The organising teams from WordCamp Europe 2019 have been working on plans to enhance WordCamp websites by adopting Progressive Web App (PWA) features.

The plan is to provide contextual information for attendees that is served from and integrated with the main WordCamp website, and which can be stored locally on the user’s devices for offline access. This would allow attendees to access key event information in a more immediate and flexible way.

Initially, we had conceptualised this as an additional “layer” of content, which would load “over the top” of the existing Camp website for the duration of the event.

After sharing these original plans, we received a lot of feedback and suggestions from the community. Thank you!

There was much support for adding these progressive enhancements and contextual information for attendees. However, community members felt that progressive enhancements should be made to the existing site website and web pages themselves, rather than creating a separate and additional layer of content.

Based on your feedback, we now intend to take a more integrated approach to this project.

In practical terms, we will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins., which brings PWA capabilities – including service workers and the web app manifest – to WordPress. Rather than create a new and separate “layer” of context based information over the WordCamp website, we will instead enhance key pages of the existing WordCamp site – for instance, the Schedule and Speakers pages – to be stored locally on a user’s device for offline access.

In addition, we intend to create a new website homepage for the duration of the WordCamp event to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees.

WordCamp Alerts & Announcements

There was initially some discussion of creating an alerts feed for important announcements at the Camp itself. During the feedback phase, a number of people felt this was unnecessary, overly complicated and could prove a barrier to wider adoption of the PWA functionality by other WordCamps.

As a result, a decision has been made to use the existing Posts functionality from the WordPress installation for the news and alerts feed during the Camp.

Visuals

Below are some visuals of how the home page of the website might appear during the Camp itself. Whilst these designs here are specific to WCEU 2019, the content would of course take on basic styles – fonts and colours – from its WordCamp site.

Plans for the WordCamp Europe 2019 website homepage (mobile version)
Plans for the WordCamp Europe 2019 website homepage (mobile version)

Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 1)

Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 2)

We intend to complete this work in time for WCEU 2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe.

#apps, #improving-wordcamp-org, #progressive-web-app, #pwa, #regional-wordcamps, #wordcamp, #wordcamp-sites, #wordcamps

WordCamp PWA: Plugin proposal and designs

Planning is well underway to create a new look Progressive Web App (PWA) for WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. events. The PWA will make accessing and providing content on mobile devices much easier for attendees and organisers.

This builds on the work to create a PWA for previous WordCamp Europe (WCEU) events.

However, rather than developing a standalone PWA at a separate URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the WordCamp site, as has been the case in the previous years, the plan is to create a layer of contextual information for Camp attendees that is served from and integrated with the WordCamp website, and which can be stored locally on the user’s devices for offline access.

WCEU Blog post on the PWA development

The PWA will present a better mobile experience, taking advantage of touch screen gestures, and will put the most relevant information “at the fingertips” of Camp attendees. The PWA will enhance a WordCamp website, and will allow users to bookmark the website to their device’s home screen for offline access.

This PWA functionality will initially be created as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, displaying an additional visual ‘layer’ of content aimed specifically at attendees, in an ‘App like’ way over the main WordCamp website content. However, both online and offline users will have access to this same layer of content.

WordCamp PWA plugin design proposal v1 - PWA landing page displaying PWA controls over the main WordCamp website
WordCamp PWA plugin design proposal v1 – PWA landing page displaying PWA controls over the main WordCamp website

The plugin should be simple to set up and configure, so that – in the longer term – any WordCamp event can take advantage of its features.

This initiative is being led by the WordCamp Europe 2019 Organiser teams, with design prototyping by the WCEU Design team and development by the Attendee Services team. The Communications team is also actively guiding the design and development of the PWA.

The plan

  • The WordCamp PWA plugin will present an additional ‘layer’ of mobile friendly content over the main WordCamp website – inheriting the basic colours and fonts of the website. However, individual WordCamps should be able to customise the look of the PWA further using CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. overrides.
  • This PWA layer can be switched on/off from plugin settings within WordPress admin, so that it is only available for the duration of the Camp. When viewing the site on touch screen devices during the Camp, users will see the PWA layer appearing over the top of the WordCamp site.
  • The PWA controls will look very like a native smartphone App, and will be optimised for touch screen devices, employing swipe gestures.
  • On loading the website on touch screen devices, the user would be presented with a range of PWA control, docked to the foot of the screen, offering PWA menu options as icons around a large, central, ‘always visible’ circular button that will be used to open/close the PWA layer.
  • Using the power of PWA, the content of the App will be downloaded and stored offline on the user’s local device, and can be bookmarked on the user’s home screen to be accessed at any time, with or without an internet connection.
WordCamp PWA plugin design proposal v1 - Screen layouts
WordCamp PWA plugin design proposal v1 – Screen layouts

Content

The PWA plugin will display a range of key content sections relevant to conference attenders. Each content section will animate open as a panel from the icon at the bottom of the screen. This will initially include the following screens (which relate from left to right to the icons in the image above):

  • Attendees: a full list of attenders with Gravatars, sorted alphabetically, with search field to look up attendees by name. For GDPR reasons, attendees should not be downloaded and stored offline on the local device – although this may be reviewed in the future in line with GDPR and privacy regulations and with any permissions requested during attendee sign-up.
  • Speakers: a full list of speakers with GravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/., biog and links to relevant sessions, sorted alphabetically, with options to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by schedule date/topic group and search field to look up speakers by name.
  • Schedule: a full schedule for the WordCamp, with a single column per schedule date, and option to filter by Track. Users will have the ability to ‘favourite’ sessions, and these preferences will be stored on the local device. Columns can be swiped left/right to view previous/next day, and the sessions should be filterable to show just the sessions which the user has marked as their ‘favourite’. Depending on when the schedule is viewed, the schedule list should visibly scroll/animate down to the current time/session, so users can see ‘at a glance’ what is ‘on now’.
  • Venue Map: one or more graphical floor plans of the venue, with the ability to swipe/pinch to resize and re-position the maps within the viewable area of the screen.
  • Announcements: a chronological listing of announcements for attendees during the WordCamp, filterable by type (that is, catering, sessions, social, and so on) and can be determined by the WordCamp organisers.

These five sections will be arranged as icons around a large central ‘Start’ button, docked to the bottom of the screen, to allow users to turn the PWA layer on/off. This circular arrangement would allow us to add additional buttons/sections at a later date, and have these icons ‘revolve’ around the main circular ‘Start’ button with swipe gestures.

The content for all the above sections is already present with the WordPress database for WordCamp sites, apart from ‘Announcements’, which will need a new Custom Post TypeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. to be added, potentially with its own custom taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. (to allow users to filter different types of announcements). Venue Map images may also require the use of one or more custom fields for storage and display.

Tablet view proposals

Timeframe

The ambition is to pilot a version of the WordCamp PWA plugin at WordCamp London in April 2019, followed by a full launch at WordCamp Europe 2019 in Berlin in June 2019.


Questions

  • Would you use this PWA plugin for your WordCamp event?
  • Is the content detailed above the most useful for WordCamp attendees – is anything missing or unnecessary?
  • Is the design/UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. proposed intuitive and accessible?
  • Any other feedback or observations?

UPDATE: 17 April 2019

After posting these original plans to enhance WordCamp websites with Progressive elements, we received a lot of feedback and suggestions to enhance this development work. Thank you!

Based on this feedback, we now intend to take a more integrated approach to the project.

In practical terms, this will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins., which brings PWA capabilities – including service workers and the web app manifest – to WordPress. This will mean that, rather than create a new and separate “layer” of context based information “over” the WordCamp website, we will instead allow key pages of an existing WordCamp site to be stored locally on a user’s device for offline access.

In addition, we would intend to create a new homepage for the website for the duration of the WordCamp to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees.

We intend to complete this work in time for WCEU2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe.

#apps, #improving-wordcamp-org, #progressive-web-app, #pwa, #regional-wordcamps, #wordcamp, #wordcamp-sites, #wordcamps

Feature Request: Give WordCamp attendees ability to mark/save sessions of interest on camp schdeule

Attending WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. is great, but as an attendee I have to repeatedly refer to the schedule to see which talks I wanted to go to next and which room I should be in, etc. I’d like to suggest a new feature to enable users to create a custom track from a published schedule on a WordCamp website. A way for users to select their desired session and somehow save this “custom” track or collection of sessions.

What does saving mean?

I think the MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia would be save and print or email the custom schedule/agenda. The user would select one talk (maybe more? if they’re interested in multiple sessions) per time slot to attend by clicking that slot in the schedule, and visually the schedule would highlight marked sessions. Perhaps selecting a session would even create a new list of sessions as that attendees custom agenda for the Camp and that agenda can be printed. I’m sure proper UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. would deem it necessary to include some type of buttons or interface to add a session to an agenda and then to remove selected sessions too. As MVP, this could be front-end only and not even save any data. It could populate an email or be ready to print – or even simply allow users to keep the page open on their phone for quick glances during the conference.  I especially see this agenda layout being useful on mobile, where it’s tough to fit a complex schedule.

For a nicer experience though, the site would save the user’s selections and allow them to return to the schedule to see their saved/selected sessions. Ideally this would be tied to their .org account or something so either on the computer or phone they could log in and view their saved agenda.

How could it be useful to more than just the attendee?

Then if we end up being able to save this data, why not allow users to opt-in to share their schedule with other attendees or even the public. Attendees and sessions are displayed, let’s connect them. Each session abstract could indicate interest either by how many attendees have selected this talk or even list all interested attendees. I could see this being useful information to gauge general interest for talks and may help ensure to have ample space for each session. For example, if one session has a high level of interest it could be moved to a larger room to account for more attendees. Anyways, I digress…

Here I’ve mocked up a quick and ugly schedule with some marked sessions:

wordcamp raleigh schedule with marked sessions

Here’s a nasty screenshot of a schedule for WordCamp Raleigh with sessions marked as proposed. Notice there are two sessions saved at 11am, while only one session for later times.

The main point here is to have a way that when viewing the WordCamp schedule, attendees can select which sessions they are most interested in to create their own agenda during a WordCamp, and then a convenient way for users to save this agenda for quick reference during WordCamp. Sharing this interest may help attendees network and connect with others before and during the event. This data could possibly provide general feedback to organizers for planning purposes too.

I don’t believe this is the first time this type of idea has come up and I’ve had positive feedback from others and hope this can generate a useful discussion and roadmap. Thoughts?

#improving-wordcamp-org, #wordcamp-org, #wordcamps #feature-request

Remote CSS Plugin Launched on WordCamp.org

The Remote CSS tool is now available on WordCamp.org. It’s one of the ideas that came out of last year’s Community Summit, and it allows WordCamp.org site developers to work with whatever tools they want, instead of Jetpack’s CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. editor.

remote-css-basic

What You Can Do

For instance, you can:

  • Work in a local development environment, like Varying Vagrant Vagrants.
  • Use your favorite IDE or text-editor, like PhpStorm or Sublime Text.
  • Use SASS or LESS instead of vanilla CSS.
  • Use tools like Grunt to automate your workflow.
  • Manage your CSS in a version control system like GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/..
  • Collaborate with others on a social coding platform like GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.

You can use all of those tools, only some of them, or completely different ones. It’s up to you how you choose to work.

How It Works

Remote CSS works by downloading your CSS file from a remote server (like GitHub.com), sanitizing it to remove security threats, minifying it, and then storing a local copy on WordCamp.org. The local copy is then enqueued as a stylesheet, either in addition to your theme’s stylesheet, or as a replacement for it. The local copy of the CSS is synchronized with the remote file whenever you press the Update button, and you can also setup webhook notifications for automatic synchronization when the remote file changes.

Because of security concerns, it can only support specific hosting platforms, but it currently supports GitHub, and we can add others if there’s interest. If you want to use Beanstalk, Bitbucket, CodeForge, or something else, let me know.

Contextual Help

The pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party also contains detailed setup instructions inside wp-admin; just open the Help tab.

remote-css-help

It plays nicely with Jetpack, so you can test it out today without losing any of your current CSS.

If you’re looking for something simpler, though, Jetpack’s CSS Editor is still a great option.

If you have any feedback or ideas to improve it, please leave a comment. If you’d like to check out the source code, it’s available in the Meta repository.

#git, #improving-wordcamp-org, #jetpack-css-editor, #wordcamp-org

Update on building a new WordCamp theme

This is a follow up to the @iandunn post on the WordCamp.org tools survey results.

I setup a Github repo for the new WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. theme with a fork of Underscores to get things started.

To start with I have been collecting feedback and ideas for a new WordCamp theme so that our design lead, @robertnienhuis, has something to work with. I haven’t gotten too much feedback online yet, but have gotten some good ideas from several other organizers offline. If you would like to share some feedback as well please post a comment below!

Theme Features

Here is the feedback that I have collected so far, as well as my own ideas:

  • Great Design: I would like to keep the theme light and minimalist, easy to build on, but also have it look good enough out of the box for a WordCamp without a strong designer to be able to use as-is.
  • Mobile First: I’d really like to include a strong mobile version that makes WordCamp sites easy to use at the event when you are on the go.
  • Widgetized: It’s always tough to get markup where you want it, I’d love a lot of widgetized areas so I can get the content I need in the right spot to match any design. I spoke with some other organizers who would also like more widgetized areas, sitewide and page specific. Particularly for the featured content sections typically found on a WordCamp site.
  • Widgets: Building actual widgets into the theme might be a step too far, but there was some interest in having a few featured widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. styles built in, so that if you used the right markup in a text widget you could get a good looking featured section right out of the box that organizers can expand on from there.
  • Page Templates: Most of the people I talked to were interested in having more page templates to choose from. Like a homepage template with a page content area and multiple widget areas for featured content and also a similar homepage template with a smaller blog area setup as recent posts with excerpts. We’ll need a single column page template of course, but I’d also like to try to include a more minimalist template with little or no headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer as well that people can use for whatever they want as a blank canvas.
  • 404 Template: I’d like to include a pretty minimalist template for this too that includes a widget area just for the 404 page, so that people can create a nice custom 404 page if they want to.

Website Examples

I also have a few examples of WordCamp sites that I like, please share your favorites in the comments!

  • WordCamp Minneapolis: Westwerk did an awesome job designing this site and if we can do half as good I’d be thrilled!
  • WordCamp Montreal: They had a sharp looking site this year, I really like the call to action blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. on the homepage below the header with the tickets/schedule spot, and the subscribe/ social media spot.
  • WordCamp Denver: A nice clean site, great for mobile, with a sweet camping vibe.

I’m pinging people that volunteered to help out in the previous post: @cheffheid, @valeriosza, @dnelle, @danielgcarvalho, @brettshumaker, @davidjlaietta

#improving-wordcamp-org, #official-websites, #themes, #wordcamp-org

Site Cloner v1 is now available

The first tangible outcome of the Improving WordCamp.org project is now available. The Site Cloner lets you browse through screenshots of other WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. sites, and then easily copy the custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. from them, so that you don’t have to start a new site from scratch.

Screenshot of Site Cloner

Props to @ryelle for building the prototype 🙂

If you’d like to check if out, just open up the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. on your site and click on the Clone Another WordCamp panel. Just be sure to not click the Save button, though, unless you actually want to switch your theme and reset your CSS 🙂

It’s the first version, so there are some known bugs and missing features. If you’d like to help out with those, check out these issues on MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.:

It’s also important to keep in mind that there will always be some CSS that is specific to each site; maybe it references a page ID, or uses a background image with the original Camp’s logo, etc. So, you’ll still need to do some work to make the CSS fit your site, but this should get you 90% of the way there.

 

Pinging the people who took part in the previous discussions to make sure they don’t miss the post: @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @iandstewart, @miss_jwo, @topher1kenobe, @jenmylo, @georgestephanis, @valeriosza, @jb510, @jleuze, @robertnienhuis, @cheffheid, @dnelle, @danielgcarvalho, @brettshumaker

#improving-wordcamp-org, #official-websites, #wordcamp-org

Better WordCamp.org Docs

One of the projects we identified to improve WordCamp.org was to have better documentation.

Sometimes organizers aren’t aware of the intended approach to building a WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. site, or of the tools that are available, so they end up doing things the hard way, or in a way creates a worse experience for participants.

For example, if an organizer doesn’t make use of the custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. for speakers, then those speakers won’t get a badge on their WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile, and the upcoming Android app won’t be able to display speakers for that camp.

We do have a lot of written documentation on plan.wordcamp.org, along with some videos, but there are many ways that it falls short.

 

Problems

Here are a few of the problems we’ve already discussed, but please leave comments with any others that you see.

  • There’s a lot of documentation, and most people won’t read through everything.
  • Organizers have to visit an external site to reference things while working on their WordCamp site.
  • We’re always adding new features and iterating on old ones, but there isn’t a good way for returning organizers to know what’s changed since they used the site last year.
  • Building a site on WordCamp.org is different than what most organizers expect, so they need to shift their mindset in order to not fight against the grain. For example, organizers can’t upload custom plugins or create child themes; the majority of customization is done with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. and our custom tools.

Brainstorming Solutions

Here are a few ideas, but please add more in the comments, and leave your feedback on these.

  • Bring documentation into wp-admin, in the form on Contextual Help and Admin Pointers.
    • Should we bring all documentation into wp-admin, or just certain types (like cheat sheets)? If everything is in wp-admin, it will be hard to get an overview. Maybe a hybrid approach?
    • We should probably create a new “WordCamp.org Help” contextual tab rather than integrating into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.’s generic “Help” tab, because that would be more discoverable and less cluttered.
    • Duplicating documentation in multiple places would be harder to maintain, and they’d likely get out of sync.
    • Hard-coding documentation into a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (rather than the current WordPress pages) would make it impossible for non-developers to update and improve the documentation, which would be a bottleneck. Maybe we should build a way to programmatically import documentation from Plan into wp-admin? It might need to be pages specifically crafted for wp-admin screens, though, rather than the kind of lengthy articles we have now.
  • Add more videos, because sometimes those are easier to digest than long articles.
    • Are there specific types of content that are better for video than others?
    • Would this have a negative impact on non-English speakers?
  • Encourage organizers to ask questions in #events on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. when they don’t know something, and when they’re not sure if there’s a better way to do something?
  • Create an demo site that is “perfect”, and then make a video walking through it, showing the best way to set things up.
    • We could also give organizers read-only access to it, so they could explore and play around.
  • Make the system more intuitive, so that formal documentation is less necessary.
    • For example, we currently pre-populate new sites with default pages to provide examples of common content and shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. usage.
    • What other things could we do?
  • Create a page that has an index of all the significant changes since their last camp. Organizers could visit the page and enter a date range, then get a short description of all the changes, with links to their full documentation.
    • One downside to this it would require extra time from developers, each time they make a change, and we already have limited time. It might be possible for volunteers to do a lot of it, but it’d still require extra developer time to inform the volunteers about it and give them all of the information they’d need to document it.
    • Another idea would be a mailing list where a message gets sent out each time something new is released. A big downside to that, though, would be that organizers would probably forget most of the info by the time their next camp rolls around.
    • Another idea would be to create a video once a quarter that walks through all the changes in the past three months. This has the same drawback as the original idea, but it might be a better format, and doing it once a quarter might be easier doing it than every time a change happens.

What are you thoughts on all of that? What other problems and solutions do you see?

 

Everyone is encouraged to participate in the discussion, but I’m pinging the people who took part in the previous discussions to make sure they don’t miss the post: @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @iandstewart, @miss_jwo, @topher1kenobe, @jenmylo, @georgestephanis, @valeriosza, @jb510, @jleuze, @robertnienhuis, @cheffheid, @dnelle, @danielgcarvalho@brettshumaker

#documentation, #improving-wordcamp-org, #official-websites, #wordcamp-org

Results from the WordCamp.org Tools Follow-Up Survey

The results of the previous survey were unclear about the theme/template question, so I created a new survey to clarify that. The results from that follow-up survey are now in.

The most popular choice was to let organizers build a new theme to meet the specific needs of WordCamps. We’ll also be able to add new page templates to the theme in the future, provided that they meet the criteria discussed earlier.

Once the theme is done, it’ll be reviewed by the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team for any security issues, and by the Deputies for general appropriateness, and then made available to everyone on WordCamp.org.

 

Building a Team

The first step will be to put together a team of organizers who want to build the new theme. Obviously it should have designers and developers, but it could also benefit from UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) specialists, and of course lots of people to test it.

If you’re interested in being on the team just leave a comment below, and if you know someone who may be interested, please send them a link to this post.

We’ll need someone from the team to take the lead role, and make sure everything is organized and moving forward. Once we see who’s on the team and what everyone’s skills are, I’ll look for someone who’d be a good fit for that.

 

Guidelines

The team will have the freedom to build whatever they think is best, but I think we should also agree on some guidelines to ensure the project reflects our community’s values and standards.

  • The team should be welcoming and open.
    • It should be a collaboration from across the community, rather than a small group from one city or company.
    • In practical terms, that means development should occur on an open platform like GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, and communication should take place on this p2 and in the #events channel on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
  • The theme should serve the many, not the few.
    • The goal should be to make something that meets the needs of most organizers, rather than just the needs of the individuals on the team.
    • The focus should be more on making it a flexible starter theme for organizers to customize, rather than just something that looks beautiful when it’s first activated. It can (and should) have a great initial design, but the primary goal is to let organizers take it and easily create something that looks totally different.
    • The team should solicit feedback from lots of camps to make sure that their needs are addressed.
  • The project should not be a design-by-committee.
    • Input from organizers and contributors should be weighed heavily, but ultimately the team lead should be the one making the final decision on what choices will have the best outcomes for the entire community.
  • The theme should meet the relevant standards:
  • It should be a theme only.
    • It shouldn’t bundle custom post types, shortcodes or other functionality.
    • Having said that, the team should feel free to contribute as much as they’d like to the existing plugins, provided those contributions will also work with the other themes on WordCamp.org.
  • It should be thoroughly tested.
    • Because it will be customized by lots of organizing teams, we’ll need to maintain backwards compatibility, which will limit the kinds of changes that can be made in the future. That makes it very important to test well up front.
    • “Testing” in this case doesn’t just mean testing the theme’s internal correctness, but also testing how easy it will be for other organizers to create new designs on top of the theme.
    • It should be betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.-tested with a handful of camps before launching to everyone. If fixing any problems are found during the beta period that would require breaking backwards compatibility, then we’ll be able to do that and manually update the beta sites.

If anyone thinks there should be any changes to those guidelines, please leave a comment so we can all discuss it.

 

Everyone is encouraged to participate in the discussion, but I’m pinging the people who took part in the previous discussions to make sure they don’t miss the post: @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @iandstewart, @miss_jwo, @topher1kenobe, @jenmylo, @georgestephanis@valeriosza@jb510

 

#improving-wordcamp-org, #official-websites, #wordcamp-org

Editing WordCamp CSS Locally with Git

One of the Improving WordCamp.org projects is to let organizers develop their CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. locally, and then commit it to a version control system like GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/., and have it automatically updated on their WordCamp.org site. This is the project that I think will make the most impact for organizing teams with experienced developers.

The benefits are that:

  • You avoid all of the pain points of editing CSS in a browser.
  • You can use whatever IDE and other tools that you normally use.
  • You get all the benefits of a version control system, like easier/safer collaboration, history, and a structured approach.

So, I’d like to discuss the best way to implement a system like that.

Implementing a solution

After thinking about it for awhile, this is the best approach I’ve come up with:

(Note: This process has been updated since it was originally published, to incorporate feedback from the comments.)

  1. Add a new wp-admin screen under the Appearance menu, called something like “Remote CSS”. It will have a field where you can enter the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for a CSS file, and a button to pull CSS from that repository and enqueue it locally. The CSS file can be in a source control repository like Git, but it doesn’t have to be.
  2. The CSS file can be named anything, and it can be built from supporting SASS/LESS/etc files, but only the CSS file will be used by WordCamp.org; everything else will be ignored.
  3. The contents of CSS file will be passed through Jetpack’s CSS sanitization functions, and if there’s anything left, the safe CSS will be cached. If there are any errors while fetching the file, the process will abort to avoid overriding the known-good version that’s already stored on WordCamp.org.
  4. When front-end pages are loaded, the cached CSS will be enqueued as a extra stylesheet, similar to how Jetpack’s Custom CSS is enqueued.
  5. To automate updates, there will also be an endpoint listening for webhook notifications of pushes to source control repositories. If the files changed in the pushed commits include the CSS file, the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party will automatically fetch the latest version, sanitize it, and cache it. Updates will be limited to once every 3 minutes, to prevent abuse. Rate-limited notifications should be queued and acted on once the limit has expired.
  6. If the fieldon the Remote CSS screen for the CSS file is empty, we’ll display step-by-step instructions for setting up the CSS file, webhook, and a local WordCamp.org sandbox. If the file is hosted on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, we’ll also recommend enabling two factor authentication, to mitigate the risk of a compromised account leading to CSS defacement or other malicious changes.
  7. A new metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box could be added to the Appearance > Custom CSS page to advertise the option of using a remote repository.

Does anybody see any problems with that approach, have a different idea, or have any other feedback?

 

#git, #improving-wordcamp-org, #jetpack-css-editor, #official-websites, #wordcamp-org

Allowing Custom PHP and JavaScript on WordCamp.org

By far the most common request in the WordCamp.org tools survey results was for the ability to write custom PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. and JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. This is definitely understandable, because being limited to only modifying CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. does significantly restrict what you can do with your site.

Why not allow custom PHP and JavaScript?

The reason that this restriction exists is because there would be very serious security and maintenance implications if we were to open things up.

Security is very hard, even for experienced developers. Everybody makes a mistake at least occasionally, and many developers don’t realize how often  they do.

There’s no doubt that allowing unreviewed PHP or JavaScript would introduce critical vulnerabilities, not just to WordCamp.org, but to the rest of the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ infrastructure as well, and even to regular WordPress sites interacting with the infrastructure.

WordCamp.org is connected to the rest of WordPress.org in several key ways, and the right kind of vulnerability (or combination of vulnerabilities) could allow an attacker to do some pretty scary things, like silently stealing password hashes or authorization cookies. If they targeted someone with commit access to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., WordPress.org, or a popular pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, then the results would be severe.

Of course, we have access controls, monitoring, and other systems in place to minimize the chance of an attack and mitigate its effectiveness, but the essential threat is there and can’t be downplayed.

 

Why not just review custom code before it’s committed?

We just don’t have the resources to review that much code. There are only two developers who handle the vast majority of the work on WordCamp.org, and both of us also have responsibilities on other projects. So, we have roughly the equivalent of one full time developer. There were 80 WordCamps in 2014, and that number grows every year.

Conducting a thorough security audit and code review takes a significant amount of time, and simply isn’t possible with the resources we have.

Imagine giving hundreds of developers access to one of your high profile sites, or committing to review hundreds of themes and plugins every year while still trying to build new features and iterate on existing ones.

 

Other potential solutions

  • Assemble a team of volunteers to review code – Because of the security concerns, any volunteers would need to be very experienced and a trusted member of the community, and because of the volume of sites, we would need to have a lot of them. I don’t think we’d be able to keep up with the demand, and we’d also be taking those people away from contributing to other projects. It’d be much more efficient and make a bigger impact if those people collaborated on projects that could be shared between all camps instead.
  • Let everyone host their own site – This is how things were in the early days, but we moved to a centralized platform because it was common for domain names to expire, or for the current year’s team to be unable to post an announcement to the previous year’s site, or for sites to be unmaintained and get hacked, etc. It would also mean that organizers would have to spend extra time setting up hosting, and, because of security concerns, anything that requires connecting to WordCamp CentralWordCamp Central Website for all WordCamp activities globally. https://central.wordcamp.org includes a list of upcoming and past camp with links to each. or the WordPress.org infrastructure would become much more complicated (e.g., centralized payment requests and ticket revenue collections, single sign-on, integration with Profiles.WordPress.org, etc).
  • Create each site inside an isolated, virtual container – That would require a lot of work from the Systems team, who are also very limited on resources, and it would have the same downsides as above, where anything that connects to Central or WordPress.org would become much more complicated.
  • Only let experienced developers write custom code – The security concerns would force us to set the bar very high, and evaluating a developer’s qualifications is itself a time-consuming process, so this would only impact a small number of camps. It could also make it appear like certain camps were getting special treatment, and lead to hurt feelings when someone who feels like they’re experienced enough isn’t accepted.

 

What makes the most impact?

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. sites are tools that help organizers communicate with attendees. It’s great to have a design the community can take pride in, and working on the site can definitely be a community-building experience, but volunteer hours are limited. It’s best to focus on things that will inspire and connect attendees at the event, rather than making the website perfect.

At the end of the day, attendees will be helped the most by the sessions, workshops, networking, and contributing that goes on at the event.

The goal of WordCamp.org is to give organizing teams something that works out of the box and facilitates all of the basic conference services that most WordCamps need, so that you can spend your limited time on the event, rather than the website for the event.

 

Solutions that benefit everyone

Allowing organizers to write custom PHP/JavaScript isn’t the real goal, it’s just a means to an end; and I think there are better ways to get there.

For the most part, all of our camps have very similar needs, so rather than each one re-inventing the wheel on their own, it’s much more efficient if we collaborate on solutions that work for everybody.

The survey results helped us identify the worst pain points with the current tools, and we’re planning solutions to improve the CSS editing experience, to give more theme/template options to choose from, and to be able to easily clone another camp’s site instead of having to start from scratch. The feedback on all of those was that they’d have a huge impact on everyone’s ability to create the sites they want.

I think that focusing our time and energy there is going to be much better for everyone in the long term. If you’d like to help move those projects forward, please check out the survey recap for next steps.

And if there’s a project that would benefit everybody, but it’s not on that list, you can always work with the Community Team to build a consensus for it, and organize a group of developers from local communities to contribute it. You don’t have to be a developer yourself; many projects need people to organize everything, create designs, write documentation, perform user testing, etc.

#improving-wordcamp-org, #maintenance, #official-websites, #security, #wordcamp-org