I'm trying to get Masonry working in a Nuxt website I'm building. I only need it to load on client side, and I'm having trouble getting that to work.
I think the underlying problem is that Masonry auto-initializes itself and looks for data attributes in the HTML, so if it runs server side it will crash because window doesn't exist. I thought I understood how Nuxt works, but this is making me question everything! LOL!
So first I create a plugin, and load it client side only:
And then I import the masonry package, and export it. My understanding is this would only run client side now.
And then in my component I import the plugin:
Doing this will crash the server with a window undefined error from Masonry. Why?! It should be loading the plugin only client side?!
I've actually got this to work by not using the plugin steps, and doing this in my component:
let Masonry
if (process.client) {
Masonry = require("masonry-layout")
}
But that seems like a very un-Nuxt way to do things.
So how should I be doing this? I really don't want to have to use the popular Vue-Masonry package (it forces no-ssr of the HTML on Nuxt) and it has a lot of layout bugs, also I really wanted to use this as a way to understand Nuxt better.
Should I not use Nuxt plugins to do this? Is it better to just throw the script into the head and use it like regular JS with a process.client check?
Related
hi I'm completely new to the MERN stack and am completely comfortable with html and CSS. however when I look at MERN tutorials online I see no html. is there a way I can still write up my websites I want to create using html and CSS then dealing with back end using MERN?
The "R" in MERN stands for React, which means writing JavaScript (or TypeScript) using the React ecosystem, usually including JSX (which is an XML/HTML-like syntax for representing UI) React is what you'd use instead of writing HTML and vanilla JS or jQuery. Anything you can do with React, you can do with plain HTML, CSS, and JS, though it might take a lot more work. If you use Mongo, Express, and Node, without React, that would work perfectly fine, but it wouldn't be the MERN stack.
Yes, you can use your normal HTML CSS & JAVASCRIPT for the frontend.
But before that lets understand what is MERN.
MERN --> stands from MongoDB , Express , React , Node js
Let's breakdown more:-
Mongo DB --> This is a database
Express --> This is a package to make our server (just like http package)
React --> This is a frontend framework for creating React apps.
Node js-->This is the environment for running your javascript code (Basically your javascript code runs on a browser environment but when you deploy your javascript codes on the server for making the backend there is no browser that's why we use node to provide a javascript environment to run the javascript files )
Collectively we make a whole website using all these.
But as you said can we use HTML , Yes you can use HTML to make your frontend only but you can't use HTML to program your backend because it's not possible.
In MERN you can replace "R" With (HTML , CSS , JAVASCRIPT) But MEN will be going to remain the same because these are used only to make your backend.
And combining it all We call FullStack web development.
I hope you will get it all. :)
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I'm coming from a javascript/react/react-router/webpack background to a clojurescript/om environment.
With webpack & react-router it was possible to split my code and only load the javascript needed. E.g. on /login I would only load the js necessary to display the login-page everything else would be left out.
How do I the same with clojurescript/om?
Apparently it's possible to split your code into multiple files: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
The question is how do I only load the code necessary to render the current page: /login for example...
With webpack I would manually write require.ensure to asynchronously load the necessary javascript to render a certain page. React Router supports this very well.
Is there any equivalent in clojurescript without making multiple html files and each giving it the right script tag with the splitted code through google closure modules?
Sadly I don't have a concrete example yet, and I agree that webpack and react-router make this really easy. There are some links that may direct you to get it working:
Code splitting: http://swannodette.github.io/2015/02/23/hello-google-closure-modules
Manually adding script tags to html files
Actual docs: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
Dynamic loading of cljs modules: https://rasterize.io/blog/cljs-dynamic-module-loading.html
Uses multi-methods for route definitions to dynamically add implementations when loading more code
Dense read, there is no easy tooling regarding this use case right now, but the article has all clues to get it working
I hope this helps. If you get around to implementing this in an OSS example it would be great if you could share the link.
I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.
I have to make a html page with css and javascript that I have to enter a url in a form. With this url, I have to get some information from the html of the page with a Python 3.2 Script.
I start learning Python some days ago and I have some question:
I need CherryPy/Django to do that? (I'm asking because I executed a script to get the entire html without using CherryPy/Django and it works - no interaction with browser)
CherryPy examples have the html built in the python code. I must write the html in the python script or can I have an html page that call the script with Ajax (or anything else)?
If I can use Ajax, is XmlHttpRequest a good choice?
Thank you! :D
No, you don't need a web framework, but in general it's a good idea. Django seems like brutal overkill for this. CherryPy or Pyramid or some micro framework seems better.
You can have an HTML page that calls the CherryPy server, but since this page obviously is a part of the system/service you are building, serving it from the server makes more sense.
Sure, why not.