I have an application with a subdomain for each customer. They can change the look and feel, which is all based on Twitter Bootstrap. When they save their settings, the app creates a .less stylesheet for them, where the appropriate Twitter Bootstrap variables have been set to their liking.
I the appropriate stylesheet in my application.html.erb file based on what subdomain was accessed. I know that won't work in production.
I'd like to invoke something to compile it as it is saved. Any thoughts?
It sounds like you need to be able to trigger Sprocket compilation of these files on demand during run time. I have no experience with it, but this guy has:
http://www.krautcomputing.com/blog/2012/03/27/how-to-compile-custom-sass-stylesheets-dynamically-during-runtime/
Related
Hi I'm working with create-react-app, i've setup a file upload that allows images to be sent to the backend and saved locally (to the projects build directory). I'm able to dynamically reference images via localhost:4000/image.png so that already works (ie: i have a blog that lets me upload images that I later access via a blogList).
However i figured this probably isn't the best place to dynamically upload images to. I've read the docs on create-react-app and both the locations that mention images dont seem to work for my use case, i feel like im definitely doing something wrong but im not sure what.
docs im referring to:
Says use "import" however im loading dynamically so i cant see how this would work?
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files
says use public, however wouldnt that require a rebuild? since im loading dynamically that isnt possible: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder
NOTE: i have a image uploader and backend working fine it works already using the /build directory. i can upload and dynamically reference images. I'm just looking for best practices for doing something like this. Thanks!
(if you mention "just use nginx" could you please elaborate on the implementation a little)
As a learner I struggled with this problem and tried different approaches once a while ago. For rarely used assets, using /public for client could be useful but I have an app where clients upload images and manage them. Like you, I did not like those approaches and ended up with this setup.
Create a /public directory on backend and upload images to /public/images
Serve /public directory with Express statically.
Use dynamic path variable (via a config setup) for image paths. http://localhost:backend_port/public/images for development and /public/images for production.
I don't know this is the best approach but it worked for me. Beside being best approach when I upload images before that setup CRA was refreshing (hot reloading) my app after each image upload.
I am searching for a solution to modularize static html files and to add multilanguage support. I want to generate static html files with gulp which are then served through an apache server.
I am now thinking about using the template engine marko to modularize html files and to prerender html files (handlebars would also be an option; jade is no option cause i don't like the syntax).
For multilanguage support i am thinking about to add an i18n plugin (for example https://www.npmjs.com/package/i18n). But this plugin needs an express server; also for multilanguage i want to prerender the files. Has anybody a hint for me which i18n plugin would best fit for me? Maybe also which one would best work together with marko and gulp?
The result should be html files generated inside /de and /en.
The following sample app might help: https://github.com/marko-js-samples/marko-koa-i18n
It is a server-based app that uses Koa and koa-i18n, but you can directly use i18n-2 to accomplish the same thing.
Disclaimer: I have not used i18n-2 or koa-i18n
A few things to note:
A custom tag is used to introduce a local variable that can be used to access the i18n bundle: (see: src/components/app-hello/template.marko and src/taglib/i18n-var-tag.js)
The i18n bundle is pulled out of out.global.i18n. See: Marko > Global Properties
The following Gulp plugin is currently out-of-date, but it might serve as a good starting point or you can submit a PR to improve it: https://github.com/viviangledhill/gulp-marko
In your case, you will want to prerender each template multiple times, each time with a different i18n bundle instance passed in as a global property.
If you would like more details please ask here or in the Gitter chat room: https://gitter.im/marko-js/marko
Hope that helps.
I want to make an extension that injects videos on product pages.
I already read a lot of documentation in Magento website but, sincerely, I have no clue where to start. What's the difference between Magento Extensions and Widgets? Can I develop my extension using only JavaScript? Do I really need to use PHP to develop one?
So many questions, can't find a focus. Can you please share a simple follow trough for me to read on? Thanks.
Credits : Marius
https://magento.stackexchange.com/questions/8344/how-to-write-a-custom-extension/8345#8345
Here is what I usually do:
Always develop with error_reporting on.
Always develop with isDeveloperMode set to true. Just add SetEnv MAGE_IS_DEVELOPER_MODE 1 to your httpd.conf file (or corresponding file for nginx or something else)
If the extension is linked to a core functionality add the
dependency in the declaration file <depends><Mage_Catalog /></depend>
If the module is for community use, use community as codepool to
give the developers the chance to override some classes without
modifying the code directly
Put your frontend design files in app/design/frontend/base/default
to make them available for all themes.
Put your admin design files in
app/design/adminhtml/default/default and do not change the admin
theme. I may want to change it in one of my modules.
Prefix your layout file names and template folder name with the
company name to make it easier to isolate them.
easylife_articles.xml and app/design/.../easylife_articles
Put your static resources (js, css, images) in a similar folder as
the template files easylife_articles/images/doh.png
Attach a simple text file with how to uninstall the extension: What
files need to be removed, what tables need to be dropped, what
config settings need to be removed from core_config_data table.
Do not write queries directly in models, blocks or helpers, use a
resource model for that.
Do not write queries using the table names directly Select * from
sales_flat_order where .... Use a Zend_Select and transform the
table names using ->getTable('sales/order').
Use the base url to include js files in template. Wrong
<script type="text/javascript" src="../js/some.js"></script>.
Right <script type="text/javascript" src="<?php echo Mage::getBaseUrl('js').'some.js'?>"></script>
Do not rewrite classes unless is necessary. Use observers and if
it's not possible use helper methods that receive as parameter and
instance of a class that you wanted to override. Wrong:
Override Mage_Catalog_Model_Product to add the method
getProductArticles(). Right. In your helper add
getProductArticles(Mage_Catalog_Model_Product $product)
If you override classes put a list of them in a readme.txt file
Use the default admin path for the admin section of your module.
Wrong admin url articles/adminhtml_articles/index. Right admin url admin/articles/index
Add ACL for your admin sections. I may want to restrict access to
some of the admins.
Do not add an other js framework (jquery, mootools, ...) if it's not
necessary. Write you code in prototype.
Make you template html W3C valid (this is for OCD developers like myself).
Do not put images in the media folder. Use skin. The media
folder usually is not versioned and this makes it harder to move the
website on different environments.
Test you extension with flat catalog on and off. In order not to double the development time use Chaos Monkey
Test your extension with cache on and cache off.
Avoid using uppercase letter in the module and class names. If not
properly tested this may cause issues on different OS. This is more a recommendation, not a 'must'.
Dispatch events in your code to make it easier for developers to
alter the functionality.
Follow the same coding standards that Magento uses and comment your code.
[Edited] Do not use php short tags (<? $this->doSomething() ?>). Use full tags (<?php $this->doSomething()?>). Also don't use short echo tags, yet. (<?="D'oh";?>). Use (<?php echo "D'oh";?>)
Translate your texts using $this->__ and add the locale translation file with your texts (app/local/en_US/Easylife_Articles.csv) at least for en_US language. Not all
websites are build in English and the identification of texts to
translate is time consuming.
If you sell an extension offer at least basic support. Or at least
answer the support e-mails you receive.
Do not make constant calls to your servers through your extension for licence validation. Once, at installation is more than enough (I don't like this approach either, but it's better than to make calls all the time).
(Inspired by this question)
Develop with the log activated and from time to time take a look at
the var/log/system.log file. The errors listed here are not shown
even with developer mode on. If there is at least one error you end
up with a large log file after a few months of running the extension.
If your extension affects the checkout process or the orders in
some way, make sure it works with multi-shipping, or if it
shouldn't work with multi-shipping, make sure it doesn't affect it.
Do not replace the default Admin Notification bar (or feed URL). If
I'm interested on what you have to offer I will subscribe to your
newsletter. Let me see what Magento has to say. It's more important
to me.
If you encrypt your code files with Ioncube (or something
else)...well...I just hate you and I hope your business goes bankrupt
That's what have so far. I will add more as soon as I think of something else.
You will definitely need XML and PHP, because this is mainly what Magento is built on.
Additionally to the official documents, there are a lot of helpful and very diverse tutorials out there that explain the mechanics of Magento. A web search helps, and I can recommend everything by Alan Storm, for example this litte module: http://alanstorm.com/magento_list_module
As soon as creating an extension works for you, you will also find a lot of tutorials on how to alter the product-view, or you can then post a more specific question here or on magento.stackexchange.com.
I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.
Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.
We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.
I have an annoying problem with my new grails app. I'm trying to mock up a design for a site that I will be making but whenever I do changes in my css it won't affect the running application. No matter how big changes I do I have to stop the application and then run it again.
This is very frustrating, I've turned of cache in Chrome and even if I go to the specific document the resource is still the old. What can I do to solve this problem? I can make changes in my gsp files and the changes will appear but not in my css.
I am currently loading the resource within a layout file like this:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'app.css')}" type="text/css">
If you need me to provide any more information, please just ask. I am using grails 2.2.0.
Add this to your Config.groovy (probably just for development)
grails.resources.debug = true
Read the docs for more info.
It looks like Gregg's answer doesn't work for 1.3.7 (maybe that is something added in 2.x?). A method I found that makes quick CSS updates possible is to include a separate GSP as a template in the page header.
That is, create a file called "_css.gsp" (underscore prefix is required) in the same directory as your view files, fill it with standard css surrounded by html style tags, and then include the following in your layout header or page:
<g:render template="css" />
With that in place, the content of _css.gsp is injected into the page. And I can make changes to _css.gsp and they are immediately reflected after page refresh without having to restart Grails. Hope this helps someone in Grails pre-2.x!