#preventDefault

[nishantrana]

Unable to save. This form can’t be saved due to a custom setting error in Dynamics 365 / Dataverse.

Recently we got the below error while trying to assign the record. Unable to save. This form can’t be saved due to a custom setting. Turned out we had certain conditions in the OnSave event for the form, and if the record satisfies those conditions we were canceling the save event using executionContext.getEventArgs().preventDefault(); So it was the expected behaviour, just that the error…

[wellhealthhub]

Discover the Best DME Breast Pump Options Near Me: A Comprehensive Guide to Well Health Hub

Find the best DME breast pump options near you with Well Health Hub’s comprehensive guide. From hospital-grade pumps to wearable options, discover the perfect solution for your breastfeeding journey, including insights on using health savings accounts for purchasing DME breast pumps and tips for getting a breast pump through insurance. DME Store Locator DME Store Locator Enter Zip Code: Find…

[bdking71]

Why does SharePoint break middle-click? 😤 As devs, we rely on opening links in new tabs to keep flow intact. SharePoint Modern Pages hijack that—here’s a deep dive into why & how we can fix it. #SharePoint #WebDev #UX

[neveropen]

When to use PreventDefault() vs Return false in JavaScript ?

In Javascript, there are two methods- preventDefault() and Return false, that are used to stop default browser behaviour but their functionalities and uses are little different. This article shows how these two are different. JavaScript preventDefault() Method: This method stops the event if it is stoppable, meaning that the default action that belongs to the event will not occur. It just prevents the default browser behaviour. Developers use preventDefault() in many cases For example, When clicking on a link, prevent the link from following the URL When clicking on a checkbox, prevent Toggling a checkbox When clicking on a “Submit” […]

[kailashr2k]

Mastering Save Event Arguments in Power Apps: Real-Life Scenarios and Code Examples

Enhance control over save events in Power Apps! Explore methods to conditionally save, prevent errors, and manage autosave scenarios. Take your app to the next level with getSaveMode, preventDefault, and more! #PowerApps #Dynamics365

To make the most of save event arguments in Power Apps model-driven apps, it’s essential to understand how to manage and control save events during form submissions. The saveEventArgs class provides developers with methods for controlling the save process, including getSaveMode, isDefaultPrevented, and preventDefault. Let’s explore real-life scenarios where these methods become valuable. 1.…

[worldgoit]

React on Event Types

React is a popular JavaScript library used for building user interfaces. One of its key features is the ability to handle events efficiently and effectively. In this article, we will explore different event types in React and how to handle them.

  1. Introduction to React Events

In React, events are actions or occurrences that happen in the browser, such as a button click, input change, or form submission. React provides a synthetic event system that normalizes event handling across different browsers and provides additional functionality for managing UI updates and state.

2. Event Handling in React

Event handling in React can be done in two main ways: using class components and functional components. 2.1 Event Handling in Class Components In class components, event handling involves creating event handler methods. For example, to handle a button click event, you can define an onClick event handler method: class MyComponent extends React.Component { handleClick() { // Event handler logic } render() { return ( Click ); } } 2.2 Event Handling in Functional Components In functional components, event handling can be achieved using the useState hook along with event handler functions. For instance, to handle an input field change event, you can define an onChange event handler function: import React, { useState } from 'react'; function MyComponent() { const = useState(''); function handleChange(event) { setValue(event.target.value); } return ( ); }

3. Common Event Types

React provides support for various event types. Here are some of the commonly used event types: 3.1 onClick Event The onClick event occurs when an element is clicked, typically used with buttons or links. When a user clicks the element, the event handler is invoked, and the specified logic is executed. 3.2 onChange Event The onChange event occurs when the value of an input field changes, commonly used for handling text input. Whenever the input value changes, the event handler is called, and the UI can be updated based on the input value. 3.3 onSubmit Event The onSubmit event occurs when a form is submitted, usually used for form submission handling. When a user submits the form, the event handler is triggered, and the form data can be processed. 3.4 onMouseOver Event The onMouseOver event occurs when the mouse pointer is moved over an element, often used for tooltips or dropdown menus. When a user hovers over the element, the event handler is invoked, and the associated actions related to that element can be performed.

4. Writing Event Handler Functions

In React, event handler functions are typically written within the component where the event occurs. The event handler function is responsible for updating the state or executing other logic based on the user's action. class MyComponent extends React.Component { handleClick() { // Event handler logic } render() { return ( Click ); } } import React, { useState } from 'react'; function MyComponent() { const = useState(''); function handleChange(event) { setValue(event.target .value); } return ( ); }

5. Event Propagation and Default Behavior

React provides mechanisms to control event propagation and default behavior. Event propagation refers to the process of an event being passed to its parent components, while default behavior refers to the browser's default actions. To control event propagation, you can use the stopPropagation() method, which prevents the event from being propagated to the parent components. To prevent the default behavior, you can use the preventDefault() method, which stops the browser from performing its default action.

6. Event Delegation

Event delegation in React refers to handling events on parent elements instead of individual child elements. This approach simplifies event handling for dynamically generated elements. By using event delegation, there is no need to attach event handlers to each individual child element.

7. Passing Parameters to Event Handlers

There are scenarios where you need to pass parameters to event handlers in React. For example, if you want to obtain information about a specific item when clicking on a list item. In such cases, you can pass additional parameters to the event handler.

8. Event Handling with External Libraries in React

React provides integration support for various external libraries. When using external libraries, you need to follow their event handling approaches. Integrating events between React components and external libraries requires careful consideration and may require additional configuration or measures, if necessary.

9. Event Optimization in React

In React, event optimization can be crucial for performance improvement. Event optimization aims to prevent unnecessary re-renders and enhance the responsiveness of your application. Techniques such as function binding, memoization, and maintaining immutability can be applied for event optimization.

10. Conclusion

In this article, we explored event handling in React. React offers a wide range of event types that enable you to handle user interactions and implement dynamic UIs. We learned how to write event handler functions, control event propagation and default behavior, use event delegation, pass parameters to event handlers, integrate events with external libraries, and optimize events in React. Read the full article

[simplywebstuff]

JavaScript Event Propagation. Everything You Need To Know

JavaScript Event Propagation. JavaScript event propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it... #javascript #javascripteventpropagation #jstutorial #webdev

JavaScript Event Propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward. For example imagine that you have a click event handler on a hyperlink element which is nested inside paragraph. If you click that link the handler will be executed. But if you assign the click event handler to the paragraph that…

[coderethinked]

stopPropagation and preventDefault are the easiest things to understand. Look at the article which explains both of them 

[knowasiak]

Wish HN: Happy Holidays

Wish HN: Happy Holidays

Wish HN: Happy Holidays Blob Opera<div aria-disabled="false" aria-label="Share "Blob Opera"" jsaction="click:cOuCgd(preventDefault=true); mousedown:UX7yZ; mouseup:lbsD… Read the full story – https://tinyurl.com/yy5euljx Signup on KC.inc to make your day easy reading world-class articles. Interact with like-minded people, over 8000. Only on Knowasiak from around the world –…

[studiodoli]

ドロワーメニューでスクロールを制御するためのpreventDefault と stopPropagation

ドロワー（ハンバーガー）メニューが表示されているとき、背景をスクロールを禁止させる際、html要素やbody要素に対してpreventDefault()を使うと、メニュー内のスクロールもできなくなってしまう。困る。

//スクロールが止まるけどメニュー内もスクロールできない $(”#menu-button”).click(function(){   window.addEventListener(”touchmove”, function(e){     e.preventDefault();   }); });

preventDefault を使わなくても、css側の処理でスクロールをさせないこともできる。表示・非表示でhtml要素に対して { overflow:hidden; } をaddClass、removeClassで切り替える方法。 ただ、これiOSだとうまく動かないみたい。

//すごくシンプルでいいけども iOSでうまくいかない html.stopScroll {   overflow: hidden; }

ということで、合わせ技で対応。(jQuery使用) $(”#menu-button”).click(function(){  window.addEventListener(”touchmove”, function(e){   if($(e.target).closest(”#gnav”).length > 0)//ターゲットの親に#gnavがあったら 　e.stopPropagation();   }else {     e.preventDefault();   }  }); }); 完璧とはいえないけど、まあ、これで納得できるレベルではあるかな。

[taha446446]

موقف الاسلام من تعدين البيتكوين والتعاملات المالية به موقف الاسلام من تعدين البيتكوين والتعاملات المالية به

 موقف الاسلام من تعدين البيتكوين والتعاملات المالية به 

ظهر مفهوم تعدين البيتكوين علينا مع ظهور عملة البيتكوين سنة 2009 , ومثلها مثل اي شئ في الكون تقريبا , بدأت صغيرة , ثم مع التطورات التي حصلت عليها وكثرت مستخدميها , فأصبحت العملة تنموا وتنموا , حتي اصبح الدولار الامريكي لا يساوى شئ بجوارها , 

وليس هذا فحسب بل حتي الدينار الكويتي الذي هو اعلي في القيمة من الدولار الامريكى , اصبح لا يساوى شئ بجوار عملة البيتكوين , فقد وصلت في فترة من الفترات الي ما يعادل 400 الف دولار امريكى , وهذا ما جعل الكثير من الناس يتجهون الي تعدين البيتكوين , وهذا ما جعل الداعي الصغير يوضح موقف الاسلام من البيتكوين 

ما هى عملة البيتكوين ؟ 

عملة البيتكوين هى عنملة رقمية موجودة فقط علي الشبكة العنكبوتية ( الأنترنت ) ظهرت هذه العملة في عام 2009 , وقد حازت بشعبية كبيرة , وقد اصبحت الان مع التطورات , ومع كثرة تعدين البيتكوين , مثل الذهب , من الصعب الحصول عليها , بل انه اصبح شيه مستحيلا مع التكنولوجيا المعقدة التي تعمل بها , 

ما المقصود بتعدين البيتكوين ؟ 

وكلمة تعدين البيتكوين , يراد به عملية خلق العملة , وفي الحقيقة ان كلمة تعدين ليست هى المناسبة , فالأمور معقدة اكثر من ذلك , فكلمة تعدين ليست هى التي يقصد بها عملية احتساب قيمة البيتكوين , ولاكن كلمة تعدين البيتكوين يقصد بها عملية استخراجة , والاشخاص القائمين علي ذلك هم المعدنون , 

وبأختصار فأن تعدين البيتكوين هى عملية حفظ السجلات تتم من خلال استخدام قوة معالجة جهاز الحاسوب , والبلوكشين , هى الدفتر التي يحفظ بها تلك العماليات , فالبيتكوين كما زكرنا ليس لها وجود واقعي , وهذا ما يجعل حفظ تعاملاتها امر معقد وصعب , ولاكن هذا ليس موضوعنا , نحن نحاول اعطائكم فكرة مبدئيا عن الموضوع , للتفاصيل اكثر من هنا  

حكم العمل في تعدين البيتكوين 

بدون اي مقدمات طويلة , فالتعامل بالبيتكوين , والتعدين فيها , او التداول بها , والبيع والشراء بها , حرام شرعا , ولا خلاف في ذلك , وهذا ما اقر به مفتي الديار المصرية , الدكتور شوقي علام , وقال شوقي ان تعدين البيتكوين حرام شرعا , ويرجع هذا الي انها ليست وسيطا معتمدا للتعامل , وان بها المخاطرة كبيرة جدا , 

واكد شوقي علي انه قد قام ببحوثات كثيرة , مع المختصين في الاقتصاد ووجدوا ان عملة البيتكوين تضر بالاقتصاد , وانها لا يوجد لها اي توثيق دولي , او مراقبة دولية , فهي مجرد عملة يتم تداولها , علي الأنترنت فقط , ولا يوجد اي قيود او شروط لها , ولا للتنبؤ بأسعارها , مما يجعل المخاطرة فيها ضخمة , وهذا ما يجعل التعامل بها حرام شرعا , 

خاطر تعدين البيتكوين والتعامل به تعدين

ورغم ان هذه العملات  ارباحها عالية , ويتجه الكثير للعمل فيها , الا ان مخاطرها كارثية , وهذا ما أكدة علماء الاقتصاد , ومن اهم مخاطر تعدين البيتكوين وغيرها من العملات , ارتفاع الاسعار , فكما قلنا ان البيتكوين تفوق اسعار الدولار بالاف , ولاكن لا نريد ان نضع ارقام لأن سعرها متقلب , وهذه ايضا احدى خطورتها , 

فعملة البيتكوين , وباقي العملات المشفرة , التي ليس لها اى وجود فزيائى ملموس , تعمل بالمزاج , فليس لها اي قواعد او قوانين , تشير الي ارتفاعها , مثل العملات المتعارف عليها ,  ,وهذا فضلا علي انه لا يوجد اي جهة حكومية تشرف عليها , واكدت البحوثات  ان تطور هذا المجال قد يسبب الضرر , الكبير بالمجالات التقنية عامة , 

وبعد كل هذه المخاطرات , وان الاسلام يحفظ الامور جميعها متزنة , بلا خلل او كلل , فقد كان رأى العلماء في تعدين البيتكوين هو انه حرام شرعا , ويمنع منعا باتا الاشتراك بها , او التعامل بها , وهذا ما اوضحة الدتور شوقي علام , مفتي الديار المصرية , واتفق علية علماء الاقتصاد , فلا تخاطر بما تملك لكى تربح ما لا تملك , وكما يقال عصفور باليد خير من عشرة علي الشجرة , والله اعلي واعلم 

شارك المقال مع اى شخص تعرف انه يعمل في البيتكوين  https://www.alday-alsghyr.com/2020/09/Bitcoin mining.html

https://ift.tt/353qkT1 from Blogger https://ift.tt/3gNQATG via IFTTT

[share123blogger]

Tạo hình nền điện thoại icon thương thương phát sáng

Hiệu ứng mới độc quyền trên taoanhdep.com để tạo hình nền điện thoại có icon Thương thương và các biểu tượng cảm xúc facebook khác phát sáng lơ lửng trên bàn tay. Hướng dẫn: - Nhấn nút chọn ảnh nền của bạn (Nên lựa hình cảnh buổi tối). - Nhấn nút Tạo ảnh - Nhấn nút Tải ảnh này hoặc giữ vào ảnh 3 giây để lưu ảnh.

Kiểu 1

Kiểu 2

$(document).ready(function(){$(".chonmau input").click(function(){$(".tad-main").removeClass("mau1");$(".tad-main").removeClass("mau2");$(".tad-main").addClass($("input:checked").val())}); $("#khungvienanh").click(function(){ $(".tad-main").toggleClass("bovien"); }); $("#maunen").click(function(){ $(".tad-main").toggleClass("bomau"); }); $("#botron").click(function(){ $(".anhdacat").toggleClass("botron"); }); });.xulyhinhanh img{margin:0!important}.chonanh-avt{width:38px;height:38px;float:left;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-right:10px}.img-preview{width:36px;height:36px;background:url(//2.bp.blogspot.com/-ZTMZs1MahXE/XqZq3WgQKDI/AAAAAAAAdRI/ib4MFhw49m82VLY9b2LzZBw5w3tItLSrQCK4BGAYYCw/s36/thumbnail-man.png);background-size:36px;background-position: center;}#chonanhModal{display:block!important}#chonanhModal:not(.show){opacity:0;visibility:hidden}.img-container,.img-preview{background-color:#f7f7f7;text-align:center;width:100%}.img-container{margin-bottom:1rem;max-height:300px;min-height:280px}.img-container>img{max-width:100%}.img-preview{margin: auto;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden}.img-preview>img{max-width:100%} #temp{position:fixed;height:0;top:0;left:0;overflow:hidden}.tad-main { width: 1080px; height: 1920px; background: #333; position: relative; }.tad-main canvas { width: 1080px; height: 1920px; position: absolute; top: 0; left: 0; }.tad-tichxanh { background: url(https://2.bp.blogspot.com/-1tC_fjB32Qg/XrD09QNnthI/AAAAAAAAd2w/cLY--1dRZ3IB1RSVgFsmMCLY5i-586KAQCNcBGAsYHQ/s0/banquyen-taoanhdep-bg-1.png); width: 1080px; height: 1920px; position: absolute; z-index: 9; }.tad-main.mau2 .tad-tichxanh{ background: url(https://4.bp.blogspot.com/-1Ffi0W5oYgY/XrD09YAuGYI/AAAAAAAAd20/BtdHCxDn8J47JbL7POKof859g1vR_5YJgCNcBGAsYHQ/s0/banquyen-taoanhdep-bg-2.png); } Upload ảnh ( jpg, png,... )*

Chọn ảnh

Chọn ảnh từ thiết bị

×

Chọn ảnh

Cắt ảnh

Tạo ảnh

Loading...

Tải ảnh này

$('#taianhve')['hide'](); $('#btnScreenShot')['attr']('disabled', 'false'); $('#cropanh')['click'](function() { $('#btnScreenShot')['removeAttr']('disabled') }); $('#btnScreenShot')['click'](function() { $('#taianhve')['show']() }); var $btn = document['getElementById']('btnScreenShot'); var getimg = ''; $btn['addEventListener']('mousedown', onScreenShotClick); function onScreenShotClick(_0x67c5x4) { $('.load-anh')['show'](); html2canvas(document['querySelector']('.tad-main'), { useCORS: !0, scrollX: 0, scrollY: 0, width: 1080, height: 1920, scale: 1 })['then']((_0x67c5x5) => { var _0x67c5x6 = _0x67c5x5['toDataURL']('image/jpeg'); $('#img-out')['html']('<img src=\'' + _0x67c5x6 + '\' alt=\'\u1EA2nh instagram\' class=\'img-thumbnail\'>'); getimg = _0x67c5x6; $('.load-anh')['hide'](); $('#taianhve')['show']() }); $('#taianhve')['click'](function() { $(this)['attr']('download', 'taoanhdep_hinhnenthuongthuong.jpg')['attr']('href', getimg) }) } window['onload'] = function() { 'use strict'; var _0xa3dbx1 = window['Cropper']; var _0xa3dbx2 = window['URL'] || window['webkitURL']; var _0xa3dbx3 = document['querySelector']('.img-container'); var _0xa3dbx4 = _0xa3dbx3['getElementsByTagName']('img')['item'](0); var _0xa3dbx5 = document['getElementById']('download'); var _0xa3dbx6 = document['getElementById']('actions'); var _0xa3dbx7 = { aspectRatio: 9 / 16, viewMode: 1, preview: '.img-preview', autoCrop: true, strict: true, background: true, autoCropArea: 1 }; var _0xa3dbx8 = new _0xa3dbx1(_0xa3dbx4, _0xa3dbx7); var _0xa3dbx9 = _0xa3dbx4['src']; var _0xa3dbxa = 'image/jpeg'; var _0xa3dbxb; if (!document['createElement']('canvas')['getContext']) { $('button[data-method="getCroppedCanvas"]')['prop']('disabled', true) }; if (typeof document['createElement']('cropper')['style']['transition'] === 'undefined') { $('button[data-method="rotate"]')['prop']('disabled', true); $('button[data-method="scale"]')['prop']('disabled', true) }; _0xa3dbx6['querySelector']('.docs-buttons')['onclick'] = function(_0xa3dbxc) { var _0xa3dbxd = _0xa3dbxc || window['event']; var _0xa3dbxe = _0xa3dbxd['target'] || _0xa3dbxd['srcElement']; var _0xa3dbxf; var _0xa3dbx10; var _0xa3dbx11; var _0xa3dbx12; if (!_0xa3dbx8) { return }; while (_0xa3dbxe !== this) { if (_0xa3dbxe['getAttribute']('data-method')) { break }; _0xa3dbxe = _0xa3dbxe['parentNode'] }; if (_0xa3dbxe === this || _0xa3dbxe['disabled'] || _0xa3dbxe['className']['indexOf']('disabled') > -1) { return }; _0xa3dbx12 = { method: _0xa3dbxe['getAttribute']('data-method'), target: _0xa3dbxe['getAttribute']('data-target'), option: _0xa3dbxe['getAttribute']('data-option') || undefined, secondOption: _0xa3dbxe['getAttribute']('data-second-option') || undefined }; _0xa3dbxf = _0xa3dbx8['cropped']; if (_0xa3dbx12['method']) { if (typeof _0xa3dbx12['target'] !== 'undefined') { _0xa3dbx11 = document['querySelector'](_0xa3dbx12['target']); if (!_0xa3dbxe['hasAttribute']('data-option') && _0xa3dbx12['target'] && _0xa3dbx11) { try { _0xa3dbx12['option'] = JSON['parse'](_0xa3dbx11['value']) } catch (_0xa3dbxd) { console['log'](_0xa3dbxd['message']) } } }; switch (_0xa3dbx12['method']) { case 'rotate': if (_0xa3dbxf) { _0xa3dbx8['clear']() }; break; case 'getCroppedCanvas': try { _0xa3dbx12['option'] = JSON['parse'](_0xa3dbx12['option']) } catch (_0xa3dbxd) { console['log'](_0xa3dbxd['message']) }; if (_0xa3dbxa === 'image/jpeg') { if (!_0xa3dbx12['option']) { _0xa3dbx12['option'] = {} }; _0xa3dbx12['option']['fillColor'] = '#fff' }; break }; _0xa3dbx10 = _0xa3dbx8[_0xa3dbx12['method']](_0xa3dbx12['option'], _0xa3dbx12['secondOption']); switch (_0xa3dbx12['method']) { case 'rotate': if (_0xa3dbxf) { _0xa3dbx8['crop']() }; break; case 'scaleX': ; case 'scaleY': _0xa3dbxe['setAttribute']('data-option', -_0xa3dbx12['option']); break; case 'getCroppedCanvas': if (_0xa3dbx10) { $('.anhdacat')['html'](_0xa3dbx10); if (!_0xa3dbx5['disabled']) { _0xa3dbx5['href'] = _0xa3dbx10['toDataURL'](_0xa3dbxa) } }; break; case 'destroy': _0xa3dbx8 = null; if (_0xa3dbxb) { _0xa3dbx2['revokeObjectURL'](_0xa3dbxb); _0xa3dbxb = ''; _0xa3dbx4['src'] = _0xa3dbx9 }; break }; if (typeof _0xa3dbx10 === 'object' && _0xa3dbx10 !== _0xa3dbx8 && _0xa3dbx11) { try { _0xa3dbx11['value'] = JSON['stringify'](_0xa3dbx10) } catch (_0xa3dbxd) { console['log'](_0xa3dbxd['message']) } } } }; document['body']['onkeydown'] = function(_0xa3dbxc) { var _0xa3dbxd = _0xa3dbxc || window['event']; if (!_0xa3dbx8 || this['scrollTop'] > 300) { return }; switch (_0xa3dbxd['keyCode']) { case 37: _0xa3dbxd['preventDefault'](); _0xa3dbx8['move'](-1, 0); break; case 38: _0xa3dbxd['preventDefault'](); _0xa3dbx8['move'](0, -1); break; case 39: _0xa3dbxd['preventDefault'](); _0xa3dbx8['move'](1, 0); break; case 40: _0xa3dbxd['preventDefault'](); _0xa3dbx8['move'](0, 1); break } }; $('.cropanh-container')['hide'](); var _0xa3dbx13 = document['getElementById']('inputImage'); if (_0xa3dbx2) { _0xa3dbx13['onchange'] = function() { var _0xa3dbx14 = this['files']; var _0xa3dbx15; if (_0xa3dbx8 && _0xa3dbx14 && _0xa3dbx14['length']) { _0xa3dbx15 = _0xa3dbx14[0]; if (/^image\/\w+/ ['test'](_0xa3dbx15['type'])) { _0xa3dbxa = _0xa3dbx15['type']; if (_0xa3dbxb) { _0xa3dbx2['revokeObjectURL'](_0xa3dbxb) }; _0xa3dbx4['src'] = _0xa3dbxb = _0xa3dbx2['createObjectURL'](_0xa3dbx15); _0xa3dbx8['destroy'](); _0xa3dbx8 = new _0xa3dbx1(_0xa3dbx4, _0xa3dbx7); _0xa3dbx13['value'] = null; $('.cropanh-container')['show'](); $('.btn-upanh span,.btn-chonanh')['html']('<i class=\'fas fa-upload\'> Ch\u1ECDn \u1EA3nh kh\xE1c') } else { window['alert']('Please choose an image file.') } } } } else { _0xa3dbx13['disabled'] = true; _0xa3dbx13['parentNode']['className'] += ' disabled' } };

Nguồn: https://www.share123bloggertemplates.com/

from Template Blogspot Bán Hàng, Bất Động Sản Đẹp tại Share123 Blogger Templates https://www.share123bloggertemplates.com/2020/05/tao-hinh-nen-ien-thoai-icon-thuong.html via Nguồn: https://www.share123bloggertemplates.com/

[takepara]

2020年02月23日の記事一覧

(全 29 件)

スプレッドシートに時限式のバグを混入させて仕事を失わないようにしたエンジニアに有罪判決が下る

スプレッド構文

様々なVPNの比較（IPsec-VPN，SSL-VPN）

W3C Feed Validation Service, for Atom and RSS

My RSS feed is not working correctly

売却の可能性が浮上した「.org」ドメインは、いったい誰のものであるべきなのか？｜WIRED.jp

ゴーストキッチン ： 投資家や起業家が注目する、レストランの「新形態」とは？

Windows と日本語のテキストについて

VSCode の Live Share プラグインを使ってペアプログラミングする

倉庫に送るだけ! 面倒な梱包や発送を代行する「あとよろメルカリ便」2月から試験運用開始

修理業者iFIxitがGalaxy Z Flipを分解、防じん性テスト。ホコリの完全な侵入阻止は困難

なぜせっかく眠りにつけたのに深夜に目が覚めてしまうのか？

KADOKAWAなど4社、Cloudflareと和解成立　海賊版サイト対策で連携

Chrome での煩わしい動画広告を減らす

クアルコムの新5Gモデムチップ｢SDX60｣はずげーぞー

3Dプリントの電動アシスト自転車「PLATZHIRSCH」が登場！重量わずか12kg

「Office」モバイルアプリ、「Word」「Excel」「PowerPoint」を統合

preventDefault, stopPropagation, stopImmediatePropagationまとめ

GraphQLとクライアントサイドの実装指針.md

A Guide to Console Commands

Azure 向けクラウド ネイティブ .NET アプリケーションの設計

Newtonsoft.Json から System.Text.Json に移行する方法How to migrate from Newtonsoft.Json to System.Text.Json

パソコン本体の保存容量を気にしなくていい未来。｢データレスPC｣って何者なんだ!?

10Gbps対応「フレッツ 光クロス」はIPoE方式でのみ提供開始。今後、PPPoE方式は縮小されていくのか？

WebAssembly Summitまとめ（前編）｜chikoski｜note

Reactカスタムフック入門 ! (ドラッグでDOMを動かすカスタムフックを作る)

[nishantrana]

Confirmation dialog while saving Dataverse record

Confirmation dialog while saving Dataverse record

Prevent Save with openConfirmDialog – executionContext.getEventArgs().preventDefault() and Xrm.Navigation.openConfirmDialog

[mbaljeetsingh]

How To Build Your Own Comment System Using Firebase

How To Build Your Own Comment System Using Firebase

Aman Thakur

2020-08-24T10:30:00+00:00 2020-08-24T12:31:29+00:00

A comments section is a great way to build a community for your blog. Recently when I started blogging, I thought of adding a comments section. However, it wasn’t easy. Hosted comments systems, such as Disqus and Commento, come with their own set of problems:

They own your data.

They are not free.

You cannot customize them much.

So, I decided to build my own comments system. Firebase seemed like a perfect hosting alternative to running a back-end server.

First of all, you get all of the benefits of having your own database: You control the data, and you can structure it however you want. Secondly, you don’t need to set up a back-end server. You can easily control it from the front end. It’s like having the best of both worlds: a hosted system without the hassle of a back end.

In this post, that’s what we’ll do. We will learn how to set up Firebase with Gatsby, a static site generator. But the principles can be applied to any static site generator.

Let’s dive in!

What Is Firebase?

Firebase is a back end as a service that offers tools for app developers such as database, hosting, cloud functions, authentication, analytics, and storage.

Cloud Firestore (Firebase’s database) is the functionality we will be using for this project. It is a NoSQL database. This means it’s not structured like a SQL database with rows, columns, and tables. You can think of it as a large JSON tree.

Introduction to the Project

Let’s initialize the project by cloning or downloading the repository from GitHub.

I’ve created two branches for every step (one at the beginning and one at the end) to make it easier for you to track the changes as we go.

Let’s run the project using the following command:

gatsby develop

If you open the project in your browser, you will see the bare bones of a basic blog.

(Large preview)

The comments section is not working. It is simply loading a sample comment, and, upon the comment’s submission, it logs the details to the console.

Our main task is to get the comments section working.

How the Comments Section Works

Before doing anything, let’s understand how the code for the comments section works.

Four components are handling the comments sections:

blog-post.js

Comments.js

CommentForm.js

Comment.js

First, we need to identify the comments for a post. This can be done by making a unique ID for each blog post, or we can use the slug, which is always unique.

The blog-post.js file is the layout component for all blog posts. It is the perfect entry point for getting the slug of a blog post. This is done using a GraphQL query.

export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } fields { slug } } } `

Before sending it over to the Comments.js component, let’s use the substring() method to get rid of the trailing slash (/) that Gatsby adds to the slug.

const slug = post.fields.slug.substring(1, post.fields.slug.length - 1) return ( ) }

The Comments.js component maps each comment and passes its data over to Comment.js, along with any replies. For this project, I have decided to go one level deep with the commenting system.

The component also loads CommentForm.js to capture any top-level comments.

const Comments = ({ comments, slug }) => { return (

Join the discussion

) }

Let’s move over to CommentForm.js. This file is simple, rendering a comment form and handling its submission. The submission method simply logs the details to the console.

const handleCommentSubmission = async e => { e. preventDefault() let comment = { name: name, content: content, pId: parentId ∣∣ null, time: new Date(), } setName("") setContent("") console.log(comment) }

The Comment.js file has a lot going on. Let’s break it down into smaller pieces.

First, there is a SingleComment component, which renders a comment.

I am using the Adorable API to get a cool avatar. The Moment.js library is used to render time in a human-readable format.

const SingleComment = ({ comment }) => (

{comment.name} says

{comment.time} &&((moment(comment.time.toDate()).calendar()})}

{comment.content}

)

Next in the file is the Comment component. This component shows a child comment if any child comment was passed to it. Otherwise, it renders a reply box, which can be toggled on and off by clicking the “Reply” button or “Cancel Reply” button.

const Comment = ({ comment, child, slug }) => { const [showReplyBox, setShowReplyBox] = useState(false) return (

Now that we have an overview, let’s go through the steps of making our comments section.

1. Add Firebase

First, let’s set up Firebase for our project.

Start by signing up. Go to Firebase, and sign up for a Google account. If you don’t have one, then click “Get Started”.

Click on “Add Project” to add a new project. Add a name for your project, and click “Create a project”.

(Large preview)

Once we have created a project, we’ll need to set up Cloud Firestore.

In the left-side menu, click “Database”. Once a page opens saying “Cloud Firestore”, click “Create database” to create a new Cloud Firestore database.

(Large preview)

When the popup appears, choose “Start in test mode”. Next, pick the Cloud Firestore location closest to you.

(Large preview)

Once you see a page like this, it means you’ve successfully created your Cloud Firestore database.

(Large preview)

Let’s finish by setting up the logic for the application. Go back to the application and install Firebase:

yarn add firebase

Add a new file, firebase.js, in the root directory. Paste this content in it:

import firebase from "firebase/app" import "firebase/firestore" var firebaseConfig = 'yourFirebaseConfig' firebase.initializeApp(firebaseConfig) export const firestore = firebase.firestore() export default firebase

You’ll need to replace yourFirebaseConfig with the one for your project. To find it, click on the gear icon next to “Project Overview” in the Firebase app.

(Large preview)

This opens up the settings page. Under your app’s subheading, click the web icon, which looks like this:

(Large preview)

This opens a popup. In the “App nickname” field, enter any name, and click “Register app”. This will give your firebaseConfig object.

Copy just the contents of the firebaseConfig object, and paste it in the firebase.js file.

Is It OK to Expose Your Firebase API Key?

Yes. As stated by a Google engineer, exposing your API key is OK.

The only purpose of the API key is to identify your project with the database at Google. If you have set strong security rules for Cloud Firestore, then you don’t need to worry if someone gets ahold of your API key.

We’ll talk about security rules in the last section.

For now, we are running Firestore in test mode, so you should not reveal the API key to the public.

How to Use Firestore?

You can store data in one of two types:

collection A collection contains documents. It is like an array of documents.

document A document contains data in a field-value pair.

Remember that a collection may contain only documents and not other collections. But a document may contain other collections.

This means that if we want to store a collection within a collection, then we would store the collection in a document and store that document in a collection, like so:

{collection-1}/{document}/{collection-2}

How to Structure the Data?

Cloud Firestore is hierarchical in nature, so people tend to store data like this:

blog/{blog-post-1}/content/comments/{comment-1}

But storing data in this way often introduces problems.

Say you want to get a comment. You’ll have to look for the comment stored deep inside the blog collection. This will make your code more error-prone. Chris Esplin recommends never using sub-collections.

I would recommend storing data as a flattened object:

blog-posts/{blog-post-1} comments/{comment-1}

This way, you can get and send data easily.

How to Get Data From Firestore?

To get data, Firebase gives you two methods:

get() This is for getting the content once.

onSnapshot() This method sends you data and then continues to send updates unless you unsubscribe.

How to Send Data to Firestore?

Just like with getting data, Firebase has two methods for saving data:

set() This is used to specify the ID of a document.

add() This is used to create documents with automatic IDs.

I know, this has been a lot to grasp. But don’t worry, we’ll revisit these concepts again when we reach the project.

2. Create Sample Date

The next step is to create some sample data for us to query. Let’s do this by going to Firebase.

Go to Cloud Firestore. Click “Start a collection”. Enter comments for the “Collection ID”, then click “Next”.

(Large preview)

For the “Document ID”, click “Auto-ID. Enter the following data and click “Save”.

(Large preview)

While you’re entering data, make sure the “Fields” and “Types” match the screenshot above. Then, click “Save”.

That’s how you add a comment manually in Firestore. The process looks cumbersome, but don’t worry: From now on, our app will take care of adding comments.

At this point, our database looks like this: comments/{comment}.

3. Get the Comments Data

Our sample data is ready to query. Let’s get started by getting the data for our blog.

Go to blog-post.js, and import the Firestore from the Firebase file that we just created.

import {firestore} from "../../firebase.js"

To query, we will use the useEffect hook from React. If you haven’t already, let’s import it as well.

useEffect(() =&gt { firestore .collection(`comments`) .onSnapshot(snapshot =&gt { const posts = snapshot.docs .filter(doc =&gt doc.data().slug === slug) .map(doc =&gt { return { id: doc.id, ...doc.data() } }) setComments(posts) }) }, [slug])

The method used to get data is onSnapshot. This is because we also want to listen to state changes. So, the comments will get updated without the user having to refresh the browser.

We used the filter and map methods to find the comments whose slug matches the current slug.

One last thing we need to think about is cleanup. Because onSnapshot continues to send updates, this could introduce a memory leak in our application. Fortunately, Firebase provides a neat fix.

useEffect(() =&gt { const cleanUp = firestore .doc(`comments/${slug}`) .collection("comments") .onSnapshot(snapshot =&gt { const posts = snapshot.docs.map(doc =&gt { return { id: doc.id, ...doc.data() } }) setComments(posts) }) return () =&gt cleanUp() }, [slug])

Once you’re done, run gatsby develop to see the changes. We can now see our comments section getting data from Firebase.

(Large preview)

Let’s work on storing the comments.

4. Store Comments

To store comments, navigate to the CommentForm.js file. Let’s import Firestore into this file as well.

import { firestore } from "../../firebase.js"

To save a comment to Firebase, we’ll use the add() method, because we want Firestore to create documents with an auto-ID.

Let’s do that in the handleCommentSubmission method.

firestore .collection(`comments`) .add(comment) .catch(err =&gt { console.error('error adding comment: ', err) })

First, we get the reference to the comments collection, and then add the comment. We’re also using the catch method to catch any errors while adding comments.

At this point, if you open a browser, you can see the comments section working. We can add new comments, as well as post replies. What’s more amazing is that everything works without our having to refresh the page.

(Large preview)

You can also check Firestore to see that it is storing the data.

(Large preview)

Finally, let’s talk about one crucial thing in Firebase: security rules.

5. Tighten Security Rules

Until now, we’ve been running Cloud Firestore in test mode. This means that anybody with access to the URL can add to and read our database. That is scary.

To tackle that, Firebase provides us with security rules. We can create a database pattern and restrict certain activities in Cloud Firestore.

In addition to the two basic operations (read and write), Firebase offers more granular operations: get, list, create, update, and delete.

A read operation can be broken down as:

get Get a single document.

list Get a list of documents or a collection.

A write operation can be broken down as:

create Create a new document.

update Update an existing document.

delete Delete a document.

To secure the application, head back to Cloud Firestore. Under “Rules”, enter this:

service cloud.firestore { match /databases/{database}/documents { match /comments/{id=**} { allow read, create; } } }

On the first line, we define the service, which, in our case, is Firestore. The next lines tell Firebase that anything inside the comments collection may be read and created.

If we had used this:

allow read, write;

… that would mean that users could update and delete existing comments, which we don’t want.

Firebase’s security rules are extremely powerful, allowing us to restrict certain data, activities, and even users.

On To Building Your Own Comments Section

Congrats! You have just seen the power of Firebase. It is such an excellent tool to build secure and fast applications.

We’ve built a super-simple comments section. But there’s no stopping you from exploring further possibilities:

Add profile pictures, and store them in Cloud Storage for Firebase;

Use Firebase to allow users to create an account, and authenticate them using Firebase authentication;

Use Firebase to create inline Medium-like comments.

A great way to start would be to head over to Firestore’s documentation.

Finally, let’s head over to the comments section below and discuss your experience with building a comments section using Firebase.

Smashing Newsletter

Every week, we send out useful front-end &amp UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.

Front-end, design and UX. Sent 2× a month. You can always unsubscribe with just one click.

(ra, yk, al, il)

via Articles on Smashing Magazine — For Web Designers And Developers https://ift.tt/3hBcASM