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.
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.
I may have a very stupid question for some of you, but I am a beginner, and need a little help from some of you who have experience in this area.
For example, I work freelance or have my own business where I do web design with HTML, CSS and JS.
Now I feel very comfortable writing my code with the FLEXBOXGrid system instead of maybe Bootstrap4 or something like that.
does it matter, if I use the Flexboxgrid system or bootstrap or maybe raw Html,css without frameworks?
Is it perhaps better paid to do it with Bootstrap than with Flexboxgrid?
Thanks !
FlexboxGrid http://flexboxgrid.com/ is just a grid. If you need make things like modals, tooltips, etc. use Bootstrap. Bootstrap offers the grid and other components.
That said, do what you feel comfortable with. But a few caveats:
1) When using a framework, it's good to know the underlying technology and how it works, because you can debug your code faster and make optimizations easier.
2) You also don't need to know the underlying technology all that well to use a framework. That's why the framework was invented. It was made to speed up the entire dev process. So by all means, use Bootstrap if you need a suite of components, use FlexboxGrid if you just need a grid. You can also make a custom build of Bootstrap. A quick Google only turned up a custom build of Bootstrap 3 https://getbootstrap.com/docs/3.4/customize/ But if you're using npm to get your libraries you can probably import only the parts of the framework you need.
3) If you're looking to just get the job done for the front-end try approaching it like this:
- What does the client need (modals, grids, static content, etc?)
- If client needs more than static content and a grid, use Bootstrap
- Checkout bootstraps Docs, also checkout other forms of bootstrap. There's two that I love: https://github.com/thednp/bootstrap.native
and https://reactstrap.github.io/
If you're not looking to add more overhead, go with Bootstrap Native.
You're going to get paid based on the agreed upon price. But if you make a fantastic looking site quickly, you may get more. Remember that when using Bootstrap, you can customize the CSS to essentially add your own theme. There are also plenty of free themes out there.
Best of luck
I have an application with tons of windows (frames and dialogs) made with wxWidgets XRC. I'm preparing to convert all generated screens to HTML to make an web version, before doing it I would like to know if someone knows a tool for doing so, convert XRC resource to a bunch of DIVs, INPUTs, CHECKBOXes, TABLEs, etc., so I don't need to reinvent the wheel :)
To the best of my knowledge, no such tool exists and, to be honest, I have trouble understanding how one could be written considering that:
wxWidgets layout model based on sizers is very different from the typical layout models used on the web, so you would need to find a way to reimplement it in CSS first.
wxWidgets provides a much richer set of widgets than standard HTML, so you would also need to have a JavaScript library implementing many of them.
My "Rails friends" have a situation when their UI designer is beginning his work on prototyping UI screens on his own - their Rails programmer is busy and is going to join this work later, probably much later.
I know, it is easy to ask UI designer the learn Rails rendering mechanism, so he could begin prototyping on Rails, but I am interested,
is it possible to setup views structure using partials (reusable pieces of HTML views) using just pure HTML, without any ruby code inside?
The only approach I see is to use SSI. Are there any other options?
What is needed is simply a possibility for one html-file could have a string like
<whatever include other.html ...>
which would include the contents of other.html inside its body.
This way, a future project can be divided logically on changeable/nonchangeable parts without any Ruby/Php code for partials.
UPDATE 1
The quoted wiki page about SSI has Client Side Includes section that suggests using object tag which seems to work
<object type="text/html" data="test.html"></object>
One suggestion is to use Sinatra, which is a simple and quick web framework for static sites.
It's easy to start using Sinatra even for a beginner. However, even if the UI man doesn't know and don't want to study any coding, he can still utilize it by planning the partial names and ask the developer to setup it for him. All he need to do later is to fill each blank templates and add JS CSS image assets.
Benefit of Sinatra:
Friendly to static sites
Simple to use
Lots of templating language to use, same as Rails
The partials/templates can be ported to Rails later with zero efforts!!!