Given this JS code or CSS code in the WebStorm IDE:
const foo = {
z: 'zip',
a: 'zot'
}
or
.foo {
z-index: 1;
align-content: center;
}
Is there a way I code, select the code and reorder the property names alphabetically? To make:
const foo = {
a: 'zot'
z: 'zip'
}
or
.foo {
align-content: center,
z-index: 1
}
For CSS, you can enable Sort CSS properties in Settings | Editor | Code Style | Style Sheets | CSS | Arrangement and then use Code > Rearrange Code
For JS, no options are there out of the box. But you can use a third-party String manipulation plugin that supports lines sorting
CSS = Styling
JS = Animations / Logic, which is really CHANGING the behavior.
Therefore:
Use JS for that. Sort array by firstname (alphabetically) in Javascript
happy to help
Related
I'm using .mjml templates and VSCode. I had to install an extension for the highlighting to work correctly but I noticed by Prettier seems to transform inline CSS (which is pretty common in emails) from this:
p,
h1 {
color: #ffffff;
}
h1,
.text-h1 h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 16px 0;
font-weight: 700;
}
to this:
p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }
The only way I was able to prevent this is by adding a <!-- prettier-ignore --> before the <mj-style> tag but I was wondering if there isn't a better way (configuration?) to get the same result without the extra markup.
See:
https://github.com/mjmlio/mjml/issues/2557
Is there a way to tell Prettier that the following "block" has a specific markup type?
Based on my research and also the lack of answers, it looks like the overall MJML tooling ecosystem is not in the best of states. I think for now the best option is to use the workaround I provided. Here is a detailed breakdown of the options available.
Style element <mj-style>: (most likely the best option)
<!-- prettier-ignore -->
<mj-style css-inline="inline" />
.content {
color: green !important;
}
</mj-style>
Pros:
Works in the online visual editor by copy/pasting the markup.
Cons:
No Prettier formatting (ref).
An external CSS file:
<mj-include path="./default.css" type="css" css-inline="inline" />
Pros:
You can import a CSS file that will get normal Prettier treatment.
Standard pattern where CSS lives outside the document.
Cons:
It also won't work with the online MJML editor tool without merging back your CSS file. This is very annoying and makes it hard to maintain.
<mj-include> can report miss flagged error depending on our your project is setup.
It does not work with the "official" VSCode plugin (you have to use this one).
MJML inline styles:
<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />
Pros:
You don't need CSS.
Cons:
You possibly will repeat a lot of the same style and maintenance can become problematic.
Style element <mj-class>:
<mj-class name="blue" color="blue" />
Pros:
Benefits from the re-usability of CSS without having to use CSS, avoiding Prettier issues.
Cons:
Not as flexible as CSS in terms of selectors which can lead to repetition and maintenance issues.
I am trying to achieve the following behaviour in WebStorm:
https://github.com/bashmish/es6-string-css
I believe I can do this using language injection.
I have a TypeScript file with embedded css
const styles = */css*/`
.style {
color: red;
}
`
*/css*/ is not a valid Typescript syntax... For tagged templates like:
const styles = css`
.style {
color: red;
}
`
you can easily create language injections in Settings | Editor | Language Injections.
In 2019.2, it should be an injection of JS Tagged Literal Injection type, like:
for previous versions, see https://youtrack.jetbrains.com/issue/WEB-22106#focus=streamItem-27-2451611.0-0
I am trying to add the plugin: nativescript-fonticon
I am currently stuck on the part where I have to convert the css file.
In the readme it states that I have to configure my css and converter before I can start converting:
import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();
application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });
How am I supposed to do this in nativescript-vue?
You look like you're on the right track. You should put the initialising code in your main.js file (or whatever the entry point file is named).
Here's how to get it to work in NativeScript-Vue.
Download and extract fontawesome-free-5.9.0-web.zip from here.
Add webfonts/fa-brands-400.ttf, webfonts/fa-regular-400.ttf and webfonts/fa-solid-900.ttf to app/fonts directory.
Add css/fontawesome.css to app/assets directory. Remove any non fa-*:before classes from this file.
In your app's main.js. You should see a console log for each class when starting your app.
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
TNSFontIcon.debug = true
TNSFontIcon.paths = {
'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
In your app's main css file, e.g. app.scss.
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
Now use them in your view.
<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />
I have found a blog that actually uses the fonticons plugin and how to use it:
https://nativescript-vue.org/blog/using-fonticons/
EDIT:
After a few Nativescript and Nativescript-Vue updates it does not seem to work properly. It's rather hard to use.
I suggest importing the font and using the respective unicodes like this:
Data:
icon: '\ue905'
Markup:
<Label class="ico" :text="icon"/>
I have created a custom input in simple_form and I'm using Foundation 5.
class CurrencyInput < SimpleForm::Inputs::Base
def input
input_html_classes.unshift("string currency")
input_html_options[:type] ||= input_type if html5?
"$ #{#builder.text_field(attribute_name, input_html_options)}".html_safe
end
end
The input field created has the default browser style. How do I apply the Foundation text field styles to this currency field so that it looks like all my other text fields. I have tried using the class names used by Foundation for the other fields but it deosn't have any effect. I haven't been able to find any documentation on how to do this. How can I do this?Any help is appreciated.
Have a look at /bower_components/foundation/scss/foundation/components/_forms.scss in your Foundation installation.
Starting from line 407 (of the most latest Foundation) you should see:
/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0px;
#include form-element;
#if $input-include-glowing-effect == false {
#include single-transition(all, 0.15s, linear);
}
&.radius {
#include radius($input-border-radius);
}
}
There follows a number of styles that you can copy into your app.scss file to incorporate your <input type="currency"> into your final CSS. For example:
input[type="currency"] {
-webkit-appearance: none;
-webkit-border-radius: 0px;
#include form-element;
#if $input-include-glowing-effect == false {
#include single-transition(all, 0.15s, linear);
}
&.radius {
#include radius($input-border-radius);
}
}
You could simply add your type into those styles there, but I don't think it's a good idea to change this in foundation's own files as it would probably be removed by future updates to your local foundation.
I want to create a MediaWiki template which shows different text depending on where it is on a page.
Specifically, it is before the first heading it should show text like, "this template is applicable to this whole page"
Alternatively, if it is within a section on a page (after a heading) it should show text like, "this template is specifically applicable to this section".
I know there are templates that make use of "If" (like If pagename); is there any way of detecting the template's location on the page?
I don't think so. Your best bet would be to make multiple templates. That being said I'm sure you could write an extension that would do this.
Another way would be to add a variable in your template, that you change depending on which section it is in.
With a lot of help from a colleague the answer is below. Put this into a template (which you then call from all your other templates containing header / instruction / etc. text).
<includeonly><css>
div.headingText { color: blue; border: 2px solid blue; background: lightcyan; width: 461px; padding:0.5em 0.5em 0.5em 0.5em; display: none; margin-bottom:-6px; }
h2 + div.headingText, h3 + div.headingText, h4 + div.headingText, h5 + div.headingText, h6 + div.headingText { display:block; margin-top:5px; }
</css>
<div class="headingText">'''{{{1|This [[tag]] applies only to this section.}}}'''</div></includeonly><noinclude>
your explanatory text
</noinclude>
Notes:
This requires use of the CSS extension.
What this actually does is show certain text if the tag is included directly below a title and no text otherwise. (It has default text in parameter 1 in this example, which can be changed.)