After attaching big size folder (Desktop folder) as a project folder "Add folder" stopped working. Reinstalling didn't help. How can I solve this or what is the name of the file I should put project directiories in so there will be no need to use UI "Add folder". I am using Win 7 Ultimate.
Thank you!
The path to the file: C:\Users\%username%\AppData\Roaming\LiveReload\projects.json
projects.json sample:
{
"projects" : [
{
"customName" : "firstWebsite",
"disableLiveRefresh" : false,
"enableRemoteServerWorkflow" : false,
"rubyVersion" : "system",
"compilationEnabled" : true,
"numberOfPathComponentsToUseAsName" : 1,
"path" : "D:\\Websites\\Website1"
}
]
}
Related
Problem
I am currently create a React web app and I am creating my own components that also have their own CSS files. Currently I have to create a matching CSS file everytime I create a component. I was hoping for something sort of how like when you create a project in Visual Studio is will create a .aspx page as well as a .cs file along with it.
My current structure is ../src/components/DashNav.js and the matching stylesheet would be ../src/styles/components/DashNav.scss
Question
Does anyone know if there is a way to trigger a creation of a new file each time a js file is created?
If not, is there any extensions that anyone would recommend? I have already seen VSCODE Create File Folder but that doesn't do me really any good since I can just do this in the terminal.
Folder Templates is the extension that I'm using for this right now. Here is how I've set up my folder structure and and file templates in settings.json
"folderTemplates.structures": [
{
"name": "My Custom Template",
"omitParentDirectory": true,
"structure": [
{
"fileName": "<FTName>.js",
"template": "React Functional Component"
},
{
"fileName": "<FTName>.module.css",
"template": "CSS Module"
}
]
}
],
"folderTemplates.fileTemplates": {
"React Functional Component": [
"import styles from '<FTName>.module.css';",
"",
"export const <FTName> = (props) => {",
" return <div></div>;",
"};"
],
"CSS Module": ".<FTName | lowercase> {}"
}
I have a problem with Web Compiler with VS2015 Update 1 and Sass.
In my Scss file, i declared some images as background.
Example :
.example {
background-image: url(images/ex.jpg);
}
In the file compilerconfig.json, the outPutFile is not in the same directory.
In the file compilerconfig.json.defaults, i set relativeUrls as false in sass section.
When i compile, url becomes relative like :
.example {
background-image: url(../../../../../images/ex.jpg);
}
I have the same problem with imported file.
Is there any way to resolve this ?
I found how to disable relative urls :
the option is not to set in the file compilerconfig.json.defaults but in compilerconfig.json :
[
{
"outputFile": "../../../../../inetpub/wwwroot/ui/skins/test.css",
"inputFile": "Web/Stylesheets/test.scss",
"minify": {
"termSemicolons": true
},
"options": {
"relativeUrls": false,
"lineFeed": "crlf"
}
}
]
How can a third-party javascript library be made available for client-side use in Atlasboard? require doesn't work in widgets, and I don't want to have to import the whole library into every widget that uses the library.
Place the javascript library file (such as Chart.min.js) in assets/javascripts/.
In the JSON config for the dashboard(s) which will load the widgets that will rely on the library, add the name of the library to the layout.customJS array:
Example:
{
"title": "My Dashboard",
"titleVisible": false,
"description": "a neat dashboard",
"layout": {
"gridSize" : { "columns" : 20, "rows" : 12 },
"customJS" : ["Chart.min.js"],
"widgets" : [
...
]
},
"config": {
...
}
}
Nothing special needs to be done in the Widget. You can just use the library:
var graph = new Chart(ctx).Radar(data);
In Gruntfile.js for grunt-contrib-requirejs I can only register one task and I can only have one output file i.e. home_scripts.pack.js. However, I want to have as many as I want output files based on different 'include' criteria. For example, home_scripts.pack.js, checkout_scripts.pack.js, product_scripts.pack.js etc. This way each page will only load JS that is using:
This is invalid, however I want to do something similar:
requirejs: {
compile1: {
options: {
baseUrl: 'C:/project/js',
mainConfigFile: 'C:/project/js/app.js',
name: 'app',
paths: {
requireLib: 'C:/project/js/require.min'
},
*include: ['requireLib', 'home_page_internal.js'],*
*out: 'C:/project/js/home_scripts.pack.js'*
}
}
},
compile2: {
options: {
baseUrl: 'C:/project/js',
mainConfigFile: 'C:/project/js/app.js',
name: 'app',
paths: {
requireLib: 'C:/project/js/require.min'
},
*include: ['requireLib', 'checkout_internal.js'],*
*out: 'C:/project/js/checkout_scripts.pack.js'*
}
}
}
}
The code with asterisk above is the code I want to generate output files different for each page. However, if there is a more efficient way to generate and load large number of JS plugin files and modules through requireJS optimizer using grunt, I'm open to suggestions.
Thanks,
You need to take a look at RequireJS Multipage Example
It depicts how to use concatenation on basis of need of the page.
So your options will look like.
requirejs : {
compile : {
"baseUrl": "app",
"dir": "app/built",
"include": "main.js",
"paths": {
"angular": "bower_components/angular/angular.min",
"css" : "bower_components/require-css/css.min",
"text" : "bower_components/requirejs-text/text",
"css-builder" : "bower_components/require-css/css-builder",
"normalize" : "bower_components/require-css/normalize"
},
"modules" : [
{
"name" : "app",
"include" : ["text", "css"]
},
{
"name" : "modules/module1",
"include" : [],
"exclude" : ["app"]
},
{
"name" : "modules/module2",
"include" : [],
"exclude" : ["app"]
},
{
"name" : "modules/module3",
"include" : [],
"exclude" : ["app"]
} ]
}
}
Ignore other config and check modules config. It's an array which takes multiple AMD module and each will be concatenated in its own file.
In case of SPA, if you need to exclude any common modules which you dont want to be included in subsequent modules. In this case app module incorporates all the library layer and hence it is excluded from the subsequent modules.
I have a set of WYSIWYG editors that are all initialized via TinyMCE on demand.
In the previous version of TinyMCE I was able to easily remove buttons by specifying the button theme_advanced_buttons1, theme_advanced_buttons2 etc. But since the newest release of TinyMCE 4.0 , it seems as tho that no longer works.
I am running the modern theme, so maybe the theme_advanced_buttons1 doesn't work with the modern theme? I've tried theme_modern_buttons1 , but that didn't work.
I'm thinking it may have changed with the newest release, as there is a new toolbar with the options for 'File, Edit, Insert...' etc.
Anyone know how I can hide the buttons on initialization? Heres the code I'm trying:
```
// initialize tinyMCE editor on our movie description text area
function initialize_movie_descriptions() {
$('.movie_description_editor').each(function() {
var id = $(this).attr('id');
tinyMCE.init({
mode : "exact",
elements : id,
theme : "modern",
plugins: "wordpress,wplink, paste",
theme_advanced_buttons1: "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
o.content = o.content;
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
}
});
});
}
initialize_movie_descriptions();
```
Edit
Apparently changing the line plugins: "wordpress,wplink, paste", to plugins: "", seems to have removed the 'Insert' menu item in the first toolbar. I guess because it's not loading any plugins now??
If you don't want all buttons but keep some of the functionality you have to keep to plugins. Simply just add the buttons you want in toolbar. The Same way with the menu:
tinymce
.init({
...
plugins : [code fullscreen save table contextmenu paste textcolor" ],
//buttons you want to show, else set "toolbar:false"
toolbar : "insertfile undo redo | styleselect",
...
menu : {
...
edit : {
//menu edit
title : 'Edit',
//items of menu edit
items : 'undo redo | cut copy paste pastetext | selectall'
},
...
});
you can find a list of plugins with their configuration in tinyMCE here: http://www.tinymce.com/wiki.php/Plugins
I struggled with the same problem after updating Wordpress to version 4.0. I found the solution on the wiki-advanced-page of TinyMCE. In TinyMCE 4 "theme_advanced_buttons" is replaced by "toolbar". You probably want to hide the "menubar" too, see example below:
tinyMCE.init({
mode: "exact", // not needed
theme: "modern", // default - not needed. Only theme available in WP 4.0
height: height, // e.g. 100
menubar : false, // you probably don't want to show the [file] etc bar
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6",
toolbar : "formatselect,bold,italic,underline,removeformat", //choose buttons in bar
});
There's a fast way to remove everything you see: Using CSS. Maybe it's not the best one, but is the faster one:
#mceu_15, #mceu_17, #mceu_18 {
display:none; }
Those #mceu numbers are the icons I want to hide (added by annoying plugins ;)
NOTE: You have to add this css on your_theme/admin.css
If it doesn't work look / add in your theme functions this:
function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');} add_action('admin_enqueue_scripts', 'admin_style');