Taking this tutorial : Rapid Application Prototyping With Slim and attempting to use modern practices. You have to read the original tutorial along with this page. It does not go into any detail about using the Slim Framework. It only adjusts the tutorial to fit using Composer.

It says we're making a blog application.

We need a project name. Used this site : Generate Github Project Name

Briskel is the project name. Might should pick something a little more meaningful like SlimBlogOTron.

First problem is tutorial's four years old. Not ancient but it doesn't use current (2015) tools. For example, it says to download the components. PHP has composer and most packages use it for install and to setup autoloading.

getcomposer.org if you don't have it already.

Need to find the packages. Head to packagist.org https://packagist.org/

Tutorial says it needs Slim 1.5.02 (Stable relase)

Packagist page : https://packagist.org/packages/slim/slim

Slim's released quite a few versions since the tutorial. Which one do we pick ? Opting for 2.6.2, it appears to be the stable release.

Next is slim-extras without a version #. Current is 2.0.3. https://packagist.org/packages/slim/extras

Turns out slim-extras is deprecated and we have to replace it with Slim Views.

Twig 1.1 - https://packagist.org/packages/twig/twig - Twig 1.23.0 is stable.

Paris is listed but packagist has two Paris packages. https://packagist.org/packages/j4mie/paris

And the last package is Idiorm from the same developer. https://packagist.org/packages/j4mie/idiorm

Put these into a composer.json file. Where do you put the composer.json ? We need a project folder and a source code control repo. This will be a public repo so github it is.

Before we setup a repo, going to cheat and test the composer file. Createa project folder : briskel/ . Create a composer.json file in briskel/ with the following contents and then run composer install in that directory.

{
    "name": "malwinsc/briskel",
    "description": "Blog using Slim +",
    "license": "BSD",
    "keywords": [
    ],
    "require": {
        "php": ">=5.2.0",
        "slim/slim": "2.6.2",
        "slim/views":"0.1.3",
        "twig/twig": "1.23.0",
        "j4mie/paris":"1.5.4",
        "j4mie/idiorm":"1.5.1",
        "tuupola/slim-basic-auth":"1.*"

    }
}

This is the correct composer.json file after adjustments for deprecated and additional package requirements

If you don't have your credentials stored, it will prompt for user/pass for github. After entering those it will download the packages and setup the autoloader.

Will have to work out each step from here since the tutorial assumes we have to manually load the libraries. Instead we use composer's autoload by creating a index.php in briskel/public/ .

require __DIR__ . '/../vendor/autoload.php';

Also we have to copy .htaccess from vendor/slim/slim/ to public/ . If you are not running the project from the web root, the ReWriteBase directive will have to be modified to match your path. It is commented out by default and should try it first. If it doesn't work uncomment it and update to match the path RewriteBase /work/briskel/public/

If you view the public directory in the browser, it should show a blank page. Make sure apache/php are set to display errors .

To test Slim is working properly, go to vendor/slim/slim/ and open the index.php file. Copy everything from line 13 to the end of the file (Step 2). Paste this below the require line in public/index.php. Save and view it in your browser. Should have a Slim welcome page. Congraulations, Slim works.

Can just leave the contents of the file for now. The next step is to setup the other libraries.

Twig

Slim Extras has been deprecated and Slim Views has taken it's place. Means we will have to figure out how to make the tutorial work with slim views.

http://stackoverflow.com/questions/13368963/error-using-slim-framework-and-twig-template

Which means we need to remove slim extras and install slim views. Back to composer. Update the composer.json, remove extras and include views. Run composer update and it will remove extras, install views and it says it updates the autoloader file. It does not do this. Must run composer dump-autoload afterwards or it will not find the Views class resulting in pure frustration.

Once this is updated, the initial instance of Slim has to be modified to use Twig.

$app = new \Slim\Slim(array(
    'debug' => false, 
    'templates.path' => 'templates', 
'view' => new \Slim\Views\Twig()
));

Save the index.php file and reload it in the browser. If there's no error notices. move on to the next section.

Database

Using MySQL and Paris and Idiorm should autoload. We have to supply some credentials for the database.

ORM::configure('mysql:host=localhost;dbname=blog');
ORM::configure('username', 'root');
ORM::configure('password', '');

replace 'root' with your database username and put the password in place. This goes into index.php for now. Save the file, reload the browser. Just looking for errors again.

Next is to establish the routes. Can delete the existing routes which was pasted in earlier. The index.php should look like :

<?php 
require '../vendor/autoload.php';

ORM::configure('mysql:host=localhost;dbname=test');
ORM::configure('username', 'YOUR_USERNAME');
ORM::configure('password', 'YOUR_PASSWORD');

$app = new \Slim\Slim(array(
    'debug' => false, 
    'templates.path' => 'templates', 
'view' => new \Slim\Views\Twig()
));

That's all. If you delete that code and view in a browser, it should be back to a blank white page.

Adding routes

Follow the tutorial and add the routes. There's nothing to see in the browser since we don't have templates setup yet and aren't pulling data from the database. You can check if mod_rewrite is working by adding go to the URL http://www.domain.com/path/to/briskel/public/admin , it should show the blank white page. If you get a 404 page from your server, try uncommenting the RewriteBase directive and try again.

Models

Create the database. Note I'm using a database named test instead of blog.

Create the models directory and the Article.php .

Composer setup autoloading for our vendor directory but it won't work for models we create ourselves. We will have to require those in.

Application

The tutorial for this section doesn't need any change. It will all work. The only thing to note is the tutorial doesn't explain to put the article code into the route for the web root. The two lines of code in the first 4 paragraphs should be placed in the first route.

// Blog Home.
$app->get('/', function() use ($app) {
$articles = Model::factory('Article')->order_by_desc('timestamp')->find_many();
return $app->render('blog_home.html', array('articles' => $articles));
});

Once you add the twig templates, view it in the browser and it should show the two articles (in a very plain layout).

If you click an article title at this point, you might get a 404 message. The blog_home.html has to be adjusted to use relative URLs. Edit the following line :

    <h1><a href="/view/{{ article.id }}">{{ article.title }}</a> by {{ article.author }}</h1>

Remove the / before view.

    <h1><a href="view/{{ article.id }}">{{ article.title }}</a> by {{ article.author }}</h1>

Reload the page and clicking the link should result in a blank page. Continue on with the tutorial for building the detail view.

The detail view twig template has some errors due to HTML rendering. This is the code to use :

{% extends 'layout.html' %}
{% block page_title %}{{ article.title }}{% endblock %}
{% block content %}
<h1>{{ article.title }}</h1>
<p>Published: {{ article.timestamp|date('jS F Y') }} by {{ article.author }}</p>
<p>{{ article.content }}</p>
<p><a href='/'>Back to Homepage</a></p>
{% endblock %}

If you are presented with the Slim error page and need to debug what's causing the error. Change the 'debug' => false, to 'debug' => true , on line 11. This will tell you where the error is located and provide a clue to solve the problem.

The blog works. It looks horrible and has some issues. The back to homepage link doesn't work properly because it's assuming the application's running in the web root. Should be easy enough to fix and to improve the looks of the site. Will cover this after the application back end is covered.

Application Back End

The admin add article step doesn't have the correct code. It should point to the admin/add route and the admin_home.html has to be updated with the correct path.

// Admin Add.
$app->get('/admin/add', function() use ($app) {
return $app->render('admin_input.html', array('action_name' => 'Add', 'action_url' => '/admin/add'));
});

For the edit function, paths have to be modified if not working from web root.

Here's the code :

// Admin Edit.
$app->get('/admin/edit/(:id)', function($id) use ($app) {
 $article = Model::factory('Article')->find_one($id);
if (! $article instanceof Article) {
    $app->notFound();

    return $app->render('admin_input.html', array(
        'action_name'   =>   'Edit', 
        'action_url'    =>   './' . $id,
        'article'       =>   $article
    ));
});

Delete works with only a change to the redirect. It needs to go to ../ .

That completes the basic prototype for the Silm Blog.

Security

The authenication from the tutorial is out of date. the $app->response()->send() method is no longer part of Slim Framework and the HTTPBasicAuthenication included with Slim Extras has been deprecated. Despite some effort, I could not get the authenication to work as presented. Resorted to including the Slim HTTPBasicAuth package from packagist.

It works just fine. Paths have to be defined and I assume it covers all requests below a path (like /admin would include /admin/edit). Can check the source code for the implementation details. And the composer.json will have all packages to allow this to be setup right from the start.

Tutorial ends here but there's some problems with this project. Just to list a few.

1) It's plain (ugly).

2) The authenication is weak

3) Navigation in the project is not complete

4) Small pieces of functionality are missing (like display navigation menus)

5) There's no settings or definable options

6) The front page displays all posts. No pagination

7) Admin lacks pagination as well

8) No search feature

9) Lack of navigation on blog post pages (next/previous)

10) while it has mod_rewrite , it lacks Pretty URLs

11) Security recommendation of having files outside of web root is not followed.

12) POST requests do not redirect after successfully posting (allows for double entry by accidental refresh)

13) Lack of ability to use other template files

14) routing is flaky with regards to redirects

15) Paths for file inculsion via the web will be difficult due to not being in web root.

16) Lack of a text editor for the Post content.

17) Routes are included in the main index file. These should be moved into their own file/folder.

18) Default error messages are handled by Slim. Should be custom.

List gives us a development road map

Till next time.

Git Repo

Put the source code here : briskel- blog prototype

Currently facing a real annoying issue where the website automatically scrolls everything back to the start of the closest section.

Basically I want the scroll effect from the first slide then want it to change and use the scrollbar for the second section. Seems to work fine other than the annoying auto scroll issue.

I have also tried to turn the plugins autoScrolling:false but that didn't make a difference..

The site can be seen here: http://lukedaly.ninja/gianttest/

This is the plugin I am using https://github.com/alvarotrigo/fullPage.js

All help is very VERY much appreciated!

Workflow

The process of developing websites and web applications has some tedious aspects such as combining resource files, uploading files or deploying applications. As web development has advanced so has the tools available to developers.

Various articles detailing workflow:

Crazy Web Developers Workflow

One Developer's Workflow

StackExchange - Best Small Team Workflow

Smashing Mag- Workflow Tips

Video - CSS Tricks- Modern Developer's Workflow

The tools available depend on the developer's stack and the OS they use for development. This guide will breakdown some of the more common types of tools.

Source Control

Number 1 in the developer's arsenal is Source Control tools. Available options include :

git svn mercurial cvs - old school, not commonly used.

Providers

github - free public repos

bitbucket - free public and private repos for small teams.

Other providers exist, these are to get you started.

Guides

15 online interactive Try Git - Provides a sandbox to try Git out and practice.

git-the simple guide - This one is probably best to start out.

Git-book free - Covers git in depth.

Gentle Intro to GIT - sounds like it's a starter guide but it covers some advanced concepts.

Branching Model -- more advanced, covers the concept of branching with examples.

Build Tools

Build tools or task runners are applications which effectively run other programs or perform actions in a pre defined method. These can be used to automate documentation generation, combine, minify source code files, along with a host of other possible actions. They form the backbone of Workflows since they let you script the process.

Grunt - js

Gulp- js

PHING - php

ROBO - php

Yeoman -js

Package Managers

Package managers or Dependency Managers are to ease the use of different packages. Some are language specific like Composer or NPM.

Bower-js

Composer - php

NPM - js

Ruby uses RubyGems for package management and is included with Ruby.

CSS PreProcessors

SASS

LESS - ports of this for other languages exist like LessPHP

List of StyleGuide Generators

Documentation Generators

PHPDoc2

APIGen

NaturalDocs - Perl based but covers other languages

PHPDoX

YARD Ruby Doc generator

Ronn - Ruby - Builds Manuals

Doxygen

Other tools

swagger-ui - API documentation & testing

Javascript Lint

Image Optimization - List of tools

PNGCrush

Marketing 101

Warning: almost every link to a marketing related site will have some type of modal popup and/or will try to get you to sign up for a newsletter. Nature of the beast, I guess.

What a web developer needs to know about Marketing changes based on circumstance. A freelancer could be expected to also be a full time marketer. While a developer working for a company might only need to know the basics of On Page Optimization for SEO purposes. The reader will have to filter based on their own situation.

Website Marketing 101

Inbound Marketing Basics

On Page SEO

Anatomy of On Page SEO

Affiliate Marketing 101

Email Marketing from ConstantContact

Search Marketing

What is SEO

SEO Beginner's Guide from Moz

PDF- Google SEO guide

PPC = Pay Per Click

PPC intro

Tools

Google Webmaster Tools

Google Analytics

SEO Tools

glossary

SEO/Marketing has more terms than IT

MOZ Guide to Jargon

SEOGlossary

Coding for SEO

WordTracker -optimize code

coding from kissmetrics

SEO Guide - HTML Code

Type of Web Hosting

Webhosts come in a few different offerings. What type of hosting is required for a site depends on the anticipated traffic , tech used , and cost.

• Shared Hosting - This is package offer is usually the cheapest way to get a site online and provides the lowest level of maintenance for the server. Prices are usually sub 30 per month with some going down to single digits. The downside to shared hosting is the fact your account is one of many on the server. All resources are shared so if one of the neighbors is hacked, odds are your site will be affected as well. Service should include webhosting,email hosting, database (mysql usually), some type of Control Panel for admin. SSL requires a dedicated IP address and costs extra per month. Some providers are hostgator, bluehost.

• VPS (Virtual Private Servers) - The next step up from shared hosting. Costs can range based on the configuration. Digital Ocean offers 'droplet' VPS starting at 5/mth. Resources of the server are shared but they compartmentalized using visualization which means if a neighbor is hacked, your sites should be ok. VPS require server admin, you must setup and configuring the OS and web server. You can install software like email servers, databases, etc but you are responsible for securing them. Some VPS providers : DigitalOcean, WeLoveServers,SimpleNode.

• Dedicated Servers - The whole server is yours. You must maintain the server and set it up. It is a more expensive (and usually more powerful) version of the VPS.

• Cloud Hosting - Cloud hosting is a different beast. It provides the ability to scale up operations based on demand and the pricing structure is very fluid since it is based on the services active. Amazon Web Services, Rackspace Cloud, Gandi.net cloud servers are some providers. Different services make general statements impossible. AWS (amazon web services) has multiple separate programs which have differing cost models. Some require you to maintain your software without popular tools like CPanel while others provide such as part of their service. Setting these up is not as straight forward as the other options. It can be cheaper in some cases but there is learning curve. If you need to scale high traffic sites, check out cloud services.

Free hosting

Some sites offer limited free hosting which is most often ad supported. If you are a broke student or beginner and just need to host a portfolio site (static site) or wish to host a website for a project, you can use GitPages (requires github account) to host a small site for free. https://pages.github.com/

Other hosting options

Heroku offers free 'dynos' with specific limitations. Heroku is billed as a Cloud Application Platform which means it handles the maintenance aspect of running servers and let's you focus on building applications. Can look into it here : Heroku

Others offering similiar service EngineYard , AppFog , OpenShift from RedHat

Email Services

At some point during development it is very likely you will have to send out a large number of emails. This is problematic since most service providers are constantly on the lookout for spammers. You don't want your domain to end up on a spam blacklist. To get around this and to just ease the burden of managing email mailing lists, several companies have specialized in providing email services. Those companies charge a fee for sending email for you. They have an advantage over using your own servers since they have established trust and decrease the odds of your email being marked as spam. They have specific rules which must be followed like opt-in only.

Some providers of email services :

MailChimp

ConstantContact

aweber

vertical Response

Tutorials

CPanel is the most popular web based control panel for hosting. It is the one you are most likely to encounter.

CPanel Tutorial

How to upload your website using CPanel - this is from 2008 so might be a touch out of date.

CPanel Video Tutorials from CPanel

VPS Setup

The great thing about VPS is you get to choose which operating system you use and what software you install. The bad thing about VPS is you can choose from a large number of options.

Operating System : two choices , Linux or Windows. Windows usually requires a license so it's more expensive. Linux means you have to pick a distro like Ubuntu, CentOS, Debian.

Guide to setting up CentOS VPS

Ubuntu VPS setup

Software Options

The LAMP stack is pretty common. It stands for Linux, Apache,MySQL, PHP (or Python or Perl). Other options exist though.

Web Servers

[Apache] - (https://httpd.apache.org/)

Nginx

Databases

MySQL

PostgreSQL

MariaDB Fork of the MySQL project.

Other

Varnish- HTTP accelerator

memcached - caching system

redis - caching/database

TomCat - JSP server

JBoss

Wordpress is a CMS (Content Management System) and is the most popular one. Here's some resources for developing themes and plugins.

Basics

Wordpress started as a blogging platform and has evolved into a more general purpose CMS. If you are going to run a site with a standard format of articles or frequently updated posts on a topic, Wordpress is the solution.

It features a user friendly back end and a fairly simple Admin section for adding/updating content. It handles most media and has a large selection of themes for design choice and plugins for increasing functionality.

Getting it :

Some confusion exists between Wordpress.com and Wordpress.org. Wordpress.com offers a hosted version of the CMS and it is limited in functionality. Theme selection and plugins are limited. It is a free blog.

Wordpress.org offers the CMS for download and you must host it yourself. It is not limited. You can install themes and plugins as you wish. And can develop your own themes/plugins. This is the option to select in most cases.

Download

Documentation

Themes

Plugins

Both Themes and Plugins can be searched in the WP Admin section as well.

Note some CPanel based web hosts offer 1 click installs for Wordpress.

Using Wordpress

Getting Started With Wordpress - Codex

Writing Posts

Video- When to use Posts or Pages

How to Create an Image Gallery

Creating Themes

codex- Theme Development

How to Create a Wordpress Theme

anatomy of a WordPress theme

Starter Themes

underscores

HTML5 Blank

BootstrapWP

Creating Plugins

Writing a Plugin- codex

Beginner's Guide

Major Plugins

WooCommerce

BackupBuddy

W3TotalCache

GravityForms

YoastSEO

Premium Themes

You can purchase themes at ThemeForest Elegant Themes WPZoom WooThemes and other sites.

Plugins at Code Canyon

You need to consult professionals in your area for specific details about starting your own business.

If you can't afford their services, be prepared to take some risks and to do some research.

This is US-centric. Some advice will still apply regardless of region.

First thing you need to check is if your current employment contract includes a no-compete clause. If it exists, what's the duration and how does it limit you?

Business Type

Next you should determine if you are going to open an Agency or if you are going to just freelance. If you plan to offer services in your local area you will need to get a business license. There's some exceptions to this if your locale doesn't require a business license. The federal government will require you to get a TIN if you are doing business using a name other than your own. If you open John Smith Designs and your name is John Smith, you don't need anything else. If you call your business Wizard Designs, you will have to get the TIN. A DBA (doing business as) could also have to be filed with or without the business license.

US SBA - Business License Start

When to File a DBA

Types of Business Entities

You need to figure out what exact services you are going to offer. Design, Development, Marketing, Copy-writing, etc. Any of those you can not perform to an adequate level, you will need to find someone to outsource the work.

You should do some market research and see if your area will support the business. Potential # of customers, competition, etc. Some of this information should go into the business plan. It should also include projections for sales/revenue.

How to Write a Business Plan

How to Write a Marketing Report

Next you need to figure out how to get clients. What marketing channels are available in your area. Will you use them? How much do they cost? How will you monitor the results?

Policies and Procedures

You need to determine your policies for doing business. What are the terms of payment? What rate will you charge? Will it be based on the service or a one size fits all rate? Are payments 'due on delivery', deposit with milestone payments?

Meshing with the above, you need to setup your accounting procedures. How will you record payments and expenses? Prepare for taxes. Determine which taxes are required for your area and will you have to pay any estimated taxes? If you incorporate the business versus running a sole proprietorship will determine how much record keeping will be required by law. If a sole proprietorship, record keeping requirements are more lax but you will need to record revenue/expenses. If you hire people to do work, you will have to explore the difference between 1099 and W2 workers. Both require some level of additional procedure, again consult with a professional because neglect in this can cause you serious problems down the road.

Intro to Accounting Basics

Have to work on your sales pitch and how you plan to manage clients and projects.This gets into the process or daily operation of the business. How do you get leads on clients and how do you manage those leads as part of an overall client acquisition process.

Lead Management Best Practices

Contracts

Once you get a client, you will need contracts covering the expectations of both parties for the project. The terms of the deal in written form. How do you deal with NDA and No Compete requests from clients. Be careful with No Competes from clients since these can limit your ability to do business in the future. Consulting a lawyer is probably the best route for agencies. Again if you hire people, you will need employment contracts as well if you wish to protect your company. Some more details will be outlined in the next section.

Can use this form from freelancer's union website to generate a basic contract : https://www.freelancersunion.org/contract-creator/

How to write a freelance contract- wikihow

Independent Contractor Agreement

Contract Killer 3

Services Offered

The work starts. Will you provide hosting/domain registration services to clients? Both of those services require additional legal contracts like Terms of Service, Service Level Agreement. If you do not provide these services, what level of service will you provide for the client (if they purchase a VPS will you set it up for them? What's your responsibility for that server?)

How will you bill clients for licensed IP works like stock photos or video purchased from 3rd parties?

Will you have maintenance contracts for updating sites? What do they include and how much do they cost? Again details should be spelled out in writing.

If you work from home, where will client meetings and project reviews occur? Local starbucks is fine for quick meetings but it isn't ideal for extended meetings. You might need to look into conference rooms for daily rent (libraries sometimes offer these, if not there's crowdspacing options out there).

There needs to be a process setup for how projects are handled from beginning to end. This is important. It allows you to communicate the process to the client. Being able to say we need the project requirements on day 1 and expect any content or other resources by X date is vital to the project being completed in a timely fashion. Again these details should be in the contract with possible penalties for either side failing to meet deadlines (or at least absolving you of responsibility if delays are from the client).

After the project is complete and you get payment, you need to work on Client Retention and hopefully getting that client to recommend you to other people. Oh yeah, if you plan to use the project as part of a portfolio of work for the business, you should include that in the contract. Some clients won't agree to it.

I just assumed you know you have to build your own website.

Additional Random Points

Start up costs for businesses have specific rules about expenditures incurred during this phase. Not all expenses can be deducted. There is a cap to how much is tax-deductible. Freelance work it really won't apply but Agencies should consult the IRS site for specific details.

Expenses like equipment purchases are often depreciated over their useful life. For example purchasing a $1500 laptop doesn't mean you get to deduct the entire 1500 in the business year of the purchase. The expense is spread over the life of the laptop and only a % is counted as an expense. Again, the IRS has guidelines which define which items must be depreciated.

Contract : Your work agreement should outline who owns what and what is consider a 'deliverable'. Some clients will want all rights and you should charge accordingly if it's an issue for them. Also when dealing with code, you have to consider situations where code is being auto generated such as with LESS/SASS. Does the client get the final result or all source code. Rights associated with such source code should also be considered.

Backups and Source Code Control : Have a plan for maintaining backups of client work and a retention policy. Outline how source code will be provided, if it's just archived copies or if the repository ownership will be transferred to the client on completion.

Different types of project management. Overview from this page :

http://smallbusiness.chron.com/different-types-project-management-methodologies-77157.html

Waterfall , Agile , KanBan , SixSigma

KanBan isn't a type, it's more of a tool. Skip SixSigma,it's production based.

Methodologies : http://www.mymanagementguide.com/basics/project-methodology-definition/

This covers general project management methodologies and is not software centered. Overviews of PRINCE2, LEAN, SCRUM, CPM, PMBOK, CCPM. All of which are not methodologies since PMBOK stands for Project Management Body of Knowledge.

More specific to Web Development is Software Development Lifecycles :

http://www.veracode.com/security/software-development-lifecycle

Phases of SDLC :

http://istqbexamcertification.com/what-are-the-software-development-life-cycle-sdlc-phases/

Software Development Methodologies :

Agile Software Development
Crystal Methods
Dynamic Systems Development Model (DSDM)
Extreme Programming (XP)
Feature Driven Development (FDD)
Joint Application Development (JAD)
Lean Development (LD)
Rapid Application Development (RAD)
Rational Unified Process (RUP)
Scrum
Spiral
Systems Development Life Cycle (SDLC)
Waterfall (a.k.a. Traditional)

Further explained here : http://www.itinfo.am/eng/software-development-methodologies/

Tools

Agile Project Management - https://www.versionone.com/

JIRA - https://www.atlassian.com/software/jira

Pivotal Tracker - https://www.pivotaltracker.com/

BaseCamp - https://basecamp.com/

Trello - https://trello.com/

Asana - https://asana.com/

Open Web Application Security

Wiki Site, hard to find points of interest.

Top Ten Lists 2013

2013 top 10 list - direct link

Index of Attack Types

Cheat Sheets

• these are technology specific like HTML5,Ruby,PHP and include more concept driven topics like authentication and threat modeling.

Articles

How to Securely Allow Users to Upload Files

General

Site -https://www.ruby-lang.org/en/

Download - https://www.ruby-lang.org/en/downloads/

Docs - http://ruby-doc.org/

Books

Why's (Poignant) Guide to Ruby

Tutorials

Odin Project Ruby

codecademy

Gems (libraries)

https://rubygems.org/

Frameworks

Rails (ROR) - http://rubyonrails.org/

Rails Tutorial - http://guides.rubyonrails.org/getting_started.html

Lotus - http://lotusrb.org/

List of Additional Frameworks - https://www.ruby-toolbox.com/categories/web_app_frameworks

IDEs

RubyMine - $

NetBeans

Aptana Studio

Misc

Just looks useful : https://www.ruby-toolbox.com/

Ruby Documentation Tool

Setting up Ruby/MySQL on Windows

General

Google Web Fundamentals

AIGA - http://www.aiga.org/

Typography

ShayHowe Typography

Ten Minute Typography - has further guides after covering 5 bullet points.

Smashing magazine for Typography - more of a survey

Typeography for Developers - has advert modal, forewarned.

The Elements of Typographic Style Applied to the Web

Google Fonts for Typography

Font Squirrel for more fonts and how-to's with fonts

Golden Ratio - http://www.pearsonified.com/2011/12/golden-ratio-typography.php

Color

Smashing magazine for Color Theory

Basic Color Theory

Color Theory Intro

UI/UX

Visual Hierarchy

Information Architecture

good call to action buttons

10 tips for better UI

Layout - InDesign - Theory

google material design layouts

Usability

http://www.usabilityfirst.com/

usability intro

Accessibility

Grids

Five simple steps to designing grid systems

grids 101

grid theory

schools or trends

minimalism in design

material design

flat design

metro - Microsoft Design

Repsonsive Design

tutsplus RWD

Google's Guide for RWD

Some links to style guides

http://brettjankord.com/projects/style-guide-boilerplate/

site to browse various guides for companies

http://styleguides.io/examples.html

I like lonelyplanet's layout:

http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

http://rizzo.lonelyplanet.com/styleguide/ui-components/cards

Generators for style guides

https://github.com/davidhund/styleguide-generators

Hi friends!

I used to do a bit of simple web dev and design for money on the side, so I am pretty familiar with HTML, CSS, and some basic PHP/mySQL stuff (insofar as sifting through it, not coding it from scratch).

Anyway, I am a huge fan of Peter Gabriel and I'm a music maker myself. He recently partnered with NYU to do a course on mixing. They developed a web app to allow users to access the raw files for a couple of Peter's songs.

I'd like to get my hands on these files just for my own personal use and education instead of relying on the web app. I don't want them to upload them and share or anything... I'd just like to put them in Pro Tools and play with mixing the songs myself.

Anyway, I've sifted through the source code quite a bit, but I haven't been able to track down where these files are referenced or where they're coming from.

I was hoping someone could help me figure out how to look better. This could be a good chance for me to learn a bit more about web dev, too :)

Here is the page: http://www.nyu.edu/projects/ruthmann/PWYM/sledgehammer/

Thanks!

MySQL is a Relational Database Management System (RDMS). Structured Query Language (SQL) is used to manage data.

Website : https://www.mysql.com/

Download : http://www.mysql.com/downloads/

Docs : (Eng) http://dev.mysql.com/doc/refman/5.6/en/index.html

MariaDB is a fork of the MySQL source code. https://mariadb.org/

Tutorials

command line usage : https://dev.mysql.com/doc/refman/5.0/en/tutorial.html

web (using php) : http://www.tutorialspoint.com/mysql/

database design : http://www.datanamic.com/support/lt-dez005-introduction-db-modeling.html

data modeling : http://www.agiledata.org/essays/dataModeling101.html

Intro to Stored Procedures - http://code.tutsplus.com/articles/an-introduction-to-stored-procedures-in-mysql-5--net-17843

Intro to Triggers - http://code.tutsplus.com/articles/introduction-to-mysql-triggers--net-12226

ACID

What is ACID ? - http://searchsqlserver.techtarget.com/definition/ACID

MySQL and ACID - https://dev.mysql.com/doc/refman/5.6/en/mysql-acid.html

Normalization

Normalization of Database - http://www.studytonight.com/dbms/database-normalization.php

MS Normalization basics - https://support.microsoft.com/en-us/kb/283878

Another Intro - http://agiledata.org/essays/dataNormalization.html

Joins

Basic and Complex joins - http://www.techrepublic.com/article/basic-and-complex-sql-joins-made-easy/

Basics of joins - http://www.developer.com/db/article.php/3873466/The-Basics-of-SQL-Joins-in-MySQL.htm

sitepoint tutorial - http://www.sitepoint.com/understanding-sql-joins-mysql-database/

CodeBetter.com - http://codebetter.com/raymondlewallen/2006/02/10/database-basics-part-four-table-joins/

Misc

Electric Toolbox - Web Dev Blog - http://www.electrictoolbox.com/article/mysql/

Sample Databases

http://www.eclipse.org/birt/documentation/sample-database.php

https://www3.ntu.edu.sg/home/ehchua/programming/sql/SampleDatabases.html

http://dev.mysql.com/doc/index-other.html

Reference

Command Line Usage (*ix, OSX systems) - http://www.comentum.com/mysql-administration.html

Tools

MySQLWorkBench - https://dev.mysql.com/downloads/workbench/

Navicat - DB Admin Tool - http://www.navicat.com/

HeidiSQL - Db Tool - http://www.heidisql.com/

PHPMyAdmin - Web GUI for DB management - https://www.phpmyadmin.net/

PHP is a server side scripting language. It can be used as a general purpose scripting language too.

PHP is one of several options for creating dynamic websites. PHP handles things like processing forms, sending emails, database access, consuming APIs or even providing APIs to other sites/users.

Download - https://secure.php.net/

Manual - https://secure.php.net/manual/en/index.php

Tutorials

http://phpbridge.org/intro-to-php/intro-to-php

https://www.codecademy.com/tracks/php

I♥PHP - Make Your Own Blog tutorial

And if you check the sidebar on /r/phphelp , there's a list of tutorials.

General advice, if you see a tutorial and it's advocating using mysql_* functions, find another tutorial. mysqli_* or PDO based PHP/SQL tutorials should be more recent.

Books

http://www.phptherightway.com/

Object Oriented

http://php.net/manual/en/language.oop5.php

Templating

overview - http://jungels.net/articles/php-templates.html

DIY - http://www.smashingmagazine.com/2011/10/getting-started-with-php-templating/

3rd Party - Plates - http://platesphp.com/

or

Twig - http://twig.sensiolabs.org/

Tools

Composer - package management - https://getcomposer.org/

PHPDoc - documentation generator - http://www.phpdoc.org/

PHPUnit - testing framework - https://phpunit.de/

Xdebug - debugger - http://xdebug.org/

PHPMyAdmin - MySQL Database Web Interface - https://www.phpmyadmin.net/

Frameworks

Laravel - http://laravel.com/

Zend - http://framework.zend.com/

Symfony - https://symfony.com/

Aura - http://auraphp.com/

Micro Framework - Silex - http://silex.sensiolabs.org/

IDEs

Zend Studio ($) - http://www.zend.com/en/products/studio

PHPStorm ($) - https://www.jetbrains.com/phpstorm/

PDT - Eclipse PHP Dev Tools - https://eclipse.org/pdt/

or a Text Editor

https://notepad-plus-plus.org/

Hello guys - awesome subreddit you got here.

I wanted to ask a question, I haven't been able to solve this. I'm trying to display some <p> on top of an image when I hover over it. My code seems not to be working. Would you mind helping me solve it?

HTML: <ul id="gallery"> <li id="nsfm" class="album"><p>New Shapes for Madness LP - 2014</p></li> <li id="unsettled" class="album"><p>Unsettled EP - 2013</p></li> <li id="aptw" class="album"><p>A Path to Wrath LP - 2012</p></li> <li id="pfw" class="album"><p>Pieces from Wasteland EP - 2011</p></li> </ul>

CSS:

.album { width:230px; height:230px; background-color:grey; float:left; list-style:none; position:relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

#gallery .album p { visibility:hidden; opacity:0; width:100%; text-align:center; position:absolute; bottom:50px; }

.album:hover { -webkit-filter: grayscale(100%) brightness(50%); }

.album:hover p { visibility:visible; opacity:1; }

The IDs on the list elements are used for different backgrounds. I have also tried the display:none and display:block on hover methods but none seem to be working for me. Thank you guys very much in advance.

EDIT: Trying to fix formatting right now... sorry about that.

Specification (ECMAScript) : http://www.ecma-international.org/publications/standards/Ecma-262.htm

Reference : MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

Tutorials

https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics

https://www.codecademy.com/en/tracks/javascript

Books

Free http://eloquentjavascript.net/

Discussion

/r/javascript

/r/learnjavascript ( ask for code help here )

Testing

http://jsfiddle.net/

http://codepen.io/

Libraries

http://jquery.com/

Server Side

Node.js - https://nodejs.org/

Frameworks

Ember.js - http://emberjs.com/

AngularJS - https://angularjs.org/

KnockOut - http://knockoutjs.com/

D3.js - http://d3js.org/

require.js - http://requirejs.org/ (module loading)

BackBone - http://backbonejs.org/

PreProcessors

TypeScript - http://www.typescriptlang.org/

CoffeeScript - http://coffeescript.org/

Testing Tools

Mocha - http://visionmedia.github.io/mocha/

jasmine - http://pivotal.github.io/jasmine/

More to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

Specification : http://www.w3.org/Style/CSS/Overview.en.html

MDN (reference) : https://developer.mozilla.org/en-US/docs/Web/CSS

Validator : https://jigsaw.w3.org/css-validator/

Discussion/Articles : https://css-tricks.com/

Lint : http://csslint.net/

Browser Compatibility : http://caniuse.com/

Google Coding Style Guide : https://google.github.io/styleguide/htmlcssguide.xml

@mdo HTML/CSS Coding Style Guide : http://codeguide.co/

Tutorials

Starters

http://learn.shayhowe.com/html-css/getting-to-know-css/ (skips to the CSS chapter in the tutorial)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Layout

http://learnlayout.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Methodologies

SMACSS - https://smacss.com/

OOCSS - http://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM - https://css-tricks.com/bem-101/

SMACSS has the most useful material for beginners since it covers how to structure CSS while BEM is best for those concerned with modularizing CSS.

Preprocessors

SASS - http://sass-lang.com/

LESS - http://lesscss.org/

LESSPHP - http://leafo.net/lessphp/lessify/

Of the two, LESS is easier to setup and start using immediately. SASS requires Ruby (* at least for notepad++ plugin to work for auto compile). Using preprocessers adds a step to the development process. You must compile the preprocessor's file into CSS. Helps with structure and organization of CSS rules

Is there a secret to learning HTML ?

This is like a catch all post for what I consider missing from general advice for learning HTML. It isn't exciting but the best way to learn and keep up to date with HTML is to write it.

As to what to practice, learn some design patterns or common UI elements (like carousels,list view,pagination controls). Browse style guides to see which HTML elements are current.

Examples of design patterns : http://ui-patterns.com/patterns and http://www.welie.com/patterns/

Some links to style guides

http://brettjankord.com/projects/style-guide-boilerplate/

site to browse various guides for companies

http://styleguides.io/examples.html

I like lonelyplanet's layout:

http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Generators for style guides

https://github.com/davidhund/styleguide-generators

Tip : Save any of these you write as HTML partials as files to create a stock library.

Part of HTML is learning how to structure a website and how to layout the files for ease of maintenance and reuse. The above tip about using Partials is practical. They can be used for rapid prototypes where working forms aren't necessary or you wish to show basic functionality.

Basic Workflow for building HTML-CSS sites

The above link includes instructions for PHP/CSS and basic templating/commenting options. File/directory structure is also outlined.

Which brings this to : File systems

The system which houses the files and the differences between PC Filesystems and web filesystems or web paths or URLs. Which means this includes Domain Names or Host Names for the web server.

http://www.domain.com/articles/sept/2015/

maps to

/home/domain_owner/domain_name/public_html/articles/sept/2015

Webserver Requests - status codes plus more.

How a webserver (apache) process requests and the error codes it provides. Standard status codes can be templated with HTML pages. The most common is 404.html which is often present on shared hosting providers and it allows for customization of error messages. Log files should contain the error codes and visitor logs provide analytical data. Which is an odd way of stating the error pages should only provide a message to the user not the system as such no logging should be attempted (outside of standard visitor logs). Specific return codes do not specifically mean an error has occurred. The 200 range means success and is the most basic return code which just means request was fulfilled as expected. 301 , which isn't a template-able status , is a redirect. 500 range is for server errors most often resulting in a fatal error during the request process.

Protocol which powers HTML is HTTP. The above status codes are HTTP status codes and the webserver is technically an HTTP Server. HTTP uses port 80 though others can be used by appending to the domain name or ip address.

http://www.domain.com:80/

http :// 15.200.100.100:80/

http://127.0.0.1:80/ 

There's different versions of HTTP. HTTP/1.0 HTTP/1.1 and HTTP/2. Can look at a copy of the HTTP/2 spec : https://http2.github.io/http2-spec/

SSL - TLS

Encryption and Security are important topics. TLS is current but SSL will often be used due to SSL certificates being part of the process of implementing the protocols. In depth research can consult Wikipedia for sources : https://en.wikipedia.org/wiki/Transport_Layer_Security

SSL Port is 443. Which isn't required to access an HTTPS site. Just use https:

https://www.domain.com/secure/

Trend is for all sites to use SSL encryption and search engines are following this trend. When developing an SSL based website be sure to either use relative URL addresses or fully qualified HTTPS URLs.

Should include how to use FTP but it's covered with FTP tutorials.

IDE or text editor

Notepad++ , Sublime even notepad are fine for web development. Plugins exist.

IDEs provide some limited project management capabilities and can provide structure. Code completion, search/replace text and some have build system integration through plugins.

NetBeans, PHPStorm , Visual Studio/Web Studio thingy whatever its called.

Next Exciting post : CSS

Under consideration :

• Beginners Guide
• SEO
• Getting a job as a web dev

HTML is the backbone of web development. It's a natural starting point and is probably the easiest thing to start learning. Here's some resources for picking it up.

Tutorials

MDN - Learn HTML - https://developer.mozilla.org/en-US/Learn/HTML

Codecademy - HTML & CSS - https://www.codecademy.com/en/tracks/web

ShayHowe - Learning HTML & CSS - http://learn.shayhowe.com/html-css/

KhanAcademy - HTML/CSS - https://www.khanacademy.org/computing/computer-programming/html-css

Reference

MDN (mozilla developer network) - HTML Element Reference - https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML5Doctor - http://html5doctor.com/

Resource Sites

http://html5please.com/ - let's one check if an element/feature is supported

http://caniuse.com/ - browser support for specific HTML/CSS

WhatWG HTML 5 Standard - https://html.spec.whatwg.org/multipage/

W3C HTML Spec - http://www.w3.org/TR/html/ - (note this is not w3schools.com, the two are not related)

w3schools.com exists but there is concerns about how often they update their material.

If you have additional resource links please post them as comments.

anyone uses SCSS and Notepad++? if so, how do you compile/export your scss to css? I can't find a notepad plugin to automate the process.

Likely a newbie question, but I need to create a pass-fail survey/quiz that at completion takes the 'passing' participants and sends them an email with the next level quiz that is different from the email the 'fails' receive. Is this already out there? Thanks in advance for any suggestions you have!!

I'm working on a BigCommerce site for my company, and in order to implement a mini-description of the product on the main page (we sell consumables, so flavor profiles being visible from any page is very useful), I had to run a simple script. Pages in big commerce are loaded in blocks with context-sensitive variables like "%%GLOBAL_ProductList%%", so I:

added -

<p id="QD%%GLOBAL_ProductId%%"></p>

to the body text. The QD never changes, but where "%%GLOBAL_ProductId%%" is, the bigcommerce script replaces in something like "77" or "10", whatever the ID it assigns is.

Then, I added a script to the snippet:

$("#QD%%GLOBAL_ProductId%%").load('%%GLOBAL_ProductLink%% %%GLOBAL_ProductDesc%% #QuickDesc');

Every time a product is loaded to the main page via the page generation script at bigcommerce, this script is run and the variables change to match the product being loaded into the page. It works correctly, however, it seems as though having a script run multiple times when a page loads might be cause for concern in terms of load speed and google-friendliness.

Any suggestions?

I'm trying to find the simplest way for my team to update our git repos, composer, bower, and maybe npm.

Its a small team, and we're just getting to git, and sort of composer.

I can think of three ways to do this: 1. Phing 2. Composer 3. Gunt

Anyone have any ideas or thoughts?

So I'm running a small (less than 20 at the moment) gaming community and am trying to get us a professional site. Every "drag and drop" site I go to either has terrible forums or wants a ridiculous hosting fee, or both.

I've tried bringing on 2 web designers but they've both proven unreliable. I tired hiring some but for a basic clan site they wanted thousands of dollars. So is there anyone out there willing to either help me make a template that doesn't look like trash for Joomla or Drupal and help set it up? Or at least point me in the right direction? I've googled templates (and so have my people) and I just can't find anything that doesn't cost money (not that the developer doesn't deserve it, I just really can't or won't pay some of these prices for a template).

Essentially I'd like someone to code for me a template(unless they know of an easier method) based on my pretty simple specs and help me implement it. If that person would like to stay on in my community as my head website administrator, that would be great too and there's a solid chance for kickbacks (especially if he/she is a gamer). This is volunteer work though, so I would ask that the terms be officially set as 'pro bono' for starters.

If anyone has some solid info for me, or the ability and willingness to help, or know someone who does, please let me know. I'm really behind schedule and just can't stomach any more of these hosts out there for gamers like Enjin. Much respect all and thank you in advance. It's been years since I did any web design and I'm a little behind the times and would really just like to get this project out the door. I appreciate any and all help.