Let's Build with JavaScript - Using Mouse Events To Animate Text
Hi, My name is Andy Leverenz and I work as a Product Designer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
In this installment of my Let's Build with JavaScript series I talk about using mouse events to animate text.
This tutorial is heavily inspired by a video from Wes Bos' course JavaScript 30 https://javascript30.com/ which I highly recommend for a crash course in JavaScript.
We'll be building a text-shadow animation that takes place on mouse hover. As you move your cursor over a containing div the text can animate in real-time thanks to JavaScript events. We'll target the `mousemove` event specifically to hook into coordinates defined in the browser relative to where your cursor lands on the screen. Combine some math and some ES6 and we've got a pretty cool little animation effect.
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648
Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives (https://coupleofcreatives.com) and my blog Web-Crunch (https://web-crunch.com)??
Part 6 continues my series titled "How to Code HTML to WordPress". In this video, I finish up coding the custom post type feature for the menu section of the page.
How I query the database
======
Querying the database takes place using the WP_Query class available from WordPress. This class allows you to query the database outside of the base loop found on the blog template of most WordPress sites. Using this class allows you to pull only the bits of content you would like to by passing in arguments to the class definition.
======
? Previously published at:
? Check out the blog:
https://web-crunch.com
? ? Check out my agency:
https://coupleofcreatives.com
? Links:
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
? Check out my book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
?Recommended Stuff I Use to Shoot Video:
Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH
Linco Lighting Set - http://amzn.to/2mF8Shs
Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk
Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
...
https://www.youtube.com/watch?v=lKAkJebV4zs
Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
I'm beyond excited to share the news that I am making a Ruby on Rails course called Hello Rails! https://hellorails.io
The course has a dedicated landing page covering all of the details surrounding the course with many more to come. I wanted to publish a vlog/behind the scenes reasoning for the course and how it could benefit you if you're interested in learning the vast framework.
### Some background
Ruby on Rails has been a big part of my professional life for over 2 two years now. I reached for the framework in an effort to build out an idea I had for a side project called Affinicasts. The application featured videos and courses around the Affinity-Serif platform. Sadly, I decided to go in a different direction and sunset Affinicasts as a result.
While Affinicasts took tons of effort, I learned so much about Ruby on Rails. In an effort to learn even more I started creating tutorials or "Let's Builds" as I like to call them on my YouTube channel. That got increased interest from people all over the world. My channel's subscriber count quickly grew as a result (and is still growing).
The tutorials on my YouTube channel covered both basic and advanced concepts a developer might run into when building their own apps.
As I authored more tutorials I noticed each lack the concept of building a complete app and shipping it to a production server step-by-step. My course Hello Rails is my answer to that void.
I would describe my own teaching style as rather thorough. I don't like to skip important steps of the process as I know someone new to the process wouldn't know some of the conventions or patterns I know. This is true even if it takes more time and effort.
As a result, I wanted to make the course about using Ruby on Rails to build a full-featured web application from scratch that we actually ship to a production server.
The course consists of a book version and a complete video version. I have already finished the book version and am in the beginning phases of the video recording process as I write this. I'm so excited to share it with you when it's complete.
### Get notified
If you would like to get notified when it's live head to the course landing page linked below and share your email with me so I can notify via email when it's ready. They'll be a discount in it for you if you do ;).
You can also follow me https://twitter.com/justalever or the course page https://twitter.com/hello_rails on twitter!
====================
? Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
?? NEW COURSE: HELLO RAILS - Get notified
Https://hellorails.io
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
? Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy
☕️ ?? Patreon
https://www.patreon.com/webcrunch
☕️ Or buy me a coffee
https://www.buymeacoffee.com/webcrunch
...
https://www.youtube.com/watch?v=sbG2ThcEVwA
Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
I’ve been busy getting my new course hellorails.io in better shape to launch this week. While doing that it was recently announced that the first release candidate for Rails 6 was out. I took some time to talk about news, updates to my kickoff starter template for ruby on rails as well as another project I’m teaming up on with some friends.
### What’s new?
I receive lots of comments/questions regarding how to accomplish certain things using Ruby on Rails. From that, the idea sparked that I create something a little more thorough than anything else out there in terms of learning Ruby on Rails from scratch. Consider my course an entry point for someone looking to learn more about the Ruby on Rails framework, get into building web apps, or developers transitioning into a new tool/skillset to add to their arsenal.
My approach is quite thorough which goes against the grain of many tutorials I’ve seen in the wild. Some videos can be lengthy but it’s because I don’t skip any important pieces. If you decide to get the course, together we’ll build a complete web app modeled after Reddit. We’ll build it from scratch all the way to a shippable app of which we do deploy.
At the moment I’m in the editing phase. I recorded 27 modules of over 90 videos over the past couple of months. I’m about halfway through editing all those videos as I write this. My hope/goal is to have the course launched later this month or early next (no promises!). It has been quite the endeavor to get this far and I’m excited it’s getting close to being ready. If you want to be notified when it’s launched be sure to subscribe at hellorails.io.
### Rails 6
Rails 6.0.0.rc1 is out! I’ve been using Rails 6 for quite some time and really love the updates coming out. There are some major additions as well as some small ones that really expand your horizons when it comes to building web apps.
### Kickoff – Tailwind (Rails application template)
In light of the new release candidate, I decided to update my Kickoff – Tailwind application template to accommodate. https://github.com/justalever/kickoff_tailwind
## Jumpstart Pro
Without a doubt, my application template above was heavily inspired by Chris Oliver’s Jumpstart Rails application template. Chris got a lot of eyes on his template that he uses for screencasts over on gorails.com. It turns out that we both live pretty close together and started to collab on a new project Jumpstart Pro with Jason Charnes.
Consider Jumpstart Pro a way more elaborate solution towards getting a Ruby on Rails application configured to do a lot be default with nearly no effort. The application template comes with support for many features and more that are being added. We have a landing page up that will eventually house documentation and a way to gain access to the template. It is still currently in early beta but feel free to subscribe to learn more at https://jumpstartrails.com.
A lot is going on! I’m very excited to get my course and Jumpstart Pro out as well as create more Rails content for the blog/ YouTube channel. Many future plans include diving deeper into hard to understand topics within the Ruby on Rails framework. I ultimately want to learn and enjoy doing so in public as it helps others out as well.
====================
? Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
?? NEW COURSE: HELLO RAILS - Get notified
https://hellorails.io
? Previously published at:
https://web-crunch.com/latest-news-rails-6-jumpstart-pro-kickoff-updates
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
? Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy
☕️ Or buy me a coffee
https://www.buymeacoffee.com/webcrunch
...
https://www.youtube.com/watch?v=0IR5Vt7u2vQ
Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my blog Web-Crunch https://web-crunch.com??
***** PART 5 of 6 ******
☕️Help me keep going:
https://www.buymeacoffee.com/webcrunch
? Previously published at:
https://web-crunch.com/ruby-on-rails-ecommerce-music-shop
Welcome to the next installment of my Let’s Build series featuring Ruby on Rails. In this span of six videos, I’ll walk you through the concept of building an eCommerce music shop in a Rails environment.
If you have followed my previous builds, I stem some ideas from those as well as establish some new ideas and techniques. Much of what is discussed I’ve covered before but there are some new concepts such as database seeding and session parameters I dive into in this series.
What’s the app?
=======
This series will involve creating a small start to an e-commerce application with user authentication. The application of which I call “Flanger” will revolve around selling and purchasing musical instruments.
The app will use a series of models to formulate both the cart and items of which are for sale. Along the way, we will craft some handy helpers that perform calculations to total the items within our cart as well as remember who a user is if that user adds an item to a cart without being logged in.
A user who has an account can post instruments for sale.
What won’t we be covering?
=======
Building a complete e-commerce application is quite a challenge. Often times you need user authentication, tons of options for listing items for sale, a solution for shopping carts, and of course payment options. Accepting payments is a topic I plan to cover in the future but for now, I am omitting this from the app for the sake of time and headache! If you would like to extend this app further you are more than welcome to. I personally use Stripe on other apps and have found great success with integrating it.
? Check out the blog:
https://web-crunch.com
? ? Check out my agency:
https://coupleofcreatives.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
...
https://www.youtube.com/watch?v=R_LSbReOJHU
Welcome to a new mini-series on CSS Flexbox. This series is designed to uncover what flexbox is and how to use it effectively for creating powerful CSS layouts and designs in your own websites and apps.
The Flexbox Layout (Flexible Box) module is responsible for providing a more efficient way to layout, align, and distribute space among items in a parent flex container. These items will resize dynamically thus allowing the experience of coding a CSS flexbox design to be almost automatic.
Flex layouts give the parent flex container the ability to alter its items’ width, height, and order to best fill the available space within that container. A flex container expands items to fill available free space or shrinks them based on additional CSS properties you can optionally pass.
Flexbox is a kick-butt tool for mobile layouts as well since the dynamic side of it allows content to flex proportionally given any screen size.
This guide is a quick precursor to more aspects of Flexbox I'll be covering in this series
View the full collection of blog posts/videos here:
https://web-crunch.com/collections/css-flexbox
=====
Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
♥️ Sponsor me on GitHub
https://github.com/sponsors/justalever
☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch
? One-Click Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
? Previously published at:
https://web-crunch.com/posts/intro-to-css-flexbox-what-is-css-flexbox
? Latest Course: HELLO HTML & CSS (coming soon)?
https://hellohtmlcss.com
?Ruby on Rails Course: HELLO RAILS
https://hellorails.io
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://digest.web-crunch.com/
Twitter: https://twitter.com/webcrunchblog
Github: https://github.com/justalever
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/products/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/products/ptt
...
https://www.youtube.com/watch?v=0bh7Hgt2Uxs
Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
PART 4 of 7
Welcome to my 13th Let's Build: With Ruby on Rails. This build will feature a multitenancy workout app which uses a popular gem called Apartment, nested attributes, and Vue.js integration.
We'll be building a workout tracker type of app to demonstrate the multitenancy approach to a. web app with Ruby on Rails. Working locally we will utilize a `lvh.me` domain (a domain registered to point to `127.0.0.1`) to allow our app to function as it should during development. Follow along using both the written guide and videos below to learn how to take advantage of what Ruby on Rails and the multitude of gems available offer us.
----------------------------------------
What's in this video?
Our controllers talk to both our models and views. We need to configure those to allow certain parameters to save to the database securely.
====================
⚙️ Source Code: https://github.com/justalever/workout_tracker
? Previously published at:
https://web-crunch.com/lets-build-with-ruby-on-rails-multitenancy-workout-tracker-app
? Check out the blog:
https://web-crunch.com
? Check out my app:
https://affinicasts.com
? ? Check out my agency:
https://coupleofcreatives.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
? Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy
☕️ ?? Patreon
https://www.patreon.com/webcrunch
☕️ Or buy me a coffee
https://www.buymeacoffee.com/webcrunch
...
https://www.youtube.com/watch?v=JI25U2UG-b8
Welcome to a brand new "Let's Build" tutorial series where I use Rails in the combination of hotwired.dev (https://hotwired.dev) to create components with little to no JavaScript.
If you're brand new to Turbo, I recommend reading [another post titled "Digging into Turbo with Ruby on Rails 7"](https://web-crunch.com/posts/digging-into-turbo-with-ruby-on-rails-7), where I cover what it is and how it works.
In this tutorial, we'll add modals to a basic Rails application with the help of Turbo.
? Continue reading the written guide here:
https://web-crunch.com/posts/hotwire-rails-turbo-modals
======
Bookmarks
00:00 - Introductions
01:54 - Demo walkthrough
04:00 - Create a new app
05:14 - Adding dependencies
06:08 - Add Post scaffold
06:50 - Set root route
07:40 - Boot server for the first time
08:12 - Adjust application layout design
10:23 - Turbofied views
16:06 - Designing the modal form
18:52 - Add plugins to Tailwind configuration
19:29 - First trial run of a modal
21:23 - Add custom animations with Tailwind
======
Hi, I am Andy Leverenz, and I am a product designer and developer. For fun, I design, code, and write. Check out my blog, Web-Crunch https://web-crunch.com, where I publish design and development tutorials with the occasional vlog.
♥️ Check out my new project Rails UI
https://railsui.com
♥️ Sponsor me on GitHub
https://github.com/sponsors/justalever
☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch
? One-Click Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
? Previously published at:
https://web-crunch.com/posts/how-to-use-details-and-summary-tags
?Ruby on Rails Course: HELLO RAILS
https://hellorails.io
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://digest.web-crunch.com/
Twitter: https://twitter.com/webcrunchblog
Github: https://github.com/justalever
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/products/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/products/ptt
...
https://www.youtube.com/watch?v=J5oTwF6Tm2c
Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
Part 4 of 6
Read the written version here:
https://web-crunch.com/posts/email-subscription-workflow-ruby-on-rails
====================
? One-Click Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
?? Latest course: HELLO RAILS
https://hellorails.io
? Previously published at:
https://web-crunch.com/posts/email-subscription-workflow-ruby-on-rails
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/products/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/proucts/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
? Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy
☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch
...
https://www.youtube.com/watch?v=xkpSpuXLbCY
Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
Part 1 of 6
Read the written version here:
https://web-crunch.com/posts/email-subscription-workflow-ruby-on-rails
====================
? One-Click Subscribe:
https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
?? Latest course: HELLO RAILS
https://hellorails.io
? Previously published at:
https://web-crunch.com/posts/email-subscription-workflow-ruby-on-rails
? Check out the blog:
https://web-crunch.com
? Check out my personal site:
https://justalever.com
? Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/products/luxd
? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/proucts/ptt
? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
? Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
? Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy
☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch
...
https://www.youtube.com/watch?v=1ycP0NQXI4I