Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: Programming Page 19 of 27

Programming

Useful plug-ins from Milwaukee WordPress Meetup

By

On April 29, 2014

In Programming, Web Development

WordPressWhat is a WordPress HelpDesk session? Beginners and more experienced WordPressers come to share and help each other with WordPress questions. At the Milwaukee Meetup, we shared useful plug-ins that make managing a WordPress site and its security better.

Plugins for Managing Your WordPress site

  • How can your replace your media files easily? Enable Media Replace lets you quickly replace a file in your WordPress Media library. Without it, you have to find the file, delete it and re-upload the new file. With this plug-in, it is much easier to replace the file without the extra work.
  • With WordPress, you have three choices for an image gallery. You can use WordPress’s default gallery, build your own or use a plug-in. Our host, Bard Parbs, uses WordPress’s default gallery with custom CSS for his projects. He recommended EnivraGallery, a premium plug-in for people who want a responsive and easy to use WordPress gallery.
  • Metadata lets you describe your site that is readable and friendly to search engines. You can use Add Meta Tags to help the search engines to better categorize your website and increase the chances of the people who are looking for your site can find it.
  • Most websites need forms to gather information from their visitors. You can use Contact Form 7 or Gravity Forms. Contact Form 7 is simple and flexible. If you need more advanced forms, than Gravity Forms, a premium plug-in, lets you build them with ease. Depending on your needs either plug-in can help you get started with forms on your website.
  • Sometimes your website can be slow. WP3 Total Cache can help to improve the speed of your website and your visitors experience. You can also try WP Super Cache which provides your users with static html files instead of the WordPress PHP files. PHP files can take more time to load than html files. WP Super Cache shows your visitors the cached or original page depending on the visitor to help make their experience better.

Security Plugins

We had a question on how to secure your WordPress website. Brad mentioned that the WordPress Codex has an article explaining how to harden or secure your WordPress site. He talked about 3 additional plug-ins that people can use:

  • Brute Protect protects your WordPress site against brute force attacks. After too many failed login attempts on your site, BruteProtect saves the IP and blocks it from your site and others who use this plug-in.
  • Do you have clients who are terrible with remembering or using strong passwords? Clef is the alternative log in that you need. It uses two-factor authentication to enable you to log into your WordPress website. No passwords are needed.
  • WordPress like other websites needs both security and backups. Backups help you to recreate your website if your site gets damaged by viruses, malware or something you did. VaultPress provides both security and backups for your WordPress. This is a premium service. They have different plans and pricing to match your needs.

Brad also suggested Securi. Securi is a complete Website Security service. They check your website, monitor it and provide removal of malicious code. Securi has plans for people with one website to multiples.

When you setup your WordPress site, remember to follow the recommendations on securing your site. Be choosy about the plug-ins you add to your WordPress website. Not all plug-ins will fit your website’s needs. Sometimes, you’ll want to pay for additional features that a premium plug-in will provide. Do you have any plug-ins to add?

Your own or a pre-built CSS Grid

By

On March 31, 2014

In CSS, Design, Programming

Bootstrap is a popular design CSS grid framework. A CSS grid framework consists of a specific number of columns and rows. You can quickly define different layouts using a grid framework. It helps you to quickly build the layout of your web application.

What if you want something really simple? You just want a simple grid and create the rest of the design yourself. Do you choose a pre-made CSS Grid framework or build your own? It depends on your preferences and project needs. If you need to complete your project quickly, choose a pre-made framework. If not, you may choose to build your own to use in later projects.

Simple and Responsive Grid Frameworks

Try out one of the following simple and responsive pre-made grid frameworks:

Toast - Simple CSS Grid

Toast – Simple CSS Grid

If these don’t work for you, a quick Google search provides you with more options to try.

Build your own framework

Why build your own framework? Most developers like working with code that they understand and have control over. With a pre-made framework, you have to deal with the choices that the developer made to get their framework working. You may not have the time or patience to attempt to fit another’s framework to your project.
To build your own framework, you need to:

  • Determine how many columns 9, 12 or 16? The standard number of columns is 12. 12 makes it simple.
  • Sketch out a design.
  • Create the structure for the grid framework. You don’t have to make it complicated. The best grids are simple.
  • Test out the HTML and CSS for the grid framework.
  • Make it flexible and responsive. You want your grid to work with your future projects: mobile and beyond.

Building your own framework doesn’t have to be an overwhelming challenge. Check out how Joe Richardson built a responsive grid system.

Are you going to build your own?

What you can do to manage Legacy code

By

On November 22, 2013

In Programming

At the Milwaukee PHP Meetup, Arlen Walker talked about how to deal with legacy code. When you write code, you have to manage legacy code. Legacy code can be defined as code that “you don’t understand the code and you have to maintain it”. For more definitions, check out StackExchange discussion on when is code code.

What are your choices?

You could rewrite the code from scratch. Rewriting the code takes time. Time that you may not have. Or you could make the worst part a little bit better. Look at the code and determine what is the worst part about it and improve that piece.

Use code smells to determine where the trouble spots are. You may find problems like long argument lists, long methods, large classes and complex code.

Remember: If you don’t have tests, you have legacy code.

For more details, read Arlen’s slides to learn about managing legacy code:

Bakin’ with a CMS

By

On October 25, 2013

In CSS, Miscellaneous, Programming, Web Development

How do you learn a new content management system? You build a website with it. A sample website works best because you can delete it if you don’t like the results or even the CMS. I used the Smells Like Bakin’ tutorial from Treehouse and a CMS called Umbraco. Treehouse uses Smells Like Bakin’ to teach how to build a simple website. Umbraco is an open source ASP.Net CMS.

Smells Like Bakin in Umbraco CMS

Building the website

  1. Download and install Umbraco.
    I followed the manual install instructions. Umbraco lets you use an installer. I choose to do it manually, so I could learn what the install process is. The manual process was quick and easy to follow.
  2. Download and install the files for Smells Like Bakin.
    Instead of following the tutorial, I found a copy of the site on github.
  3. Install a starter kit in Umbraco.
    Umbraco lets you install it without a starter kit. Without a starter kit, you need to create your own document types and templates. To save time, it is easier to install a starter kit. Umbraco has several to choose from. I chose the HTML5 Boilerplate. It creates a simple website based on HTML5 Boilerplate.
  4. Modify the templates.
    HTML5 Boilerplate starter kit comes with 3 templates: a master page, a home page and a generic page. Using the Smells Like Bakin’ github download, I started to modified the templates. Umbraco uses master pages. The master page template is used by the home page and generic page template. I added the header, navigation and footer to the master page.
  5. Modify the CSS.
    You can add and modify CSS inside Umbraco. It let you create additional styles that can be used in the CMS editor. These styles makes it easy for a content editor to use them without any knowledge of CSS. For this test, I added the existing styles from my example and then made a few adjustments to it.
  6. Create the Home Page.
    I used the home page template to create the Home page. Then, I added the content and images to the page.
  7. Create an additional page.
    My example of the Smells Like Bakin’ had only one web page. I created an additional page to test the generic page template in Umbraco.

Lessons Learned

  • When installing Umbraco, select and install a starter kit. A starter kit makes your life easier. The type of starter kit depends on what you want to do with the site. Before installing Umbraco, identify the starter kit that fits your needs.
  • Using a Grid 12 system, it made building the website quicker than developing your own. The HTML gitHub example used a Grid 12 system.
  • Umbraco lets you store images inside the database or externally in a file folder as part of the website. Before you build the site, you want to determine which images are added to the database.

With Umbraco, you have to have an idea of what you want to do with it before you start. Umbraco offers the flexibility of page templates, packages(plugins) and XSLT macros. It provides greater control over design and code/markup. As a CMS, it isn’t the type where you can install and be up and running in 5 minutes. If you want that, you are going to need a different CMS.

Related Article

If you need a different CMS, check out CMS Showdown at Web414 Meetup.

Responsive Design Process

By

On August 15, 2013

In Design, Programming, Web Development

Computer CodingResponsive Design focuses on building websites that work on different devices. Your web designs should look good no matter what device your user is using. Responsive design requires changing how you build websites. There are many techniques for developing a responsive design. Tristan on Heliomblog suggests adopting a responsive web design process. This process emphasize content first. Web design works best when you have the content completed first. Then, use a mobile first strategy. It is easier to add on to a design for desktop users than it is to take things away for mobile.

No design and development process is perfect. You have to make changes as you discover what does and doesn’t work in your design. Design is solving problems, not just making things look pretty.

 

Related Article

Page 19 of 27

Previous

Next

Powered by WordPress & Theme by Anders Norén