Category: Web Development

Change the Color of Images Using CSS

If you have a logo, for example, that is a transparent PNG or SVG, you can change its color using CSS in the following ways:

Grayscale:  filter: grayscale(100%);
Solid Gray: filter: contrast(0);
Solid Black:  filter: contrast(0) brightness(0);
Solid White:  filter: contrast(0) brightness(2);

You can adjust the contrast value between 0 and 1 to achieve different levels of darkness.

Notes from JS Conference Workshop: Extreme Web Performance

WPO

WPO stands for Web Performance Optimization. It’s similar to SEO and it’s a real field of interest. The Velocity conference just deals with WPO.
https://conferences.oreilly.com/velocity/vl-ca

Optimization Comparison

Service optimization makes up 16%. If you optimize the server by 50%, you see a 10% improvement.
Front end optimization makes up 84%. If you optimize the front end by 50%, you see a 45% improvement.

Continue reading Notes from JS Conference Workshop: Extreme Web Performance

Notes from JS Conference Workshop: Mastering Chrome Developer Tools

JavaScript Debugging

There’s an ability to blackbox JavaScript libraries like jQuery so that when you step over lines of code, you’ll step over these 3rd party libraries. There’s also an ability to set breakpoints on event listeners which can be very handy. Under Settings, you can globally blackbox 3rd JS libraries so you don’t have to blackbox every time you open Chrome. There’s also the ability to create conditional breakpoints, e.g. to break when your about to execute an XHR (AJAX) request to a certain URL.

Editing CSS

When you edit CSS in the Elements tab, you can have those edits write to the source CSS file, and vice-verse from the source file to Chrome. This only works for CSS. To do this, drag your CSS file or entire project folder into the Sources tab. If Chrome can’t auto-map, you can manually map the CSS file.

Continue reading Notes from JS Conference Workshop: Mastering Chrome Developer Tools

Deploy Cloud9 Changes via S/FTP Using Git and PHPloy

Cloud 9 already comes with Git, PHP and Composer.

——————–
EXAMPLE FOLDER STRUCTURE
——————–
/home/ubuntu/website1
/home/ubuntu/website2
/home/ubuntu/website3
/home/ubuntu/PHPloy

——————–
INSTALL PHPLOY
——————–
Go to https://github.com/banago/PHPloy
Download and unzip the repo
Create a folder called “PHPloy” in Cloud9 in the “workspace” folder so that that folder is a sibling of your website folder(s). Continue reading Deploy Cloud9 Changes via S/FTP Using Git and PHPloy

SEO: Free, Credible Backlinks to Your Website

Search engines, particularly Google. consider two primary things when it comes to search engine ranking:

  • Relevant content
  • Credible backlinks / Inbound Links

Relevant content

This one is easy. Just write relevant content. The more, the better. As long as it’s content people actually care about.

Credible Backlinks

This is not easy because you depend on getting other reputable websites linking back to you. Below are different ways to get backlinks. This list will be updated as new discoveries are made.

  • PR
    Getting news outlets to write a story about you is the best way to get credible backlinks but it’s not easy. If CNN had written an article about your website and the article links to your website, you’ll get a boost in search engine ranking. You can hire a PR agency (expensive) or do PR yourself by reaching out to journalists and pitching your story to them. The topic of PR can take up a whole book so I’ll it at this. Basically, if you have a good story, e.g. new product/service launch, new feature launch, etc, you can tell journalists about it who represent news outlets that cater to news related to your story, e.g. a new technology product would be pitched to a technology blog (e.g. TechCrunch).
  • Write your own articles
    There are credible websites that let your contribute content, e.g. how-to guides, that also let you link to the source of information (your website).

  • Video Websites (YouTube, Vimeo)
    These websites will let you add a link to your website in the description section of your video
  • GitHub
  • Pinterest

Continue reading SEO: Free, Credible Backlinks to Your Website

WINDOWS: PHPloy to incrementally deploy Git-Based file changes over S/FTP

—————-
Requirements
—————-
* Git 1.8+
* PHP 5.5+
* Update the Windows paths below to match your system

—————-
Install PHP
—————-
If you don’t have PHP, follow the instructions at http://windows.php.net/

—————-
Install Git
—————-
If you don’t have Git, you can install GitHub Desktop for Windows. Download and install the application from https://desktop.github.com/
This will create a GitHub folder at C:\Users\David\Documents\GitHub in which you can put your website files. Continue reading WINDOWS: PHPloy to incrementally deploy Git-Based file changes over S/FTP

Some Options for Scraping Web Pages

Node.js + jQuery

https://code.tutsplus.com/tutorials/how-to-scrape-web-pages-with-nodejs-and-jquery–net-22478

This tutorial shows how to use Node.js with the Express web server framework, the Jade template engine, and the JSDOM parser. You may prefer the Handlebars template engine. This tutorial also includes use of the node “request” and “url” modules.

Continue reading Some Options for Scraping Web Pages
▲