font list causes 'expected "indent"' - stylus

When I try to compile the stylus below stylus throws a ParseError expected "indent", got "outdent".
body
font 18px Arial, ​sans-serif
If I remove sans-serif
body
font 18px Aria
It compiles fine. What's going on here?

You have invisible U+200B (zero width space) character before sans-serif. If you remove it, all will be fine.

Related

React with Chrome : big pre tag with monospace code

In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.

React output does not preserve line breaks

Is there a way to preserve line breaks from user input. At the moment I am just getting the user input sending it to mongoDb and returning that text. However if my input is :
"new
line",
my output would be "new line".
Can anyone suggest a fix?
Use css white-space for styling it.
.foo {
white-space: pre-line;
}
a small addition to #FELIXMOSH's correct answer: also use word-wrap because white-space property can cause overflowing sometimes. And apply this css to the element that will host the mongodb data.
anyClass {
white-space: pre-wrap;
word-wrap: break-word;
}

How to turn off header feature in CSVToHtmlTable library

I'm using this CSV to HTML table library, and it's working great. My problem is that, when i upload a csv that does not contain headers, the first row is displayed as the header row instead. I would like the header row displayed only if there is a header obviously. Any idea how?
This is the library i'm using:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter)}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
header="th"/>
And this is the css for 'th', if it is necessary:
th {
/*background-color: rgb(177, 176, 176); */
background-color: #222222;
color: white;
font-size: 13px;
font-weight: 400;
border-right: 1px solid #ddd;
height : 38px;
}
According to Wikipedia, CSV doesn’t have a standardized way to tell if the file has a header or not. You could of course come up with some way to detect the header’s presence, applicable to your data set.
For your convenience, the NPM package you are using has a prop called hasHeader. By setting it, you tell the component whether to render a header or not. The default value is true.
So, you can remove the header from the element simply by giving your <CsvToHtmlTable /> element a false as its hasHeader prop.
Like this:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter}
hasHeader={false}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
/>
Hope I could be of help! Ask away if you have any further doubts!

How to highlight contents of parenthesis in Atom

I have just started to use Atom editor these days. Before that, I have used python IDLE. IDLE highlight the contents of parenthesis for us when we just created parenthesis. But, Atom does not.
Do you know any themes or packages to make it possible in Atom?
You can use this selector: atom-text-editor .bracket-matcher .region, :host .bracket-matcher .region to highlight the brackets any way you want.
For example:
atom-text-editor .bracket-matcher .region,
:host .bracket-matcher .region {
border-bottom: none;
background: red;
}
This will make the brackets have a bright red highlight.
You can try Material Theme, I'm using it and parenthesis is auto-created. Another choice is to install a package named BracketHighlighter.

Intellij2016 Angular2 sass warnigns for :host selector

Angular 2 has this special selector to reference its own component like:
:host
display: block
height: 100% !important
width: 100%
text-align: center
position: relative
But Intellij do not present me any way to supress this warnign. It confuses me when I am looking for actual errors on the Project folders
There is nothing wrong with Intellij. It is using Sass default escaping characther.
The problem I was having is due to an issue with Libsass, which Gulp-sass uses under the hood to compile sass, instead of the original ruby implementation. Libsass does not need the escaping character, so when I escape to avoid Intellij error, it compiles the escape character as well.
I am using Gulp-ruby-sass now and everything works just fine, meaning I can escape the :host selector the way Intellij provides

Resources