11/10/2018

Optimizing Images

Importance of Image Optimization

Most users expect web pages to load within 2 seconds. An estimated 40% will leave if it take longer than 3 seconds.

Image performance and optimization is critical.

Optimization Tools

What is the difference between lossy and lossless compression?

What's the difference between a .png and a .jpeg

(^ This is a link)

PNG Optimization

PNG images are high quality images that are capable of handling transparency.

If you don't need transparency, use a JPEG
Use for logos, icons, etc.
Transparency allows for a lot of optimization.
Cant change quality for optimization.
Whenever possible, follow Google guidelines. After all, your users find your app through Google.

JPEG Optimization

JPEGS are the most common image type on the web and provide a lot of opportunities for optimization.

Use for anything that doesn't require transparency. (Product images, hero images, etc)
Can change quality for optimization.

        Show in photoshop

SVG Optimization

SVGs are XML files. Tools can help shave down the size of them and remove redundant paths.

Illustrator, InkScape, Sketch plugins
Gulp and Grunt can be used to minify SVGs
What is minification?

Your Personal Site

Primary Purpose

Market Yourself
Portfolio
Practice
Fun

Include

Your site is about you. Make sure you

Your picture.
About yourself.
What is your ideal job.
Your relevant education (everything after highschool).
Where to find you.
- LinkedIn
- GitHub
- Twitter - Optional
- Facebook - Optional

    what do you need on a portfolio site
    - personal profile pick
    -foto
    -about yourself
    - why you like technology
    - relevant education.  College is always relevant, highschool usually isn't
    - links to appropriate social suf. Linked in and github. twitter if you have it. Facebook optional

Prune anything on your socials you don't want an employer to see.

LinkedIn recommendations

Most recruiters do their head hunter through LinkedIn. It's a super helpful tool for finding specific talent that fits their needs.

100% your profile
Hide the "People also Viewed"
Emphasize what you want to do if it's not what you have already been doing.

    linked in
    set no - 100T your profile
    0hide people also viewed
     put relevant work xp.  Don't put your 10 years of php if you don't  want to do php.    don't put emphasis on it if you don't want to d o  it.

GitHub recommendations

The technical people that are wanting to recruit likely will view your GitHub site.

Put any and all of your small projects here.
Document your projects
Star interesting projects
Fork projects you think you can help on.

        Technical people should be checking this.
        
    create pet projects
    fill out your profile.
    follow important frameworks

    help out other open source projects

Always be learning.

But seriously, read a lot of blogs

Use an RSS aggregator and subscribe to a lot of blogs. If you find something new, create a simple GitHub project on it.

Blogs....

Be careful when blogging, junky blogs can hurt you more than they can help you.

Stay on topic. A technical blog is not about you, it's about tech.
Focus on long term content.
Stay committed.
Scott Hanselman's post on how to make your blog suck less.

Network

Go to usergroup meetings.
- NWA Developers group nwadnug.org
- Fayetteville.js
Participate in hackathons and givecamps
Participate in conventions

Side projects

Side projects are typically projects you work on outside of your day to day job.

Why you should always have a side project

Practice new skills
Learn a new technology
Helps build a portfolio
Low risk experimenting
Freedom to code the way you want.
Can bring in extra income

Things to be cautious about

Equipment Use
Non-compete & employee agreement
Interfering with your day job.

Side Project Ideas

Plugins - jQuery, WordPress, etc
Themes - jQuery UI, Bootstrap, WordPress
Mobile Apps
Freelance website development

Build a Generic Business Website

(^ If you don't already have a website idea)

Create a repository on your GitHub profile for this.
Enable GitHub pages
Must have at least 3 unique pages
- Home
- Product Gallery | Product Details | Our Services
- Meet the team | About Us | FAQ
Must be responsive. Use a framework or your custom.
Must contain at least 1 JavaScript component. It can be a plugin.
- Slider
- Modal
- Custom Tool Tips
Must give credit if recreating another person's work.