Podcasts about pro single page application development

AiA 154: Angular Animations with Gil Fink This episode of Adventures in Angular features panelists Ward Bell, Joe Eames, and Charles Max Wood. Special Guest Gil Fink is on the podcast this week to discuss Angular Animations. Tune in to find out more about this topic! [00:01:05] Introduction to Gil Gil is the CEO of Sparxys, which is a small consulting company that he owns in Israel. He has been working for Microsoft for nine years in web development. He wrote the book Pro Single Page Application Development. Currently, he is also speaking in conferences and consulting for companies in Israel. [00:02:06] Introduction to Angular Animation Angular Animation is a model that has been used since Angular 2.0. In the full version it received it’s own model and expanded from Angular core. It is based on Web Animation API and gives a specific language to write Animations declaratively using Typescript in the components. It is also easy to write. Animations are not used to make web pages a “swirling vortex of text.” It instead is something that is used to capture the attention of the user to let them know what is new or where they should pay attention. It gives the user a better overall experience. For example, how to show a user they have a validation error: use a red blinking border. It does not have to be sophisticated or complicated, but can be if that is what is wanted. [00:05:48] Web Animation API Animation mobile in Angular has been available for roughly two years. There is a function called animate which gives the ability for an application to be animated. Web Animation API runs animation for you but is not simple. [00:07:35] What kinds of things do you see people doing with Animations? A common thing for developers is to make Animations make transitions between pages in SPA. Animations also can be used for appearing, or fading in or out elements. More transitions can be made for panel, where they slide from one side to the other, which grabs the attention of the user. SVG and Canvas also are used for Animations by developers. [00:10:33] Starting with Animations Most developers are in a hurry to write their first animations. First, they have to understand animations because understanding concepts are helpful. Reading examples of what CSS 3 and Web Development API are can be a helpful tool. Gil suggests MDM and Mozilla to gain a better understanding. After grasping these concepts, read about how to use the Angular Animation model and how it was created. The Angular Animation model is actually not needed to create Animation in websites – you can use CSS 3 animation and Web Development API. [00:14:15] How do I add Angular Animations to my Angular app? Grab a browser Animation model, which is part of Animation. Create a trigger. This is something that triggers the effect or Animation. Create a state, move from one state to another state using the API. Once you have a trigger, write inside the web component in the templates. Take the trigger, which is a function, and pass the function in component declaration to the Animations property. [00:18:09] When and where should you be using Animations? There needs to be a balance when using Animations. Gil’s rule is not to use experts to understand where to put them. Not everything should be filled with Animations. He prefers to start without them and then add according to specs or expert guidelines. Animations can be distracting and should be there to help the user. [00:21:43] Ideas on How to Use Animations in Applications For example, you can use Animations for models. If a model appears at once, it might shock the user. Instead, make sure that they appear smoothly. It should indicate something is either happening or has happened. If everything happens at once, it may not be as effective for the user. [00:25:25] At what point in the process do you decide this component needs Animation? Gil works with experts in the companies that he works for that have guidelines for the components he creates. Because of this, he creates what they want him to create. [00:28:44] Is there a way of testing these animations are happening? Yes, you can use tools like Protractor, Selenium, and Test IO. Test IO gives the option to record a screen. These tools won’t help understand animations because they can’t test animations. They can check for existents of a class name. You can use a manual tester for quality assurance or have a person check for you. To really see if an effect is working you have to just see it working. Picks              Joe: Go see an eclipse Charles: Secrets of the Millionaire Mind by T.Harv Eker  You are the Placebo by Dr. Joe Dispenzo Gil: Web Animations Deep Dive with Angular JavaScript Israel Rick and Morty Links www.gilfink.net www.sparxys.com

AiA 154: Angular Animations with Gil Fink This episode of Adventures in Angular features panelists Ward Bell, Joe Eames, and Charles Max Wood. Special Guest Gil Fink is on the podcast this week to discuss Angular Animations. Tune in to find out more about this topic! [00:01:05] Introduction to Gil Gil is the CEO of Sparxys, which is a small consulting company that he owns in Israel. He has been working for Microsoft for nine years in web development. He wrote the book Pro Single Page Application Development. Currently, he is also speaking in conferences and consulting for companies in Israel. [00:02:06] Introduction to Angular Animation Angular Animation is a model that has been used since Angular 2.0. In the full version it received it’s own model and expanded from Angular core. It is based on Web Animation API and gives a specific language to write Animations declaratively using Typescript in the components. It is also easy to write. Animations are not used to make web pages a “swirling vortex of text.” It instead is something that is used to capture the attention of the user to let them know what is new or where they should pay attention. It gives the user a better overall experience. For example, how to show a user they have a validation error: use a red blinking border. It does not have to be sophisticated or complicated, but can be if that is what is wanted. [00:05:48] Web Animation API Animation mobile in Angular has been available for roughly two years. There is a function called animate which gives the ability for an application to be animated. Web Animation API runs animation for you but is not simple. [00:07:35] What kinds of things do you see people doing with Animations? A common thing for developers is to make Animations make transitions between pages in SPA. Animations also can be used for appearing, or fading in or out elements. More transitions can be made for panel, where they slide from one side to the other, which grabs the attention of the user. SVG and Canvas also are used for Animations by developers. [00:10:33] Starting with Animations Most developers are in a hurry to write their first animations. First, they have to understand animations because understanding concepts are helpful. Reading examples of what CSS 3 and Web Development API are can be a helpful tool. Gil suggests MDM and Mozilla to gain a better understanding. After grasping these concepts, read about how to use the Angular Animation model and how it was created. The Angular Animation model is actually not needed to create Animation in websites – you can use CSS 3 animation and Web Development API. [00:14:15] How do I add Angular Animations to my Angular app? Grab a browser Animation model, which is part of Animation. Create a trigger. This is something that triggers the effect or Animation. Create a state, move from one state to another state using the API. Once you have a trigger, write inside the web component in the templates. Take the trigger, which is a function, and pass the function in component declaration to the Animations property. [00:18:09] When and where should you be using Animations? There needs to be a balance when using Animations. Gil’s rule is not to use experts to understand where to put them. Not everything should be filled with Animations. He prefers to start without them and then add according to specs or expert guidelines. Animations can be distracting and should be there to help the user. [00:21:43] Ideas on How to Use Animations in Applications For example, you can use Animations for models. If a model appears at once, it might shock the user. Instead, make sure that they appear smoothly. It should indicate something is either happening or has happened. If everything happens at once, it may not be as effective for the user. [00:25:25] At what point in the process do you decide this component needs Animation? Gil works with experts in the companies that he works for that have guidelines for the components he creates. Because of this, he creates what they want him to create. [00:28:44] Is there a way of testing these animations are happening? Yes, you can use tools like Protractor, Selenium, and Test IO. Test IO gives the option to record a screen. These tools won’t help understand animations because they can’t test animations. They can check for existents of a class name. You can use a manual tester for quality assurance or have a person check for you. To really see if an effect is working you have to just see it working. Picks              Joe: Go see an eclipse Charles: Secrets of the Millionaire Mind by T.Harv Eker  You are the Placebo by Dr. Joe Dispenzo Gil: Web Animations Deep Dive with Angular JavaScript Israel Rick and Morty Links www.gilfink.net www.sparxys.com

AiA 154: Angular Animations with Gil Fink This episode of Adventures in Angular features panelists Ward Bell, Joe Eames, and Charles Max Wood. Special Guest Gil Fink is on the podcast this week to discuss Angular Animations. Tune in to find out more about this topic! [00:01:05] Introduction to Gil Gil is the CEO of Sparxys, which is a small consulting company that he owns in Israel. He has been working for Microsoft for nine years in web development. He wrote the book Pro Single Page Application Development. Currently, he is also speaking in conferences and consulting for companies in Israel. [00:02:06] Introduction to Angular Animation Angular Animation is a model that has been used since Angular 2.0. In the full version it received it’s own model and expanded from Angular core. It is based on Web Animation API and gives a specific language to write Animations declaratively using Typescript in the components. It is also easy to write. Animations are not used to make web pages a “swirling vortex of text.” It instead is something that is used to capture the attention of the user to let them know what is new or where they should pay attention. It gives the user a better overall experience. For example, how to show a user they have a validation error: use a red blinking border. It does not have to be sophisticated or complicated, but can be if that is what is wanted. [00:05:48] Web Animation API Animation mobile in Angular has been available for roughly two years. There is a function called animate which gives the ability for an application to be animated. Web Animation API runs animation for you but is not simple. [00:07:35] What kinds of things do you see people doing with Animations? A common thing for developers is to make Animations make transitions between pages in SPA. Animations also can be used for appearing, or fading in or out elements. More transitions can be made for panel, where they slide from one side to the other, which grabs the attention of the user. SVG and Canvas also are used for Animations by developers. [00:10:33] Starting with Animations Most developers are in a hurry to write their first animations. First, they have to understand animations because understanding concepts are helpful. Reading examples of what CSS 3 and Web Development API are can be a helpful tool. Gil suggests MDM and Mozilla to gain a better understanding. After grasping these concepts, read about how to use the Angular Animation model and how it was created. The Angular Animation model is actually not needed to create Animation in websites – you can use CSS 3 animation and Web Development API. [00:14:15] How do I add Angular Animations to my Angular app? Grab a browser Animation model, which is part of Animation. Create a trigger. This is something that triggers the effect or Animation. Create a state, move from one state to another state using the API. Once you have a trigger, write inside the web component in the templates. Take the trigger, which is a function, and pass the function in component declaration to the Animations property. [00:18:09] When and where should you be using Animations? There needs to be a balance when using Animations. Gil’s rule is not to use experts to understand where to put them. Not everything should be filled with Animations. He prefers to start without them and then add according to specs or expert guidelines. Animations can be distracting and should be there to help the user. [00:21:43] Ideas on How to Use Animations in Applications For example, you can use Animations for models. If a model appears at once, it might shock the user. Instead, make sure that they appear smoothly. It should indicate something is either happening or has happened. If everything happens at once, it may not be as effective for the user. [00:25:25] At what point in the process do you decide this component needs Animation? Gil works with experts in the companies that he works for that have guidelines for the components he creates. Because of this, he creates what they want him to create. [00:28:44] Is there a way of testing these animations are happening? Yes, you can use tools like Protractor, Selenium, and Test IO. Test IO gives the option to record a screen. These tools won’t help understand animations because they can’t test animations. They can check for existents of a class name. You can use a manual tester for quality assurance or have a person check for you. To really see if an effect is working you have to just see it working. Picks              Joe: Go see an eclipse Charles: Secrets of the Millionaire Mind by T.Harv Eker  You are the Placebo by Dr. Joe Dispenzo Gil: Web Animations Deep Dive with Angular JavaScript Israel Rick and Morty Links www.gilfink.net www.sparxys.com

MAS 018: Gil Fink This episode is a My Angular Story with Gil Fink. Listen to learn more about Gil and his story! [00:02:16] Introduction to Gil Gil is the CEO of Sparxys, a consulting company he created. wrote a book called the Pro Single Page Application Development. He was a co-organizer of Angular App, which is a conference in Israel, which was held just last month. [00:04:39] How did you get into programming? Gil first owned a computer at ten years old. It was an IBM compatible computer with an MS-DOS operating system. He used it to play games like Pac Man, which he would attempt to edit and claims was the first time he tried to program anything. Gil wanted to learn computer science in high school. In grades tenth through twelfth, he learned Turbo Pascal and Excel. During this time he wrote unprofessional programs. He went to college for computer science. His first job as a web developer was helping to write a government portal for the Israeli government. What ultimately led him to computer science is the curiosity to know how things that operate hardware work. “If you’re curious about something, go and learn it.”  [00:12:12] How did you go from government to working with Angular? Gil describes his story to Angular as one of progression and “moving on with everybody else.” He worked with the government project from 2005-2007. He was then involved with a web app project using jQuery and Backbone. The VP while he was at the job asked why he was using backbone, so Gil researched Angular. It looked like it included everything he needed. After reading more on it, he began using it and created an Angular JS course for his employer. He learned it through creating that course. [00:15:35] What was it about Angular that made you decide you wanted to be doing it? Gil thinks the community is one of the best things about Angular. The team is approachable. Gil had issues with other libraries and did not get the same vibe from people. They were not as welcoming and eager to help as they are in the Angular community. There is a lot of collaboration. The tools and frameworks around Angular are developing and people help each other as they develop. [00:23:30] Contributions Gil has made several contributions to the Angular community. Most recently he has created the Angular 2-indexeddb service. It is a library that can be found GitHub. He has written directives in the past that people use and is amazed that people use things that he wrote. He wrote Story.js, another library that wrapped all storages in one browser, which he does recommend anyone use. He has published several online videos and was featured on an Angular Connect workshop recently. Gil is always willing to help mentor other developers. He has started writing blog posts in order to help junior freelancers. Currently he is involved with two start up accelerators. They are Google Launchpad Accelerator and University Accelerator. Both are where people come with ideas and they help make their ideas startups. Picks  Gil: Goodness Squad Angular2-indexeddb Library Spider-Man Homecoming  Charles: The Millionaire Mind The Freelancer Show  Toastmasters club  Angular Dev Summit Links Twitter  http://gilfink.azurewebsites.net/ Medium  Sparxys 

MAS 018: Gil Fink This episode is a My Angular Story with Gil Fink. Listen to learn more about Gil and his story! [00:02:16] Introduction to Gil Gil is the CEO of Sparxys, a consulting company he created. wrote a book called the Pro Single Page Application Development. He was a co-organizer of Angular App, which is a conference in Israel, which was held just last month. [00:04:39] How did you get into programming? Gil first owned a computer at ten years old. It was an IBM compatible computer with an MS-DOS operating system. He used it to play games like Pac Man, which he would attempt to edit and claims was the first time he tried to program anything. Gil wanted to learn computer science in high school. In grades tenth through twelfth, he learned Turbo Pascal and Excel. During this time he wrote unprofessional programs. He went to college for computer science. His first job as a web developer was helping to write a government portal for the Israeli government. What ultimately led him to computer science is the curiosity to know how things that operate hardware work. “If you’re curious about something, go and learn it.”  [00:12:12] How did you go from government to working with Angular? Gil describes his story to Angular as one of progression and “moving on with everybody else.” He worked with the government project from 2005-2007. He was then involved with a web app project using jQuery and Backbone. The VP while he was at the job asked why he was using backbone, so Gil researched Angular. It looked like it included everything he needed. After reading more on it, he began using it and created an Angular JS course for his employer. He learned it through creating that course. [00:15:35] What was it about Angular that made you decide you wanted to be doing it? Gil thinks the community is one of the best things about Angular. The team is approachable. Gil had issues with other libraries and did not get the same vibe from people. They were not as welcoming and eager to help as they are in the Angular community. There is a lot of collaboration. The tools and frameworks around Angular are developing and people help each other as they develop. [00:23:30] Contributions Gil has made several contributions to the Angular community. Most recently he has created the Angular 2-indexeddb service. It is a library that can be found GitHub. He has written directives in the past that people use and is amazed that people use things that he wrote. He wrote Story.js, another library that wrapped all storages in one browser, which he does recommend anyone use. He has published several online videos and was featured on an Angular Connect workshop recently. Gil is always willing to help mentor other developers. He has started writing blog posts in order to help junior freelancers. Currently he is involved with two start up accelerators. They are Google Launchpad Accelerator and University Accelerator. Both are where people come with ideas and they help make their ideas startups. Picks  Gil: Goodness Squad Angular2-indexeddb Library Spider-Man Homecoming  Charles: The Millionaire Mind The Freelancer Show  Toastmasters club  Angular Dev Summit Links Twitter  http://gilfink.azurewebsites.net/ Medium  Sparxys 

MAS 018: Gil Fink This episode is a My Angular Story with Gil Fink. Listen to learn more about Gil and his story! [00:02:16] Introduction to Gil Gil is the CEO of Sparxys, a consulting company he created. wrote a book called the Pro Single Page Application Development. He was a co-organizer of Angular App, which is a conference in Israel, which was held just last month. [00:04:39] How did you get into programming? Gil first owned a computer at ten years old. It was an IBM compatible computer with an MS-DOS operating system. He used it to play games like Pac Man, which he would attempt to edit and claims was the first time he tried to program anything. Gil wanted to learn computer science in high school. In grades tenth through twelfth, he learned Turbo Pascal and Excel. During this time he wrote unprofessional programs. He went to college for computer science. His first job as a web developer was helping to write a government portal for the Israeli government. What ultimately led him to computer science is the curiosity to know how things that operate hardware work. “If you’re curious about something, go and learn it.”  [00:12:12] How did you go from government to working with Angular? Gil describes his story to Angular as one of progression and “moving on with everybody else.” He worked with the government project from 2005-2007. He was then involved with a web app project using jQuery and Backbone. The VP while he was at the job asked why he was using backbone, so Gil researched Angular. It looked like it included everything he needed. After reading more on it, he began using it and created an Angular JS course for his employer. He learned it through creating that course. [00:15:35] What was it about Angular that made you decide you wanted to be doing it? Gil thinks the community is one of the best things about Angular. The team is approachable. Gil had issues with other libraries and did not get the same vibe from people. They were not as welcoming and eager to help as they are in the Angular community. There is a lot of collaboration. The tools and frameworks around Angular are developing and people help each other as they develop. [00:23:30] Contributions Gil has made several contributions to the Angular community. Most recently he has created the Angular 2-indexeddb service. It is a library that can be found GitHub. He has written directives in the past that people use and is amazed that people use things that he wrote. He wrote Story.js, another library that wrapped all storages in one browser, which he does recommend anyone use. He has published several online videos and was featured on an Angular Connect workshop recently. Gil is always willing to help mentor other developers. He has started writing blog posts in order to help junior freelancers. Currently he is involved with two start up accelerators. They are Google Launchpad Accelerator and University Accelerator. Both are where people come with ideas and they help make their ideas startups. Picks  Gil: Goodness Squad Angular2-indexeddb Library Spider-Man Homecoming  Charles: The Millionaire Mind The Freelancer Show  Toastmasters club  Angular Dev Summit Links Twitter  http://gilfink.azurewebsites.net/ Medium  Sparxys