Andrew Weisbeck
@GeauxWeisbeck4
Awesome projects on my Awesome REPL account - My professional website is https://GeauxWeisbeck4.dev
GeauxWeisbeck4.dev New Portfolio Site (In Production)
Made with Portfolio Site TemplateThis is going to be a temporary holding website while I transition my old website to andrewweisbeck.com and make this my new project/portfolio site for employers.
Recent comments (1)GeauxWeisbeck49 months ago
0
Russian Peasant MultiplicationTakes Russian Peasant Multiplication and turns it into an algorithm in Python.
0
0
0
0
Sorting with truthy values | Egghead.ioFilter an array with truthy values
0
0
0
0
Sort array alphabetically or numericallyHow to sort an array alphabetically or numerically
0
0
0
0
Create shallow copy of an array with slice | Egghead ArraysHow to create a shallow copy of an array with slice.
0
0
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
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
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.
0
0
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.
0
0
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.
0
0
0
0
Alpine.js - Count StateA demonstratio of how to use Alpine.js with a count state.
0
0
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
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!
4
0
0
0
React Hooks - Firebase: useCallbackThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
React Hooks - Firebase: useMemoThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
React Hooks - Firebase: useReducerThese are the React Hooks from the Firebase Next.JS course
1
0
0
0
React Hooks - Firebase: useRefThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
React Hooks - Firebase: useContextThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
React Hooks - Firebase: useEffectThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
React Hooks - Firebase: useStateThese are the React Hooks from the Firebase Next.JS course
0
0
0
0
Eloquent JavaScript Robot ProjectBuilding a robot from the book Eloquent JavaScript. Curently Live! Join me and chat if you want to hangout!
Come Join me Live!
I'm still live - Join me to chat and watch me build this!