Fetch MI

Below is a list of every PR that was merged at Hacker Noon in 2019. In the coming weeks, expect to see regular product updates (with a bit more context 😉), but for now, please enjoy this dump of commit messages I put together in 15-20 minutes. Note: some PR numbers are skipped because either 1. the PR was not merged, or 2. the PR was closed/merged before or after 2019. You'll also notice some numbers out of sequence -- this indicates that the PR was closed a while after it was opened. #9: WIP - Saving editor content as HTML #12: Author dashboard, v2 #13: Bugfix: update drafts instead of inserting #11: Admin route #14: Admin fix #15: Testing React Hooks #18: Hackernoon component and better nav #16: Admin v1 #21: Editor workflow v1 #22: Editor workflow v2 #23: Confirm component v1 #24: Confirm v2 #27: Editor workflow v2.5 #28: Functionalize #29: Getting closer #30: Whew, at least the page loads now #31: RedirectionBar component (Homepage) #32: Dane/profile #35: Profile v2 #37: Homepage components (Functionality done, partial styling) #38: Homepage components (Class Name refactor, styling) #26: Author Onboarding (Mailgun) #41: Nav improvements #42: Rewriting the TextEditor component #43: Story page #45: Added favicon #46: Editor workflow v2: Recent activity, toast notifications, and more #48: Improvements to editor style #49: Expandable title #52: Cdn v2 #51: Editor improvements with media embed #53: Fixed delete error #54: Integrated Filestack #56: Set up firebase environments #55: Filestack updates #57: Cdn v2 #60: Add readOnly shit back in (bad merge) #61: Added code and divider to editor #63: Author dashboard v2 #66: Drafts v2 #67: More draft css #25: Moved hide component logic #69: fixed draft screen #17: WIP Editor Graph embed #72: Signup screen v2 #74: fixed spacing bug #76: Sponsor workflow v1 #81: Tags v1 #84: Feature/hompegae html #88: Feature/responsive #93: First cut at periodic publisher, only 1 queue #95: stats v1 #96: Feature/tag page #97: Twitter #98: RSS v1 #99: Fixing generate story page bug #101: Update draft style #100: Added fixes to the story build script #108: add comment #109: create story trigger #110: Fixed image bug and delete key bug #111: Better story editor #112: improvements to the story template #113: Improved confirm design #114: Insert code into editor #116: new homepage #117: stats preview #118: Removed dropdown in nav #119: Removed published drafts #120: Fix for duplicate drafts #121: Fixed a few editor bugs #122: Added search to admin #123: homepage curation styling #124: Sponsor style #125: Removed base #126: saved app #127: fixed home default message #128: fontawesome fix #129: moved featured image to content #130: extend confirm to have multiple actions #131: Fixed media sources #132: added disclosures #133: Added first seen at urls #135: Message writer #136: Reject story #137: close on flyout #138: Fixed anchor link serialization #139: fixed block styling #140: Added dashboard to nav #142: delete ui improvements #145: fixed first seen at bug #146: Tag limit + bullet point fix #147: Trusted authors #148: Curation fixes #149: Data disparity #150: Admin shell script #151: Homepage #152: story settings and mailto #153: Story template iteration #154: Story iteration 2 #155: New featured image logic #156: Added bios to story design #157: More story updates #158: Impression + click tracking on ads #159: New bio and updates #160: Time reading #161: Time reading bugfixes #162: Sso wrapup #163: Add CORS to login exchange request #164: Make every new user an author #165: Story links + tons of bugfixes #166: Fix auth token exchange logic #167: Add estimatedTime to stories #168: Generate story scripts #169: Homepage auth #170: generate tag pages #171: updated tag page logic #172: added archive profiles #173: adding profile archive files #174: Draft card update #175: Beta feedback part 2 #176: Fix backspace when multiple blocks are empty #177: Fix draft loading bug (isAuthor/isEditor distinction) #178: Loading state #179: Don't store JWT in localStorage!!! #180: Generating homepage/story fixtures #181: Homepage styling #182: Don't trim the title unless newline is present #183: Fix duplicate draft bug #184: added error page #185: fix require in generate-fixtures #186: admin css fix #187: story update #188: Analytics + API changes #189: story update #190: Revert "Analytics + API changes" #191: Added home search #192: homepage cta animation #193: Fix homepage generation, add logs #194: Fix timeout #195: Archive stories on homepage! :D #196: Search stories on homepage admin #197: Dropdown nav #198: nav css fix #199: Fix story links and slugs #200: wider featured #201: wider featured stories #202: home update #203: more stories bug fix #204: Analytics v2 #205: Whoops, need an async there #206: profile update #207: Fix time reading #208: Showing time read, recording word count #209: user profiles #210: Tag curation #211: Option to override draft lock for author/editor #212: added profile cloud function #213: HN toast messages #214: Duplicate drafts #215: fixed draft image and timestamps #216: fixed homepage bug #217: Fixed draft images with cdn urls #218: fixed timestamps and column width #219: Fix key ref on metric creation #220: Story bios and fixed bugs #221: Showing read time on user stats page #222: Added archived stories to dashboard #223: Firestore rules fix + revert stats page for now #224: Homepage date fix + profile fix #225: Fix logout, actually clear cookie; upgrade react #226: homepage messages #227: Story script to increment pageviews, use floats for time read #228: Fix analytics bug, rich text pasting (80%) #229: Stats page html/css #230: Warning before leaving the page, slugified tags, and a bunch of other stuff #231: Fix a few bugs in the editor #232: fetch missing stories #233: Publishing immediately #234: Publishing immediately #235: Error page #236: color fix #237: fixed profiles #238: nav fix #239: Regeneration script, many little fixes (mostly tag page) #240: Last minute launch fixes #241: Copy change, and fix for generate fixtures script #242: Fix serve script paths #243: Fix images and dates on tagged page #244: Fix tagged links #245: Fix header link, slug check, center images on stories #246: Draft cards: Modification to shorten time #247: Story update fix #248: updated archive stories #249: Stats #250: Fixed default stat count #251: Hotfix for analytics (add op may include full paths) #252: Added comment posting to community #253: added comments #254: Admin stats #255: hack to hide tooltip bug #256: homepage design update #257: Replace all auth.hn links w/ link to community SSO #258: Added favicons #259: Copypasta #260: Timely analytics #261: Opt outs #262: fixed editor bug #263: Stats bugs #264: Fix links on copy-paste #265: Profile updates #266: prevent handle from updating #267: CDN login state #268: Fix story link on profiles #269: Save warning #270: Editor tag removal #271: Profile link fix (missed one) #272: Limit time reading to 2x estimated (needs testing) #273: improved editor link #274: WIP: Editor Dashboard: Draft card update for author name and avatar #275: Move time endpoint to analytics namespace #276: Added youtube embeds #277: Add h2 option to editor #278: Change "Archived" to "More stories by ${author}" #279: fixed code bug #280: added tweet embed #281: added tweet embed #282: fixed adding duplicate tweet bug #283: Don't fully reload the page on first save #284: profile improvements #285: Deploy script to upload CSS/JS #286: Added profile data to drafts #287: Story gap fix #288: mobile media queries #289: Extending stories to include archives #290: Tag fix on story page #291: Comments regen story pages #292: Added cropping on main image of editor #293: Improved toast positioning and timer #294: Reading history #295: Lots of little bugfixes #296: Allow dashes in tags #297: Rollbar integration #298: Simple dedepulication fix on reading history #299: Testing proof-of-concept #300: Bugfixes around links, images #301: Dane/merge dashboard drafts #302: User check before redirecting away from editor #303: Backup script for local cron job #304: ad fix on content pages #305: limit homepage to 6 stories #306: Profile improvements, validations #307: Add tags to bottom of stories #308: Stories 4 to 3 #309: Updated stats view #311: Blank state dashboard Bones #312: Script to scrape medium images #313: Dashboard headers #314: ignore env https://github.com/hackernoon/green/blob/a5b93e6e02ff282ca… #315: Improved blanks state design a bit #316: Replaced darwin with zuck on profile #317: Fixed archive h1 #318: Dashboard refactoring, slight speedup #319: Added archive stories to homepage #320: Featured story design #321: Added get started link to cdn pages #322: Recent Activity Component Color Coding #323: Improved tag design on featured pages #324: Miscellaneous bugfixes #325: Add support for numbered lists, unwrap properly #326: Story Annotations! #327: WIP: Draft Card Updates #328: Updates styling for story tags #329: Big honking button #330: Tagged Page Styling Updates #331: Tag rss feeds #332: Updated packages to fix security holes #333: script to generate a single archive profile #334: Fixed nav bugs on story pages #336: Fixed links in comments #337: Improved comment quotes #338: Fixed image width and tweets #339: Added author names to cards #340: Leftover data #341: DM / Email fix #342: Handle link in activity feed #343: Set handle on new activity feed items #344: Profile links #345: metrics by story #346: Stats 4 boxes #347: fixed new draft error #348: Tag generation fix (no leading slash) #349: Sponsor workflow #350: Show the blank state dash to first time users #351: Fix profile updates on slow firebase conn #352: Fix sponsorships to use analytics data structures #353: Responsive 404 page #354: Feature: Fat footer #355: Bug Fix: Blank profile CTA #356: Hotfix for drafts #357: Missing stories script #358: Homepage heading fix #359: smaller text on home #360: No images with longer titles #361: Interact #362: Sitemap generation script #363: Top nav updates #364: fixed regen scripts #365: fixed header profile image #366: Fixed tag header #367: Tag header fix 2 #368: footer fixes #369: Fixed header padding #370: Fixed tag input CSS #371: Changed CDN links #372: migrate story urls #373: updated logo url #374: Services.js apparently never got uploaded to the CDN #375: Added ga tracking code to app #376: updated cosmic script #377: Bug Fix: Footer Copy #378: Optouts #379: Link and copy changes #380: changes to 404 fix #381: fixing cdn domain #382: regen story script #383: add services.js to story-archive.html #384: redirect users back to app #385: Fixed url #386: Check if annotation has been deleted. #387: throttle cosmic #388: undo displaying note if empty #389: Bug Fix: Welcome dash FAQ copy clean up #390: escape braces #391: dynamically turn annotations on or off globally #392: Modify draft rules to allow admins whatever #393: Miscellaneous paraphernalia #394: Fixing publishedAt setting on update, regen behavior #395: Spread user profile data (in case of null/undefined) #396: Fetch broken media scripts #397: Updating nav #398: Generate Homepage Fixes #399: removing unused code #400: Updated image links #401: Fixed comments #402: Rounding digits on time reading (correcting values) #403: Add commas to stats display on admin #404: Takedown script #405: Self updates #406: updated cosmic archives #407: Fixed font size #408: Added twitter meta tags #409: Show error message on copy-paste error #410: Remove second param on save #411: Add rollbar to google cloud functions #412: Some formatting on stats #413: Added GA to react #414: Hide annotate deploy #415: Dane/mobile ad font size #416: Updated tweeting scripts #417: Added tweet this to reading history #418: Editor tag filtering #419: Fixed dashes in tweets bug #420: updated fetch script #421: Fixed backspace bug #422: Center plus #423: Changed ad to noonies #424: Minor fixes #425: Prevent optout author regen #426: Fixed inline code mark rendering #427: Make ad text non-selectable #428: Fixed backspace delete bug #429: Updated link style #430: Adjusted link underline #431: Convert archive to draft #432: Archive convert submitted #433: Cleaned up errors and added edit link #434: Trying to prevent white screen of death #435: Added ad stats to dashboard #436: Fixed columns on ad stats #437: Fixed tweet bugs #438: Use latest, production version of Firebase #439: Dependency upgrades (incl. security fixes) #440: Get rid of a shitton of compiler warnings #441: Fixed deserializer to work with code #442: Improve editor page #443: Separate save and publish button #444: First cut at archived stats #445: Update the story page on any update #446: Fix deps #447: Fix draft deletion #448: Revert author's submission cards to prev style #449: Inner try/catch on unlink (if file doesn't exist) #450: cuid slug on temp files, try/catch on homepage regen #451: Replace upscribe forms with mailchimp #452: Show proper notifications on submit/publish #453: Integrated with Algolia #454: Fixing canonical links #455: Adding tweet this to stories #456: Fixed story template bug #457: Fix draft edit links to include editors #458: Top nav curation #459: WIP components using our current templates #460: Draft statuses #461: Rejection fix #462: fixed algolia drafts #463: Nav fixes #464: Fix top nav admin #465: Center links #466: Ad click fix #467: Update Algolia #468: Quick and dirty fix for save and publish button #469: Bump eslint-utils from 1.4.0 to 1.4.2 #470: Regen archived tags fix #471: Tag css fix #472: Unlocking drafts w/ id token #473: Migration to fix status on converted drafts #474: Complete Algolia Editor Dashboard v1 #475: Only set up user id timer when user loaded #476: Mobile ad css changes #477: Oop missed a spot #478: Use the fucking CSS luke! #479: Archive/story algolia script fixes #480: Reset confirm dialog before display #481: Fix ad click on mobile #482: My First Email (tm) #483: Use getUnixTimestamp helper #484: Remove rejected stories from algolia drafts index #485: Merge Algolia fixes #486: Moar email #487: Archive dates #488: Fixing dates #489: Account creation email #490: Mark archive conversions as final + migration #491: Reader submit note to author & not automatically show to other readers. #492: Test env #493: Dane/brand as author #494: Fixed stripe form #495: Fix for publishing converted archives #496: stripe live keys #497: Fix topic_id ref #498: Profile xss fix #499: Top nav v2 #500: Fixed credit message #501: Takedown admin #502: Merge algolia-tags and other fixes #503: Fix CTA styling #504: Green, not blue #505: Fix SSO url ref #506: Fix rss dates #507: Use full urls on linkedin profile field #508: Editor field object #509: Slugs matching titles #510: added optimize code #511: Added google tag manager #512: Dane/brand as author fixes #513: Analytics v2 electric boogaloo #514: Complete some requested editorial changes #515: Adding google tag manager to all static pages #516: Create tag if it doesn't exist #517: Slack integration #518: Brand credit purchase email #519: If someone's marked as a brand w/ story: email #520: Fix stupid minute/second mistake #521: rm duplicate stories from stats data #522: Add mark as brand button to story settings #523: Rss fields #524: setTimeout for fun and profit #525: Get rid of extra line breaks adjacent to p tags #526: set new baseline ad #527: Soft breaks ain't hard #528: Fix a small small issues #529: Check for falsy values on canonical url #530: cc utsav, linh, partners on credit purchase #531: Improve Editor stats #532: OG meta tags #533: Profile CSS improvements on mobile, show ad #534: Autosave (WIP) #535: Payment processing message #536: secure auth routes #537: Linked brands on credits #538: Show profile avatars and link on tagged stories #539: Regen tags script #540: Make sticky nav the default on non-mobile UIs #541: fixed blockquote bug #542: Fixing onchange lag #543: Show a smaller message instead of toast notification #544: Irresponsible use of global vars #545: Algolia script fixes, mainly pagination on drafts #546: Disabling editor stats (+ crashing) for now #547: Algolia id fix #548: fixed homepage title css cutoff bug #549: Small updates to editor stats #550: Fix minor responsive issues #551: remove old ads script #552: Add editor field on reject #553: Fixed youtube embeds #554: Feature/mobile menu #555: Fix content overflow issue #556: fixed break all #557: Revert "Feature/mobile menu" #558: Allow unauthed access to brand page #559: First cut at updating profile object on stories #560: Mobile nav css/js #561: changed sponsor link color #562: added base to tag pages #563: Fix brand route to require login #564: fixed mobile nav css #565: Fixed archive dates #566: Fix published story urls on dashboard #567: Full brand list link #568: Regen tag pages on removed tags to remove story from page #569: Slug finalization #570: Fix dashboard tab display bug #571: Home tabs fix #572: Brand page for everyone #573: fixed credit buying function bug #574: Admin credits screen #575: Delete story from CDN when it's deleted from db #576: Removed noonies from homepage #577: Dane/link focus state #578: style h1s #579: fixed 2nd story on mobile css #580: Algolia/results page #581: fixed interaction js link #582: Improve search #583: Dane/unsplash #584: black friday landing page #585: unsplash attribution #586: Unsplash attribution 2 #587: Undo black friday #588: Fix author dashboard image loading #589: Feature/mobile improvements #590: Dane/annotations ui #591: alter unsplash image link #592: update unsplash attribution #593: Hide header CTA on mobile #594: Bump npm from 6.10.2 to 6.13.4 #595: Bump npm from 6.10.2 to 6.13.4 in /functions #596: Darkmode #597: Darkmode bug fixes #598: Fixing autocomplete bug on tags #599: Collections template #600: Removing duplicate stories from CDN pages #601: Bump handlebars from 4.1.2 to 4.5.3 #602: Routable tabs #603: iteration on collections I can't possibly provide context for all of the roughly 600 PRs here, in this meager conclusion, but I hope this at least provided some insight into what the dev team here at Hacker Noon was doing over the past year. Stay tuned... PR credits: Dane Lyons Gian Franco Vitola Austin Pocus Rob Moya Faith Walker Storm Farrell Mark Nadal

Literally Everything the Hacker Noon Dev Team Did in 2019

Chatbot has been a hot topic around for sure. I still remember how 4 teams out of the 12 teams in , a Hackathon I organized with Microsoft a couple months ago in Hong Kong, were working on chatbot projects. E.C. Jamming But I am a real web lover and evangelist. There are great frameworks out there like Google , and (Language Understanding Intelligence Service) that enable developers to build and launch chatbots in multiple channels with not much an effort. API.ai Microsoft Bot Framework Microsoft LUIS In other words, to empower chatbot developers, the tech giants have invested a considerable amount of resources to build up the components and micro-/web-services that can perform a single specific task in a chatbot’s pipeline both efficiently and accurately. For example, LUIS helps you understand a user with training models backed by Machine Learning with a single API endpoint. Now, why don’t we , and at the same time, with the rich elements web has to offer, we are able to provide more interactions than a traditional chatbot. take these services to build a website that understands users’ intentions and interests just like a chatbot The background of prototype was from https://tympanus.net/codrops/2014/09/23/animated-background-headers/ In my case, I am now building a personal portfolio page for the applications for graduation programs in the US. On top of the static, standard resume-alike HTML contents, I am implementing a header that interacts with users and rearranges the styles and components rendered on the page once users ask a specific question regarding my experiences — Just as if I was there, 1 on 1, with this user to answer questions like “What have you been working on at Microsoft?”. What’s even better is this tutorial and the so-called ChatWeb is built with a server-less architecture (thanks to ), which means you won’t have to worry about building and maintaining a server at all. Just frontend. Just . Azure Functions ReactJS Everything below assumes a working Azure account. Azure provides free trial for a month for you to play around. Even after free trial expires, all the products in this architecture has monthly free quotas that are not easily exceeded. Contents Training and Publishing a Microsoft LUIS endpoint Build Azure Functions React and Fetch Microsoft LUIS So again. LUIS plays a significant role in the chatbot’s ecosystem by empowering bots to understand the literals from users. The end goal of a LUIS endpoint is by consuming a query, it returns a JSON data with the answers to questions like “What does the user want?” and “Any specific entities involved?” Example:query = "What have you done at Microsoft? ----- LUIS API returns{"query": "what have you done at microsoft", "topScoringIntent": {"intent": "WhatDidYouDo","score": 0.729854763}, "entities": [ {"entity": "microsoft","type": "Company","startIndex": 22,"endIndex": 30,"score": 0.9897579} ]} With these information, and the functional component rendering mechanism in React JS, you are already ready to build your LUIS web app. But before we dive into just that, and how we can protect our subscription key with Azure Functions, let me also show you how I trained my language understanding models on . LUIS.ai Step-By-Step Guide to Build a LUIS App After creating an account on LUIS, you should be led to this page. Click the button New App. It should ask you about the name of your app and its culture (en-us, for example. I haven’t tried with other cultures.). LUIS Dashboard On the sidebar, click Intent where you will start to define the possible intents your users might possess. For example, if you are making a e-commerce website, the possible intents the website should observe can be “Purchase”, “Browse”, “Customer Support”, etc. Basically, try to list out all the possible reasons for a user to come and use your app. In my case of building a portfolio page, I want my LUIS app to help me detect from a sentence if a user is more interested in what did I learn (the technology stacks), or what did I do (the project details), and at which company, so I can deliver a suitable and personalized layout. After an intent is created, you can give LUIS some examples where this specific intent should be expected. For this example, I told LUIS a user who asks questions like “What did you do for Microsoft”, “What have you been doing in Microsoft”, etc, are likely to hold the intent of asking “What Did You Do” (Intent) with “Microsoft” being mapped to the company entity. After you input a solid 10 examples per intents defined, go to on the sidebar and click “ ”. LUIS will handle the machine learning part for you. Train & Test Train Application Magic. I love being an application developer in early 21th century; fresh and cool, but not yet completely took over by AI. Once it is done, go to “ ” page and you can straight up just one-click push the app to production and get an endpoint that looks like this: Publish App https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/{app id}?subscription-key={app key}&timezoneOffset=0&verbose=true&q={user query} And bang. You now have an endpoint that translate a user’s literal inputs, into structured and self-defined intents and entities in JSON format. Azure Functions Now, this step is not compulsory but highly recommended, for the reason that it is generally a bad practice to expose your secrets and keys to client browsers. Especially LUIS starts to charge you once the amount of your monthly request exceeds 10K — This is not that ambitious as you think. Request means transactions. A happy user who is just too excited to stop asking questions for fun can be one heavy load. You really don’t want to take the risk to let other people use your subscription keys on their LUIS app — You might not be aware of the usage on other sites, but their bills would be on you. We could solve this problem by implementing a proxy server, perhaps with Node and Express, and have the HTTP requests done on the backend. But, Azure Function is another better solution, if not the best. And it is very simple. Let’s see how we can build a proxy endpoint with Azure Functions . in 5 min Just search “Function App” on Azure Dashboard and create one with an App name (I named mine “LUIS-proxy”), subscription plan (Yep… My Internship at Microsoft ends. Free Trial time.) and all other simple and expected inputs. Nothing should surprise you here. Click the + next to “Functions” on sidebar to create a Function App So what this Function App is going to do, is that it is going to act just like the LUIS endpoint we got from the previous steps, but without giving users the access of your API IDs and Subscription Keys. Let me just quote this from the official site of Azure Functions — Who can possibly explain Azure Functions other than the team themselves. “Functions provides a fully managed compute platform with high reliability and security. With scale on demand, you get the resources you need — when you need them.” With Azure Functions, the client-side code will be calling this Azure endpoint where it will then complete the HTTP request using API key of LUIS on Azure’s computing platform and simply return the LUIS result to the client side. Think of this like a lambda function on the Azure cloud, if you are familiar with Functional . Programming Again, if you are not familiar with this, this step is not a must to achieve a website that understands users. This is for security reason. And also, you are welcome to build this proxy with Node and Express stack and setup the API endpoint with , or . They are all nice and neat in this case. Digital Ocean Linode Heroku But if you decided to follow me on this, Here is what you will do on your Function App: This function is written in C#, primarily because I felt like C# can finish the task (simply download the responding resource from LUIS) in a more efficient manner with . Azure Functions do support , feel free to do this part the way you are comfortable with. WebClient JavaScript But you can really use this code I wrote to shield any API keys you have from any web-service providers. Just paste the Url link you would use in AJAX into the placeholder I had on this screenshot, and click the on the top right corner to get the proxy endpoint for LUIS in this case. </> Get function url Finally, under {Your App} > CORS, remember to define and manage a list of white-list origins to call this endpoint. I really love this feature. This ensures . only your websites have the permission to consume this API endpoints React and Fetch Finally, for the client side code, I am choosing React once again. But this time, there are reasons besides “React is cool and clean”. I promise. React has the ability to control the components rendered with so we don’t have to do AJAX request so frequently into a callback hell. And the polyfill Fetch library that returns a ES6 Promise works seamlessly with React. Finally, I am also hoping that I can later modularize this into a LUIS Wrapper React Component with npm and yarn. this.state Before I start showing some codes. Remember to run the create-react-app. # in your terminalcreate-react-app <project name>cd <project name>npm install --save whatwg-fetchnpm start This should set you up with everything you will need and also open up the app at localhost:3000. With fetch and React’s available right now, we will be able to let the app render components based on users intent returned from LUIS. My high level architecture will be something like this (a constructor, a function that handles LUIS query, and a render function) state ... standard React import statementsimport 'whatwg-fetch'; class ChatWeb extends Component {constructor(props) {super(props);this.state = {query: "",intent: "",company: ""}} submitLUISQuery(e) {e.preventDefault(); fetch (\`{Azure Functions Endpoint}&query=${this.state.query}\`)  
   .then(res => JSON.parse(res.json()))  
   .then(json => {  
     this.setState({  
       intent: json.topScoringIntent.intent,  
       company: json.entities\[0\].entity   
     });  
   }); } render() {const { intent, company } = this.state; return (  
   { intent === "WhatDidYouDo"  
       && ... // component to render in this case  
   }  
   { intent === "WhatDidYouLearn"  
       && ... // component to render in this case  
   }  
); }} Now I think the control of rendering can certainly be cleaner with . And my job on this portfolio project, from now on, will be exactly on this — To find a more efficient and modularized way to properly pipeline the technology stacks and data. react-router-dom Again, this is a concept and high level prototype that I just can’t wait to share with the community. Especially the new (and last) semester starts this week, and I will be stuck in applications of graduate programs, GRE and potential job searches (Yes. I am still hoping to have employers sponsoring my visa, so I don’t need OPT that desperately.) Finally… I just want to say that, of course, this is not an optimal user experience as of the moment. People do not (yet) expect to talk to your websites, which is also the reason these technologies have been used on Chatbot primarily. But I think this is definitely a fun and interesting experiment that I would dive farther— . We can definitely make websites understand users just like chatbots This is really exciting for me! This opens a lot of new possibility of web UX. If you do have any better UX design that can synergy with this ChatWeb concept, definitely reach me out at , connect me on , or simply leave comments below. I already have a boilerplate in my private Gitlab, and WE have jobs to do! kevin@projectable.hk Linkedin

ChatWeb: Build Websites that understand users with full (free) Microsoft Stack

Authors: (1) Dong Jiang, School of Internet, Anhui University, National Engineering Research Center of Agro-Ecological Big Data Analysis and Application, Anhui University & jiangd@nju.edu.cn; (2) Zhen Yuan, School of Internet, Anhui University; (3) Wen-xin Li, School of Internet, Anhui University; (4) Liang-liang Lu, Key Laboratory of Optoelectronic Technology of Jiangsu Province, Nanjing Normal University, National Laboratory of Solid State Microstructures, Nanjing University, Nanjing & lianglianglu@nju.edu.cn. Table of Links Abstract & Introduction Strategy Description Encryption Speed Evaluation Statistical Evaluation Security Analysis Parameter Setup Comparison To Previous Works Conclusions Acknowledgments & References 5. Security Analysis 5.1. Key Space And Sensitivity In addition, the cryptosystem should have high sensitivity to the change of key in encryption and decryption process. That is, even one bit of the key is changed, the attacker cannot obtain any information from the decrypted image. To analyze the key sensitivity of the proposed strategy, we randomly select key, use the deployed cryptosystems to ecnrypt an iamge, followed by decrypting the cipher image with the correct key. The images decrypted with PLCM and 2DLASM are plotted in Fig. 5 (a) and (e), respectively. Then we slight change the key by adding an increment δ = 0.000000001 on initial condition and control parameter, decrypted the cipher image with the slightly modified Key. The images decrypted by PLCM based cryptosystem using x0 + δ, p + δ, and x0 + δ, p + δ are shown in Fig. 5 (b), (c), and (d), respectively. The images decrypted by 2DLASM based cryptosystem using x0 + δ, µ + δ, and x0 + δ, µ + δ are shown in Fig. 5 (f), (g), and (h), respectively. We also calculate the correlation coefficients between the images decrypted with the correct key and the images decrypted with the slightly changed key, and list the results in Tab. 7. 5.2. Resistance To Differential Attacks To resist differential attacks, the encryption algorithms should have high sensitivity to the plain image, that is, a minor change in the plain image will lead to a completely change in the cipher image [41]. To evaluate the ability of the proposed strategy to resist such attacks, Number of Pixels Change Rate (NPCR) and Unified Average Changing Intensity (UACI) are calculated [42]. NPCR can be calculated according to the following equation: According to Refs. [43, 44], for an image of size 512 × 512, when the significance level is equal to 0.05, the expected values of NPCR and UACI are 99.5893% and [33.3730%, 33.5541%], respectively. An image encryption scheme passes the diffusion property test when NPCR is higher than the expected value, and UACI falls within the interval. In the proposed strategy, despite all assistant threads perform diffusion operations independently, they take the last pixel of the next subframe as the diffusion seed to reconstruct the relationship between all subframes. This guarantees that one pixel changed in any subframe, will result in a completely different cipher frame. To fully evaluate the resistance of the proposed strategy to differential attacks, we generate byte sequences, encrypt a set of plain images, randomly select and change a pixel in the plain images, encrypt the modified images with the same byte sequences, calculate NPCR and UACI between the generated cipher images. For each plain image, we repeat above steps for 100 times, fetch the minimum, maximum, and average values, and list the results in Tab. 8. 5.3. Resistance To Noise And Data Loss Images or video frames may be affected by noise while transmitting over the channel. When a cipher image has noise or losses part of data, the cyrptosystem needs to recover the original image with high visual quality [45]. To evaluate the robustness, we use the two deployed cryptosystems to encrypt a plain image with randomly selected keys, add 1%, 3%, and 5% salt-and-pepper noise [46] to the generated cipher images, use the same keys to decrypt the cipher images, and plot the plain and decrypted images in Fig. 6. Although the decrypted image are changed when there exists noise in the cipher image, the approximate information of the plain image is preserved, even when the slat-and-pepper noise as high as 5%. In real application, image cropping is very common, which may lead to data loss [47]. To assess the capability of the proposed strategy to resist the data loss, similarly, we use the deployed cryptosystems to encrypt a plain image, randomly select and remove 64 × 64, 128 × 128, or 512 × 512 blocks from the cipher images, replace the removed block with white or black blocks, decrypt the modified cipher images with the same keys, and show the results in Fig. 7. Clearly, the contours of the plain images are preserved, even though 256 × 256 blocks are removed from the cipher images. That is, when there exist 25% data loss in the cipher image, the deployed cryptosystems can still recover the information of the plain image. The proposed strategy, therefore, can resist noise and data loss. This paper is under CC 4.0 license. available on arxiv

Robust Cryptosystem Analysis: Key Space Sensitivity and Differential Attack Resistance

You have completed a course, watched a series of videos on YouTube, or read a series of articles about iOS development, and now you feel ready to write your first pet project. Firstly, well done! That’s awesome. You’re cool! 💪 Secondly, a pet project is a fantastic boost to your skills. When you start doing something on your own, not following instructions — you have to spend a ton of time and effort, Google a lot, read heaps of new information, and try to filter and fit it precisely into your case. In short, it’s already a real task that will boost you five times. However, most beginners ignore key things (not out of their initiative, but without understanding their importance). Over the past six months, I have been actively and helping newcomers with their questions and problems, including pet projects. mentoring I have identified the top 3 points that you, as a beginner, should incorporate into your must-have list, master, understand, and use. Access Level At first, almost no one pays attention to the modifier. Meanwhile, everyone can instantly explain if you wake them up in the middle of the night. Having read various smart articles, people try to create a bunch of classes according to the idea of (single responsibility). private SOLID S And then, with a clear conscience, they change the property of from and vice versa. class A class B class A {
    
    var someAValue: Int?

}

class B {

    let a = A()

    func foo() {
        a.someAValue = 1
    }

} In general, if it’s still unclear, here’s the plan: always write private everywhere, and when the compiler complains — think, is it okay to access this property or function from the outside? And if it is — remove private . When you think, guide yourself with real-world comparisons. For example, if your class is a store, then the property should obviously be accessible to the external customer. But the can clearly only be changed by an internal store employee. goods moneyInCashRegister After all, a customer shouldn’t have access to the cash register, even with , let alone . put fetch One might argue, “I understand perfectly well which property can be touched and which cannot even without a modifier”. However, writing access level modifiers is part of the design. I am sure you wouldn’t create a blueprint for a house with a door on the third floor leading outside. private And then, just remember not to open it. After all, it’s likely that others will use your code too. By the way, a similar situation exists with and . Again, always use unless you’re immediately sure you’ll change the value. var let let Architecture Simplicity I’ve noticed a tendency where beginners try to plan everything in advance. While this is commendable, developers often make mistakes due to their lack of experience. They pre-prepare overly complex managers (usually copied from ) with many complicated methods, which they eventually never use. As a result, the amount and complexity of the code grows. StackOverflow Instead of what seemed like a convenient, ready-made service, our programmer ended up with only problems and misunderstandings. The same goes for architecture. Let me briefly journey you through the history of programming to convey my point. By the end of the 1960s, as the popularity of programming began to grow, the sizes of programs also increased. As you can understand, a larger program size means more lines of code, leading to increased complexity and difficulty in understanding the program. To address this issue, structured programming emerged — functions and procedures that allowed programs to be divided into smaller, manageable parts. The code became modular, reusable, and more understandable. The advent of structuring led to further growth in programs until they again reached their size and complexity limits. Therefore, by the late 1970s and early 1980s, the object-oriented programming approach was formed. This solution enabled the creation of flexible and scalable systems, addressing increasingly complex tasks. In the next decade, we witnessed the boom of computer games. The reaction to user actions (clicks, presses) turned out to be critical, leading to the emergence of Event-Driven Programming. And for organizing code in web and desktop applications — when the same data needed to be rearranged from different perspectives — the MVC pattern (i.e., separating the model from its visual representation) emerged. You’ve grasped the main idea: a problem arises, -> a solution emerges. Problem -> Solution. So why do beginner programmers now start applying solutions (architectures) at a time when the problems have yet to arise? Tutorials immediately suggest choosing at least an MVP. Test tasks for one/two screens always specify NOT to use MVC. During interviews, a person who has written a couple of pet projects with the same one/two screens is asked about VIPER problems. How could he know about the problems if he has not yet encountered them? People often talk about the convenience of testability in the context of architecture, but they haven’t ever written tests. And if they have, it was based solely on some tutorial, focusing only on unit tests without tying them to an actual application. They can explain the MVP scheme in simple terms, but they often get confused when it comes to protocols with similar names, like and . Deep down, they already see all of this as some overhead 🙄🤯 ViewInput ViewOutput Conclusion: Don’t create problems for yourself. Don’t be ashamed of MVC. When your controller grows too large, or you encounter inconveniences, you’ll understand it’s time to look for new approaches. UI Simplicity Front-end development is a dopamine paradise for beginners. You write code and immediately see the result on the screen — receiving your reward 🍭. It’s undeniably motivating. However, there’s a flip side to this coin. Beginners often strive to create overly complex UI right away. Moreover, complex features tend to follow complex UI. Even though SwiftUI simplifies the task today, one can still spend much time adding bells and whistles without making real progress. I learned iOS development in a course where we formed teams and worked on a single project. In my team, a guy suggested starting our app development by choosing fonts and colors for the dark mode. Overall, he spent the entire course on it, and it’s worth noting that the fonts and colors turned out fabulous. However, the guy wrote approximately zero lines of actual code during all that time. Undoubtedly, the beauty and functionality of your application are crucial. Eventually, you’ll have to spend time on this aspect. It’s just better to start with something simpler. Develop an MVP (minimum viable product), focus on the most critical features, and launch from there. The opposite approach will lead to grappling with complex nuances and constantly dealing with a main functionality that keeps breaking. The applies here — create the fundament of the application, and then add the extras. 80–20 rule For newcomers in mobile development, there’s a risk of adopting complex solutions prematurely. While the visual rewards of front-end development can be enticing, starting with a simple MVP is often wiser. Historical trends suggest that solutions should evolve in response to genuine challenges. Understanding foundational principles and addressing real-world problems as they arise is critical to effective development. Also published here

Newbie Guide: Top 3 Things You're Doing Wrong as a Beginner in Mobile Development

নবাগত গাইড: মোবাইল ডেভেলপমেন্টে একজন শিক্ষানবিস হিসেবে আপনি ভুল করছেন শীর্ষ 3টি জিনিস৷

Leitfaden für Neulinge: Die drei wichtigsten Dinge, die Sie als Anfänger in der mobilen Entwicklung falsch machen

Guía para principiantes: las 3 cosas principales que estás haciendo mal como principiante en desarrollo móvil

Guide du débutant : les 3 principales choses que vous faites de mal en tant que débutant en développement mobile

नौसिखिया गाइड: शीर्ष 3 चीजें जो आप मोबाइल विकास में एक शुरुआतकर्ता के रूप में गलत कर रहे हैं

初心者ガイド: モバイル開発の初心者が間違っていることトップ 3

초보자 가이드: 모바일 개발 초보자가 저지르는 3가지 실수

Guia para iniciantes: as três principais coisas que você está fazendo de errado como iniciante em desenvolvimento móvel

Руководство для новичков: 3 основные вещи, которые вы делаете неправильно, будучи новичком в мобильной разработке

Acemi Rehberi: Mobil Geliştirmeye Yeni Başlayan Olarak Yanlış Yaptığınız En İyi 3 Şey

Hướng dẫn cho người mới: 3 điều bạn đang làm sai nhất khi mới bắt đầu phát triển thiết bị di động

新手指南：作为移动开发初学者，您最常犯的 3 件事

MinIO is one of the most widely implemented object stores because it offers high-performance, massive scalability, high-availability and adheres to the industry-standard S3 protocol. MinIO is capable of tremendous performance - a achieved 325 GiB/s (349 GB/s) on GETs and 165 GiB/s (177 GB/s) on PUTs with just 32 nodes of off-the-shelf NVMe SSDs. No matter where you run MinIO – bare metal, virtual instances or Kubernetes – MinIO’s performance and scalability provide an excellent foundation for such cloud-native applications as data lakes, analytics, AI/ML and more. recent benchmark In addition to Kubernetes, customers run MinIO on virtual instances and bare metal, frequently relying on in the datacenter and clouds like , and . Linux’s small footprint coupled with efficient resource utilization make it a versatile and flexible choice for running MinIO. Yet, the greater numbers of Linux machines and instances require automation to reduce administrative burden. There is a need for managing MinIO servers as an init service using SystemD because it helps to automate the service lifecycle, particularly during startup, shutdown and restart. Supermicro hardware AWS GCP Azure is a service manager that maintains services in Linux systems during boot up, shutdown, initialization and more. Think of it as the successor to init scripts where you had to write the whole thing from scratch, but with SystemD you just fill in a few parameters and the commands and logging are standardized. SystemD One of the several challenges of using the older init.d service management was that you had to write the entire file from scratch. Each init.d file was unique and had a different way of managing the lifecycle of the service. SystemD takes the lessons learned from init.d and standardizes them. For instance, the SystemD service files will work any service as long as it's written to run – only the paths, names, and semantics are different – but the basic structure, how to restart services, reading logs, gracefully un-mounting filesystems, waiting for network connections to come up, among other things, are now common among all services, so no matter which service you run you know exactly where to look for its logs. Not only is SystemD versatile among different services, but you can take the same SystemD service file and use it across multiple operating systems, as long as the operating system is also using SystemD to manage the lifecycle of its services. This simplifies automation as you can be working on Ubuntu while creating the initial file, but the same file can then be deployed to CentOS/RedHat operating system as long as the paths and other things remain the same, which in most cases they do. There are several main components to SystemD but a few that you will come across more often are: : This is what is used to control the processes, whether to stop, start and restart mostly. The most common commands used are: systemctl systemctl start <service> systemctl stop <service> systemctl restart <service> journalctl: The logs for the services when they do their startup, shutdown and restart operations. It’s a good way to get insight if something is not working properly. The most common command I use, which shows logs enough to fill up your terminal window and scrolls to the very end: journalctl -e -u <service> To run most of the commands in this guide you need to have `sudo` or root access because SystemD config files need to be permissioned as root. You can also find in our repository. additional instructions for MinIO and SystemD MinIO Binary Fetch the MinIO binary from upstream # wget https://dl.min.io/server/minio/release/linux-amd64/minio


--2022-07-24 11:31:33--  https://dl.min.io/server/minio/release/linux-amd64/minio
Resolving dl.min.io (dl.min.io)... 132.68.11.115, 138.118.66.212
Connecting to dl.min.io (dl.min.io)|132.68.11.115|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 96649216 (92M) [application/octet-stream]
Saving to: 'minio'

minio                       100%[==========================================>]  92.17M  50.2MB/s    in 1.8s

2022-07-24 11:31:35 (50.2 MB/s) - 'minio' saved [96649216/96649216] Make it executable so SystemD can run MinIO as a service # chmod +x minio Move it to a location that is executable under $PATH # mv minio /usr/local/bin/ Service File MinIO can be installed in a few different ways on Linux based on the operating system. RedHat/CentOS and its derivatives rely on the.rpm package and Debian/Ubuntu  use the .deb package. In both cases, the following SystemD service file is included in the installation package. However, we manually fetched the MinIO binary from upstream, so we’ll manually create the SystemD service file. Use your favorite text editor to create a SystemD file at with the following contents. /etc/systemd/system/minio.service [Unit]
Description=MinIO
Documentation=https://docs.min.io
Wants=network-online.target
After=network-online.target
AssertFileIsExecutable=/usr/local/bin/minio

[Service]
WorkingDirectory=/usr/local

User=minio-user
Group=minio-user
ProtectProc=invisible

EnvironmentFile=-/etc/default/minio
ExecStartPre=/bin/bash -c "if [ -z \"${MINIO_VOLUMES}\" ]; then echo \"Variable MINIO_VOLUMES not set in /etc/default/minio\"; exit 1; fi"
ExecStart=/usr/local/bin/minio server $MINIO_OPTS $MINIO_VOLUMES

# Let systemd restart this service always
Restart=always

# Specifies the maximum file descriptor number that can be opened by this process
LimitNOFILE=65536

# Specifies the maximum number of threads this process can create
TasksMax=infinity

# Disable timeout logic and wait until process is stopped
TimeoutStopSec=infinity
SendSIGKILL=no

[Install]
WantedBy=multi-user.target

# Built for ${project.name}-${project.version} (${project.name}) : The Linux system group the Minio daemon will run as. Create it using the following command: Group=minio-user groupadd -r minio-user : The Linux system user the MinIO daemon will run as. Create the user using the following command: User=minio-user useradd -M -r -g minio-user minio-user : This prevents creating a home directory for the user since this is a service. -M : Systems users have a separate UID/GID range for tracking purposes, this flag will create the user from the predetermined range. -r : Group to add the user under. -g <group_name> MinIO Distributed Setup There are a couple of prerequisites that are required to set up on the bare metal node before MinIO service can be started. Create a new disk and ensure it is not on the same partition as root volume, to avoid the following message: Error: Disk /mnt/disk1/minio is part of root disk, will not be used Create 4 directories on your local host where the new disk was just mounted, in this case : /mnt/data mkdir -p /mnt/data/disk1 \
mkdir -p /mnt/data/disk2 \
mkdir -p /mnt/data/disk3 \
mkdir -p /mnt/data/disk4 the directories with the MinIO user and group chown chown minio-user:minio-user /mnt/data/disk1 /mnt/data/disk2 /mnt/data/disk3 /mnt/data/disk4 Environment Service Files Update this file with the following content /etc/default/minio # Set the hosts and volumes MinIO uses at startup

# The command uses MinIO expansion notation {x...y} to denote a

# sequential series.

#

# The following example covers four MinIO hosts

# with 4 drives each at the specified hostname and drive locations.

# The command includes the port that each MinIO server listens on

# (default 9000)


MINIO_VOLUMES="https://minio1.example.com:9000/mnt/data/disk{1...4}/minio"


# Set all MinIO server options

#

# The following explicitly sets the MinIO Console listen address to

# port 9001 on all network interfaces. The default behavior is dynamic

# port selection.


MINIO_OPTS="--console-address :9001"


# Set the root username. This user has unrestricted permissions to

# perform S3 and administrative API operations on any resource in the

# deployment.

#

# Defer to your organizations requirements for superadmin user name.


MINIO_ROOT_USER=minioadmin


# Set the root password

#

# Use a long, random, unique string that meets your organizations

# requirements for passwords.


MINIO_ROOT_PASSWORD=minioadmin


# Set to the URL of the load balancer for the MinIO deployment

# This value *must* match across all MinIO servers. If you do

# not have a load balancer, set this value to to any *one* of the

# MinIO hosts in the deployment as a temporary measure.

MINIO_SERVER_URL="https://minio.example.net:9000" Start the MinIO Process We have all the pieces we need to enable and start the service # systemctl enable minio.service
# systemctl start minio.service Check the status of the service and logs # systemctl status minio.service
# journalctl -e -u minio.service Verify that the MinIO service has come up. In the logs you should see something similar to this: Aug 01 13:27:06 aj-test-3 systemd[1]: Starting MinIO...
Aug 01 13:27:06 aj-test-3 systemd[1]: Started MinIO.
Aug 01 13:27:07 aj-test-3 minio[3241]: Formatting 1st pool, 1 set(s), 4 drives per set.
Aug 01 13:27:07 aj-test-3 minio[3241]: WARNING: Host minio1.example.com:9000 has more than 2 drives of set. A host fai>
Aug 01 13:27:07 aj-test-3 minio[3241]:  You are running an older version of MinIO released 4 days ago
Aug 01 13:27:07 aj-test-3 minio[3241]:  Update: Run `mc admin update`
Aug 01 13:27:07 aj-test-3 minio[3241]: MinIO Object Storage Server
Aug 01 13:27:07 aj-test-3 minio[3241]: Copyright: 2015-2022 MinIO, Inc.
Aug 01 13:27:07 aj-test-3 minio[3241]: License: GNU AGPLv3 <https://www.gnu.org/licenses/agpl-3.0.html>
Aug 01 13:27:07 aj-test-3 minio[3241]: Version: RELEASE.2022-07-26T00-53-03Z (go1.18.4 linux/amd64)
Aug 01 13:27:07 aj-test-3 minio[3241]: Status:         4 Online, 0 Offline.
Aug 01 13:27:07 aj-test-3 minio[3241]: API: https://minio.example.net:9000
Aug 01 13:27:07 aj-test-3 minio[3241]: Console: http://10.128.0.4:9001 http://127.0.0.1:9001
Aug 01 13:27:07 aj-test-3 minio[3241]: Documentation: https://docs.min.io Log in to Console Using a browser, log in to the MinIO console using the and from the configuration we made earlier. MINIO_ROOT_USER MINIO_ROOT_PASSWORD http://<server_host_ip>:9001/ Note the above setup is for you to quickly get up and running with MinIO. You can expand from a single node to a multi-node distributed configuration for additional testing. If you would like to deploy and configure MinIO  in a production environment, please refer to the . documentation SystemD Simplifies MinIO Virtual and Bare Metal Deployments Integration with SystemD is very versatile. The syntax of the service file is the same across all services The same service file will work across any OS that supports SystemD You can use SystemD with bare metal or on VMs in any cloud such as AWS, GCP and Azure. This can help with automation for DevOps by standardizing the format and making it simple to automate deployments. Automation goes a long way towards maintaining availability when running a mission critical service like object storage. Automation is a requirement for operating at scale across multiple clouds and environments. With the help of SystemD and MinIO you can automate your cloud object storage deployments and ensure the service lifecycle is managed smoothly and successfully. Got questions? Want to get started? Reach out to us on . Slack Also published . here

Automating Cloud Storage Deployments With MinIO and SystemD

Automatización de implementaciones de almacenamiento en la nube con MinIO y SystemD

Automatisation des déploiements de stockage cloud avec MinIO et SystemD

मिनिआईओ और सिस्टमडी के साथ क्लाउड स्टोरेज परिनियोजन को स्वचालित करना

MinIO と SystemD によるクラウド ストレージ デプロイメントの自動化

Automatizando implantações de armazenamento em nuvem com MinIO e SystemD

Tự động triển khai lưu trữ đám mây với MinIO và SystemD

使用 MinIO 和 SystemD 自动化云存储部署

In the realm of programming, there exists a powerful utility known as . This often-overlooked gem enables developers to orchestrate concurrent execution of multiple asynchronous tasks, leading to improved performance and efficiency. Dart Future.wait() In this blog post, we will explore the problem domain where can save the day and delve into best practices for utilizing it effectively. Future.wait() The Problem Imagine you are developing a Dart application that needs to fetch data from multiple remote APIs simultaneously? That was our case and we got PR for this case scenario in a Dart/Flutter code I am managing, as it is listed in the code snippet below! Given I can’t share the whole code, I will embody this code smell with the power of later in this blog: Future.wait() void fetchFromRemoteApis() {
  final apiAFuture = fetchDataFromApi('API A');
  final apiBFuture = fetchDataFromApi('API B');
  final apiCFuture = fetchDataFromApi('API C');

  apiAFuture.then((resultA) {
    print('Received result from API A: $resultA');
    apiBFuture.then((resultB) {
      print('Received result from API B: $resultB');
      apiCFuture.then((resultC) {
        print('Received result from API C: $resultC');
        print('All API calls completed successfully!');
      }).catchError((errorC) {
        print('An error occurred while fetching data from API C: $errorC');
      });
    }).catchError((errorB) {
      print('An error occurred while fetching data from API B: $errorB');
    });
  }).catchError((errorA) {
    print('An error occurred while fetching data from API A: $errorA');
  });
} In this suboptimal approach, the code chained the callbacks sequentially for each API call. This results in nested callbacks, commonly known as the "callback hell" or "pyramid of doom" pattern. It leads to less readable and more error-prone code, especially when handling errors. then The code also first fetches data from API A. Upon successful completion, it proceeds to fetch data from API B. Finally, when API B completes successfully, it proceeds to fetch data from API C. At each stage, error handling is implemented using to capture and handle any errors that may occur during the API calls. catchError() The main disadvantage of this approach is that it lacks the efficiency of concurrent execution, as each API call waits for the previous one to complete before initiating the next. This can lead to longer overall execution time, especially when dealing with multiple independent asynchronous tasks. Traditionally, when dealing with asynchronous tasks, you might resort to executing them one after another, waiting for each one to complete them before starting the next. This sequential approach can lead to suboptimal performance, especially when network latencies come into play. , is a function that enables concurrent execution of asynchronous tasks. With this mighty tool at our disposal, we can dramatically enhance the efficiency of our code by fetching data from multiple remote APIs concurrently, taking advantage of parallelism and reducing overall execution time. Harnessing the Power of Future.wait() : Future.wait() : Here's how Future.wait() works We create a list of objects, each representing an asynchronous task, such as fetching data from a remote API. Future We pass this list of objects to . Future Future.wait() returns a new that completes when all the provided objects have completed. Future.wait() Future Future Saving the Day with Future.wait() Consider a scenario where your application needs to fetch data from three different remote APIs: A, B, and C. Without , you might fetch data from A, wait for it to complete, then fetch data from B, and finally fetch data from C. This sequential approach can be time-consuming and inefficient. Future.wait() However, by utilizing , you can kick off all three asynchronous tasks concurrently, reducing the overall execution time. The returned by will complete only when all three API calls have finished, allowing you to collect the results efficiently. Future.wait() Future Future.wait() So, I reviewed the code smell to make it better. Let’s proceed to that. : Writing Better Code To make the most of , here are a few best practices: Future.wait() Use when the tasks are truly independent and can be executed concurrently. If there are dependencies between tasks, consider using or to handle them. Future.wait() Future.then() async/await Ensure that the tasks passed to are truly asynchronous and return a . If not, consider wrapping synchronous code in a using or . Future.wait() Future Future Future.value() Future.microtask() Utilize error-handling mechanisms like or callbacks to handle exceptions that might occur during the execution of concurrent tasks. try-catch onError If there's a need to set a timeout for the completion of , you can use to handle situations where certain tasks take an unusually long time. Future.wait() Future.wait(...).timeout(...) The Fix: So here, I embodied the code smell and used to make it better. I have also chosen open random endpoints for you to see how effective it can serve concurrent execution: Future.wait() API import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() {
  fetchFromRemoteApis();
}

void fetchFromRemoteApis() async {
  final apiAFuture = fetchDataFromApi('https://jsonplaceholder.typicode.com/posts');
  final apiBFuture = fetchDataFromApi('https://jsonplaceholder.typicode.com/comments');
  final apiCFuture = fetchDataFromApi('https://jsonplaceholder.typicode.com/todos');

  try {
    List<dynamic> results = await Future.wait<dynamic>([apiAFuture, apiBFuture, apiCFuture]);
    
    for (var result in results) {
      print('Received result: $result');
    }
    
    print('All API calls completed successfully!');
  } catch (error) {
    print('An error occurred: $error');
  }
}

Future<dynamic> fetchDataFromApi(String apiUrl) async {
  final response = await http.get(Uri.parse(apiUrl));

  // Check the response status
  if (response.statusCode == 200) {
    final jsonResponse = jsonDecode(response.body);
    return jsonResponse;
  } else {
    throw Exception('API request failed with status ${response.statusCode}');
  }
} As much as different software engineers can have differing opinions such as using with inside , which I think is unnecessary nested callbacks, or use only with which creates an additional callback function and introduces an extra layer of complexity, I believe the algorithmic complexity of the code smell is reduced drastically by the fix provided in this blog. .map() .then() Future.wait() .then() Future.wait() Conclusion In the ever-evolving world of Dart programming, it's essential to leverage the right tools for improved performance and efficiency. is a valuable utility that empowers developers to achieve concurrent execution of asynchronous tasks, effectively reducing execution time and optimizing resource utilization. By incorporating into your code, you can unlock the magic of concurrent programming and embrace the power of Dart to its fullest potential. Future.wait() Future.wait() So, the next time you find yourself juggling multiple asynchronous tasks, remember the spellbinding capabilities of and watch as your code performs its own brand of magic. Future.wait() If you need more resources on , kindly refer to and . Future.wait() https://api.dart.dev/stable/2.1.0/dart-async/Future/wait.html https://api.flutter.dev/flutter/dart-async/Future/wait.html Happy coding!

Harnessing Concurrent Execution with “Future.wait()” in Dart

Year in, and year out, there is a new technological trend moving ahead of the curve. And in recent years, we've seen the crypto market fill this spot through various innovative projects, features and functionalities worthy of all the buzz. However, with the bear rally affecting the and the emergence of mind-blowing AI technologies, there is another wave of ricochet building globally. That new wave is AI technology. crypto market cap in 2022 The possibilities of Artificial intelligence are endless, and that's evident in some recent projects we've seen. One major one is Chatgpt, the famous . It gets even more exciting to know that AI technology is breaking into several sectors, and the crypto sphere is not exempted from its reach. Here, we'll talk about the advent of AI tokens, what they are and how they could be a revolutionary addition to the overall ecosystem. chatbot launched by openAI in 2022 Let's Start With The Basics: What Are AI Tokens? AI tokens are cryptocurrencies or digital tokens that support access to AI products and services using blockchain technology. They power the AI community and function as a utility token for AI projects. The AI community is diversifying into several sectors, including the cryptocurrency market. AI projects in crypto improve the blockchain ecosystem in more ways than one, including scalability, security, decentralization, and many more. In addition, AI tokens may also refer to tokens used to represent AI-based digital assets and blockchain projects that signify investors' rights to such platforms. These tokens help raise funds for the project, facilitate rewards, build a community of active users, create a sense of ownership among users and ultimately provide investors with a way to benefit from the project's success. AI Tokens: Current State Of The Market. With this new technology rising rapidly in popularity, we see some exciting price actions signifying that they could be worthy investment options in the long run. As of February 4th, 2023, AI price actions have risen to about $ Some top leading coins in the asset class include fetch.ai, singularityNET, Ocean protocol and more. The live price is a significant increase from previous price actions. And this indicates that AI tokens are another hot spot to watch in the market. 1.87 billion in market capitalization. Applicable Use Cases Of AI Tokens These tokens' application and use cases often vary based on the project they power. However, we've seen several use cases of AI spanning from decentralized applications, DAOs, marketplaces, image generations, and so much more. The primary use case of these tokens is to serve as the primary utility tokens of these projects. Some popular AI projects and their major utilities are listed below. SingularityNET - Decentralized AI Marketplace Oraichain - Oracle solutions for AI data Alethea ai - Image generator Hera - Pathfinder Numerai- AI-based portfolio management Top Five AI Tokens Making Massive Wave In 2023 According to here are some leading AI tokens making waves in price action and on-chain activity in 2023. market capitalization, SingularityNET(AGIX) is currently ranked one of the top-performing AI tokens by market capitalization. It is a blockchain platform that allows users access to any AI services in a decentralized manner. This platform utilizes blockchain technology to deliver the best AI services, enabling individuals to build, create and monetize AI while maintaining the decentralized nature of the crypto community. As of March 7th. 2023, it has an , with a 24-hour trading volume of $125 million. SingularityNET overall market cap of $493 million Fetch.ai(FET) is another revolutionary AI project gaining popularity. Its token FET is amongst the top performers by market cap and could improve in the coming months. Fetch.ai is a cryptocurrency platform that uses AI technology to create a decentralized infrastructure for its users. It is another platform that helps facilitate better experiences and improve efficiency through AI tech. On fetch.ai, users can build exciting new tools and perform numerous tasks more effectively using Artificial Intelligence. Fetch.ai Artificial Liquid Intelligence(ALI) , also known as Alethea AI, is a system that allows users to convert their NFTs into intelligent NFTs(iNFTs). iNFTs are non-fungible tokens that can make intelligent interactions and possess the ability to evolve and generate interactive capabilities. Alethea Ai is a platform that facilitates these transformations, interactions, growth and evolution of NFTs into iNFTs. Artificial liquid intelligence Ocean Protocol(OCEAN) is a blockchain-based platform that aims to create a decentralized data exchange marketplace for AI applications. It enables safe and secure data sharing and monetization, particularly for AI. With ocean protocol, individuals and organizations can securely and privately share, buy, and sell data assets in a transparent and decentralized manner using blockchain technology. Ocean Protocol iExec RLC(RLC) is a decentralized cloud computing platform that uses blockchain technology to Bridge the gap between developers and users. It facilitates the users' secure and decentralized access to computing resources. The platform allows individuals and businesses to use blockchain technology to rent out their idle computing resources. iExec RLC Take away AI is transforming human productivity, and while there might be debates on this new technology replacing humans in workforces, we cannot ignore its potential to bring notable change. The demand for AI tokens is increasing, and the prospects and future outlook point towards something bright and innovative. These tokens can potentially transform how the decentralized AI marketplace works, interactions, and the governance process. AI technology is indeed something to look forward to, and its integration into the crypto community is another exciting event yet to be seen.

AI Tokens are Gaining Momentum in 2023

Refurbished phones are always a great option if you want something new. You can have the thrill of buying a new-to-you phone without digging too deep into your pockets. For several reasons, refurbished phones are the best way to purchase affordable ones that look new — but not every country has adopted this popular method. What Can Refurbished Phones Do? That's the great thing about refurbished phones — they can do everything that brand-new phones can. Refurbished phones are used devices that are well taken care of. Depending on how fresh and new they look, people can sell them in different tiers. Top-quality refurbished phones might fetch a higher price, while phones with nicks and scratches in the hardware might sell for less. Still, they can all run the same apps and have the same features to expect from a phone of that model. Many organizations may use refurbished phones for good causes. Some might donate them , while others may go to lower-income households that need a line of communication. Retailers and individuals might also choose to sell used devices to the general public. Secondhand phones are an excellent investment for many people and are worth the hype they're getting. to victims of domestic violence Why Refurbished Phones Are Popular One of the most apparent reasons refurbished phones are so popular is that they're much cheaper. You can save money on phones by buying the ones you love secondhand. It’s possible to on a new-to-you phone simply by shopping for refurbished models instead of brand-new ones. save upwards of $600 As phones evolve based on what people need them for, more models come out. The trick is to wait them out until they start popping up in the secondhand and refurbished markets. If you can wait until then, you may have an almost brand-new phone just a few months after its release. Affordability is by far the most crucial aspect of refurbished phones. However, some people may choose to go after secondhand phones because they're a more flexible option than a legally binding phone contract and plan. They can easily put a used phone onto a plan without worrying about breaking a costly contract. They fit everyone's needs, whether they’re on a budget or looking for a phone outside of the ones provided by their carrier. Another perk of buying refurbished phones is that they're better for the environment. In less than a decade, the world will experience much more electronic waste than ever before. By recycling old phones for a new purpose instead of creating a higher demand for electronics, you'll contribute to a greener future while enjoying all the perks of a secondhand device. While this trend of refurbished phones has taken off in other locations, it hasn't found a home yet in the United States. Only a third of people in the United States say they instead of a new one. Some people may think that having the latest and best model — and trading in whenever possible for a more recent version — is the best way to use smartphones. Media plays its part in . would purchase a refurbished phone driving this materialism in America Many Americans might worry about the reliability of secondhand phones. Many others may not care about environmental issues caused by phone production — at least, it’s not a motivator in helping them choose refurbished phones. Eventually, the trend should move into the United States’ marketplace and more people will see the personal and environmental benefits of purchasing a refurbished phone. What to Look for in a Refurbished Phone If you've decided to buy a refurbished phone, you probably know all the benefits of buying secondhand. Just because you run into the model you like doesn't mean it's the best refurbished phone for you, though. Keep these things in mind when looking for your favorite phone model. 1. Factory Reset You should always ensure whoever sells the phone restores its factory settings. If it hasn't and you're buying it secondhand directly from the former owner, make sure to factory reset it as soon as possible. That way, you can make sure their information stays secure and out of the wrong hands. Also, you can know the personal information you load onto the phone will have only the and ensure no one else can access your data. permissions you want to give apps 2. Enough Storage Think about the storage settings on your last phones. What has seemed like adequate storage? You must ensure that the phone has enough room for all the apps, photos, and music you want to store. Before buying the phone, make sure the GB storage is exactly as the seller listed it. You don't want to end up overpaying for less storage. 3. Good Battery Life Everyone searches for a phone with lots of battery life. The only downside of used phones is they may not have a battery life as good as those in brand-new phones. Still, you can mitigate this loss using other methods, such as and keeping the screen dim when you aren't using it. taking your phone off of auto-brightness 4. Sturdy Body and Screen Before someone resells a phone, they should repair its screen. Nicks and scratches on the body of the phone may be unavoidable, but you can always pay more for a phone that looks brand-new. Make sure to look over the phone. If you want a phone with a better appearance, you'll want to check out the screen carefully — and buy a screen protector while you're at it. 5. Extras That Sold You Maybe there was a gimmick about this phone that made you want it in the first place, yet you couldn't obtain the phone when it first hit the shelves. Buying refurbished phones is a great way to get a discount on the one you've loved for years but could not get until now. Something Old and Something New Just because someone used a phone before doesn't mean it's not suitable for a second owner. People may love the allure of shiny, brand-new phones, but it's not always realistic for everyone. Some people buy recycled phones to benefit the environment, while others might like the freedom it allows them — both in terms of contract and price point. Refurbished phones are a great investment for everyone. They can allow you to have your favorite model without worrying about payments that are too high or any negative contributions to the environment.

FETCH MI

fetchmi.io

-- employees

Since n.d.

COMPANY RANKING

FETCH MI

EVERGREEN INDEX #4243

Representing this company? Click here to claim and customize this page!

Fetch MI WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

FETCH MI

fetchmi.io

-- employees

Since n.d.

COMPANY RANKING

FETCH MI

EVERGREEN INDEX #4243

RELATED COMPANIESRANK

STORIES ABOUT FETCH MI

Representing this company? Click here to claim and customize this page!

Fetch MI WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!