Category: Programming

• Sustainable Styles: An Object-Oriented twist on BEM

  I have been working in the web for a long time, and I have worked full-time professionally at UL for almost 5 years.  In that time, I’ve learned a lot about how developers perceive CSS, and why so many projects are absolutely littered with novice-level CSS.

  BEM was introduced a few years ago to deal with one of CSS’ biggest problems: taxonomy, the art of naming things.  Its primary goal was the provide a sane, sustainable method for writing class names.  Another goal was to create a sustainable approach for changes in state..  For example, BEM provides an answer for “How do we style a blog post (block) that is featured (modifier)?”  Consider some of these candidates
  

  .blogPostFeatured {}
  .blog-post.featured {}
  .blog .post.featured {}

  None of these fully address the application of a block-specific featured state, and the intended portability of a CSS class. BEM methodology here is going to be as atomic as possible with components (like a post), and as verbose as possible to avoid collisions.  For example, using .featured with .blog is fine, but what if another entity, like .page comes along, and also uses the .featured class?  What happens when these two entities (posts and pages) need different styles for featured?

  Tweaking .featured for one entity will also affect the other.  Unintended changes across the app lead to what I call this the Pick Up Sticks problem.  For this reason, using verbose Modifiers is the solution to the problem.  Consider the following SCSS. Notice that .post--featured only works with .post, and so the modifier’s effect is isolated to the block.
  

  .post {
      &.post--featured {} // => .post.post--featured
  }
  
  .page {
      &.page--featured {} // => .page.page--featured
  }

  Now, examine the accompanying HTML markup…

  <!-- Works great! -->
  <div class="post post--featured"></div>
  <div class="page page--featured"></div>
  
  <!-- Featured states have no effect when misapplied -->
  <div class="page post--featured"><div>
  <div class="post page--featured"></div>

  Essentially, this creates namespaces for the .page and .post blocks, and any of the modifiers for these blocks are useless outside of the associated namespaces.  This is a powerful, clean, sustainable approach that will help you tame and harness the cascade, and master CSS.
  

  Styling relationships
  

  When parent-child relationships exist within a data model, it is common to see that relationship reflected by markup and styles. Consider the following data model, written in TypeScript.
  

  class Post {
      public comments: Comment[];
  }
  
  class Comment {}

  It’s easy to see that Post has many Comment, as indicated by the Post.comments array of Comment objects. How do we turn this into a sustainable CSS design system?

  First, start with two root-level selectors to represent the Post and the Comment.

  .post {}
  .comment {}

  Since Post has a property to contain many comments, represent this relationship in with an Element (preceded by two underscores) in the SCSS:

  .post { // block
      .post__comments {} // element
  }
  .comment {} //block

  Have a look at the markup that could be styled by this stylesheet…

  <div class="post">
      <div class="post__comments">
          <div class="comment">…</div>
          <div class="comment">…</div>
          <div class="comment">…</div>
      </div>
  </div>

  So far so good!  It’s clean, easy to understand, easy to maintain, and it’s only the slightest bit verbose.  You can see that the Post block contains a Post Comments Element, and we put many Comment blocks into the Post Comments Element.

  Let’s continue to style two Comment blocks when they are next to each other in the Post Comments Element…  We can use a variant of the lobotomized owl to create a simple spacing system that doesn’t bring unnecessary gaps of whitespace in our page.
  

  .post {
      .post__comments {
          > .comment + .comment {
              margin-top: 1.5rem;
          }
      }
  }
  

  Styling boolean states
  

  Next, consider representing boolean states on a Block.  The boolean test might look like this…

  class Post {
      comments: Comment[] = [];
      get hasComments(): boolean {
          return this.comments && this.comments.length > 0
      }
  }

  The boolean is represented in SCSS as a Modifier:

  .post {
      .post--has-comments {} // post.hasComments() === true
      .post--no-comments {} // post.hasComments() === false
  
      .post__comments {}
  }

  When the post has comments, our markup will represent this by including the modifier with the block:

  <div class="post post--has-comments">
      <div class="post__comments">
          <div class="comment">…</div>
          <div class="comment">…</div>
          <div class="comment">…</div>
      </div>
  </div>

  We are now able to modify the Post appearance, as well as the children, when the has-comments modifier is added:

  .post {
      // post.hasComments() === true
      &.post--has-comments {
          background: url('comments-icon.png') top right;
  
          // post.comments when post.hasComments
          .post__comments {
              border: solid 1px #ccc;
          }
      }
  
      // post.hasComments() === false
      &.post--no-comments {
          .post__comments { display: none }
      }
  }

  The has-comments state can be used to leverage the cascade (the C in CSS), to further affect descendant elements, without a bunch of bloat.
  

  <div class="post post--has-comments">
      <div class="post__comments"></div>
  </div>

  Our class names are written to represent our schema, its relationships, and its states.  This prevents the pick-up sticks problem, and makes the entire project easier to style.  Consider a new scenario where a blogging platform allows multiple blogs to exist, so we need to style a series of posts…

  class Blog {
      title: string;
      posts: Post[]
  }

  No problem! We already have styles for Post so we just need to author the styles for the Blog block which contains many Post blocks. We’ll add a simple spacing rule, and some nice styles for a title. We also benefit from the styles that were written for Comments within Post.
  

  .blog {
      .blog__title { font-weight: bold; font-size: 2.5rem; }
      .blog__posts {
          // within .blog__posts, any direct-descendant post that is 
          // after any post gets a margin-top to space things out
          > .post + .post { margin-top: 1.5rem; } 
      }
  }

  By being verbose, and using a reliable strategy to map state and schema to CSS appearance, we avoid a host of architectural issues that have been confusing developers for decades.

  Putting it together

  Here’s a cheat sheet to help apply BEM methodology to the mapping of objects to class names.
  

  When you’re styling…	Use…	For example…
  A business entity (a row in a database)	a Block	.post .comment .user
  A property on an entity (a column in a database)	an Element	.post__title .post__content
  A child relationship	an Element filled with blocks	.post__comments > .comment + .comment .comment__author > .user
  A state	a Modifier	.post--is-featured .comment--is-post-author .user--is-admin

  June 3, 2019

  •

  @bradkovach

  •

  CSS and SCSS, Uncategorized, Web Development

  BEM, Lobotomized Owl, Object-Oriented CSS, SCSS, Sustainable Styles

• Flexible Scala Time Profiling

  Use this snippet to quickly add nanosecond profiling to your application. http://stackoverflow.com/a/9160068/1896889

  Simply wrap your blocks in `time { … }`

  The time function will also return the result of your block, so you capture the result with `val result = time { … }`

  Handy

  December 22, 2015

  •

  @bradkovach

  •

  Scala

  performance, profiling

• Hit the ground running: Scala, and the future of functional

  You may have heard about Scala.  This language is taking the big data world by storm.  If you’re an object-oriented/procedural programmer, this post will show you how to adapt the concepts you already know into Scala’s lightweight functional syntax.

  Here are some of the highlights of Scala

  • Optionally functional, optionally object-oriented
  • Runs on the JVM (so Scala programs can run anywhere a Java program can)
  • Extreme performance with low code (effortless parallelism [caveats exist])

  Getting started with Scala is easy.  I recommend installing IntelliJ Community Edition and using their IDE.  It provides helpful type checking and does a pretty good job holding your hand.

  Functional programming prides itself on immutability.  Scala builds on this by providing two variable types, `var` and `val`.  `var` represents data that is allowed to change after instantiation and val represents data that will not change after instantiation.

  Flipping the switch: learning to think functional

  At first brush, it’s easy to think and implement solutions in Scala using a procedural approach.  Scala allows you to use as much OO style as you like, and as much Functional style as you prefer.  As a result, it’s easy to get caught in old ways.

  The Pattern: transforming a collection of objects

  Take this C# example.  Here is a Person class with a first name, last name, and an age.

  class Person {
  	public String FirstName { get; set; }
  	public String LastName { get; set; }
  	public int Age { get; set; }
  
  	public Person(String _FirstName, String _LastName, int _Age)
  	{
  		this.FirstName = _FirstName;
  		this.LastName = _LastName;
  		this.Age = _Age;
  	}
  
  }

  Here is code that instantiates some people, and then returns a list of strings “Last Name, First Name”.

  var people = new List<Person>(){
  	new Person("Brad", "Kovach", 26),
  	new Person("Jane", "Doe", 29),
  	new Person("John", "Doe", 30)
  };
  var result = new List<String>();
  
  foreach(Person person in people)
  {
  	result.Add( String.Format("{0}, {1}", person.LastName, person.FirstName) );
  }

  It is important to note that the `result` data structure had to be explicitly created, and the for loop must be explicitly told what the “item” is for the “collection.”  This code works as expected.

  Let’s accomplish the same thing using Scala, and functional syntax.

  case class Person(FirstName: String, LastName: String, age: Int)

  Using a “case class” simplifies code because it is automatically its own constructor, and there is no assumed “logic” with the object beyond sensible equality checks.

  Then we build a List and iterate over it using “map.”  Map is a function for iterating over a collection when you need output.  The part with `person =>` is actually specifying a function for a person to be input.  The function does not say “return” because Scala assumes the last line of the function is the return.

  // instantiate list (immutable because of "val")
  val people = List(
  	Person("Brad", "Kovach", 26),
  	Person("Jane", "Doe", 29),
  	Person("John", "Doe", 30)
  )
  
  // transform the list
  val result = people.map( person => "%s, %s".format(person.LastName, person.FirstName) )

  Notice that no “result” array needed to be created in order to accomplish this transformation.  These data structures are automatically instantiated and kept behind the scenes.

  The Pattern: Perform an action on several pieces of data.

  Performing some small piece of work without needing the result of the output is common. For these examples, I will simply output the “Last, First” result

  In C#, this is another loop

  foreach( var result in results )
  {
  	Console.WriteLine(result);
  }

  In Scala, this is also a loop, but a function is passed as an argument.

  results.foreach( result => println(result) )

  The Pattern: Accumulating results in a loop

  Assume that we are performing a sum of the ages of our three people.

  var sum = 0;
  foreach(Person person in people)
  {
  	sum += person.Age;
  }

  This code is relatively straightforward.  We instantiate a sum accumulator (0) and for each person, we just add their age to whatever sum was last.  `sum` is required to be mutable.

  The same operation can be performed in Scala…

  val total = people.foldLeft(0)( (sum, person) => sum + person.age)

  This seems cryptic, so let me walk through this token by token

  1. `val total` specifies that we are creating an immutable variable named “total.”
  2. `people.foldLeft` specifies that we’re going to be performing a “left to right” operation on the people object
  3. `(0)` specifies that this is the starting sum before we begin
  4. `(sum, person)` specifies the signature for the inline function.  `foldLeft` will pass the accumulator (sum) in at the first position and the item in at the second
  5. `=> sum + person.age` specifies that the sum plus the person’s age are the new sum.  Since this is the last line of the function, no `return` was necessary.  `sum + person.age` will be calculated and passed to the next iteration as `sum`

  When all “people” have been processed, the “total” variable will contain the combined age of all people.

  This code works exclusively with immutable variables and relies on the language to maintain structures to work through the problem.

  Conclusion

  My goal with this post was to show you how to transform common object-oriented tasks into a functional paradigm.  These examples show how the language works behind the scenes to do work that normally chews up programmer time and lines.

  Next time, I’ll show you the Scala way to regex data, go parallel, and introduce you to Pattern matching.

  December 9, 2015

  •

  @bradkovach

  •

  Functional Programming, Scala

  IntelliJ

• Creating an Invisible Application: Adding email as an interface for an application

  This post is designed to serve as a brief technical overview of a recent feature added to ServiceSpark, a community service management platform I develop as a volunteer for the United Way of Albany County.

  ServiceSpark uses email to send email notifications to volunteers about new events and new comments on events that the volunteer is connected to.  The email includes a link back to ServiceSpark.org, and encourages the user to RSVP and comment on the event.  Unfortunately, however, this requires a click, a login, and users rarely follow through with the process.

  The Challenge

  Use email as an interface for ServiceSpark, allowing users to “reply” to an email to leave comments, or allow users to RSVP using their client’s native calendar support.

  The Implementation

  My implementation of this required some sort of way to generate unique reply email addresses for each email that was sent, and a way to make note of the reply address, so that replies, if any, can be processed.

  Dealing with the reply is also problematic.  Many replies include the chain of emails behind the reply, or signatures.  These artifacts need to be stripped from the application, or else the comments will become cluttered.

  Emails also need to be attached to the user’s ServiceSpark identity.  Every message should come in and appear as if the volunteer logged into ServiceSpark and created the comment, or submitted an RSVP manually.

  But, finding a way to receive email at any possible address seemed challenging. For starters, standardizing a way to communicate with an email platform is difficult.  Hijacking qmail, or some other mail queue is just tedious and feels like a kludge.

  The Tools

  Receiving emails turned out to be easy with Mandrill.  Mandrill has an “incoming message API” that allows for your application to receive email via webhooks.

  Briefly, this is how Mandrill works

  1. Set up a custom reply domain.  This is a DNS MX entry that will set Mandrill as handler for a custom domain.  This takes about 5 minutes.
  2. Set up a route from your Mandrill dashboard.  This maps incoming messages to a webhook on your server.  For mine, I set up a wildcard, so that all addresses get sent to the webhook.
  3. Emails received by Mandrill will be pushed as a JSON object to your server in nearly real time.

  Since I’m using CakePHP, which is MVC, I set up a controller that is a singularized endpoint for all incoming webhooks.  A token is used as a shared secret for the application and Mandrill.

  1. Application receives a POST at /webhooks/incoming/<token>
  2. Application fires an event `Webhook.Incoming.<token>`
  3. An event handler is set to listen to `Webhook.Incoming.<token>` and parse the incoming data.

  Once the webserver was receiving messages from Mandrill, I began work to parse the messages.  Dealing with the “junk” in email, like signatures, and threads was a huge requirement.  Posting this information publicly would clutter the application greatly, and annoy users.

  GitHub to the rescue–literally!  GitHub wrote an email reply parsing library, and the library has been ported to PHP.  Including this library and parsing the text from the Mandrill request was trivial.

  Mapping the incoming email address to a specific action is accomplished by a database table that has fields for GUID, user_id, event_type, and event_data.

  So Far

  1. Emails are generated with special GUID@myreplydomain.org Reply-to addresses.
  2. GUIDS and the corresponding event information are saved to the database.
  3. User receives an email.  If they would like to respond, they may do so using their email client.  Replies go to <guid>@myreplydomain.org.
  4. Emails are received by Mandrill, parsed and sent as a JSON object to a webhook on my web server.
  5. The server looks up the guid and processes the email appropriately.

  At this point, email to comment is working beautifully.  The next challenge is sending valid meeting requests and processing the responses into the application.

  Standards are your friend.

  The global standard for calendar data exchange is ICS aka ICAL.  This text format specifies events, and recipients, and metadata to allow loosely-coupled applications to synchronize state (like meeting cancellations).

  There is a protocol to using ICS/ICAL to exchange event information.

  ICS/ICAL crash course

  1. Lines are allowed to be 75 characters long.  If your line needs to wrap, the next line should start with a space.  Ideally, you should construct your file, and then wrap the lines one at a time at the end.
  2. ICS files start with BEGIN:VCALENDAR and end with END:VCALENDAR (calendar boundaries)
  3. Key VCALENDAR fields are
     1. PRODID: a string describing application vendor and application that generated the ICS file.  The format is -//vendor/product//LANGUAGE
     2. METHOD: a string describing the nature of the ICS/ICAL file.  Common values include PUBLISH (for publishing event information), REQUEST (for requesting an RSVP), CANCEL (for cancelling an event)
     3. VERSION: the version of the ICS/ICAL standard used.  This is commonly just 2.0.
  4. Events lie within calendar boundaries.  The event boundaries are BEGIN:VEVENT and END:VEVENT
  5. Key VEVENT fields are
     1. SUMMARY: a title for your event
     2. DESCRIPTION: descriptive text about your event.  Newlines should be replaced with the literal string “\n”
     3. DTSTART: the start of the event, ideally in UTC
     4. DTEND; the end of the event, ideally in UTC
     5. DTSTAMP: the time the ICS/ICAL file was generated
     6. UID: a unique identifier that can be used to reference the event in subsequent event updates or cancellations.  This can be anything (URL, GUID, SHA-256 hash), but you need to record it, or you’re going to bungle the entire protocol.
     7. ATTENDEE: encoded metadata describing the recipient’s relation to the event. Subfields include…
        1. RSVP: true or false, depending on whether you want the recipient to respond (Google and Outlook will not show RSVP buttons without this)
        2. CN: the name of the recipient
        3. MAILTO: the email address of the recipient
     8. LOCATION: a string describing the location of the event
     9. URL: an absolute URL for the event. Subfields include…
        1. VALUE: the actual URL for the event

  Example ICS/ICAL meeting invite file

  BEGIN:VCALENDAR
  VERSION:2.0
  PRODID:-//uwacwy/servicespark//EN
  METHOD:REQUEST
  BEGIN:VEVENT
  ATTENDEE;RSVP=TRUE;CN=Barack Obama:MAILTO:potus@whitehouse.gov
  UID:guid
  SUMMARY:Testing Markdown
  DESCRIPTION:#### Overview\nThis should print as markdown in emails.\n\n###
   # Subtext\nCurabitur cursus purus vestibulum\, venenatis nisi eu\, element
   um tortor. Sed at fringilla dolor\, at aliquam tortor. Morbi interdum lore
   m ipsum\, nec varius est porttitor tempus! Praesent sodales dolor sit amet
    feugiat accumsan. Suspendisse pulvinar convallis orci non semper. Nunc fa
   ucibus scelerisque metus\, vulputate eleifend ligula dictum at.
  LOCATION:no addresses specified
  ORGANIZER;CN=Contoso via My Service Site:MAILTO:guid@reply.servicespark.org
  URL;VALUE=URI:http://1234testing.bradkovach.koding.io/servicespark/go/eve
   nts/view/7
  DTSTART:20150905T235100Z
  DTEND:20150906T005100Z
  DTSTAMP:20150905T235307Z
  END:VEVENT
  END:VCALENDAR

  Attaching a file like this to an outgoing message will cause (most) email clients to display RSVP buttons!

  

  When an RSVP choice is selected, an ICS will be sent as a reply to the endpoint.  The email address that sends the ICS response can not be treated as important, and should not be used to identify the recipient.  For example, Google uses one notification endpoint for all of their users, and you will be unable to reliably determine who is RSVP’ing to the event.   Instead, the UID should be used exclusively, or else updates to the event will cause duplicates, and all other manner of chaos.

  Receiving the RSVP Reply

  When Mandrill receives the reply, they will perform a POST to your specified webhook.  The response will be an ICS file.  The ICS file follows the same format as outlined above: it begins and ends with VCALENDAR boundaries, containing at least one VEVENT inside the VCALENDAR.

  A number of parsers exist for robust ICS parsing, but we are not interested in anything beyond the latest response for the UID.  When the ICS was sent, the UID and the incoming email address were saved.  As a result, we can look up the UID based on the email that it came from.  If an email is received, and there isn’t a valid link between that email and UID, then nothing will be done.

  1. Look up the UID based on email address.  This returns the user, and the corresponding action (event RSVP modification, in this case).  It is worth noting that these email events should expire eventually, so these email endpoints will automatically deactivate.
  2. Regex the incoming ICS response for the VEVENT region containing UID.  This is not a multi-line regex.  This will capture and return the entire VEVENT.

     1. /^BEGIN:VCALENDAR[\S\s]*METHOD:REPLY[\S\s]*(BEGIN:VEVENT[\S\s]*UID:<UID HERE>[\S\s]*END:VEVENT)[\S\s]*END:VCALENDAR$/

  3. Regex the VEVENT region for a valid going/not going/tentative response.  Please note this is a multi-line regex.  This will check each line and then capture and return the DECLINED, ACCEPTED, OR TENTATIVE state of the RSVP.

     1. /^ATTENDEE;.*PARTSTAT=(DECLINED|ACCEPTED|TENTATIVE).*$/m

  4. Once we have determined the new state of the RSVP, update the user’s RSVP.

  Conclusion

  The pieces of this project demonstrate the beauty of event-driven programming.  Using modern web development techniques like webhooks allow for decoupled applications to seamlessly interact with each other.  Mandrill’s service integrates so smoothly with my application that the end result is an interface that is invisible, but robust.  The end result is a incredibly rich interface to an application, where the user interacts and derives value from the application without even logging in.

  Limitations

  Mandrill’s email service does not allow for the appropriate attachment headers (specifically `METHOD: REQUEST`) to be included in the message.  As a result, Outlook (desktop and web) will not show RSVP buttons.  Outlook (iOS and Android) perform according to specification and will present RSVP buttons.

  December 8, 2015

  •

  @bradkovach

  •

  PHP, Programming, Uncategorized

  cakephp, dns, email, github, ical, ics, Mandrill, mx, regex, ServiceSpark, webhook

• Recent security changes on bradkovach.com and a new WordPress plugin

  Here is a small enumeration of the ways that I’ve improved security at bradkovach.com

  • Full-time HTTPS is available for all bradkovach.com domains.  My certificates are signed by DigiCert.
  • HTTP Strict Transport Security is enabled.  For compatible browsers (Firefox, Chrome), they should flatly refuse to communicate with bradkovach.com unless HTTPS is available.  This affects all subdomains.
  • `projects.bradkovach.com` will return 406 Not Acceptable for any clients that do not attempt to communicate over HTTPS.
  • `bradkovach.com` will redirect traffic to HTTPS if any requests are made over HTTP.  This is a potential security risk as the request path and query string will be exposed prior to the redirect.  Since the contents of bradkovach.com are public, the trade-off was made in the interest of convenience.
  • I have taken down my public email address and now request that you use my Secure Message form.  I will receive your message via email and use PGP to decrypt it.  Optionally, you can use this facility to securely send me your public key so that we may begin secure correspondence.  By design, no sensitive information is exposed in email headers.
  • My Secure Message form is available as a free plugin so that you can also accept encrypted email from your visitors.
    • I recommend that your site use HTTPS full-time with this plugin.
    • There is no client-side encryption at the moment, which might compromise the security of the message when HTTPS isn’t used.
    • It is licensed GPLv2.0 in accordance with its relation to the GPG project as well as WordPress.
    • Download and Installation details can be found at the GitHub repository.
    • Please feel free to send a pull request if you would like to improve the plugin.
    • I will package the plugin for the WordPress Plugin Repository soon.
  March 22, 2015

  •

  @bradkovach

  •

  PGP, Plugins, Security

  DigiCert, Omega

• Using the SharePoint Social Comment Web Part

  This issue has been miserably annoying to me, and I have spent a long time figuring out how to appropriately utilize the SharePoint Social Comment Web Part.

  Here’s how to do it.

  I know this works with SharePoint 2010.  This might work in SharePoint 2013…

  1. To your web part project add a reference to the Microsoft.Sharepoint.Portal namespace.  This is NOT listed in the “Extensions” section of Visual Studio, and you’ll need to browse for it.

  c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ASAPI\microsoft.sharepoint.portal.dll

  2. Create a placeholder in your Web Part’s ASCX file…

  <asp:PlaceHolder runat=”server” ID=”plcComments”></asp:PlaceHolder>

  3. Add a SocialCommentsWebPart to the placeholder in your Web Part’s .ascx.cs file

  plcComments.Controls.Add(
  	new Microsoft.SharePoint.Portal.WebControls.SocialCommentWebPart()
  	{
  		WebPartPropertySpecifiedAddress = Page.Request.Url.AbsoluteUri
  	}
  );

  You can replace the Page.Request.Url.AbsoluteUri part with any URL.

  4. The comments form should appear upon page load.   You might need to wrap the code in step 3 with if(!IsPostBack){ … }  but this usually works.

  December 23, 2014

  •

  @bradkovach

  •

  C#, Programming, SharePoint 2010

• Free WordPress Theme! Introducing Civique.

  I’ve been working on a WordPress theme lately.  It’s a theme designed for non-profit organizations, but it could work well for almost any organization.

  It is MIT Licensed (compliant with GPLv2).

  It has full support for…

  • Theme Customization
    • Header color
    • Logo (keep it under 75 px tall)
  • Header Images
  • Post Thumbnails
  • Attachment alignment
  • Menus
  • Sidebars

  It includes other goodies, too…

  • Non-profit Summary Shortcode
    A shortcode that uses the ProPublica Nonprofit API to generate a page of information about your 501(c)(3) organization, including summaries of non-profit financial activity.  Insert the shortcode `[civique_summary]` to display the non-profit rundown.
  • Fundraiser Progress Widget
    Add the Civique Fundraiser Widget to your sidebar to easily show progress on one or many fundraisers.  Add as many fundraisers as you need.  They will show a progress bar, and a link to an online donation page, if you include it.

  It is an open-source project hosted by the United Way of Albany County.

  • Download Civique for WordPress from the United Way of Albany County
  • Clone, Fork, Pull Civique for WordPress from GitHub
  June 12, 2014

  •

  @bradkovach

  •

  Themes

  Civique 0.5, Civique for WordPress, free stuff, non-profit organizations, United Way of Albany County

• WordPress Goodie: Theme Customization API code generator

  This isn’t quite as robust as what I usually find over at GenerateWP, but it’s certainly handy, and it makes it easy to correctly link your settings to groups to controls.

  There are some limitations

  • No support for non-`text` WP_Customize_Control elements.  This is an easy fix, and you should reference the official WordPress API Documentation for more help.
  • It is an Excel spreadsheet.  It SHOULD open in OpenOffice/LibreOffice/Google Spreadsheets, but I make no guarantees, nor have I attempted to test these claims.

  Download WordPress Theme Customization API Generator (Excel Spreadsheet)

  MIT Licensed

  Copyright (c) 2014 Brad Kovach

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the “Software”), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  June 11, 2014

  •

  @bradkovach

  •

  OSS, Utilities

  excel, spreadsheet, theme customization

• The death of TrueCrypt: a symptom of a greater problem

  UPDATE: 29 May 2014 at 9:30 MDT

  The TrueCrypt development team has broke their silence to the audit team.  My suspicions articulated in this post were correct.  You can learn more at GRC.  TrueCrypt will be adopted by the Linux Foundation, ensuring its continued vitality and success as an open source project in the free world.  Join the Linux Foundation if you can.

  Open Source Software (OSS) is in danger.  We rely on OSS every day to encrypt online banking and shopping, serve our web pages, move and deliver our email, render our web pages, manage our websites, power the world’s encyclopedia, and so much more.

  These projects are essential to the backbone of the internet.  Typically, they rely on volunteers for development, testing, reporting bugs, and evangelism.  They also, typically, rely on donated financing as well…

  So, these projects, free as in speech and as in beer, are powering significant portions of the web.  In the case of Apache Web Server, “Apache is used by 60.5% of all the websites whose web server we know” (W3Techs, May 2014). OpenSSL is used to encrypt 16% of websites among Alexa’s top million websites (Datanyze, May 2014).

  But these projects are struggling.  Recently the TrueCrypt Foundation announced the end of the TrueCrypt project.  Some suspect foul play from three-letter government agencies.  Others suspect hackers.  But the undeniable reality remains: TrueCrypt is an open source project written and maintained by anonymous volunteers.

  TrueCrypt has fallen under intense scrutiny lately.

  • a third-party audit (an important but still gut-wrenching process for the developers)
  • increasing reliance on TrueCrypt as Snowden’s NSA revelations come to light
  • angry reactions to open source failures, namely the OpenSSL Heartbleed Vulnerability.

  While the tinfoil hat conspiracies are fun to entertain, it is likely not the reality here.  TrueCrypt’s developers have shown us the reality of the world without free, open-source security.  We are left to trust our OS vendors and their closed-source unverifiable encryption.  The “ominous” message posted to the TrueCrypt SourceForge page, in my opinion, is designed to be hyperbolic and terrifying!  Without the support of the open source community, TrueCrypt cannot survive.  Without a compassionate community that understands that TrueCrypt is a hobby for the developers, it is unsafe for TrueCrypt to continue the project.  Potential for legal liability is high (even though the developers are completely anonymous).

  In other words, if your hobby ever becomes the golden standard for file encryption, and it is being used to rifle state secrets about the globe, or to foil a child pornography investigation, you might want to take a step back.  And it’s possible that that’s exactly what TrueCrypt’s developers have done.

  After the world’s kneejerk reaction to the OpenSSL Heartbleed vulnerability, people got mad at the small development team for pushing such shoddy, insecure software.  But the reality is this: the OpenSSL library, for its one failure, has had billions of successes.  But nobody cared.  Heartbleed scared people, and that, in the court of public opinion, overshadowed those billions of successes.

  Suspicious Shutdown…

  People are citing an out-of-character shutdown for the TrueCrypt project.  Some consider it to be a warrant canary (since their behavior is so different from TrueCrypt’s MO).  Many of the recommendations made by the TrueCrypt team are ironically terrible advice considering how cautious we’ve become with TrueCrypt at the helm.

  If you have files encrypted by TrueCrypt on Linux:

  Use any integrated support for encryption. Search available installation packages for words encryption and crypt, install any of the packages found and follow its documentation

  In other words they’re saying “just search for something and use it.”

  On the Windows end of things, they’re simply stating that we should embrace a closed-source solution that they’ve been subverting for the past 10 years.

  This is satire.  In satire, irony is militant.  And the point of this satire is: “good luck without us.”

  If you were a TrueCrypt developer…

  So taking the totality of the current state of TrueCrypt into account, it’s a massive burden for the development team to bear.  On one hand, it has been a monumental success for privacy advocates and data security, but on the other hand one small vulnerability could destroy its credibility and its meteoric rise to fame might collapse in days.

  So the developers did what anybody in this position might do.  They called the game.  They left us with an ominous picture of the world without TrueCrypt: trusting our data to closed-source solutions, with little to no recourse against three-letter agency interests in backdoors.  Developing TrueCrypt was a thankless job, and they don’t want to be responsible for its collapse.

  If the world doesn’t want to invest in open source software, it’s the world’s loss.

  I hope the developers of TrueCrypt are safe, and that the conspiracies are not true.  This might be the wake-up call open source needs.

  Let’s discuss this on Twitter. Follow @bradkovach to chat with me.

  Further Reading

  • Steve Gibson’s “Imagined Letter from the TrueCrypt Developer(s)”
  • #truecrypt on Twitter
  • /r/netsec discussion on Reddit
  • /r/sysadmin discussion on Reddit
  May 29, 2014

  •

  @bradkovach

  •

  Conspiracies, Metaprogramming, OSS, Programming

  apache, FBI, firefox, NSA, postfix, security, snowden, truecrypt

• Exciting WordPress Developments

  I have been working on some exciting new WordPress things that I plan on releasing in compliance with the GPL.

  First, since there wasn’t a decently simple (free) front-end profile management system, I decided to write one if my own. It is completely customizable with short codes and allows you to validate input with regular expressions before you save the data. All of this is controlled in the post editor. It is nonced using WordPress’ nonce API. It’s pretty elegant in its implementation.

  Next, I plan to release some sort of iteration of my SCSS/CSS and WordPress template framework tools. I have tons of code generation spreadsheets that make grid design and implementation a piece of cake. Provide a couple parameters and the spreadsheet will calculate responsive grids. The grid is based on 6 columns and intelligently resizes all the way down to small screens. I have spreadsheets to make a lot of development work easier. It would be a shame if I didn’t share.

  January 26, 2014

  •

  @bradkovach

  •

  Plugins, Web Development, WordPress

  automation, grid systems, profile editor, responsive design, spreadsheets