Andrew Weisbeck
@GeauxWeisbeck4
Awesome projects on my Awesome REPL account - My professional website is https://GeauxWeisbeck4.dev
Repls
Community
0
30 Days of Coding: Day 1 - HTML , CSS Basics & Project SetupAs a part of my 30 days of Coding course and ebook, we get started quickly with today's lesson. I show you how to set up the boilerplate for a basic website and introduce HTML.
We then build a basic boilerplate and add a CSS file to our website so we can style our site with some simple CSS classes. This site is your first site ever and will serve as your personal portfolio.
I will then show you how to add routes to other pages, create those pages in HTML, and then link them all together.
I share some HTML resources in this lesson to help you out and for you to review out side of this lesson - there is not enough time to go too in depth with HTML, but I'm not done teaching it yet.
Day one is to get you familiar with the Dev environment, introduce HTML and CSS, how to set up a project, and how to apply markup and simple CSS to create a basic layout.
0
0
0
Russian Peasant MultiplicationTakes Russian Peasant Multiplication and turns it into an algorithm in Python.
0
0
0
Sorting with truthy values | Egghead.ioFilter an array with truthy values
1
0
0
Sort array alphabetically or numericallyHow to sort an array alphabetically or numerically
1
0
0
Create shallow copy of an array with slice | Egghead ArraysHow to create a shallow copy of an array with slice.
1
0
0
Understand JavaScript Arrays - Check Values w/ indexOfShows how to check if a value is in an array by using indexOf.
0
0
0
Alpine.js - $watchIn this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the $watch property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.
We also use the debounce modifier on the x-model property to avoid firing an API call on each keystroke.
0
0
0
Alpine.js - x-ref and $refsIn this lesson, we learn how to retrieve a DOM element via the x-ref directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.
We can then use the $refs object, and reach for the ref we need to target.
This allows us to trigger the focus state of the input field, with the .focus() method.
1
0
0
Alpine.js - x-model data in syncIn this lesson, we see how the x-model directive makes achieving "two-way data binding" effortless in Alpine JS.
We see what it would take to recreate the same functionality with an x-bind directive for the input value, as well as an @input event listener which, thanks to an access to the browser's native events via the $event magic property, sets the state value to $event.target.value.
1
0
0
Alpine.js - x-modelIn this lesson, we smoothen the transitions between tabs by applying a transition modifier to our x-show directive.
We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our x-show directive.
1
0
0
Alpine.js - Count StateA demonstratio of how to use Alpine.js with a count state.
2
0
0
Alpine.js - x-show & x-stateIn this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an activeTab state value with x-data. We then wire up our buttons to change the value of activeTabon click, and usex-showto determine if the tab content should be visible or not, based on the value ofactiveTab`.
We also take control of the class attribute with x-bind, and we conditionally output an "active" class based on, you guessed it, the value of activeTab.
0
0
0
Lisa's Anime RecommenderThis app tells Lisa which anime show she should watch next. Built with Next.js, Tailwind CSS, and uses the Anime Recommender API to deliver the recommendations.
Love you sweetie!
0
0
0
React Hooks - Firebase: useCallbackThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useMemoThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useReducerThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useRefThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useContextThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useEffectThese are the React Hooks from the Firebase Next.JS course
1
0
0
React Hooks - Firebase: useStateThese are the React Hooks from the Firebase Next.JS course
1
0