politicalrev/political-revolution.com

The website for Political Revolution

political-revolution.com's Issues

Need to change e-mail subscribe box from tiny letter to mailchimp

Hello!

Pretty much the title. I sent Mason a mailchimp invite
There is a wordpress plugin I believe.
Or if there is just a link we can plug in?

Implement new homepage design

For now, the design can be hard-coded into the front-page template. Assets (such as the header image) can be found here.

Mockup

Gulp Styles Task should fail silently

When attempting to compile incorrect scss, gulp-sass crashes the gulp watch process. The task should fail gracefully, keeping gulp watch running.

Possible Solutions
Solution One:

gulp.task('sass', function() {
    return gulp.src("./scss/*.scss")
    	.pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .on('error', catchErr)
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());
});


function catchErr(e) {
  console.log(e);
  this.emit('end');
}

---

Solution Two:
Another solution to this is to put gulp watch in an infinite loop within a Bash (or sh) shell.
while true; do gulp; gulp watch; sleep 1; done

Keep the output of this command in a visible area on your screen as you edit your JavaScript. When your edits result in an error, Gulp will crash, print it's stack trace, wait for a second, and resume watching your source files. You can then correct the syntax error, and Gulp will indicate whether or not the edit was a success by either printing out it's normal output, or crashing (then resuming) again.

This will work in a Linux or Mac terminal. If you are using Windows, use Cygwin or Ubuntu Bash (Windows 10).

---

Solution Three:
gulp-plumber

gulp.task('styles', ['wiredep'], function () {
var merged = merge();
manifest.forEachDependency('css', function (dep) {
    var cssTasksInstance = cssTasks(dep.name);
    if (!enabled.failStyleTask) {
        cssTasksInstance.on('error', function (err) {
            console.error(err.message);
            this.emit('end');
        });
    }
    merged.add(gulp.src(dep.globs, {base: 'styles'})
        .pipe(plumber({errorHandler: onError}))
        .pipe(cssTasksInstance));
});
return merged
    .pipe(writeToManifest('styles'));
});

var onError = function (err) {
console.log(err.toString());
this.emit('end');
};

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 2 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

1. Remove render-blocking JavaScript:

• https://political-revolution.com/…-includes/js/jquery/jquery.js?ver=1.12.4
• https://political-revolution.com/…s/jquery/jquery-migrate.min.js?ver=1.4.1

2. Optimize CSS Delivery of the following:

• https://fonts.googleapis.com/css?family=Work+Sans:300,400,500
• https://political-revolution.com/…es/thepoliticalsage/dist/styles/main.css

Add 5 social sharing buttons to all posts.

Wordpress Social Sharing

• Twitter
• Facebook
• Tumblr
• Google+
• Reddit

Add gulp-autoprefixer to our Gulp styles pipeline and remove _prefix() sass mixin

gulp-autoprefixer transparently prefixes the outputted css for maximum browser compatibility. The forty theme used a custom mixin that we no longer want to support.

• Add gulp-autoprefixer to our gulpfile style task
• Remove all instances of the forty theme prefix mixin

Add an issue template

In an effort to improve the quality and actionability of issues submitted to this repo, we should implement an issue template. Instructions here.

First step is to come up with the guidelines! There's an example repository that can get us started.

Evaluate Form Plugins

Overview

Right now forms are hardcoded and processed through a couple third party APIs (eg google, tinyletter, etc). In the interest to reducing friction to form building for site maintainers, we wanted to explore options for WP form plugins.

Here's a "Top Ten" list of WP form plugins. I've used the first half on the list, but only very superficially. The rest I don't recognize, and also look less polished from the very shallow once over I gave--I suspect they could have kept it top 5, honestly.

If anyone has any experience, I'd love to hear your thoughts!

Evaluation Rubric/Reqs

1. Data Processing - What kind of customizations exist? Reports, action sequence triggers, etc
2. Cost - I'm 99% sure we can operate at the free tier.
3. Style Considerations - It'd be cool to leverage Bootstrap form styles, but I'd say feature set is more important. Easy enough to bake form styles.
4. Front End Inclusion Flexibility - shortcode? widget assignment? etc
5. Data integration - Is there an easy way to consolidate existing form data, from like a google sheet?

Many thanks!

Suggestion for BanMap/Website colors, make teal, blue, black more distinctive

2nd suggestion for website/banmap. For the "Fully Opposed", "Split", "and "Fully Supportive" colors, my parents said they thought the shades of blue and black were hard to tell apart. They also said that someone with bad vision or color blindness issues would have an even harder time.

Remove gap at top of blog posts, home, etc on mobile layout

I'm sure a breakpoint just needs to be either added or removed

Add Bootstrap 4

Example html on page: https://political-revolution.com/fluid-grid/
Css setup need: https://v4-alpha.getbootstrap.com/layout/grid/#responsive-classes

"Join Us" text suggested to be made more large and more visible

Hi all,

I got my parents to sign up for the newsletter, but one struggle for them was seeing where they should put their e-mail address. They suggested making the "Join Us" text more visible. I don't know if they knew exactly if they thought that that was the problem or if they thought that is what would explain it best, but there is the story in full.

FONT and styling issues

Font Issues @mason

Still have a need for this: sass mixin: https://gist.github.com/plapier/3988984

---

If, for example, we used this:

• https://jonathanmh.com/bootstrap-4-grid-only-and-sass-with-gulp/

Then followed these guidelines, I could be of more help?

• http://sass-lang.com/guide

Or please suggest another uniformed method/language, so that we can be consistent.

Staging site doesn't always update after merge into master

See this PR #43 : Note that the divs on the wpdev site /banmap do not all match the divs in page-banmap.php.

Improve social Link :hover state

Hover over social button in footer slides the icon up and reveals text with more information.

Twitter: @OurPoliticalRev
Reddit: /r/Political_Revolution
Slack: Volunteer chat
Github: Github Org

Possibly always display text on mobile (smaller) sizes to increase brand awareness

Slack oauth integration broken

Migrating to bedrock seems to have broken the slack oauth integration we had setup on the old site. I've temporarily shown the normal wordpress login until we get this back up

Delete all other Themes except seventeen

Please delete all themes with the exception of Sage and Seventeen.

Google Bots Unable to Crawl Homepage

• Robot.txt is preventing google from crawling the homepage.
• Hiding the 4 .js files in headers is preventing Google from crawling the site.
• Google crawl cannot currently access the website's homepage.

Feature: Use CI to automatically run `cap staging deploy` on every commit to master

Since our build script is already configured this should be pretty simple. We can use Travis CI or similar

`cap staging deploy` through Travis fails on pull requests authored by unauthorized users

This prevents us from being able to check the effect of PRs on the staging site before merging them. When attempting to push PR builds, the following error occurs:

$ bundle exec cap staging deploy
INFO[51110713] Running /usr/bin/env mkdir -p /tmp/wpdev.thepoliticalrev.org/ on 45.55.137.23
DEBUG[51110713] Command: ( WP_ENV=staging /usr/bin/env mkdir -p /tmp/wpdev.thepoliticalrev.org/ )
cap aborted!
SSHKit::Runner::ExecuteError: Exception while executing on host 45.55.137.23: Authentication failed for user [email protected]
/home/travis/.rvm/gems/ruby-1.9.3-p551/gems/net-ssh-2.9.1/lib/net/ssh.rb:219:in `start'

I suspect this may be an issue with Capistrano forwarding GitHub user ssh keys instead of using its own deploy key.

Add page layout options

Each of these needs to be an option for a custom page template:

• Full Width
• Full Width w/Margin
• Right Sidebar
• Left Sidebar
• Petition

"Latest Posts" Sidebar widget

We had this on the old site, but haven't designed a wordpress version. This section could help keep people on the site longer.

Database Syncing & Configuring Environmental Differences

Overview:

There are three environments: Production, Staging, and Dev. The docker image powering the dev environment generates its DB from a .sql file that, currently, we export manually from prod/staging. We'd like to propagate database updates more fluidly, perhaps through a cron job or some other low friction method.

To be prudent about data security, we'd only want to port tables with non-sensitive information, which I believe indicates a some custom sql code, and probably also environmental tests in config files.

If anyone has any experience and would like to chime in their recommendations/be assigned the task, it would be much appreciated!

Oh, one little thing that occurred to me was to consider what implications environment tests might have for build scripts, just so we're striving for consistency.

Potential Dev DB/Congic Differences to Consider:

Type	Comments
Users	Could either have generic user accounts, or pull selected dev accounts from prod, or a combo. Might also consider feature specific accounts/privileges
Plugins & Keys	Want to make sure any plugins that store API keys are handled properly, and also any function that could affect live (like sending to an email list) get disabled--maybe mapped to a blackhole port
Media	Want to makes sure images/video point to wherever live is sourcing them mainly to avoid bloating the image with huge stores of media files.
SEO	We'd want to consider any plugin that might affect SEO. I'd think it's possibly not a concern where a local environment is concerned, but certainly want to be mindful that we're not risking duplicate content penalties or publishing other non-strategic content

*I suspect I've overlooked certain aspects or could improve the organization. I'll aim to incorporate additional info from any comments.

Solution:

• Create cron job on server that dumps WP db daily
• Replace urls (as WP migrate db is doing now)
• Dibasble W3TC cache plugin
• Remove user accounts and create dev admin account
• Create client-side script that removes local db and pulls mysqldump from the server before running docker-compose up

Thanks!

The homepage "main banner" gap issue due to conflict here.

banner.scss
@include breakpoint(small) {
@include padding(3em, 0, (2em, 0, 0, 0));
height: 80vh;
margin-bottom: -2.75em;
max-height: none;
min-height: 20em;
top: -2.75em;
background-size: 180%;
background-position: 50% calc(-80px + 10vw);
background-attachment: scroll;

@media screen and (max-width: 736px)
#banner.major {
height: 100vw;
min-height: 31em;
max-height: none;