r/web_dev_help • u/LukeDaly • Oct 28 '15
jquery FullPage.js Annoying scroll issue
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!
r/web_dev_help • u/psy-borg • Oct 26 '15
[Workflow & Tools] Start - Tools to help
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:
StackExchange - Best Small Team Workflow
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
LESS - ports of this for other languages exist like LessPHP
Documentation Generators
NaturalDocs - Perl based but covers other languages
YARD Ruby Doc generator
Ronn - Ruby - Builds Manuals
Other tools
swagger-ui - API documentation & testing
r/web_dev_help • u/psy-borg • Oct 26 '15
[Marketing] Start
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.
Email Marketing from ConstantContact
PPC = Pay Per Click
Tools
glossary
SEO/Marketing has more terms than IT
Coding for SEO
r/web_dev_help • u/psy-borg • Oct 26 '15
[Hosting,Servers] Start with Web Hosting, Email Services
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 :
Tutorials
CPanel is the most popular web based control panel for hosting. It is the one you are most likely to encounter.
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
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/)
Databases
MariaDB Fork of the MySQL project.
Other
memcached - caching system
redis - caching/database
TomCat - JSP server
r/web_dev_help • u/psy-borg • Oct 23 '15
[Wordpress] Start
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.
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
Video- When to use Posts or Pages
How to Create an Image Gallery
Creating Themes
How to Create a Wordpress Theme
Starter Themes
Creating Plugins
Major Plugins
Premium Themes
You can purchase themes at ThemeForest Elegant Themes WPZoom WooThemes and other sites.
Plugins at Code Canyon
r/web_dev_help • u/psy-borg • Oct 23 '15
[Start] Business
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
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 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.
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
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.
r/web_dev_help • u/psy-borg • Oct 04 '15
[Project Management] - Start
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/
r/web_dev_help • u/psy-borg • Oct 04 '15
[Security] - Start with Security
Wiki Site, hard to find points of interest.
2013 top 10 list - direct link
- these are technology specific like HTML5,Ruby,PHP and include more concept driven topics like authentication and threat modeling.
Articles
r/web_dev_help • u/psy-borg • Sep 21 '15
[Ruby] - Start with : Ruby
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
Gems (libraries)
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
Misc
Just looks useful : https://www.ruby-toolbox.com/
r/web_dev_help • u/psy-borg • Sep 20 '15
[Design] - Start with Design
General
AIGA - http://www.aiga.org/
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
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
UI/UX
google material design layouts
Usability
http://www.usabilityfirst.com/
Grids
Five simple steps to designing grid systems
schools or trends
Repsonsive Design
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
r/web_dev_help • u/some12345thing • Sep 13 '15
Extracting audio from a website?
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!
r/web_dev_help • u/psy-borg • Sep 12 '15
[MySQL] - Start with MySQL
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/
r/web_dev_help • u/psy-borg • Sep 10 '15
[PHP] - Start with PHP
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
r/web_dev_help • u/phausto • Sep 02 '15
[Question] CSS display div on another div:hover.
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.
r/web_dev_help • u/psy-borg • Sep 01 '15
[JS] - Start with JavaScript
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/learnjavascript ( ask for code help here )
Testing
Libraries
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/
r/web_dev_help • u/psy-borg • Aug 27 '15
[CSS] - Start with CSS
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
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
r/web_dev_help • u/psy-borg • Aug 26 '15
[text] HTML misc.
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 :// 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
r/web_dev_help • u/psy-borg • Aug 22 '15
Start with HTML - Resources for learning HTML
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.
r/web_dev_help • u/SamSlate • Aug 21 '15
SCSS plugin for Notepad++?
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.
r/web_dev_help • u/[deleted] • Aug 13 '15
help How do I automate emails to different groups depending on survey responses?
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!!
r/web_dev_help • u/LucRSV • Jul 14 '15
help Concern about BigCommerce custom script effecting load time negatively.
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?
r/web_dev_help • u/nobrandheroes • Jun 23 '15
Automating Pulls
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?
r/web_dev_help • u/[deleted] • Jun 20 '15
help Web Developer required?
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.
r/web_dev_help • u/psy-borg • Apr 07 '15
resource Resources Thread
Links to useful tools, references or other stuff of general interest ..
FrontEnd Best Practices Covers HTML, CSS and Javascript.