Toggl Hire

togglhire

Meet the Winners of Startups in North and Central America

How to Build Real-time Voice Search on React

I am a great reader, I love books and I try to read as much as I can, no matter the topic, whatever, fantasy, comedy, sci-fi, educational...Books take me to another world, they make me feel, make me think, make me relax and make me disconnect from the day by day schedule. I cannot live without them. This is why my first approach to Javascript was to create a Library to store my books, with some information about them ( title, author, number of pages…) and if I read it or not. I know, it was a small, simple project, but what do you expect? It was my very first one, so I only wanted to practice as much as I could and make it work. So, I created my HTML file, my `script.js` file and worked a bit on my CSS to build something nice to my eyes. After working on it for a while, I got my site looking good and my library working fine. I had a table with my books, with all the information related and a “NEW BOOK” button that brought up a form allowing me to input the details for a new book to add to the library. All the books were an instance of the constructor Books, with a prototype to toggle the read status and all of them stored in an array. Something like this: { .title = title; .author = author; .pages = pages; .read = read;
}

Book.prototype.info = { .title + + .author + + .pages + + .read;
}
Book.prototype.toggleReadStatus = { .read = .read == ? : ;
} myLibrary = []; ( ) function Book title, author, pages, read this this this this ( ) function return this " by " this ", " this " pages, " this ( ) function this this 'Read' 'Not read' 'Read' let Perfect! I was so happy so I started to add read books and books that I planned to read, I spent some time with it. Actually, it was my first JS creation and wanted to play around a bit. After all the work I went to have lunch and went came back to my computer and opened my page again...surprise! No one book there, all of them gone! My array was empty, and all my previous work adding content as well. Bad luck or just a beginner mistake, I thought all the data will remain in my array and would keep it there forever, but it is not working that way. After some research on the web, I understood that I needed to store the data somewhere or it would vanish every time I refreshed the page. LocalStorage My first approach to the storage was using , `LocalStorage` is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. LocalStorage Storage objects are simple key-value stores, similar to objects, but stored in `string` format. These web storage objects are not sent to the server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. The use of the `localStorage` is quite straight-forward, has no secrets, it provides some methods to work with it: setItem() With this method, you store a key/value pair into `localStorage`. It takes two parameters, the key and the value. Like this: .localStorage.setItem( , );
getItem() window 'book' 'The Lord of the Rings' With this method, you access to local storage by a key given. For example: .localStorage.getItem(‘book’); window // The Lord of the Rings removeItem() Providing the key, this method will remove the key and its values. .localStorage.removeItem(‘book’); window clear() This method, when invoked, clear the `localStorage` deleting everything. .localStorage.clear(); window length Returns the length of the `localStorage`. .localStorage.length; key() window // returns an integer This method requires one parameter, an index, and return the key on that position in the `localStorage`; .localStorage.key(index); window We have already said that `localStorage` store all the data in `string` format, so how do we do to store objects? My library array, for example... To do so we need to convert our object into a string, or into a JSON. We can do that: book = { :’ ’, :’George Orwell’
} .localStorage.setItem(‘books’, .stringify(book); const name 1984 author window JSON When we call method, it will return us a string with values, something like that: getItem() .localStorage.getItem(‘books’)
“{“book”:” ”,”author”:”George Orwell”}” window 1984 In this case, we need to convert it into an object using the method JSON.parse(). .parse( .localStorage.getItem(‘books’)); JSON window And we will get our object back. We neither can iterate over `localStorage`, but there is a way we can apply to do so, using the key and the length methods: ( i= ; i<localStorage.length; i++) { key = localStorage.key(i);
  alert( );
} for let 0 let ` : ` ${key} ${localStorage.getItem(key)} So...cool! After learning all of that I implemented it in my Library project, and this time it worked as I wished. Great!!! But there was a problem, I always want more and more, and the problem with `localStorage` is that is only accessible on the computer that it was created on. So I could not access my library from any other device or when I am not at home. LocalStorage was a solution, but not the one I was looking for. So, back to google and spend some more time researching on the web, until I found Firebase. Firebase Firestore is an online database that can be set up relatively easily, allowing you to save your data to a server in the cloud. Well, actually, it is not only that, Firebase is a Backend-as-a-Service (BaaS). That means that it offers different services like authentication, analytics, hosting, cloud storage…. Firebase I paid special attention to . So I started to read the documentation and learn from an online tutorial they provide (you can find it ). Cloud Firestore here When I finished it I went back to my project and spent some time thinking about how to implement it. I already had my Library working so it was only a few changes to make. The first step is to Sign into Firebase website using your Google account, for example. And create a Firebase project to connect to your app. No secrets to do that, just click on the ‘Add Project’ and add a Project Name,  you can also set up Google Analytics for your project, which enables you to use many of the Firebase’s products. After that, you need to add your app to your Firebase project. We do that by clicking the Web icon (</>). Then follow the on-screen instructions to add the app to the project. You have to provide a nickname for your app and they will give you the Firestore SDK scripts  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script> <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-database.js"></script> of    And the firebase config firebaseConfig = { : , : , : , : , : , : , : , : ,
}; var apiKey "api-key" authDomain "project-id.firebaseapp.com" databaseURL "https://project-id.firebaseio.com" projectId "project-id" storageBucket "project-id.appspot.com" messagingSenderId "sender-id" appId "app-id" measurementId "G-measurement-id" Then initialize Firebase in the same script block where you added the configuration. firebase.initializeApp(firebaseConfig);
firebase.analytics(); You should add all of that lines at the bottom of your HTML file. At the Firebase console, on the left, click on ‘database’ and create a database. Select a starting mode for your Cloud Firestore Security Rules (test mode is recommended for web apps, and choose the location for your database). When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console. And your project in Firebase is ready and connected to your app Once we have set up all the firebase configuration the next step is add our data to our database, in my case, my library. Think that Cloud Firestore stores data in Documents, which are stored in Collections. Cloud Firestore creates collections and documents implicitly the first time you add data to the document. You do not need to explicitly create collections or documents. Check this for more information. video In my case, I added these lines of code to my js file: firestore = firebase.firestore(); docRef = firestore.collection( ); let const 'books' Where I initialize an instance of Cloud Firestore, and then I create my collection which I called ‘books’. Everything ready to add, receive and update data in my Cloud Firestore Database. Firebase assigns one ID to each entry in your collection, but for readability, I decided to change it and add the title of the book instead, so when I go to my console I can see, in my collection, all the entries with the title and not a bunch of letters and numbers. To add my data I just add the input of the form, when I create a book entry, and set it to the database. Like this: docRef.doc( ).set({ : newBook.title, : newBook.author, : newBook.pages, : newBook.read
      }).then( { .log( );
      })
      .catch( { .error( , error);
}); ` ` ${newBook.title} title author pages read ( ) function docRef console "Document successfully written!" ( ) function error console "Error adding document: " As you can see, here we use asynchronous functions to add the data to our database, setting our new book as an object. If you go to your database in the Cloud Firestore console you will see the collection ‘books’, all the books added as documents and for each document, we can find the title, author, pages and the read status. I had my library on the cloud and I could access it from my site and from the console. Cool! Time to update my library, every time I read a book I need to update the read status from ‘Not Read’ to ‘Read’. I added these lines to my script: docRef.doc( ).update({ : item.read
 }); ` ` ${book.title} read With the method update you can modify your documents by the key given, in my case I only wanted to modify the read status so I only changed that field. How do we remove a document? As everything with Firebase, it is not complicated, I only needed to use the delete() method and add the key I wanted to delete. And...deleted! No secrets! docRef.doc( ).delete(); ` ` ${book.title} And that was all, I got my library ready to access from everywhere and I could access my data from my app and from my Cloud Firestore Database. Conclusion As you can see store the data of your projects it will not be a problem from now on. You can use your browser’s `localStorage` and keep the data locally forever, and if you want to access it from everywhere you can easily implement Firebase Firestore in your project and access your data in an easy and secure way. I usually implement Firebase in most of my projects since it's an amazing tool. You can also use it for your hosting, authentication and many other things it offers. That will come in another article very soon. Thank you for reading. Happy coding!

How To Implement localStorage or Firebase Firestore into your JS project

Hi everyone! In this article I’d like to show you how to create application using . If you don’t know what Flutter is, I encourage you to read my article . However, if you know what Flutter is and you’d like to create an application that is — then keep going with reading! Flutter Redux Flutter — 5 reasons why you may love it well designed, easy to test and has very predictable behaviour What is Redux? Firstly, let’s start with explaining what is. is an application architecture, made originally for JavaScript and now used in applications built with (such as React Native or Flutter). Redux is simplified version of architecture, made by Facebook. But what’s all about with Redux? Basically, you need to know three things: Redux Redux reactive frameworks Flux there’s a — your whole application state is kept only in one place (called store) single source of truth the — to change the application state you need to dispatch an action, and then new state is created state is read-only changes are made with — a pure function (to simplify, it’s a function without side effects) takes the previous state and an action, and returns new state pure functions Sounds cool, but what are the advantages of that solution? we have — it means that we exactly know what caused state change, we don’t have duplicated state and we can easily follow data flow control over the state pure — we can pass state, action and test if result is correct reducer functions are easy to test application is — we have different layers for actions, models, business logic, etc. — so you exactly know where to put another new feature clearly structured it’s great apps — you don’t need to pass state down the whole view tree from parent to child architecture for more complicated and there’ one more… Redux Time Travel There’s one cool feature possible in Redux — 🎉 ! With Redux and you can over the time, inspect actual state and . See this feature in action: Time Travel proper tools track your application state recreate it at any time Time Travel in action — how cool is that? Redux Widgets on a simple example All of the above rules makes data flow in Redux . But what does it mean? In practice it’s all done with . Let’s imagine application that shows button counter: unidirectional actions, reducers, store and states Your application has some at the beginning (number of clicks, which is 0) state Based on that state is rendered. view If user taps on button, there’s send (e.g. IncrementCounter) action Action is received by , which knows previous state (counter 0), receives action (IncrementCounter) and can return new state (counter 1) reducer Your application has new (counter 1) state Based on new state, is rendered again view So as you can see, generally it’s . You have single app , the is read-only for view, and to create new you need to send action. Sending action fires reducer that creates and emits new application . And history repeats itself. all about the state state state state state Redux Data Flow Example of Shopping List App with Redux Let me show how Redux works in practice on more advances example. We’ll create a simple ShoppingCart application. In this application there will be functionalities for: adding items marking items as checked and that’s basically all 😎 The application will look like this: You can see the whole application code on GitHub: _FlutterShoppingCart - Flutter example of shopping app using Redux architecture_github.com pszklarska/FlutterShoppingCart Let’s start with coding! 👇 Prerequisite In this article I’ll not show creating UI for this application. You can check the code for . We’ll start with coding from this point and we’ll add Redux to this application. this Shopping List application before implementing Redux here If you’ve never used Flutter before, I encourage you to try a . Flutter Codelabs from Google Setup To run with Redux on Flutter, you need to add dependencies to your file: pubspec.yaml flutter_redux: ^0.5.2 You can check the newest version on package page. flutter_redux Model Our application needs to manage adding and changing items, so we‘ll use simple model to store single item state. . As you can see, CartItem is just a plain Dart object. CartItem Our whole application state will be just list of CartItems class {String name;bool checked; CartItem (this.name, this.checked);} CartItem Note: Here’s the full source code for this file. Actions Firstly, we need to declare . Action is basically any . In our application we’ll have two actions, for adding and changing item: actions intent that can be invoked to change application state class {final CartItem item; AddItemAction (this.item);} AddItemAction class {final CartItem item; ToggleItemStateAction (this.item);} ToggleItemStateAction Note: Here’s the full source code for this file Reducers Then, we need to tell our application what should be done with those actions. This is why are for — they simply . We’ll have two reducers methods: reducers take current application state and the action, then they create and return new application state List<CartItem> (List<CartItem> items, dynamic action) {if (action is AddItemAction) {return ;} else if (action is ToggleItemStateAction) {return ;}return items;} appReducers addItem(items, action) toggleItemState(items, action) List<CartItem> (List<CartItem> items, AddItemAction action) {return List.from(items)..add(action.item);} addItem List<CartItem> (List<CartItem> items, ToggleItemStateAction action) {return items.map((item) => item.name == action.item.name ?action.item : item).toList();} toggleItemState Note: Here’s the full source code for this file. Method delegates the action to proper methods. Both methods and return new lists — that’s our new application state. As you can see, . Instead of it, we create new lists every time. appReducers() addItem() toggleItemState() you shouldn’t modify current list StoreProvider Now, when we have actions and reducers, we need to provide place for storing application state. It’s called in Redux and it’s for our application. store single source of truth void main() { final store = new Store<List<CartItem>>(appReducers,initialState: new List()); runApp(new FlutterReduxApp(store));} Note: Here’s the full source code for this file. To create store, we need to pass methods and . If we created the store, we must pass it to the to tell our application than it can be used by anyone who wants to request app state: reducers initial application state StoreProvider class FlutterReduxApp extends StatelessWidget {final Store<List<CartItem>> store; FlutterReduxApp(this.store); @overrideWidget build(BuildContext context) { }} return new StoreProvider<List<CartItem>>(store: store,child: new ShoppingCartApp(),); Note: Here’s the full source code for this file. In the above example is main application widget. ShoppingCartApp() StoreConnector Currently we have everything except… actual adding and changing items. How to do that? To make it possible, we need to use . It’s a way to . StoreConnector get the store and make some action with it or read it’s state Firstly, we’d like to : read current data and show this in a list class ShoppingList extends StatelessWidget {@overrideWidget build(BuildContext context) {return new ( {return new ListView.builder(itemCount: list.length,itemBuilder: (context, position) => },);}} StoreConnector<List<CartItem>, List<CartItem>> converter: (store) => store.state,builder: (context, list) new ShoppingListItem(list[position])); Note: Here’s the full source code for this file. Code above wraps default with . StoreConnector can take current app state (which is ) and map this with function to anything. For purposes of this case, it’ll be the same state ( ), because we need the whole list here. ListView.builder StoreConnector List<CartItem> converter List<CartItem> Next, in function we get — which is basically list of CartItems from , which we can use for building ListView. builder list store Ok, cool — we have reading data here. Now how to set some data? To do it, we’ll use also , but in a slightly different way. StoreConnector class AddItemDialog extends StatelessWidget {@overrideWidget build(BuildContext context) {return new StoreConnector<List<CartItem>, OnItemAddedCallback>(converter: (store) { } builder: (context, callback) {return new AddItemDialogWidget( );});}} return (itemName) =>store.dispatch(AddItemAction(CartItem(itemName, false))); , callback typedef OnItemAddedCallback = Function(String itemName); Note: Here’s the full source code for this file. Let’s look at the code. We used , as in the previous example, but this time, instead of mapping list of CartItems, into the same list, we’ll map this into . This way we can pass callback to the and call it when user adds some new item: StoreConnector OnItemAddedCallback AddItemDialogWidget class AddItemDialogWidgetState extends State<AddItemDialogWidget> {String itemName; final OnItemAddedCallback callback;AddItemDialogWidgetState(this.callback); @overrideWidget build(BuildContext context) {return new AlertDialog(...actions: <Widget>[...new FlatButton(child: const Text('ADD'), ... ],);}} onPressed: () { callback(itemName);}) Note: Here’s the full source code for this file. Now, every time user press “ADD” button, the callback will dispatch event. AddItemAction() Now we can do very similar thing for toggling item state: class ShoppingListItem extends StatelessWidget {final CartItem item; ShoppingListItem(this.item); @overrideWidget build(BuildContext context) {return new (converter: (store) { }, builder: (context, callback) {return new ListTile(title: new Text(item.name),leading: new Checkbox(value: item.checked, );});}} StoreConnector<List<CartItem>, OnStateChanged> return (item) => store.dispatch(ToggleItemStateAction(item)); onChanged: (bool newValue) {callback(CartItem(item.name, newValue));}), typedef OnStateChanged = Function(CartItem item); Note: Here’s the full source code for this file. As in the previous example, we use for mapping into callback. Now every time checkbox is changed (in method), the callback fires event. StoreConnector List<CartItem> OnStateChanged onChanged ToggleItemStateAction Summary That’s all! In this article we created a simple Shopping List application using Redux architecture. In our application we can add some items and change their state. Adding new features to this application is as simple as adding new actions and reducers. Here you can check the full source code for this application, including widget: Time Travel _FlutterShoppingCart - Flutter example of shopping app using Redux architecture_github.com pszklarska/FlutterShoppingCart Hope you liked this post and stay tuned for more! 🙌

Flutter + Redux — How to make Shopping List App?

One of the most interesting issues addressed during application development is managing state. New paradigms have changed the way web applications deal with and manipulate their state, deviating from the two-way data binding mechanisms of AngularJS to a more functional uni-directional flow with React and Redux. Now that Angular has been out for a while and is approaching “stability”, the same questions arise on how to best manage application state. Sending and manipulating data through bindings and events can works great for small applications but quickly becomes unwieldy as an application grows. @Input @Output For those wanting to work without third-party dependencies, Angular provides a couple tools that address most state-management concerns: and : pass state through a chain of components by wiring up event emitters and component-level bindings @Input @Output Providers/Services: Carefully manage data with dependency injection In this article I am going to discuss a pattern for the service approach to state management that I have found particularly useful when an application needs more flexibility than component bindings. @Input and @Output These and keywords are familiar to all Angular developers, as they provide the most straightforward (and often the most used) approach to managing state. With careful component construction, shared state lives in parent components that spread that state to many children, a process that visually resembles a tree. Any time a child wishes to update the parent’s state, they must do so through an binding. This provides a clear separation for the state shared throughout the parent-child relationship. @Input @Output @Output The component hierarchy works great for small applications or isolated component groups. However, this model falters when expanding an application. When new components are introduced that are far away in the component hierarchy from the original source of the data it becomes difficult to communicate with those components. In these situations, services are utilized to ferry data between components. @Input Although the service is a great solution to this problem it is often poorly implemented. Because the data contained in these services is often mutable (most applications have their state modeled in arrays or objects) consumers of said service have to be careful about how they utilize it, lest they produce . Additionally, services that have too much logic can be a pain to maintain as their functionality is often used in so many places throughout an application. side-effects Data Management with Services When dealing with a large application we want to avoid services that contain too much logic and cover a lot of mutable data. Therefore, I propose a simple way to approach state management with services in the form of a “data store”. The idea behind the data store is threefold: Isolate a piece of data into a service so that it can be shared throughout an application Moderate all mutations to this data so that the changes can be easily tracked Limit the degree to which the state can be changed to prevent unwanted side-effects. Imagine we have an application that is going to contain data complex enough that we cannot solely rely on and bindings. In this app, we want to toggle the color of a title with a button by calling into our data store and changing the data across the whole application. Perhaps we have a number of different panels, articles, and pages that offer this toggling functionality that all live in different areas of the application. @Input @Output The component that I’m describing looks like the following: Although this component is rather simple, the core principles of the data store still apply. Within the component we pass in our data store through Angular’s built in DI with the line: so that we can access application state in the component. Within the lifecycle function, we subscribe to the application’s state (in this case, a boolean) that will provide us fresh new state each time the store is changed. In order to toggle the color of the text, we tap into a method that manipulates the store’s data through the store itself, . constructor(private appState: AppState) {} ngOnInit() this.appState.toggleRed() Thanks to the subscription, the store contains the most up-to-date application data. Any time the data is changed all subscribers to the store (e.g. this component) will be automatically updated. With the help of the private BehaviorSubject, any component that wants to change state on the store has to do so through the store itself, ensuring that no one is able to manipulate data in a way that will break the application. Here is the data store service from the sample application: There are three main techniques going on in the above code. The first is the actual data inside our application is private to the data store, unchangeable by any consuming component. The line initializes this private data with RxJS’s , used to represent a value that can change over time. A BehaviorSubject is used over a regular Subject because it can be provided an initial value, in this case . private _isRed = new BehaviorSubject<boolean>(false); BehaviorSubject false Second, the data within the store is exposed through an RxJS , allowing consumers to receive the most up-to-date data without being able to directly modify it (through subscribing). Since an Observable cannot be directly changed, the data within our store is safe and isolated. Observable Finally, to allow consumers to change the data in the data store, an API is provided that will force all changes to go through the store itself. This prevents the need to keep track of all components that interact with this data in order to trace changes made to it. When the component from our sample application wishes to change the color of its text, for example, it has to do so by calling the method available in the data store. Only then will the data store dictate how it will update its data. toggleRed Conclusion The data store service model requires a bit of extra code to get going but it offers numerous advantages over simply storing the data directly on a property of a service. Not only is the data isolated to a single source, it is easier to manage changes and updates through the backing API. By utilizing many of these stores for isolated groups of data in an application (think: , , , etc.) it becomes much easier to manage the complexity of a large application. PhoneNumberStore EmailStore LoginStore Although I don’t mention it above, there are also numerous third-party libraries that provide different solutions to the problem of state management. My personal favorite is , a library that provides a heavily Redux-inspired approach to application management. These libraries come with the cost of additional configuration and up-front learning, but can prove useful for applications with complex data needs. ngrx Resources Here is a link to the . interactive source code

Stories, News & Mentions about TOGGLHIRE

Togglhire’s Stories on HackerNoon