janttoExperiences of Coding an Open Source Winston Transport
NOTE: Originally published on March 23rd, 2019 Lately I've had the time to think about logging in microservices. There seem to be a lot of options, but after looking at them I felt that the open source community around SRE isn't as mature as I thought it would be. What I mean by this is that the most common options seem to require a lot of configuration and require at least some sort of deep dive into the documentation just to get a simple central point for microservice logs. Since ...
janttoUsing Notion as a CMS for anything that reads markdown
PrefaceAs you might see from the fact that this blog resides on Mirror instead of Notion, I didn’t end up using this, but I reckon some might get usage out of the code that I wrote. :) TL;DR? *The finished code can be found, forked and tinkered with behind this link: * https://github.com/JaniAnttonen/notion-to-md-workerBackgroundWhile looking out for fun new things to try out on my personal website, I thought of using an external CMS for my blog posts, music and photos. Notion works well for ...
janttoExperiences of Coding an Open Source Winston Transport
NOTE: Originally published on March 23rd, 2019 Lately I've had the time to think about logging in microservices. There seem to be a lot of options, but after looking at them I felt that the open source community around SRE isn't as mature as I thought it would be. What I mean by this is that the most common options seem to require a lot of configuration and require at least some sort of deep dive into the documentation just to get a simple central point for microservice logs. Since ...
janttoUsing Notion as a CMS for anything that reads markdown
PrefaceAs you might see from the fact that this blog resides on Mirror instead of Notion, I didn’t end up using this, but I reckon some might get usage out of the code that I wrote. :) TL;DR? *The finished code can be found, forked and tinkered with behind this link: * https://github.com/JaniAnttonen/notion-to-md-workerBackgroundWhile looking out for fun new things to try out on my personal website, I thought of using an external CMS for my blog posts, music and photos. Notion works well for ...
Subscribe to jantto
Subscribe to jantto
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
NOTE: Originally published on July 2nd, 2018
Disclaimer: this is not a package for React Native. The name refers to the native HTML element.
Lately in a project I wanted to make a progressive web app with a mobile-friendly UI with React. All was fine and dandy until I wanted to use native HTML form elements due to their good, integrated user experience with mobile devices.
You see, the HTML standard wasn't exactly made for handling JSON or any other structured data format. For example, our star of the day, select, can only handle strings as values. So, what do?
Easy. Just JSON.stringify() the input and JSON.parse() the output. Right?
class ForFun {
render() {
const { data } = this.props.data
return (
<select>
{data.map(option => (
<option
value={JSON.stringify(option.value)}
key={`option-${JSON.stringify(option)}`}
>
{JSON.stringify(option.label)}
</option>
))}
</select>
)
}
}
Wrong. Well, partly right. There's still more work before we can fully use the select element in React. It's a shame really that to fully use it you need to make it a stateful, separate component.
In addition to the inconvenience with handling inputs and outputs, you also need to update the view with the selected label on change, and propagate the value back to the data handler. There were some packages available on npm that do just this – aiming to modernize/reactify the select element.
The problem with a lot of these is that they don't use the native element, but rather approximate its behaviour with CSS + Javascript events, ending in a bloated mess of a package which results in a pre-styled drop-down menu. This, in my opinion, defeats the purpose.
After many iterations I had what the application needed. It was then I realized that I wanted to make this open source, since I couldn't find the correct package myself when I needed it. I tried to imagine all possible scenarios on how it could be used, implemented the possibilities to use it as an uncontrolled and a controlled input, and changed the class names and other identifiers to be more generic.
You can find more information on react-select-native in the following links:
The package is still in development, but be sure to test it out and tell if there's any code that's breaking your application or could need some love.
NOTE: Originally published on July 2nd, 2018
Disclaimer: this is not a package for React Native. The name refers to the native HTML element.
Lately in a project I wanted to make a progressive web app with a mobile-friendly UI with React. All was fine and dandy until I wanted to use native HTML form elements due to their good, integrated user experience with mobile devices.
You see, the HTML standard wasn't exactly made for handling JSON or any other structured data format. For example, our star of the day, select, can only handle strings as values. So, what do?
Easy. Just JSON.stringify() the input and JSON.parse() the output. Right?
class ForFun {
render() {
const { data } = this.props.data
return (
<select>
{data.map(option => (
<option
value={JSON.stringify(option.value)}
key={`option-${JSON.stringify(option)}`}
>
{JSON.stringify(option.label)}
</option>
))}
</select>
)
}
}
Wrong. Well, partly right. There's still more work before we can fully use the select element in React. It's a shame really that to fully use it you need to make it a stateful, separate component.
In addition to the inconvenience with handling inputs and outputs, you also need to update the view with the selected label on change, and propagate the value back to the data handler. There were some packages available on npm that do just this – aiming to modernize/reactify the select element.
The problem with a lot of these is that they don't use the native element, but rather approximate its behaviour with CSS + Javascript events, ending in a bloated mess of a package which results in a pre-styled drop-down menu. This, in my opinion, defeats the purpose.
After many iterations I had what the application needed. It was then I realized that I wanted to make this open source, since I couldn't find the correct package myself when I needed it. I tried to imagine all possible scenarios on how it could be used, implemented the possibilities to use it as an uncontrolled and a controlled input, and changed the class names and other identifiers to be more generic.
You can find more information on react-select-native in the following links:
The package is still in development, but be sure to test it out and tell if there's any code that's breaking your application or could need some love.
No activity yet