- Видео 18
- Просмотров 526 017
Dave Ceddia
США
Добавлен 4 июл 2013
SVG animation with Svelte and animejs
Svelte and animejs make a great team for doing SVG animations! I start with an SVG I created in Sketch, copy the code into a Svelte component, and use animejs to do the animation. Check out the full Linked Lists in JavaScript post where a bunch of these animations are featured: daveceddia.com/linked-lists-javascript/
Here's my svg-to-svelte script: gist.github.com/dceddia/0a669466821b6f3c3dcbc2a5e2b3af04
Tools and things mentioned in this video:
Svelte - svelte.dev/
anime.js - animejs.com/
Sketch - www.sketch.com/
Alfred - www.alfredapp.com/
Here's my svg-to-svelte script: gist.github.com/dceddia/0a669466821b6f3c3dcbc2a5e2b3af04
Tools and things mentioned in this video:
Svelte - svelte.dev/
anime.js - animejs.com/
Sketch - www.sketch.com/
Alfred - www.alfredapp.com/
Просмотров: 4 979
Видео
Doing the Svelte Tutorial, parts 1 - 5
Просмотров 8144 года назад
Watch me (a React developer) work through the first 5 parts of the official Svelte tutorial. Intro, Reactivity, Props, Logic, and Events. Try it yourself! svelte.dev/tutorial
Referential Equality in JavaScript
Просмотров 3,1 тыс.5 лет назад
Writing modern JavaScript depends pretty heavily on understanding what "referential equality" is. It's the underlying concept behind pure functions, and pass-by-value vs. pass-by-reference. It also comes up in frameworks like React, where shouldComponentUpdate and PureComponent rely on you to update values in an immutable way. This video goes over what referential equality and pure functions ar...
Create and Deploy a Gatsby Blog to Netlify
Просмотров 8 тыс.6 лет назад
2019 is the year personal blogs come back (I'm hoping, anyway). Learn how to set up a blog with Gatsby.js and deploy it to Netlify for free. Part 1 of 2! follow along at daveceddia.com/start-blog-gatsby-netlify/
The useReducer Hook
Просмотров 25 тыс.6 лет назад
React Hooks just landed. Watch to learn what you can do with the useReducer hook.
The useState Hook
Просмотров 4,9 тыс.6 лет назад
React Hooks just landed. Watch to learn what you can do with the useState hook. Related links: 👉Simple Intro To Hooks: daveceddia.com/intro-to-hooks/ 👉More Ways to useState: daveceddia.com/usestate-hook-examples/
How to fix Unexpected Token in JSON error (for web developers)
Просмотров 257 тыс.6 лет назад
Not a programmer? Read this! - If you get this error in an app you didn't make, and/or you're not a web developer... this video will not help you. You can try turning off adblockers (sometimes that helps), but if it's still broken, report it to the creator. Getting this error in your code? Unhandled Rejection (SyntaxError): Unexpected token in JSON at position 0 The position and the character m...
Easy Redux Tutorial: Adding Redux to a Simple React App
Просмотров 77 тыс.7 лет назад
Starting with a simple "counter" app that uses React state, this video walks through the process of adding Redux and moving the existing state out of React and into the Redux store. Want a more detailed walkthrough? Check out this tutorial I put together - it follows the same general structure, but spends more time on each concept: daveceddia.com/redux-tutorial/
Create React App with an Express Backend
Просмотров 123 тыс.7 лет назад
Learn how to wire up a React app to fetch data from an Express server in 5 minutes. And, if your backend is not written with Express, this same "proxy" setting will work for you too. Read the blog post here: daveceddia.com/create-react-app-express-backend/ Got it working and want to deploy to Heroku? Check out this post: daveceddia.com/create-react-app-express-production/
Refactor createClass to ES6 Classes
Просмотров 2,2 тыс.7 лет назад
React 15.5 has deprecated createClass and you'll start getting warnings if your code still uses it. Watch for how to convert old components to the new ES6 syntax. The blog has another full-featured example not covered in the video, goes over how to use "codemods" to automate all this, and you can download all the example code too. 🔗 Blog automation example code: daveceddia.com/convert-createcla...
Refactoring React.createClass to Stateless Functions
Просмотров 1 тыс.7 лет назад
React.createClass is deprecated as of React 15.5. Watch to learn how to convert old React components into modern stateless functions. Get the example code at the accompanying blog post here: daveceddia.com/convert-createclass-to-function-component/
How to change the source code and run it (directly) and then get a build from the changed source code or make a build of the project from the wazuh-dashborad project
Thanks a million dude!
Can help me <script language = "java script"> Var exitsplashmessage 'yesroll_10000' ; Var exitsplashpage = '';function addLoadEvent(func) { var oldonload = window.onload; if (typeofwindow.onload != 'function') { window.onload = func; } else { window.onload =function() { if (oldonload) { oldonload(); } func(); }}}function addClickEvent(a,i,func) { if (typeof a[i].onclick != 'function'){ a[i].onclick = func; } } var theDiv = '<div id="ExitSplashDiv" style="display:block; width:100%;height:100%; position:absolute; background:#FFFFFF; margin-top:0px; margin-left:0px;" align="center">';theDiv = theDiv + '< src="'+exitsplashpage+'" width="100%" height="100%"align="middle" frameborder="0"></> ;theDiv = theDiv + '</div>';theBody = document.body; if (!theBody) {theBody = document.getElementById("body");if (!theBody) {theBody = document.getElementsByTagName("body")[0];}}var PreventExitSplash = false;function DisplayExitSplash(){ if(PreventExitSplash == false){ window.scrollTo(0,0);PreventExitSplash=true; divtag = document.createElement("div");divtag.setAttribute("id","ExitSplashMainOuterLayer");divtag.style.position="absolute"; divtag.style.width="100%";divtag.style.height="100%"; divtag.style.zIndex="99"; divtag.style.left="0px";divtag.style.top="0px"; divtag.innerHTML=theDiv; theBody.innerHTML="";theBody.topMargin="0px"; theBody.rightMargin="0px"; theBody.bottomMargin="0px";theBody.leftMargin="0px"; theBody.style.overflow="hidden";theBody.appendChild(divtag); return exitsplashmessage; } }var a = document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++){ if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}disablelinksfunc = function(){var a =document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++){ if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}}addLoadEvent(disablelinksfunc);disableformsfunc = function(){ var f = document.getElementsByTagName('FORM'); for(var i=0;i<f.length;i++){ if (!f[i].onclick){ f[i].onclick=function(){ PreventExitSplash=true; } }else if (!f[i].onsubmit){ f[i].onsubmit=function(){ PreventExitSplash=true; }}}} Free-litecoin.com (10000); Java.onbeforeunload = yesroll; </script>
Very well explained! I'm taking a React course on Udemy with 700,000 students, and somehow the teacher managed to garble this topic really bad, when it can be this simple
Best Explanation 🙌
I am getting an error of not valid doctype html in json
Yoo broo, I can't say thank you enough. This problem has disturbed me for hours on end,
Thanks a lot man, you explained so well and I could understand my error through your example.
A great example. Very well explained! Thanks Dave!
developer tools worth it?
Heck 234..ff4
7:11
short and simple ..thank You
I don't understand this bugfix idk where did you get those things I just want my minecraft to work
Yeah sorry this is only for developers coding their own apps. I'm not sure why youtube keeps recommending it to others 😂
No, I didn't get this from a recommendation I searched the fix to a problem I got - it's an error message saying things about the unexpected token I guess if I knew stuff about coding I could use this video to fix the bug in minecraft but I don't know anything of any languages
Ahh, gotcha. Yeah, this kind of thing is very hard to fix without having the code itself. Maybe the minecraft team can fix it. Sometimes it's caused by having ad blockers or firewalls or some kind of proxy on your own network.@@WordofSil
love you bro ❤
Thank you so much I recently upgraded to nuxt 3 release candidate 3 and was getting this error from a graph call randomly but now I’m going to try .text to see what im really getting back
Love it, although this video was two years ago, still be worth to watch nowadays. Lots of people still get confused about using context and redux(other state management tools). and they think context and hooks could completely replace redux, this video kind of prove that this is not true at all. You have to do a lot of performance optimization if using context while redux did those dirty stuff internally.
THANKS A LOT! I was scratching my head wtf is going on, why I have everything what dude have but it's getting me this error and no data info.... And then realized that default url for React app is "/public" , so typing "/numbers.json" in fetch is not going to work even if the file is in the same folder what my js file that have fetch in it...
I understand nothing
this isn't the best example
Thank you - this helped solve my issue in my VUE project. It turns out I was fetching a path defined in my configuration/environment file, but I specified the name of the file as 'test.json' rather than preceding it with a slash: '/test.json' so it wasn't finding it properly. What was odd, is this fetch() call was being performed on my main VUE instance, so it should have actually been failing for EVERY route - but it was only failing for certain routes, which was odd.
Thanks dudee, at last i nailed it after watching a thousands of videos about react - express connection .
Thank you so much! I love the explaination. understand my error more clearly and know how to avoid it in the future! ❤
I understand nothing at all you just said. I'm just signing up for "coinbase" and message came up. Don't understand this comp language at all.
Ah sorry, yeah this is about how to fix it if you wrote the code. If it’s an error you’re getting with coinbase it’s probably something broken on their end. You might be able to try disabling adblockers and see if that helps at all, but if not, hit up their support.
???
Most logical explanation for useReducer hook. Have been through many youtubers but most if not all do the example of counter and make the hook not more useful than useState. Thanks Dave, aside from being 3 years ago the tuturial, do you have any new useReducer tuts?
Thanks! Glad it was helpful. Haven't got anything newer though sorry! 😅
Tom Cruise doing react 🔥
It was very clear !!!
Wow Wow Wow, very clear. I have stuck with useReducer, but now understand well. Thank you.
Glad to hear!
writing this in 2022, and still the most intuitive and simple tutorial, check his blog out for a better written explanation!
Thanks! Great to hear it’s helpful :)
Straight to the point man, was trying to understand it for last 10 days and now came to this video, understood everything, Awesome work, your efforts appreciated... Keep on posting more videos 🔥🔥🔥
Awesome, glad it helped!
Hey sire ! I was just searching for a solution of an error express gives when I import it in react. Would it fix that ? Note:Massive errors are thrown back on importing
Not totally sure I understand your question, but I don't think it makes sense to import Express from React code. Express is the server, and the entry point for everything. The other way could make sense, Express importing the React app, for server-side rendering?
Thanks, great video! NOTE: This video uses class components. Most people are using function components now. Here is a guy doing the same example using function components: ruclips.net/video/3zoIigieur0/видео.html I tried to compile the boilerplate from this video: Steps: 1. Connect the component to Redux 2. Write mapStateToProps function 3. Create the store 4. Create a reducer 5. Provide the store to the app 6. Wire up actions In function class: import { connect } from "react-redux"; (Step 1) increment = () => { this.props.dispatch({ type: "INCREMENT"}); }; (Step 6) decrement = () => { this.props.dispatch({ type: "DECREMENT"}); }; (Step 6) const mapStateToProps = (state) => ({ (Step 2) variableName: state.variableName }); (Step 2) export default connect(mapStateToProps)(functionName); (Step 1) In index.js: import { createStore } from "redux"; (Step 3) import { Provider } from "react-redux"; (Step 5) const initialState = { count: 0 } function reducer(state = initialState, action) { (Step 4) switch(action.type) { case "INCREMENT": return { count: state.count + 1 }; (Step 6) case "DECREMENT": return { count: state.count - 1 }; (Step 6) default: return state; (Step 4&6) } } const store = createStore(reducer); (Step 3) //store.dispatch({ type: "INCREMENT", OptionalOtherProperty }) (Concept for step 6) //store.dispatch({ type: "DECREMENT" }) (Concept for step 6) const AppName = () => ( (Already in Code) <Provider store={store}> </Provider> ); (Step 5) Available Store Methods: getState() dispatch(action): Used in this example. subscribe(listener): The store calls the listener function every time the state changes. replaceReducer(nextReducer)
Perfect way to explain
It's way more helpful if you slow down and for example not say "developer tools" and click to the next step so fast that I can't hear nor see what you're saying to do!
Wow! You made it damn simple. I am your new subscriber. Thank you very much.
Hi great video, please if you can help me I need to increment and decrement an item from one onClick event fetching sensor data from an api get request
Very good
Sweet!
just spent over an hour trying to fix an error, the proxy wasn't working for me....and then the solution was to delete package-lock.json and node modules and do npm install again. Feeling a little salty lol.
Thank you for the brief but clear video though!
Amazing! I just needed a simple practical example of how to fetch data from db and update the state with fetched data! Agree with other comments how straightforward your tutorial was!
Most helpful for beginners.
its almost 2022 and this is still the most simple to the point video that exists on RUclips. thank you.
This error appears in a website that I didn't create
I thought this problem is from my computer. but with this video I realized that this error from the person who made the website.
Wow ❣️
Very informative :) thank you
I like how you start with no BS, straight into the code, to the point. Wish every tutorial was like this. Subscribed!
Did I find God 😇
Very useful video, thanks a lot!
After hours of lectures and tutorials, the thing that truly helped me understand how to implement React-Redux is your 14 min video. Thank you SO MUCH!