Trying to make a react app using pre made sources. I have a fully functional web page made in vanila js. Is the best approach (or maybe the only one) to turn the html page into multiple react components and just delete the html page or should I maybe find a way to just implement react code into html?
Why write 5 times the same button when you can write it once and import it the rest 4 times? This assures a unified look on your site and that any minor change you make will be reflected in all the proper places.
Consider a testimonial slider. You want this in your home page and in your about page. Why have the need to update it in two places?
If you are going the React way I will suggest to go all the way. Componetize your site, see the true power of React. Maybe its an overkill for your site (every component appears once -doubt-) but if this is the case you will start learning a really powerful tool with a simple example and the progressively get better.
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
I have been developing a VueJS website for a few weeks, and realised my design skills were not good enough to design a proper landing page. I came across this stunning Bootstrap open source template and really would like to use it.
However, I would like to stick to VueJS since I need it for some other dynamic pages. What would be the best way to integrate this template into a VueJS component? It uses Bootstrap and a bit of JavaScript as well. I know of Vue Framework such as BootstrapVue, but they would require rewriting the whole page using its custom components (such as b-nav or b-nav-item).
I have tried just copying and pasting the HTML into a component but I then have the problem of the CSS and JavaScript. Is using a bootstrap.css file in Vue JS a good practice ?
I am not asking anyone to do some boring job for me, but it seems to me like tweaking such a template so that it fits to a VueJS component always has some side effects, and I wanted to make sure there were no easiest, more elegant and reliable solution for this.
The whole point of BootstrapVue is to drop Bootstrap's dependency on jQuery.
It only uses Bootstrap's scss and the jQuery part is replaced with BV's own JS (provided via Vue components).
At first glance, it doesn't look like that would be your case, since you want some additional jQuery code (the theme's own JS) - currently written in jQuery.
However, when looking closer, the theme's own jQuery script is quite small. It basically does three things:
routes the page URLs when you navigate between sections (which could/should be replaced by Vue Router calls in your case),
implements scrollSpy (which has a Vue alternative) - it does it for the same purpose - knowing when to change the page URL,
implements magnificPopup (which also has a Vue alternative).
So it looks like the jQuery dependency could be fairly easily dropped, provided it's replaced by Vue code.
You basically seem to want a Vue variant of the Bootstrap theme. Or, to be more exact, a BootstrapVue variant of it.
If we were to look for the best possible candidate for the job, it would probably be found somewhere in the pool of Vue or BootstrapVue experts, as well as the creators of the Bootstrap theme (chances are they shouldn't find BootstrapVue difficult to use - considering the quality of their template).
Whether or not this is a job fit for your abilities is a question only you can answer but, unless you're purely interested in the functional part (getting the job done[1]), it is definitely a good opportunity to learn more about both Vue and Bootstrap.
To provide a helpful estimate, a senior FE developer would take anywhere between 8 to 20 hrs to create this template, provided they know Vue.
[1] Getting the job done with the least amount of effort would mean to simply inject the entire template as a page into your existing Vue app, making sure you import everything it needs (jQuery, jQuery.easing, Bootstrap, magnificPopup & scrollSpy) - roughly estimated at ~4 hours - could be less but you have to account for testing and any potential bug fixing.
I strongly advise against this approach as it's likely to significantly increase the size of your app while reducing its scalability and flexibility. This approach produces applications nobody wants to touch as, in time, the probability that any modification will break some existing functionality increases exponentially.
Since SO questions are supposed to take no longer than 15 minutes to answer, it should be obvious none of the above described tasks is feasible as a Stack Overflow question. Besides, you need to show some of your own coding effort up so far and provide a minimal reproducible example.
So i am trying to create a website with multiple different pages. I was originally going to just take the traditional route but this website caught my eye: https://anyoneworldwide.com/
Everything aside from the "Choose your location" screen has no loading whatsoever. The URL changes but there is no loading indicator on my tab or "X" on the refresh button (I am using chrome btw)
So my question is; how am I able to use this kind loading technique in a website of my own?
The particular website mentioned in the question is developed using React. Its a javascript framework.The concept is know as Single Page Application. Where routing is done by javascript running in the browser and content is loaded using ajax calls. checkout this article.
Easy answer, pick one of the currently popular front end frameworks for building single page apps (SPA).
E.g. AngularJs, React.js, vue.js
These frameworks allow you to easily create client side routers, which inject (in one way or another) new content into the existing page, thus no refresh.
React is a popular open source and free library developed by facebook. It is used to develop single page applications which means that your website wont load at all. This increased the speed of your website and saves a lot of bandwidth. Using react you can make such a website as you mentioned. Not only React but also other frameworks like angular and Vuejs can be used.
I am looking for the best way to create and navigate/redirect between page segments like the one in the red circle (idk if they are called segments).
I am using React and Redux. Is react-router a good idea?
Do you guys know of a good learning guide for create and navigate between segments of the same page?
React router is almost definitely what you are looking for, it provides all the functionality required for rendering different views / elements based on URL path. As well as navigating between 'pages' (without reloading the page)
This provides a really good intro:
https://reacttraining.com/react-router/core/guides/philosophy
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here