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.
Related
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.
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.
As a front-end designer converting designs (PSD, Sketch, AdobeXD, ..etc) to dynamic HTML pages manual. I'm using bootstrap framework with jQuery library.
When I started this job it took long time to convert the designs to html, after that the time decreased because the work becomes classic and it is routine. But every design is different and I start from the scratch using bootstrap component then adding my override CSS and JS.
I wondering if there is tools or ideas to improve my work and do things faster??
What I know is that I can create my own JS or CSS codes that I use
usually (common things). Then, I can include these files all projects
that I'm working on.
I need other tools and ideas to use.
There are different front end starter tools (boilerplate) which you may use as a basis and write you code on top of them each time.
Also consider remove bootstrap if you need everytime to override it, as you said.
It is better to have less dependencies for sure.
Also try to write your html/css as like you create page full of components, which are independent. Use CSS BEM methodology and try to make components as reausable as you can.
In that into mind you may create something like your own library / framework of most used common components between projects and just to include them everytime.
You may provide simple customization via CSS native variables or LESS/SASS ones with help of mixins.
Is there any way to load an angular component in isolation for design & testing purposes? I am attempting to redesign some components for a fairly complex angular app (it was started in angular2-rc and although it has been updated it's still following some bad design patterns - mostly due to work previously done by inexperienced devs on unreasonably tight deadlines, needless to say we are now developing this in-house). This makes it difficult to access certain nested components.
Currently my workflow for designing and testing a component is as follows:
Run the backend app (because of authentication checks etc. - the app is entirely private so needs a valid login to access anything)
Run the angular app (ng serve handles this and will obviously auto reload on change)
Log in to app
Navigate back to the relevant page (due to the login redirect taking me away from the page I was on)
Fill in the required data on the page to get to the point where my new component would show in a normal use case
Design/test/etc my new component, making any necessary changes
if (!done) { goto 2; } else { return; }
This seems excessive for designing a single component. There must be a better way to simply load my component directly for design and testing purposes. Ideally I would like my workflow to be something along the lines of:
Load the angular component directly instead of having to run the entire app (preferably with a way to mock any necessary inputs, services, etc)
Design and test component to ensure desired layout, style, functionality, ux, etc - making any changes as necessary
if (!done) { goto 1; } else { goto 4; }
Integrate component into app
Is what I'm looking for even possible? Surely I'm not the first person to run into this problem - UI frameworks are the first come to mind given how they provide a library of generic components to drop in wherever necessary.
Am I missing something? Or is the only way to do this just to create a simple mocked test app and drop the in-dev components there for quick and easy access?
Update
To clarify, I'm specifically trying to rapidly & iteratively design this component from a mostly visual/rendering perspective. I need to ensure cross-browser consistency, responsiveness at different screen resolutions, elements not overlapping incorrectly or rendering offscreen, colors/fonts/sizes/positions are appropriate in the context of the component (eg. <h3> is too big and looks out of place, lets try <h4> instead and see how that looks) etc. where the component has nested components which need to be displayed.
I tagged the question with html & css intentionally - not because those are the languages the component uses, but because those are the aspects of the component I am trying to test.
Thanks to those who have helpfully pasted a link to the docs (which, yes I have read) explaining how to unit test the component and briefly describing how to test certain rendering conditions based on the code (applied classes, attributes, styles etc). What I was unfortunately unable to find in there are tests such as:
expect(myComponent).toDisplayIdenticallyAcross(browser.Chrome, browser.Firefox, browser.Edge, browser.Safari);
expect(myLabel.color).toContrastWellWith(myComponent.backgroundColor);
expect(myNestedComponent).toRenderEntirelyOnScreenWithoutOverlapping(true);
That is to be expected as these are more subjective things which can really only be tested by looking at them and making minor tweaks as necessary. I'm simply trying to find a simpler way to do that without having to reload the entire app a minimum of three times just to see whether having my heading left, center or right aligned looks better.
I think it's hard to do unit testing on visual characteristics like you describe in your edit. I've never had to do that for a react app, generally you build a component and worry about what it looks like, and partially worry about it's layout, and it's parent also handles part of it's layout because the layout can vary on different pages but the component itself should still visually look the same. Also if you don't want to keep refreshing the page you can use chrome dev tools to update the css and see how it looks, then when you pick something you like, apply it to your actual code
Components are just classes. And they can be tested as such.
More
https://angular.io/guide/testing#component-test-basics
I am an intermediate level web designer & web developer. I built 5 official websites for hotels and not only, until now(2 years experience). But I have an uncertainty.
Should I use an already coded template like this for building the next websites? I already did 1 website with that great template and it saved me a good amount of time. My fear is that without that template, I don't have excellent skill for coding components like navbar, footer, making a page element to stay on the page in the position I want, etc.
I'm almost always copying code snippets from the net, let's say not coding from scratch.
My thought is: hey, you're using a template, you're not a real web designer/developer. I was thinking to only use bootstrap + wordpress, but if I use that CANVAS template( it already has lots of bootstrap components coded, css and javascript for almost any situation ) it would save me even more time.
What do you say, guys, what should I do ? Thank you !
Whatever it takes to achieve your objective in the fast manner and have quality output should be your way forward. I would not worry about purism of solutions used as the objective. When you need it, you will know it - as the time will come when you know this template is not enough, then you can go back to custom solutions. Ultimately no one can handle every aspect of the development, using open source, libraries and frameworks is nowadays a skill in itself. Reapplying easy modules will help you to focus on other crucial elements of your app ( move to mobile, speed, additional functionality etc.)