Lasher Works
“Designing websites to enhance the experience of your target audience sometimes means looking to other developers for fresh ideas.”
Web Development Resources
I'm always on the hunt, looking for solutions for various projects that I'm working on. Let's face it, there's no sence in reinventing the wheel. Especially when there's an elegant version being offered that does exactly what you need it for. Most times I bookmark the website where I've found the solution. When I get the chance, I put a link to those websites here on my resource page. Below are just a handful but I bet ya I could fill quite a few pages with links to all the tutorials and code snippets that I have bookmarked. Maybe one day I'll rearrange this page and make a more exhaustive catalog of all my code bookmarks. But for now this will have to suffice. On the other hand, if you have something you want to share, I'd be glad to help spread the word and post a link to your resources. After all, this is what this page is all about; sharing our knowledge, expertise and resources one with another, to achieve the most intuitive and richer user experience for our visitors.
New Resources From Creative Market
New to Lasher Works. Get direct access to Creative Market resources right here. If you're always looking online for resources to get your project to the next level then do yourself a favour and check out these resources from Creative Market. I have a whole page of fonts, textures, watercolor images, campaign mockups, Instagram templates and so much more! The best thing about it is, I'm always adding more all the time!
Click Or Tap A Resource Link Heading For More Info
WEB HOSTING CANADA
Every website needs a home. There are tons of website hosting companies out there. So it's important to do your homework. Make a list of what's important to you when it comes to finding a home for your website. After many hours of research with my list in hand, I chose Web Hosting Canada. They had everything I was looking for in a hosting company. Things like, they're Canadian with servers here in Canada. They offer a free SSL socket. They're one of the top ranking companies recommended by tons of website owners. Check them out for yourself because they offer sooo much more. By purchasing services from Web Hosting Canada through the links found on my site helps me fund my page as WHC gives me a small referal fee. So if you do decide to use WHC, please consider purchasing through me! I would be forever grateful and will always love you for it!
jQuery Library
First and foremost, the engine behind the non-CSS3 effects is the jQuery library. I add the latest compressed version to my site as of this link addition to my site so there is no chance of having inactive script due to a CDN interuption. Although they are available 99% of the time. Also, your jQuery won’t work if your audience is viewing your website off line. Either way without this library your jQuery goes nowhere. This link will satisfy both methods of adding the jQuery library to your site.
Video Coding Tutorials
There's a lot of great tutorials online to teach you how to code in any language you desire. This is my short list of tutorials I've found very helpful in my quest of teaching myself how to code. This list is comprised of tutorials on PHP, HTML, CSS, JavaScript and Bootstrap.
Bootstrap
This is how Bootstrap describes itself lately and the first thing you read when you follow the current version link below, “ Build responsive, mobile-first projects on the web with the world’s most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. ” I used Bootstrap version 3.3.7 to build my website but version 4.4.1 is the most current version (January 2020). Whichever version you're interested in, I've put a link for those versions below.
Foundation
This is how Foundation describes itself and the first thing you read when you follow the link below, “The most advanced responsive front-end framework in the world.”
I've never used Foundation but they say it's like Bootstrap and it's been around a little longer than Bootstrap. Some compair Foundation and Bootstrap like red and white wine. Not that one is better than the other but they work well with different things. I guess it depends on which one you learned is how people developed their preferance. The link below will set you off on your next coding adventure developing with Foundation. Happy Coding!
Animated Curtains
This link is for the stage curtains I used for my Feature Presentation theater layout. Here you get the front curtain panels that do the opening and closing, the back curtain panel, the rope image and the all important jQuery code. The rest is up to your imagination.
Responsive Lightbox Plugin
This script makes for a nice image gallery effect. I used it on my Digital Art page. It does a nice job at any viewing size before I updated my site and used Bootstrap.
When I updated my site, I did a complete rework from the ground up. I started with Bootstrap's framework; that has built in responsive coding. In doing so, I went with another image gallery, called blueimp Gallery. When I went searching for “Bootstrap image gallery”, blueimp was one of the first ones on the search result list. It's responsive, works well with touch screens and plays very nice with Bootstrap.
CSS3 Animation
Just by using the ever so powerful CSS3 almost any HTML element can be animated! There's no need for complicated JavaScript or even Flash! CSS3 can animate HTML by using The @keyframe Rule. Using the many properties of @keyframe, CSS3 can change styles on the fly, making all the calculations so that the animation is smooth rendering from start to finish. Click or tap the above banner to check out some examples but this is only the “tip of the iceberg”.
I have all my source code layed out so all you have to do is copy and paste it in your favorite code editor or Notepad for all that matters, to play with it.
On my home page, I have a bouncing CSS3 badge. A great video tutorial by Adam Khoury showed me how to do it. If this is something that you'd be interested in checking out, click or tap the button below and it will take you to his tutorial.
CSS Sprites
There is a ton of information on the subject. Here's a start. Two pages from two different developers. Between these two sites you should get an idea on how to incororate sprites on your page. Like I said, you can find tons of info on the subject. Happy coding!
If you don't have Photoshop or some other type of program to create and edit images, create your own using an online sprite generator. Google and you'll get about 7,520,000 results in 0.37 seconds give or take. Only use small sized images or you defeat the point of decreasing page load times.
Text Over Images On Hover
An awesome tutorial about creating a text display when hovering over an image. Go check out the tutorial from: Geek Girl Life by Natalie MacLees since 2007
She explains how to Place Text Over Images On Hover Without JavaScript. She explains the whole process in 5 easy steps and includes all the code in her example. What more could you ask for!?
Accordion v2.0
This effect hides portions of content on a page. This effect is what I use in this section of this page and I also use it on my Works page. The link below to Accordion v2.0 is what I used on my website before I redid my page using Bootstrap.
Bootstrap 3 Accordion Effect
Bootstrap v3.3.7 has this accordion effect covered so having to either work out how to code this effect yourself or searching online for someone who already has is not needed. If you're developing a website using the Bootstrap framework then it only makes sence to go to Bootstrap and use coding that has been writen specifically for Bootstrap. The link below will take you to the Accordion Effect coding you need to get this effect working on your page.
Colour Scheme Designer
There's nothing worse than landing on a website, that because of the colours, it makes your eyes bleed. Or the content is difficult to read because the text colour blends in with the background colour. It's important to choose the right colours that allow proper contrast when it comes to being able to read the content without having your website look like it got dressed in the dark! A good designer always keeps these key points in the forefront of their limbic system while coming up with a colour scheme for their design. I bet every web designer has their favorite colour scheme designer app or website they always use. The button below will take you to the one I always use. Paletton.com's colour wheel has many features for you to design the perfect colour scheme for your next project.
MEGA Coding Cheat Sheets by Jamie Spencer
A mate from “across the pond in jolly olde England” contacted me and asked me to check out these really cool mega cheat sheets created by Jaimie Spencer. So I did. They're MEGA all right! They come in 3 different flavours, HTML5 MEGA CHEAT SHEET, CSS3 MEGA CHEAT SHEET and jQuery MEGA CHEAT SHEET
But wait, there's more… Ever think about building your own website, or blog but didn't
know where to start? Jaimie has tutorials that will show you step by step how to “Git-R-Done”! Do yourself a favour and check out the rest of his site while
you're at it.