Tag Archives: Jetpack CSS Editor

Ian Dunn 7:22 pm on November 24, 2015
Tags: , , Jetpack CSS Editor,   

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 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

Ian Dunn 7:32 pm on June 16, 2015
Tags: , , Jetpack CSS Editor, ,   

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

Ian Dunn 10:04 pm on March 5, 2015
Tags: , , Jetpack CSS Editor, , user experience,   

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

Ian Dunn 10:03 pm on March 5, 2015
Tags: , customization, , Jetpack CSS Editor, maintenace, , , ,   

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