Is there a CSS and/or JavaScript manager module for django?
What I am looking for in functionality:
I would like to be able to define which stylesheets and javascript files to load, on a per view basis (this by itself is easy to do in bare django, but bear with me...)
I would like the plugin to automatically combine/optimize the "source" CSS/JS and insert the output into the appropriate view.
Does something like that exist?
Take a look at django-mediagenerator.
Related
Is this achievable without a framework like Angular/React?
Problem I'm running into is I'm creating a blog and I want to minimize the amount of code I'm using and there's two things I'm looking at:
Changing text on each file
For example, for each blog page, they share the same features such as: header, footer, logo, etc.
However, imagine my blog has 100 posts and now I want to change the text of a link in the footer. This would be applied to every page and instead of going to each page and changing the footer manually, I'd like to be able to change it in one file (i.e. footer.html or footer.json) and it's applied to all the pages. I discovered handlebars.js and unless I'm mistaken, I could use this to achieve this problem I'm facing.
Minimizing page bloat
However, I would like to minimize the page even more. As far as I understand, using something like handlebars wouldn't allow me to shorten the amount of HTML code itself. I'd like to have one blog-post-template.html file and each time the user clicks a link to a post, it would use the blog-post-template.html file and the only thing that would change is the actual blog-post.
For example, in pseudocode for blog-post-template.html:
{header} (gets this from header.html)
{blog-post} (gets this from link attribute and searches for that blog-post-number in database)
{footer} (gets this from footer.html)
I'm pretty sure I know the Angular way of doing this through templating and components but since I decided to create this blog with vanilla JavaScript and possibly jQuery plugins, but I was wondering if this was achievable without using a framework like Angular since I've heard about Angular and SEO not getting along well with each other.
Or if it's more advisable to use a tool like Angular/React to create something like this in my example.
You don't need a JavaScript framework, but you will need to use JavaScript.
You can have your header and footer hard-coded as HTML as you say. But then you'll need a JavaScript function to run and grab the blog post from your headless CRM or database.
I'd just recommend using something like Next.js so you can have the nice tooling of a framework, and no SEO downsides.
If you'd like an SEO-friendly version of React, you could use Next.js or Gatsby. Angular, I think, has ahead-of-time compilation that might do the trick. Or you could check out the html template element
Cheers :)
I want to add a web plugin to my Vaadin website. Normally for such plugins, you add a JavaScript snippet to the <body> or <head> sections (depending on the plugin), but we don't have access to that directly in Vaadin development, so was wondering how people do it?
Maybe this is where we use #JavaScript annotation, referenced here, but that seems like overkill since I don't think I need a component.
#JavaScript can be used to load any JavaScript file, it doesn't need to be a component.
I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language
I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.
I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i