I am working on a Vue3/Laravel8 app, that has to support english and arabic languages. Problem is that there is a huge font-size difference between the en and ar locales:
I've been looking for a while now for a way to change the arabic font-size but it doesn't seem simple.
First I tried finding a way in vue-i18n without success. It would be most convenient if that is possible.
Then I tried going the CSS route, using the :lang(ar) selector but it depends on html or in my case laravel.blade and controlling project language seems to be a hassle, creating middleware and controllers.
Is there a convenient way to do that?
Vue 3.2 introduced some new features for single file components (SFC):
https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css
So in your case you could try something like this (untested):
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
lang: 'en',
},
},
computed() {
fontSize() {
if (this.lang === 'ar') {
return '1.5em';
}
return '1em';
},
},
}
</script>
<style>
.text {
font-size: v-bind(fontSize);
}
</style>
Related
Our design team has shared some HTML code with us, based on which I have to build the UI in React Native.
There are some tags like:
<link rel="Stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
If I want to adapt these to React Native, how should it be? Or should I develop a React Native app separately without taking any reference from the HTML?
You can use react-native-css-transformer module
install : yarn add --dev react-native-css-transformer
For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
Add this to metro.config.js in your project's root (create the
file if it does not exist already):
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-css-transformer")
},
resolver: {
sourceExts: [...sourceExts, "css"]
}
};
})();
Example
App.css
.myClass {
color: blue;
}
.myOtherClass {
color: red;
}
.my-dashed-class {
color: green;
}
Usage
import styles from "./App.css";
<MyElement style={styles.myClass} />
<MyElement style={styles["my-dashed-class"]} />
Documention :
react-native-css-transformer
You can't use HTML tags directly in react native projects,
So you have got two options -
Re write code with React Native elements such View etc..
Import those parts as individual stand by own webviews, https://github.com/react-native-community/react-native-webview/blob/master/README.md
I was wondering if there is a good practice on how to write your HTML code in order to get better Sentry.io breadcrumbs inside of the issues.
It's not possible to identify the elements that the user has interacted and I think using CSS class or IDs for it is not the ideal - although we can customize the breadcrumbs, looks like it's not a good practice to get the text inside the tag as per some issues found on Sentry Github repository.
I was thinking about aria-label, does anyone has any advices on it?
Right now is very hard to understand the user steps when reading the breadcrumbs.
This can be solved using the beforeBreadcrumb hook / filtering events.
Simply add
beforeBreadcrumb(breadcrumb, hint) {
if (breadcrumb.category === 'ui.click') {
const { target } = hint.event;
if (target.ariaLabel) {
breadcrumb.message = target.ariaLabel;
}
}
return breadcrumb;
}
... to your Sentry.init() configuration.
Sentry.init({
dsn:...
Resulting in something like this:
Sentry.init({
dsn: '....',
beforeBreadcrumb(breadcrumb, hint) {
if (breadcrumb.category === 'ui.click') {
const { target } = hint.event;
if (target.ariaLabel) {
breadcrumb.message = target.ariaLabel;
}
}
return breadcrumb;
}
});
More about this here: sentry.io filtering events documentation
I have been fighting with ES6 trying to come up with, what should be, a pretty straightforward operation. I want to call JSON API data for Bitcoin from one of the three following websites:
https://cryptowat.ch
https://coinmarketcap.com/
https://www.cryptocompare.com/
All three sites API endpoints go straight to the price I want and I think this may be the problem. There is no array of data, just the specific price. In my example using #3 above, the only object is "USD". That being said, I think I'm overthinking the process as getting into APIs with much more data and arrays of data -- I have accomplished using ReactJS.
Trying to reach a single endpoint that shows up as the "State" in the React DOM Inspector as "USD" and is pulling in the correct price, I cannot get the price to render on the page even though ReactJS is seeing it and capturing it.
My code:
var BitcoinApp = React.createClass({
getInitialState: function() {
return {
"USD": []
}
},
componentDidMount: function() {
var th = this;
this.serverRequest =
axios.get(this.props.source)
.then(function(result) {
th.setState({
USD: result.data.USD
});
})
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<span>
{this.state.USD.map(function(Data) {
return (
<div key={Data.USD} className="testbtc">
<p>{Data.USD}</p>
</div>
);
})}
</span>
)
}
});
ReactDOM.render(<BitcoinApp source="https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD&e=Coinbase" />, document.querySelector("#btcPrice"));
I will mention that I have done a lot of research into this and have found a lot of answers -- all different! Everyone knows the ReactJS docs are severely outdated so finding the right path with ReactJS is difficult to say the least. Also, I'm using "axios" to "GET" the API data as I've read that "fetch" isn't globally supported yet? Is this still the case in 2017?
Using the above method, I can see this in the Inspector:
But when I go over to the "Console" portion of the inspector, I'm told that "this.state.USD.map is not a function".
I feel like I'm right on the cusp of solving this task, but I think I'm getting something wrong with the mapping of the promise.
the problem is that:
th.setState({
USD: result.data.USD
});
is seting not iterable object. I mean that this.state.USD.map is not a function means that USD is not an array (and you can see this in console).
Try this to see what happens:
th.setState({
USD: [result.data.USD]
});
However tho, you wrote:
There is no array of data, just the specific price.
then I think the best solution is to change just the render method and initial state:
render: function() {
return (
<span>
<div className="testbtc">
<p>{this.state.USD}</p>
</div>
</span>
)
}
getInitialState: function() {
return {
"USD": "",
}
},
I am upgrading some older react component I inherited (v0.10.0) to work with the latest version of react (v0.14.8).
The following scenario stopped working:
// within a react component
onClick: function() {
// DO SOMETHING
}
getDefaultProps: function () {
return {
someProp: 'prop',
onClick: this.onClick
}
}
This is easily resolved moving the code into an anonymous function, like the following:
getDefaultProps: function () {
return {
someProp: 'prop',
onClick: function() {
//DO SOMETHING
}
}
}
My question is: why has the visibility of 'this' changed at that level and what's the best way to refactor this code? And what if I had-to/wanted-to use 'this' at that level?
Any help appreciated, as a disclaimer I am a react super-beginner!
The result of getDefaultProps() is shared across all instances of a component. That means that the result can't rely on any particular instance of the component. The reason it changed is likely because of the performance benefit from caching, although I can't say for sure.
As for refactoring the code, I'm not sure there's a silver-bullet here. From my perspective what you currently have seems like an anti-pattern. Props are meant to be passed in by consumers that have no knowledge of the inner workings of the component, so it seems odd that a default value for a prop would depend on the inner workings. Without knowing exactly what you're doing, I would say your best bet is to just use null as the default value for the prop, then check the value at runtime when you do have access to the this context.
handleSomeAction() {
if (!this.props.onClick) {
// DO SOMETHING
}
}
I searched around on Google, here on StackOverflow, probably-now-outdated HTML5 spec's, and have not found an answer. I feel as though I'm missing something obvious.
I'm wondering if there is a way to specify when creating an HTML5 custom element, that users of that new element should (or must, to be 'valid' to the element's spec) only use it once per document?
For example with HTML's elements, 'head', 'body', 'main', etc., should only be used once within a document. I have not been able to find a way to do this with custom elements. Is this possible, either with vanilla HTML5, Polymer, or some other means?
Thanks to any who can help.
Use built-in callbacks to track the usage of the custom element:
var MyElementPrototype = Object.create(HTMLElement.prototype);
MyElementPrototype.len = 0;
MyElementPrototype.attachedCallback = function() {
MyElementPrototype.len++;
if (MyElementPrototype.len > 1) {
alert('The Document is not Valid'); // Do Something
}
};
MyElementPrototype.detachedCallback = function() {
MyElementPrototype.len--;
};
document.registerElement(
'my-element',
{
prototype: MyElementPrototype
}
);
If you just want to validate the document, you can do it easily with JavaScript.
JsFiddle: http://jsfiddle.net/4AXaS/
HTML:
<div>Lorem</div>
<div>Ipsum</div>
JavaScript:
$(function () {
if ($('div').length > 1) {
alert("Can't use this element more than once in the document");
}
});