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 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. https://www.php.net/manual/en/preface.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

WordCamp.org Tools Survey Results

The results from the WordCamp.org tools survey are in. Eachย PDF below has a chart with the totals, along with the anonymousย feedback that was given.

ย 

Allowing 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. https://www.php.net/manual/en/preface.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/.

By far the most common feedbackย was aboutย the desireย toย write custom PHP and JavaScript. That deserves to be discussed, butย itโ€™sย a big enough topic that it should haveย its own conversation, so I started another post withย aย detailed explanation of the reasons behind the limitation.

ย 

How well does 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 meet your needs?

  • A surprising number of organizersย were happy with the editor (62%), but that still leaves almost 40% who arenโ€™t.
  • Theย most common frustrations were losing your place when the page reloads to save changes, and having changes overwritten when multiple people are editingย at the same time.ย Both of those were problemsย we identified as things to fix if we choose to focus on improving Jetpack rather than building an alternative solution.

ย 

If we were to improve the CSS-editing experience, which approach would you prefer?

  • Supporting a local development workflow was more popularย by 10% (actually, a bit more if you include several of the โ€œOtherโ€ answers that were similar).
  • I think itโ€™s likely that the people whoย voted for improving Jetpack are mostly happy with the editor, but just wish it were better; while people who voted for an alternative approach arenโ€™t really happy at all. So, improving Jetpack would make a moderate impact, but buildingย the alternative approach would make a big one. Based on that, I think we should pursue the local development workflow.
  • Jetpack wonโ€™t be going away, of course, and it will still receive any improvements that ship with future versions. So if youโ€™d like to see the CSS Editor issues resolved, you can stillย send pull requestsย to Jetpack,ย or encourage developers in your local community to do so.
  • Severalย people suggested we do both, and of course the two options arenโ€™t mutually exclusive, but we do have very limited resources, so we need to prioritize the things that will make the most impact and do those first.
  • People overwhelmingly requested 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/.(Hub) over SubversionSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/.. Iโ€™d like to see us explore this first, sinceย most teams are much moreย familiar with Git than SVNSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/., which makesย SVN more of a barrier than a benefit. I can foresee there being some logistical challenges that we wouldnโ€™t face with Subversion, but itโ€™s worth a shot.
  • See the Next Steps section at the end if youโ€™re interested in helping out with this.

ย 

To have more options when customizing your site, which would you prefer?

Page templates were the favorite choice by a wide margin, but Iโ€™m worried that I didnโ€™t word this question very clearly, and that may have skewed the results. I assumed that everyoneย would already be familiar with the previous discussion thatย containsย details on the proposal,ย but some of the responses make it sound like some people thought thatย โ€œhave the ability to create custom page templatesโ€ meant that they could freelyย upload unreviewed customย templates,ย whichย isnโ€™t what had been we originally discussed.

The templates would have to meet certain criteria, and be reviewed for security and other concerns before they could be added toย WordCamp.org.ย We wouldnโ€™t want to end up with dozens of templates that are onlyย relevant to a single camp, or to have to review new templates for every site, so I think weโ€™d have to require thatย theย templates be generic enough to be reused by otherย camps, and that they only be created when there is a significant need that canโ€™t be accomplished with CSS alone.

To clarify, I started a new survey withย just this question, but better descriptions of the answers. I also added a new option, which incorporatesย one of the suggestions from the survey, which was to allow a group of organizers to build a new custom themeย to fit the specific needs of WordCamps, which would then be reviewed and made available to allย camps.

Pleaseย take that survey to help us move forward with this project; it closes at midnight UTC on June 16th.

ย 

Several people suggested that we add more themesย andย custom page templates, which is an option, but unless there are enough volunteers to work of both in parallel, weโ€™ll need to prioritize the one that makes the most impact first.

Allowing inline SVGs was another thing that was mentioned several times. WordCamp.org doesnโ€™t actually 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. them, WordPress itself does. SVGs are awesome in a lot of ways, but theyโ€™re not the benign images most developers think of them as; theyโ€™re really XML applications that can run arbitrary JavaScript and embed external resources.

Once Core finds a way to safely allow them to be uploaded, though, WordCamp.org will automatically inherit the solution. In the mean time, you can still use SVGs as background images via CSS, which has most of the benefits but without the same security concerns.

ย 

Of the four projects identified in the make/Community posts, how much would each of them benefit you?

Dโ€™oh, comments were disabled for this question, that was a mistake on my part.ย Please leave them on this post if youโ€™ve got any feedback.

All of them ranked pretty well, so it looks like we picked good projects. Improving the CSS-editing experience and adding more themes/templates were the most popular, followed by cloning a site and then docs.

ย 

Is there anything that would benefit you more than those 4 projects?

There were a lot of comments here, but no bigย themes among them, and many of them would actually be solvedย by the proposed projects, so I think we should stick with the ones weโ€™ve got. This is still a good list of things to keep in mind for the future, though.

ย 

Do you have any other comments or feedback?

This one also has some good feedback, but nothing thatย would shift our direction.

ย 

Existing Tools You Might Not Know About

There were a handful of answers that requested tools we already have:

  • The Tagregator 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 pulls in social media postsย with your hashtag from Twitter, Instagram, Flickr and Google+.ย Check out the โ€œSocial Media Streamโ€ page that automatically gets created on new sites.
  • You can e-mail attendeesย based on discount codes and other filters with CampTix. Look for the Tickets > Tools > Notify screen.
  • You can embed live streamsย from Livestream.com, Ustream and DaCast using shortcodes.
  • If you use the Call for Speakers form that is automatically added to new sites, then any submissions will be automatically converted into drafted Speaker and Session posts, which can you publish or deleteย when you decide which ones to accept.
  • Session posts have a 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 to add URLs for the slides and WordPress.tv video. If you fill those in theyโ€™ll automatically be shownย in the sessions 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..

ย 

Next Steps /ย How to Get Involved

For each of the projects, weโ€™ll need people to help brainstorm ideas, give feedback, and write code.

  • Clone another campโ€˜s theme/CSS/etc: This project needs a few developers to test the prototype and report/fix any issues.
  • More Themes/custom templates: The data for this question may have been skewed, so pleaseย answer this revised questionย to make sure we have good data to baseย decisions on. Onceย the results from that are in, Iโ€™ll post them here and we can discuss how to move forward.
  • Local CSS development and better documentation: Weโ€™ll need to discuss the detailsย for these and come up with a plan. Once the conversation on this post dies down, Iโ€™ll start new posts for them so that we can have a focused discussion.

ย 

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

WordCamp Organizer Survey

Weโ€™ve had several good discussions on ways to improve the tools used on WordCamp.org, and now itโ€™s time to collect some hard data so we can know how toย move forward.

If youโ€™ve worked with any of the WordCamp.org tools โ€” custom post types, Jetpack CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. editor, widgets, etc โ€”ย in the past 18 months, please fill out this 6-questionย survey:

http://wordcampcentral.polldaddy.com/s/improving-wordcamp-org-tools

ย 

Anyone on an organizing teamย who has used the WordCamp.org tools is encouragedย to take the survey, but Iโ€™mย pinging the people who took part in the previousย discussions to make sure they donโ€™t miss it:ย @ryelle, @harbormark, @chanthaboune, @nvwd,ย @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @mj12982, @iandstewart, @miss_jwo,ย @topher1kenobe, @jenmylo, @georgestephanis, @bandonrandon,ย @cliffseal,ย @valeriosza,ย @hlashbrooke,ย @lcrddz

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

Improving WordCamp.org: Adding More Themes and/or Page Templates

This postย continues the previous discussions weโ€™ve had on the project to improve WordCamp.org. If youโ€™d like some background information,ย you can check out the notes from the 2014 Community Summitย and the discussion on the CSS Editor.

* * * *

ย 

One of the most common pieces of feedback has been that, when organizers are building their sites, theyย want more themes and/or page templates to choose from. The goal of this postย is to start a conversationย on that topic and hash out the details of what we want and how to move forward.

Right now organizers can only choose from the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. themes (TwentyTwelve, TwentyFourteen, etc) plus 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. Base theme, a custom theme that was written specifically for WordCamps. Organizers canโ€™t edit theย 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. https://www.php.net/manual/en/preface.php., HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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/. of the themes due to security and maintenance concerns, so customizing the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is the only way toย create a new design. Thereโ€™s a lot that can be done with just CSS, but sometimes organizers still wish they had more options.

Define the Problem and Goals

I think itโ€™d help to have some specific examples of limitations, and to describe whatย the goals are in having more choices. These questions should help start the discussion, but feel free to ask/answer others too.

  • Have you run into limitationsย customizing your site? If so,ย can you describeย them?
  • Do you find that it takesย too much work to transform the design of theย available themes into your custom design?
  • Do you run into situationsย where you canโ€™t achieve the design you want without modifying the themeโ€™s HTML?
  • Are there other major problems that you run into?
  • Whatย do you think would be good solutions to the problems you found?

Potential Solutions

So far two potential solutions have been discussed: making moreย themes available to choose from, and providing a way for organizers to submit custom page templates for any available theme.

Theyโ€™re not mutually exclusive, so we could possibly do both, but we have limited resources, so I think itโ€™d be best to pick the one that will make the most impact and focus on thatย first. After the first round ofย improvements are made, we can reassess where we are and what to do next.

Other than those two, are there any other solutions that should be considered?

Adding More Themes

The first potential solution would be to simply makeย more themes available to organizers. This wouldย save time in some cases because you could start with something that is closer to your custom design.

Itย would also provideย a wider variety of layouts and templates,ย whichย could solve someย of the problems related to needing a specific layout in order to achieve a particular custom design. If a developerย did run into that problem, though, they would still be stuck because they wouldnโ€™t be able to edit the HTML.

Just like with plugins, we have to be careful about security, performance, etcย when adding more themes, but those concerns could mostly be mitigated by picking themes thatย are available in both the WordPress.org directory, and on WordPress.com. Those themes have passed an exhaustiveย review by trusted developers, so we would be able to assume that theyโ€™re safe without having to audit them ourselves.

Do you think this is a good solution?ย If so, which specific themes would you choose?

Are there any problems with it?

Accepting Custom Page Templates

Another potential solution would be to allow organizers toย write custom page templates, so that they couldย create custom layouts for the content area if their design required it. Theย templates wouldnโ€™t affect the 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., sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. or footer, though.ย In order to use the templates, weโ€™d need to create child themes for the existing themes, and add them there.

The templates would have to meet certain criteria, and be reviewed for security and other concerns before they could be added toย WordCamp.org.ย We wouldnโ€™t want to end up with dozens of templates that are onlyย relevant to a single camp, or to have to review new templates for every site, so I think weโ€™d have to require thatย theย templates be generic enough to be reused by otherย camps, and that they only be created when there is a significant need that canโ€™t be accomplished with CSS alone.

What do you think about this solution? Are there any specific page templates that you think would be useful?

Are there any problems with it?

ย 

Do you have any other thoughts or comments?

ย 

Everyone is encouragedย to particpate 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, @mj12982, @iandstewart, @miss_jwo, @topher1kenobe, @jenmylo, @georgestephanis

#community-summit, #improving-wordcamp-org, #official-websites, #page-templates, #themes, #wordcamp-org

Improving WordCamp.org: User Experience of the CSS Editor

One of the discussions we had at the 2014 Community Summit was about customizing WordCamp.org sites, and we identified some of the worst pain-points that organizers currently have.

One of those problems was thatย customizing a themeโ€™s CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is difficult and frustrating.ย Currently, organizers use Jetpackโ€™s CSS Editor, which works well for small tweaks, but isnโ€™t really intended for the types of major overhauls that most WordCamps are doing. Some of the biggest problems are:

  • There isnโ€™t any post-locking or version control, so itโ€™s easy for two users to accidentally overwrite each otherโ€™s changes
  • Saving edits requires a page refresh, which makes you lose your place. With larger rulesets, finding your place again takes too long and often breaks mental โ€œflowโ€, which is frustrating.
  • The browserโ€™s built-in Find functionality doesnโ€™t always work
  • The rules canโ€™t be modularized into small, manageable files โ€” and then recombined during processing โ€” for easier development and maintenance.
  • Many consider editing in a browser to be a subpar experience to using an IDE with features like code-completion
  • Cross-browser/device testing canโ€™t be easily done with the Preview functionality
  • Syncing between production and a local testing environment has to be done manually
  • Time-saving tools like LiveReload canโ€™t be used.
  • There are two scroll bars (one for the page itself, and then another inside the editor), which makes using the scroll wheel on a mouse annoying.

So,ย how do you think we shouldย move forward andย made it easier for organizers toย customize their themeโ€™s CSS?

#community-summit, #improving-wordcamp-org, #jetpack-css-editor, #official-websites, #user-experience, #wordcamp-org

Improving WordCamp.org: Notes from the 2014 Community Summit

At the 2014 Community Summitย there was a breakout discussionย that focused on ways to improve WordCamp.org.ย Youโ€™ll find the notes from that discussion below, which are being posted here so that the discussion can continue with the participation of everyone whoโ€™s interested (not just those who were able to make it to the Summit).

Kudos to @dimensionmedia for taking the notes. Itโ€™s impossible to catch everything, though, so if anyone remembers any ideas or remarksย that didnโ€™t get recorded, please post them in the comments (but please donโ€™t reveal the identityย of the person who made the remark, since the Summit was a safe space.)

* * * *

Most of the discussion centered around the desire of organizing teams to customize their site more than they currently can, or making it easier to customize.

The top 5 pain-points of people present at the discussion were:

  • CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Editor
  • Lack of custom JS
  • Lack of 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)
  • Theme Repo Is too small
  • Possibility of crafting default theme

Customization of 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. themes

This was more of a passionate subject than you would think. First we discussed best ways to share code with other WordCamp sites that already have great designs, because not every camp has access to a designer. Since WordCamp sites only allow CSS as custom code, right now itโ€™s a copy/paste process.

We talked about two main areas of customization: design and functionality.

Design wise, we talked about how extendable current themes are and maybe arenโ€™t. We talked about the hacking that needs to be done in certain situations. And we talked about having a potential gallery of WordCamp sites that organizers can choose from โ€“ greater availability of choices than what we currently have. Offering themes that have already been audited by WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ (but are also available in 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/ repository) might be an easy way to add more choice.

We also talked about maybe making certain large sections of a theme as a 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. to begin to allow custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. in addition to the custom CSS. Or possibly creating more page templates that meet common needs.

Functionality wise, we came up with some potential interesting ideas for WordCamp sites. We talked about how some customizations have come about and been implemented. And also possibility of allowing WordCamps to experiment with a concept or idea, and then bring it to the attention of the WordCamp development team, which is by the way run only by two people and they deserve a ton of praise for that. Some of the more simple ideas, like commenting for asking questions.

So our takeaway was understanding current limitations, primarily for security. But also allowing flexibility for great designs and concepts for future WordCamps.

Why we disallow 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. https://www.php.net/manual/en/preface.php. code: every single 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 would have to be maintained forever and also looked over to make sure the code is secure. If there was a security vulnerability on WordCamp.org, then that would put WordPress.org in a position to be hacked, since theyโ€™re connected. We also try to create solutions that work for all WordCamps, rather than just a single camp doing something on their own. Contributions can be made to the Meta trac and integrated for all WordCamps to use.

Miscellaneous

  • We also discussed perhaps converting each site to static HTML after the camp is over, which would allow us to remove the burden of constantly maintaining plugins. Maybe use commenting for archives.
  • MailPoet has the ability to integrate with WordPress, providing basic functionality that could be useful for other WordCamps. CampTix has some MailChimp integration; it collects stats, and delivers information back to WordCamp.org. We want to own that data, not a third-party.
  • Sessions might be extended be custom post types.

So say we all.

* * * *

After the Summit,ย @ryelle built a prototype for a way to easily clone another WordCampโ€™sย CSS and other visual elements, to help organizing teams get a quick start on their own site. Kelly, could you please post that code to 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/., so that everyone can check it out and collaborate on it? A couple screenshots in the comments would be awesome too, for those who arenโ€™t developers.

Iโ€™ve also spent some time thinking about how we could improve the CSS-editing experience, but thatโ€™s a big enough topic that it warrants a separate discussion, so Iโ€™ve started another post for that.

If you have any thoughts on anything mentioned above, or have an idea to improve WordCamp.org that hasnโ€™t been mentioned yet, please post it in the comments ๐Ÿ™‚

ย 

Everyone is encouragedย to particpate in the discussion, but Iโ€™mย pinging the people who took part in the original discussion to make sure they donโ€™t miss the post:ย @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @mj12982, @iandstewart, @miss_jwo, @topher1kenobe

#accessibility, #customization, #improving-wordcamp-org, #jetpack-css-editor, #maintenace, #official-websites, #security, #themes, #wordcamp-org