Optimizing Contact Form 7

Loading Contact Form 7 CSS and JavaScript files on pages with specific slugs only:

// Deregistering Contact Form 7 CSS files on all pages without a Contact form
add_action( 'wp_print_styles', 'universio_cf7_deregister_styles', 100 );
function universio_cf7_deregister_styles() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

// Deregistering Contact Form 7 JavaScript files on all pages without a Contact form
add_action( 'wp_print_scripts', 'universio_cf7_deregister_javascript', 100 );
function universio_cf7_deregister_javascript() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

Code Coverage

You can check the CSS and JS code coverage with Chrome Dev Tools:

You can show the Coverage tab from Dev Tools menu by choosing “More tools” => “Coverage”.

Alternatively, to open Dev Tools press Cmd+Opt+I (Mac) or Control+Shift+I (Windows, Linux). After this, you can access the Coverage from the Command Menu: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux) and then typing “Show Coverage”.

Git

Local Changes

Changed files in your working directory:
git status

Changes to tracked files:
git diff

View changes in file.txt:
git diff path/to/file.txt

Add all changes to the next commit:
git add .

Commit all staged changes:
git commit -m “Added header – JIRA-777”

Commit History

Show all commits, starting with newest:
git log

Show changes for a file.txt
git log -p path/to/file.txt

Show log in shorter view:
git log –oneline

Who changed what in file.txt
git blame path/to/file.txt

Branches & Tags

List all branches:
git branch -av

Switch to develop branch:
git checkout develop

Create new branch based on your current HEAD (based upon whatever branch you were on):
git branch new_branch

Delete local branch:
git branch -d branch-name

Delete local branch even if it is not fully merged:
dit branch -D branch-name

Merge & Rebase

Rebase commits on top of develop branch:
git pull –rebase origin develop

Continue the rebase (Add file with “git add path/to/file.txt” after resolving conflicts in the file):
git rebase –continue

Abort the rebase:
git rebase –abort

Advanced

Squash number of commits:

  • git rebase -i HEAD~2
  • git push –force

Working with stash

Save changes to stach:
git stash save “Updated code”

Show list of changes in stash:
git stash list

Apply stash with ID=0:
git stash apply stash@{0}

Delete stash with ID=0:
git stash drop stash@{0}

Searching in Git

Search in repository:
git grep “Search string”

Search ‘target’ in /custom/folder:
grep “target” /custom/folder

Search ‘target’ in any case (i.e. case insensitive search):
grep -i “target”

Search ‘target’ or ‘other’:
grep -E “target|other”

==========================

Checkout the “feature/branch-001” branch:

  • git pull origin feature/branch-001
  • git checkout -f feature/branch-001

Push:

  • git push

Push to specific branch:

  • git push -u origin feature/ABC-321

Reset recent commit:

  • git reset –hard

Get latest develop branch into your branch:

  • git pull origin develop

Get latest version of styles.css file from develop branch:

  • git pull origin develop web/css/styles.css

Animate on scroll

js:

AOS.init({
  duration: 500,
  offset: 100,
  easing: 'ease-in-out',
  disable: 'mobile'
})

html:

<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

Images Lazy Load

html:

<img class="lazyload" data-src="../img.jpg" width="200" height="100">

js:

var lazyLoadSettings = {
    elements_selector: '.lazyload'
};

var lazyLoadGlobal = new LazyLoad(lazyLoadSettings);

If you need to refresh lozyLoad for dynamically loaded images:

$(document).on('lazyLoadRefresh', function () {
    lazyLoadGlobal.update();
});

$(document).trigger('lazyLoadRefresh'); // Use this line after successful DOM update

Internet Security

How the NSA betrayed the world’s trust — time to act | Mikko Hypponen

Mikko Hypponen: Three types of online attack

Mikko Hypponen: Fighting viruses, defending the net

The Internet is on fire | Mikko Hypponen | TEDxBrussels

Composition over inheritance

Favor object composition over class inheritance.

The problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.

Free Resources

All Resources

-> Business <-

FREE WEBSITE

  • HTML5 UP: Responsive HTML5 and CSS3 site templates.
  • Templated: A collection of 845 free CSS & HTML5 site templates.
  • Strikingly: Free, unlimited mobile optimized websites for strikingly domains.
  • Layers: A WordPress site builder so simple. It’s free, forever.
  • Bootstrap Zero: The largest open-source, free Bootstrap template collection.

FREE BRANDING & LOGO

  • Signature Maker: A free web based tool that creates your handwritten digital signature.

FREE INVOICE

  • Wave: Free & easy accounting, invoicing and more.

FREE LEGAL DOCS

  • Kiss: Free legal docs for startup founders and investor.
  • Docracy: An open collection of free legal documents.
  • Shake: Create, sign and send legally binding agreements in seconds. Free for personal use.

FREE IDEA MANAGEMENT

  • Skitch: Your ideas become reality faster.

FREE BUSINESS / PROJECT NAME GENERATORS

  • Naminum: Discover a perfect company name.
  • Wordoid: Pick a short and catchy name for your business.
  • Domainr: Fast, free, domain name search, short URLs.

-> Marketing <-

FREE WRITING / BLOGGING

  • Hemingway: Hemingway App makes your writing bold and clear.
  • Grammarly: Finds & corrects mistakes of your writing.
  • Medium: Everyone’s stories and ideas.
  • ZenPen: The minimal writing tool of web.
  • Social Locker: Ask visitors “to pay” for your content with a tweet, etc.
  • Egg Timer: Set a time and bookmark it for repeated use.
  • Wattpad: The world’s largest community for readers and writers.
  • Known: A single site for the content you create.
  • Wattpad: The world’s largest community for readers and writers.
  • Dbook: Structured and collaborative writing for large documents.
  • A5.gg: When you return your text will still be here.

FIND (TRENDING) CONTENT (IDEAS)

  • Buzzsumo: Analyze what content performs best for any topic or competitor.
  • Swayy: Discover the most engaging content. Free for 1 dashboard user.
  • Ruzzit: Find the most shared content on the web.

FREE SEO + WEBSITE ANALYZERS

  • Ahrefs: Site explorer & backlink checker.
  • SimilarWeb: Analyze website statistics for any domain.
  • Browseo: How search engines see your website.
  • Copyscape: Search for copies of your page on the web.
  • Pingdom: Test & the load time of a site.
  • GTMetrics: Analyze your page’s speed performance.
  • Moz Local: Check your local listings on Google, Bing, and others.
  • XML Sitemaps: Sitemap generator that creates XML & HTML variants.

FREE IMAGE OPTIMIZERS

  • Kraken: Optimize your images & accelerate your websites.
  • ImageOptim: Makes images take up less disk space & load faster.
  • Smush.it: Image optimizer WordPress plugin.
  • InstaMockup: Create beautiful screenshots of your app or website.

FREE IMAGE EDITORS

  • Canva: Amazingly simple graphic design for bloggers.
  • Pixlr: Pixlr Editor is a robust browser photo editor.
  • Skitch: Get your point across with fewer words.
  • Easel.ly: Empowers anyone to create & share powerful visuals.
  • Placeit: Free product mockups & templates.
  • Recite: Turn a quote into a visual masterpiece.
  • Pablo: Design engaging images for your social media posts in under 30 seconds.

FREE EMAIL MANAGEMENT

  • Mailchimp: Send 12,000 emails to 2,000 subscribers for free.
  • Mandrill: The fastest way to deliver email. Free 12K emails/month.
  • Mailgun: The Email Service For Developers. Free 10K emails/month.
  • Sendgrid: Delivers your transactional and marketing email. Free 12K emails/month.
  • Mailtrack: The best free email tracking solution.
  • Beefree: Free Email editor to build responsive design messages.

FREE GUIDES & COURSES

  • Primer: No-nonsense, jargon-free marketing lessons (by Google).
  • MailCharts: A FREE email course to help you become a better marketer.

FREE SOCIAL MEDIA + COMMUNITY MANAGEMENT

  • Spruce: Make Twitter ready images in seconds.
  • Latergram: Easily plan & schedule your Instagram posts.
  • How Many Shares Count how many shares a URL has across most social networks, all in one place.
  • SocialRank: Identify, organize, and manage your followers on Twitter.
  • Klout: Social media influence score on browser extension.
  • Bitly: Create, share, and track shortened links.
  • Filament: A free beautiful and customizable sharing bar.
  • Addthis: Get more shares, follows and conversions.
  • Sumome Share: Auto-optimizes your share buttons for max traffic.
  • Digg Digg: Your all in one share buttons plugin.
  • Disqus: Build a community of active readers & commenters.

FREE CUSTOMER SERVICE & SURVEYS

  • Typeform: Free beautiful online survey & form builder.
  • Tally: Create polls in no time.
  • Batch: The first-ever 100% free engagement platform for mobile apps.
  • Helprace: Customer service tool. Free for up to 3 agents for small support teams.

A/B TESTS & GROWTH HACKING

  • Petit Hacks: Acquisition, retention, & revenue hacks used by companies.
  • Optimizely: One optimization platform for websites and mobile apps.
  • Hello Bar: Tool for A/B testing different CTAs & power words.

-> Design & Code <-

FREE DESIGN RESOURCES

  • Freebbble: High-quality design freebies from Dribbble.
  • Dribbble: Dribbble search results for “freebie”. An absolute freebie treasure.
  • Pixel Buddha: Free and premium resources for professional community.
  • Fribbble: Free PSD resources by Dribbblers curated by Gilbert Pellegrom.
  • Freebiesbug: Latest free PSDs & other resources for designers.
  • 365 Psd: Download a free psd every day.
  • Dbf: Dribbble & Behance best design freebies.
  • Marvel: Free resources from designers we love.
  • UI Space: High quality hand-crafted Freebies for awesome people.
  • Freepik: iFree graphic resources for everyone.
  • Tech&All: PSD, Tech News, and other resources for free.
  • Tethr: The most beautiful IOS design KIT ever.
  • Web3Canvas: PSD Freebies, HTML Snippets, Inspirations & Tutorials.

COLOR PICKERS

  • Coolors: Super fast color schemes generator for cool designers.
  • Skala Color: An extraordinary color picker for designers and developers.
  • 0 to 255: A simple tool that helps web designers find variations of any color.

INSPIRATION

  • FLTDSGN: Daily showcase of the best flat UI design websites and apps.
  • UI Cloud: The largest user interface design database in the world.
  • Moodboard: Build a beautiful moodboard and share the result.
  • Crayon: The most comprehensive collection of marketing designs.
  • Ocean: A community of designers sharing feedback.
  • Behance: Showcase & discover creative work.
  • Pttrns: Mobile user interface patterns.
  • Awwwards: The awards for design, creativity and innovation.
  • UI Parade: User interface design tools and design inspiration.
  • Niice: A search engine with taste.

FREE STOCK PHOTOGRAPHY

  • Stock Up: Best free stock photo websites in one place.
  • Pexels: Best free photos in one place.
  • Unsplash: Free (do whatever you want) high-resolution photos.
  • Splashbase: Search & discover free, hi res photos & videos.
  • Jay Mantri: Free pics. do anything (CC0). Make magic.
  • Moveast: This is a journey of a portuguese guy moving east.
  • Mazwai: Free creative commons HD video clips & footages.
  • Super Famous: Photos by Dutch interaction designer Folkert Gorter.
  • Super Famous: Photos by Dutch interaction designer Folkert Gorter.
  • IM Free: A curated collection of free resources.
  • Cupcake: A photographer’s treat by Jonas Nilsson Lee.
  • MMT: Free stock photos by Jeffrey Betts.
  • Raumrot: Free high-resolution picture.
  • Bucketlistly: A free creative common collection of travel photos.
  • I also handpicked some free photo packs:

FREE TYPOGRAPHY

  • TypeGenius: Find the perfect font combo for your next project.
  • DaFont: Archive of freely downloadable fonts.
  • FontPark: The web’s largest archive of free fonts.
  • Typekit: A limited collection of fonts to use on a website or in applications.

FREE ICONS

  • Flat Icon: A search engine for 16000+ glyph vector icons.
  • MakeAppIcon: Generate App Icons of all sizes with a click.
  • Ico Moon: 4000+ free vector icons, icon generator.
  • Ego Icons: 100 Free vector icons with a clean look and feel.
  • FlatIcons: Free flat icon customizer, royalty free.

FREE USEFUL STUFF

  • UI Names: Generate random names for use in designs and mockups.
  • UI Faces: Find and generate sample avatars for user interfaces.
  • Sonics: Free packs of UI sounds and sound effects delivered to your inbox every month.

FREE DEVELOP / CODE THINGS

  • Hive: First free unlimited cloud service in the world.
  • GitHub: Build software better, together.
  • BitBucket: Git and Mercurial code management for teams
  • Chisel: Chisel offers an unlimited number of fossil repositories.
  • Visual Studio: Comprehensive collection of developer tools and services.
  • Landscape: Landscape is an early warning system for your Python codebase.
  • Swiftype: Add great search to any website. Free with limitations.
  • Keen.io: Gather all the data you want & start getting the answers you need.
  • Coveralls: Test coverage history and statistics.
  • LingoHub: Free for Small Teams, Open Source usage and Educational projects.
  • Codacy: Continuous Static Analysis designed to complement your unit tests.
  • TinyCert: Free SSL certificates for your startup.
  • Opbeat: The first ops platform for developers. Free for small teams.
  • Pingdom: Website monitoring. Free for one website.
  • Rollbar: Full-stack error monitoring for all apps in any language.
  • Loggly: Simplify Log Management Forever. Free for one user.
  • Devport: Get your developer portfolio.
  • Getting Real: The smarter way to build web apps. A free book by 37signals.
  • Peek: Get a free, 5-minute video of someone using your site.
  • Creator: Build better Ionic apps, faster.
  • DevFreeCasts: A huge collection of free screencasts for developers.
  • Cody: A free library of HTML, CSS, JS nuggets.

-> Productivity <-

BACKGROUND SOUND TO FOCUS

  • Noisli: Background noise & color generator.
  • Noizio: Ambient sound equalizer for relax or productivity.
  • Defonic: Combine the sounds of the world into a melody.
  • Octave: A free library of UI sounds, handmade for iOS.
  • Free Sound: Huge database of free audio snippets, samples, + recordings.
  • Sonics: Free packs of UI sounds and sound effects delivered to your inbox every month.

AVOID DISTRACTION

  • Self Control: Mac: free application to help you avoid distracting websites.
  • Cold Turkey: Windows: temporarily block yourself off of distracting websites.

ORGANIZE & COLLABORATE

  • Trello: Keeps track of everything.
  • Evernote: The workspace for your life’s work.
  • Yanado: Tasks management inside Gmail.
  • Drp.io: Free, fast, private and easy image and file hosting.
  • Pocket: View later, put it in Pocket.
  • Raindrop: Mac app for bookmarking and reading it later.
  • Flowdock: Free for teams of five and non-profits.
  • Typetalk: Share and discuss ideas with your team through instant messaging.
  • Slack: Free for unlimited users with few limited features.
  • HipChat: Free for unlimited users with few limited features.
  • Google Hangouts: Bring conversations to life with photos, emoji and group video calls.
  • Voveet: Simple, free 3D conference calls. Experience the difference.
  • FreeBusy: Eliminate coordination headaches when you need to schedule a meeting.
  • RealTimeBoard: Your regular whiteboard, re-thought for the best online experience.
  • Witkit: Witkit is the secure platform for teams. 50GB of free encrypted data storage.
  • Any.do: Get things done with your team.
  • Asana: Teamwork without email.

DIGITAL NOMADS & REMOTE WORKING

  • Nomad House: Houses around the world for nomads to live and work together.
  • Lastroom: Simplifying your team travel management
  • Nomadlist: The best cities to live and work remotely.
  • Nomad Jobs: The best remote jobs at the best startups.

-> Learn <-

DISCOVER TOOLS & STARTUPS

  • Beta List: Discover and get early access to tomorrow’s startups.
  • Startups List: Collections of the best startups in different places.

BUILD TOGETHER

  • Assembly: Co-create new ideas no matter where they are.

LEARN

  • Coursera: Free online classes from 80+ top universities & organizations.
  • Khan Academy: Free, world-class education for anyone, anywhere.
  • Skillshare: Unlock your creativity with free online classes & projects.
  • Startup Notes: Startup School invites amazing founders to tell their story.
  • Closed Club: Browse shut-down start-ups & learn why they closed down.
  • reSRC.io: All free programming learning resources.
  • Mixergy: Learn from proven entrepreneurs.
  • Hackdesign: Receive a design lesson in your inbox each week.

NEWSLETTERS THAT DON’T SUCK

  • Email1K: A free 30 day course to double your email list.
  • Startup Digest: Personalized newsletter for all things startup in your area.

USEFUL

  • Foundrs: Co-founder equity calculator.
  • Pitcherific: Pitcherific helps you create, train, and improve your pitch.

Website Credibility

1. Make it easy to verify the accuracy of the information on your site.

You can build web site credibility by providing third-party support (citations, references, source material) for information you present, especially if you link to this evidence. Even if people don’t follow these links, you’ve shown confidence in your material.

2. Show that there’s a real organization behind your site.

Showing that your web site is for a legitimate organization will boost the site’s credibility. The easiest way to do this is by listing a physical address. Other features can also help, such as posting a photo of your offices or listing a membership with the chamber of commerce.

3. Highlight the expertise in your organization and in the content and services you provide.

Do you have experts on your team? Are your contributors or service providers authorities? Be sure to give their credentials. Are you affiliated with a respected organization? Make that clear. Conversely, don’t link to outside sites that are not credible. Your site becomes less credible by association.

4. Show that honest and trustworthy people stand behind your site.

The first part of this guideline is to show there are real people behind the site and in the organization. Next, find a way to convey their trustworthiness through images or text. For example, some sites post employee bios that tell about family or hobbies.

5. Make it easy to contact you.

A simple way to boost your site’s credibility is by making your contact information clear: phone number, physical address, and email address.

6. Design your site so it looks professional (or is appropriate for your purpose).

We find that people quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more. Of course, not all sites gain credibility by looking like IBM.com. The visual design should match the site’s purpose.

7. Make your site easy to use – and useful.

We’re squeezing two guidelines into one here. Our research shows that sites win credibility points by being both easy to use and useful. Some site operators forget about users when they cater to their own company’s ego or try to show the dazzling things they can do with web technology.

8. Update your site’s content often (at least show it’s been reviewed recently).

People assign more credibility to sites that show they have been recently updated or reviewed.

9. Use restraint with any promotional content (e.g., ads, offers).

If possible, avoid having ads on your site. If you must have ads, clearly distinguish the sponsored content from your own. Avoid pop-up ads, unless you don’t mind annoying users and losing credibility. As for writing style, try to be clear, direct, and sincere.

10. Avoid errors of all types, no matter how small they seem.

Typographical errors and broken links hurt a site’s credibility more than most people imagine. It’s also important to keep your site up and running.

  1. Website Credibility by Stanford