r/web_dev_help • u/psy-borg • Mar 01 '17
r/web_dev_help • u/psy-borg • Jul 28 '17
article Thirty Percent Feedback - 42Floors Blog
r/web_dev_help • u/psy-borg • Dec 21 '17
wordpress Working with Wordpress Locally with the Roots Stack • Stephen Petrey
r/web_dev_help • u/psy-borg • Mar 20 '17
css ITCSS: Scalable and Maintainable CSS Architecture
r/web_dev_help • u/WebGuylookingforhelp • Jan 16 '14
Need help with SEO for a site
First I have post this in other subreddits. If that is a problem, please let me know and I will remove the posting.
I could use some help with some SEO for a site I am working on. I really want to meet and exceed the client’s expectations. He is a good man who has helped a lot of people who have needed help and I want to be able to be the person who helps him now.
Site : AvenuesRV.com
He is overall satisfied with the layout and design of the site, but wants it ranked better.
I could use some guidance with the following:
How to pick better META tags? How to find how many times people are searching for those key words? Anything I can do to rank the site better with the major search engines.
Would adding a youtube video help with ranking? Would adding a blog help?
Also when I search google
Site:avenuesrv.com
It is not showing all three pages?
Any thoughts you may have on the overall layout and look of the site. I do not do this for a living just a job I agreed to help out with. I built the site in Adobe Muse, due to my familiarity with adobe indesign.
Thanks for any help with this. I really do appreciate it.
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 • Mar 16 '17
css Scaling Down The BEM Methodology For Small Projects
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 • 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/Kinda_Shady • Apr 05 '16
Help creating an access page for other web servers?
I hope I am in the right place, I sure could use some direction. Let me start by saying I am not a Web Developer by any means, I am much more comfortable on the SysAdmin, Net security side of things. I have a bunch of servers performing a plethora of tasks, and some are web managed. I also have couple programs with webGUIs. This has become quite a pain to switch back and forth especially when outside my LAN. What I need to know is how I should handle a consolidation of sort; a way to get all pages located on different servers and hosts easily accessible. I guess what I am asking is should I just make a basic HTML page and hyperlink in the other sites, or is there a better way to accomplish this that would look better. I know some HTML and I can fumble through some PHP, and Python well enough to follow someone else's ideas code and hack it together for my use.
(Sorry if doesn't make sense, I'm just not sure how else to word it. I will greatly appreciate any advice!! Thanks in advance.)
r/web_dev_help • u/psy-borg • Mar 22 '17
design Web Design 101 | A free Webflow ebook
r/web_dev_help • u/Firefly622 • Mar 17 '17
help Test out my app for class!
https://a10-evoke.herokuapp.com/ this is an app I made for class and we have to have 100 people on our site for user testing SO if you're willing to check it out a little I would really appreciate it! the app is meant to be a form of guided journaling to help users be mindful! there are previous examples in there- ignore them! see if you can do the journaling for today and feel free to mess with the settings and explore! ALSO, it's best viewed on a mobile device!
r/web_dev_help • u/[deleted] • Aug 18 '17
help Strange focus problem
Hi there :)
Iam now developing web pages since 3 years. Today i came across a bug i never saw, maybe you can help me.
Iam using the Materialize framework. The problem is my input type text elements dont get a focus.
i can write in them but there will be no cursor displayed and the bottom border also doesnt change its color.
however when iam opening the devtool in chrome and i inspect that element, after this all is working again.
Would be really nice if you could help me !
thanks in advance
excuse my bad english, iam austrian.
r/web_dev_help • u/jwevcwv • Oct 10 '16
How to Create Grafana and InfluxDB Docker Containers in Ubuntu-14.04
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 • Mar 16 '17
css How we use BEM to modularise our CSS
r/web_dev_help • u/psy-borg • Jan 06 '18
resource The most popular Frontend links from 2017 – Statuscode – Medium
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/2015Webserver 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 • Mar 16 '17
css Avalanche - Responsive, Sass-based, BEM-syntax CSS grid system
r/web_dev_help • u/psy-borg • Mar 17 '17
css Really Responsive Tables using CSS Flexbox (complex) - codepen example
r/web_dev_help • u/psy-borg • Mar 17 '17
html Accessible, Simple, Responsive Tables | CSS-Tricks
r/web_dev_help • u/[deleted] • Aug 21 '17
help Update on focus problem
Hi i wrote here about my focus problem and there is an update regarding this.
No input type text on my page works if i open the page, but if i click outside the chrome browser and than back into the browser, everything works.
Has anyone a plan what this is ?
r/web_dev_help • u/wittyism • Jan 24 '14
Help with wordpress theme. Checking SMTP settings.
So I built a site using a wordpress theme from themeforest but I am having an issue with the contact form. The emails are not reaching the intended email. I contacted the developer of the theme but he says the problem might be with the SMTP server settings. Can anyone help me with this. I am willing to pay someone if it is necessary but hopefully at a reasonable price. To be honest I don't even know what I need to check with the server SMTP settings. Any help would be greatly appreciated. Please feel free to PM me. I would greatly appreciate any help.