import React, { useState } from 'react' import { useRef } from 'react' function TextArea({UserText,setUserText}) { const [timerStart,setTimerStart]=useState(false) const timerRef=useRef(null) if (timerRef.current) { clearTimeout(timerRef.current); } timerRef.current = setTimeout(() => { console.log(UserText); timerRef.current = null; }, 20000) const handleUserinput=(event)=>{ setUserText(event.target.value) if(!timerStart){ setTimerStart(true) } } return ( 
  </div> ) } export default TextArea </pre> i want to achieve that when user starts writing in textarea exactly 20 seconds later whatever is inside userText will be logged to console. <br /> </div>   submitted by   <a href="?id=25753"> Available_Canary_517 </a>   to   <a href="?id=10387"> developersIndia </a> <span><a href="?id=3905">[link]</a></span>   <span><a href="?id=21460">[comments]</a></span></p>
<hr />
<p>2024.05.14 13:54 <i style="color:green;">Available_Canary_517</i> <b>i am trying to build a reactjs app for typing speed but i dont know how to implement the function to fire comparsion after some time</b></p>
<p><div class="md">```<br /> import React, { useState } from 'react' import { useRef } from 'react' function TextArea({UserText,setUserText}) { const [timerStart,setTimerStart]=useState(false) const timerRef=useRef(null) if (timerRef.current) { clearTimeout(timerRef.current); }<br /> timerRef.current = setTimeout(() => { console.log(UserText); timerRef.current = null; }, 20000)<br /> const handleUserinput=(event)=>{ setUserText(event.target.value) if(!timerStart){ setTimerStart(true) }<br /> } return (<br /> <div> <textarea style={{ maxWidth: '400px', width: '100%', height:'200px', margin:'1rem auto', display:'block', overflowWrap: 'break-word', whiteSpace: 'pre-wrap', fontSize:'1.3rem', verticalAlign: 'top' }} onChange={handleUserinput} value={UserText} /> </div> ) } export default TextArea<br /> ```<br /> i want to achieve that when user starts writing in textarea exactly 20 seconds later whatever is inside userText will be logged to console.<br /> </div>   submitted by   <a href="?id=7592"> Available_Canary_517 </a>   to   <a href="?id=11880"> learnjavascript </a> <span><a href="?id=14794">[link]</a></span>   <span><a href="?id=8100">[comments]</a></span></p>
<hr />
<p>2024.05.14 12:45 <i style="color:green;">Suitable-Wafer8563</i> <b>He Cong for Harper’s Bazaar Italy 11 Imaginative ✨editorial✨ Photography by Ben Toms & styling by Kate Shillingford ~ ‘The Bubble’ 🫧</b></p>
<p><table> <tr><td> <a href="?id=4799"> <img src="https://b.thumbs.redditmedia.com/6gbHRdW9PScLUHwW5YUh42tWv0IQpuFh8_ed6phxWOQ.jpg" alt="He Cong for Harper’s Bazaar Italy 11 Imaginative ✨editorial✨ Photography by Ben Toms & styling by Kate Shillingford ~ ‘The Bubble’ 🫧" title="He Cong for Harper’s Bazaar Italy 11 Imaginative ✨editorial✨ Photography by Ben Toms & styling by Kate Shillingford ~ ‘The Bubble’ 🫧" /> </a> </td><td>   submitted by   <a href="?id=12311"> Suitable-Wafer8563 </a>   to   <a href="?id=7219"> whatthefrockk </a> <span><a href="?id=29969">[link]</a></span>   <span><a href="?id=2498">[comments]</a></span> </td></tr></table></p>
<hr />
<p>2024.05.14 12:18 <i style="color:green;">rob_smi</i> <b>PNG export from an SVG string via painting on the canvas only works after several attempts.</b></p>
<p><div class="md">I have a mind mapping app that has been running well on Android for a few years now. I have been trying to publish it for iOS and MacOS for some time now. On iOS (as an app) and MacOS (in the browser for testing) I have a problem with the export. The app is a project in Angular, Cordova, Typescript. The problem only occurs in the Safari browser, which is also used in the Cordova version for iOS. I was able to test it on my Mac and an iPhone. The error does not occur on the Mac in Chrome.<br /> <strong>The error</strong><br /> If I export a mind map that contains images as an image (.png), the images of the nodes are not displayed in the exports. Everything else in the map is exported correctly, only the images are missing. Only when I export the map three times are the images present in the export. If I add a new image and export it again, the image is only visible in the exported image after 3 exports. It is interesting that the export as SVG, which I also offer, contains the images of the nodes. So the SVG string that I create has all the necessary information.<br /> <strong>The base</strong><br /> The mind map consists of various things. HTML and CSS for the frames, lines etc... The images of the nodes are saved as Base64 and each node is in a Foreign Object.<br /> <strong>Example of the SVG export</strong><br /> Mindmap with 2 nodes and the Base64 characters of the node images have been replaced with XXX.<br /> <pre><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1394" height="1000" style="-webkit-transform: translate(0px,0px)" viewBox="28.5 196 494 200"> <defs xmlns="http://www.w3.org/1999/xhtml"> <style type="text/css">@font-face { font-family: FontAwesome; src: url("fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("fontawesome-webfont.woff?v=4.7.0") format("woff"), url("fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; }.mmp-container_node:not(.hidden) { cursor: pointer; }.mmp-container_branch { stroke-width: 2px; stroke: rgba(0, 0, 0, 0.1); }.node-container { display: table; box-sizing: border-box; border: 2px solid transparent; padding: 3px; border-radius: 8px; color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.06); }.node-container.root { padding: 8px; }.node-container.root:not(.selected) { background-color: rgba(0, 0, 0, 0.1); }.node-container.root .node-box { border-color: rgba(0, 0, 0, 0.4); }.node-container .node-box-container { display: block; background-color: rgb(255, 255, 255); max-width: 200px; width: max-content; }.node-container .node-box { display: grid; grid-template-columns: 6px auto 1fr 6px; grid-template-rows: 6px auto auto 6px; grid-template-areas: ". . . ." ". e1 e2 ." ". r1 r1 ." ". . . x"; overflow: hidden; padding: 0px; border: 3px solid rgba(0, 0, 0, 0.2); background-color: rgb(255, 255, 255); }.node-container .node-box.image .node-text, .node-container .node-box.icon .node-text { grid-row-start: e2; grid-column-start: e2; grid-row-end: e2; grid-column-end: e2; }.node-container .node-box-container, .node-container .node-box { border-radius: 4px; }.node-container .node-text { grid-row-start: e2; grid-column-start: e2; grid-row-end: e2; grid-column-end: e2; overflow-wrap: break-word; align-self: center; display: block; max-width: 200px; font-size: 13px; padding: 4px 8px; }.node-container .node-image { align-self: center; grid-row-start: e1; grid-column-start: e1; grid-row-end: e1; grid-column-end: e1; width: 50px; height: 50px; border-radius: 2px; background-position: center; background-size: cover; }@font-face { font-family: mdzRoboto; src: url("Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Regular-webfont.woff") format("woff"), url("Roboto-Regular-webfont.ttf") format("truetype"), url("Roboto-Regular-webfont.svg#robotoregular") format("svg"); font-weight: 400; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Light-webfont.woff") format("woff"), url("Roboto-Light-webfont.ttf") format("truetype"), url("Roboto-Light-webfont.svg#robotolight") format("svg"); font-weight: 300; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Bold-webfont.woff") format("woff"), url("Roboto-Bold-webfont.ttf") format("truetype"), url("Roboto-Bold-webfont.svg#robotobold") format("svg"); font-weight: 700; font-style: normal; }* { font-family: Roboto, mdzRoboto, sans-serif; } </style> </defs> <g transform="translate(-163,-290) scale(1)" style="-webkit-transform: translate(0px,0px)"> <path class="mmp-container_branch mapVizContainer_branch p_root" id="6bfbb80e-8fe4-0b25-2954-159327ce0afb_branch" d="M163,290C264.5,290,264.5,290,398,290" style="fill: none;"/> <g class="mmp-container_node mapVizContainer_node right" id="root" transform="translate(163,290)"> <foreignObject x="-84.5" y="-44" width="185" height="100" style="padding: 0px 8px;"> <div xmlns="http://www.w3.org/1999/xhtml" class="node-container root"> <div class="node-box-container"> <div class="node-box image"> <div class="node-image" style="background-image: url("data:image/png;base64,XXX;);"></div> <div class="node-text">Test Map 1</div> </div> </div> </div> </foreignObject> </g> <g class="mmp-container_node mapVizContainer_node right" id="6bfbb80e-8fe4-0b25-2954-159327ce0afb" transform="translate(398,290)"> <foreignObject x="-58.5" y="-39" width="133" height="90" style="padding: 0px 8px;"> <div xmlns="http://www.w3.org/1999/xhtml" class="node-container"> <div class="node-box-container"> <div class="node-box image"> <div class="node-image" style="background-image: url("data:image/png;base64,XXX");"></div> <div class="node-text">test</div> </div> </div> </div> </foreignObject> </g> </g> </svg> </pre> <strong>This is how I create the .png file to be exported.</strong><br /> I can view all this content in the map view of the app. When exporting to an image, I take this information, turn it into an SVG, have the browser draw it on the canvas and then output it as a graphic. Something must be going wrong at this point.<br /> <pre>private exportAsImage( mindMap: MindMap, scale?: number, type: string = "png" ): Observable<any> { return new Observable(o => { this.progress.start(this.progress.PROGRESS_MAJOR); this.mmpMap.export(this.mapVizService.getExportClassList(mindMap), (svgStr: string) => { this.exportService.imageFromSVGString(svgStr, type, scale).pipe( switchMap(img => of( Utils.dataURItoFileObject( img.dataUri, `${Utils.sanitizeFilename(mindMap.title)}.${type}` ) ) ), switchMap((fileObject: FileObject) => this.mapsService.saveAsTemp(fileObject, true, { message: this.translate.instant("mdz.mindmap.saveas.message"), // subject: this.translate.instant("mdz.mindmap.saveas.subject"), subject: fileObject.name, url: `www.myURL.com` }, true) ) ).subscribe(() => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.next(); o.complete(); }, err => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.error(err); o.complete(); }); }) }); } </pre> <strong>What I have already tried.</strong><br /> I have already tested various things such as time delays etc..., none of which change anything. It seems to me that it's a combination of the caching and the order or speed at which the images are loaded. Only the speed can't be, because built-in delays don't change anything.<br /> <strong>My guess</strong><br /> But it must have something to do with Safari because on the Mac in Chrome it runs without problems... Maybe it can't handle so many base64 images or it exports faster than it renders? Whereby the SVG export contains all the information and when I open the SVG, all the content is also displayed in the browser in seconds. So something must happen when painting on the canvas and outputting as an image.<br /> It doesn't really make sense, I'm really at the end of my ideas. What can you do?<br /> I really hope you can help me. A mind mapping app without image export makes little sense. And since the app otherwise works great, I'm really getting desperate. :(<br /> Thanks a lot!<br /> Rob<br /> </div>   submitted by   <a href="?id=3674"> rob_smi </a>   to   <a href="?id=21811"> iosdev </a> <span><a href="?id=9534">[link]</a></span>   <span><a href="?id=3380">[comments]</a></span></p>
<hr />
<p>2024.05.14 11:24 <i style="color:green;">jvpts11</i> <b>My touchable opacity all over my code stopped working</b></p>
<p><table> <tr><td> <a href="?id=794"> <img src="https://b.thumbs.redditmedia.com/R24s6G-2YTVZ6e-Klx11duUaATdM4u4UolPYM75Q-fA.jpg" alt="My touchable opacity all over my code stopped working" title="My touchable opacity all over my code stopped working" /> </a> </td><td> <div class="md">Well suddenly when i implemented a new touchable opacity to serve as a button, not only the onPress doesn't excecute what i want but when i touch this touchable opacity suddenly all touchable opacities in my entire app stopped working, here are the images to better explain:<br /> ​<br /> ​<br /> <a href="?id=8347">this one which says reset is the touchable opacity in question</a><br /> ​<br /> <a href="?id=18574">suddenly when i click that touchable opacity all other touchable opacities in my entire app stop working</a><br /> <pre>import React, { useState } from "react"; import {ImageBackground, View,Text, Pressable, Image, Switch, Modal, Button} from 'react-native' import PlayButton from "../PlayButton"; import { useNavigation } from "@react-navigation/native"; import { TouchableOpacity } from "react-native-gesture-handler"; import { useVibration } from "../Contexts/VibrationContext"; const ConfigurationScreen : React.FC = () =>{ const [modalVisible, setModalVisible] = useState(false); const [resetModalVisible,setResetModalVisible] = useState(false); const { vibrationEnabled, setVibrationEnabled } = useVibration(); const navigation = useNavigation(); const toggleVibration = () => { setVibrationEnabled(!vibrationEnabled); }; const handleGoBack = () => { navigation.goBack(); }; return( <View style={{flex:1}}> <ImageBackground source={require('../../assets/background/background.png')} style={{width:'100%',height:'100%'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'center',marginTop:60}}> <Text style={{color:"#ffffff",fontSize:30,fontFamily:'Anybody_SemiCondensed-Bold',textAlign:'center',marginLeft:120}}>Settings</Text> <Pressable onPress={handleGoBack} style={{marginLeft:60}}> <Image source={require('../../assets/icons/icon-close-settings.png')} style={{width:35,height:35}}/> </Pressable> </View> <View style={{flex:1,flexDirection:'column',justifyContent:'center'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'space-evenly'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',marginLeft:10}}> <Image source={require('../../assets/icons/icon-language.png')}/> <Text style={{color:'#FCE22D', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:25,textAlign:'justify',marginTop:10}}>Language</Text> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',marginRight:20}}> <Text style={{color:'#ffffff',fontFamily:'Anybody_SemiCondensed-Regular',fontSize:18,marginTop:15,marginRight:20}}>English</Text> <TouchableOpacity style={{backgroundColor:'yellow',borderRadius:20, width:50,height:50}} onPress={() => console.log('eae')}> <Image source={require('../../assets/icons/icon-arrow-settings.png')}/> </TouchableOpacity> </View> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'space-evenly'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',marginLeft:10}}> <Image source={require('../../assets/icons/icon-vibration.png')}/> <Text style={{color:'#FCE22D', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:25,textAlign:'justify',marginTop:10}}>Vibration</Text> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',marginRight:20}}> <Text style={{color:'#ffffff',fontFamily:'Anybody_SemiCondensed-Regular',fontSize:18,marginTop:15,marginRight:20}}>{vibrationEnabled ? 'On': 'Off'}</Text> <Switch style={{width:50,height:50}} value={vibrationEnabled} onValueChange={toggleVibration}/> </View> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'space-evenly'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',marginLeft:10}}> <Image source={require('../../assets/icons/icon-mute.png')}/> <Text style={{color:'#FCE22D', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:25,textAlign:'justify',marginTop:10}}>Mute</Text> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',marginRight:20}}> <Text style={{color:'#ffffff',fontFamily:'Anybody_SemiCondensed-Regular',fontSize:18,marginTop:15,marginRight:20}}>On</Text> <Switch style={{width:50,height:50}}/> </View> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'space-evenly'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',marginLeft:10}}> <Image source={require('../../assets/icons/icon-reset.png')}/> <Text style={{color:'#FCE22D', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:25,textAlign:'justify',marginTop:10}}>Reset</Text> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',marginRight:20}}> <TouchableOpacity style={{backgroundColor:'yellow',borderRadius:20, width:50,height:50}} onPress={() => setResetModalVisible(true)}> <Image source={require('../../assets/icons/icon-arrow-settings.png')}/> </TouchableOpacity> </View> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'space-evenly'}}> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',marginLeft:10}}> <Image source={require('../../assets/icons/icon-privacy-policies.png')}/> <Text style={{color:'#FCE22D', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:25,textAlign:'justify',marginTop:10}}>Privacy Policies</Text> </View> <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',marginRight:20}}> <TouchableOpacity style={{backgroundColor:'yellow',borderRadius:20, width:50,height:50}} onPress={() => setModalVisible(true)}> <Image source={require('../../assets/icons/icon-arrow-settings.png')}/> </TouchableOpacity> </View> </View> </View> </ImageBackground> <Modal animationType="slide" transparent={true} visible={modalVisible}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}> <Text style={{color:'black',fontSize:30,fontWeight:'bold', textAlign:'center',margin:20}}>Lorem Ipsium</Text> <Text style={{color:'black',fontSize:15, fontWeight:'bold',marginTop:20,marginBottom:20}}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in sem velit. Praesent eu faucibus ante. Nunc mattis nunc est, vitae mattis augue pretium sit amet. Morbi volutpat eget diam nec sollicitudin. Integer nulla nisl, vulputate ut dapibus vitae, tincidunt at sem. Nunc congue varius lacus. Donec a odio viverra metus pretium dictum ac a augue. In iaculis lectus neque. Donec mauris quam, blandit non libero non, vestibulum aliquet magna. Maecenas mauris dolor, vehicula tincidunt ex a, convallis dignissim sapien. Vestibulum lacus turpis, mattis id turpis a, suscipit laoreet erat. </Text> <Button title="Close" onPress={() =>setModalVisible(false)} /> </View> </View> </Modal> <Modal animationType="slide" visible={resetModalVisible}> <View style={{flex:1,flexDirection:'column',backgroundColor:'#FCE22D'}}> <View style={{alignSelf:'flex-end',justifyContent:'flex-start'}}> <Pressable onPress={() => setResetModalVisible(false)}> <Image source={require('../../assets/icons/icon-close-settings-black.png')} style={{width:35,height:35}}/> </Pressable> </View> <View style={{flex:1,justifyContent:'center',alignContent:'center'}}> <Text style={{textAlign:'center', fontFamily:'Anybody_SemiCondensed-Medium', fontSize:24}}>Are you sure you want to</Text> <Text style={{textAlign:'center', fontFamily: 'Anybody_SemiCondensed-Medium', fontSize:24}}>reset your game?</Text> <TouchableOpacity style={{ borderColor:'#100E2B', borderRadius:10, borderWidth:1, width:250, height:50, alignSelf:'center'}} activeOpacity={0.2} onPress={() => console.log('yay')}> <Text>Reset</Text> </TouchableOpacity> </View> </View> </Modal> </View> ) } export default ConfigurationScreen </pre> and there is the entire code of the component where the touchable opacity is<br /> </div>   submitted by   <a href="?id=27927"> jvpts11 </a>   to   <a href="?id=25224"> reactnative </a> <span><a href="?id=29858">[link]</a></span>   <span><a href="?id=7936">[comments]</a></span> </td></tr></table></p>
<hr />
<p></p><p><a href="http://activeproperty.pl/">http://activeproperty.pl/</a></p><p></p><h3></h3>
<ol><li></li></ol>
<p></p><div id="menu" class="menu">[ <a href="?id=5975">5975</a> ] [ <a href="?id=5976">5976</a> ] [ <a href="?id=5977">5977</a> ] [ <a href="?id=5978">5978</a> ] [ <a href="?id=5979">5979</a> ] [ <a href="?id=5980">5980</a> ] [ <a href="?id=5981">5981</a> ] [ <a href="?id=5982">5982</a> ] [ <a href="?id=5983">5983</a> ] [ <a href="?id=5984">5984</a> ] </div></div>
</body>
</html><!-- ID: 4312 | Time: 0.83378 Sec | Mem: 1753 KiB -->