Speed code with Visual studio code custom snippet with typescript

I will start by creating a custom snippet for this lets open preference and then user snippet section From there choose the preferred language

I will be choosing typescript for this tutorial Now within this object we will create our own custom snippet I will be staring with a simple custom console log snippet The first key is the prefix which defines the short form of you snippet and upon writing the snippet and hitting tab it will be expanded as a complete code Let define the name as clog

The next key is body where your code will reside For a single line code we can use this as a string My first and stop will be the message section and the second one will be where we want to pass the variable to log In the next key which is description you can add a description about the code Now lets test this snippet in an actual file

As I said earlier the prefix in your snippet will be expanded to place your full code and stop at the first tab stop When I hit tab again it will stop and second tab position This is really helpful when you want to minimize your effort writing repetitive code Lets take another example where this platform check can be used in many places to determine if the app is in server or client So lets start by copying it and create another snippet

I will give it a name of platform For the prefix I will use a short form of plt For body as our code is multiline I will be using it as an array and paste the code inside I will just remove this part from the snippet as this need to be fill by the developer Now lets make every line a string

Thisplatformid can be a different const so lets make it editable and as our first tab stop Now lets try it out The code don’t have a proper tab spaces and formatted lets fix that in the snippet Now its formatted correctly

There is a possibility this isplatformserver can be changed as isplatformbrowser, so we can also provide an option to choose between these two inside snippet Lets make that change You can see now you can choose from 2 options You can also provide a default option like this My next example is a http service using http client library

Lets create another snippet for this Lets make the method name editable and as our first tab stop for edit If you provide both the option same name it can edited together at the same time Lets try this out Another advantage is you can also make your snippet available with your custom key combination

To make it work open the keybinding son file using cmd+p and keybinding son I have already created an example here which will work along with our custom log snippet The key combination I have added is command + L The action will be performed when this key combination executed is to insert snippet Its very important to match this name as the same name as your snippet Now lets try it out

This all are global snippet but if you want the snipped can be used by other developers for a particular project just go to peference > user snippet and choose snippet for that project for which you have to be already inside that project folder

Tags: , , , , , , ,

UX Design and Code Generation for Angular Apps

>> On today's Visual Studio toolbox, Jason is going to show us a tool that gives you the ability to create really good looking angular apps and then he's going to generate all the code necessary to make those apps real >> [MUSIC] >> Hi, welcome to Visual Studio Toolbox

I'm your host Robert Green and joining me Today is Jason Beres from Infragistics >> How are you doing Robert? >> Hey Jason? >> How are you doing? >> Welcome back to the show >> Yes Thank you Good to be here

>> It's been a very long time >> Too long >> Since we were together >> Yes >> So, we're going to talk about UI design today

>> Yeah >> Alright So, if you think about the things that go into building an app there's obviously the code >> Yes >> We're all good coders and we all know how to become better coders, right? >> Yeah

>> You practice, you read up, you'll watch other people and learn >> Yeah >> Pretty straightforward on how to be a better coder >> Yes >> There's practices like DevOps and testing and what not and it's straightforward how you get better at that

We've done a bunch of episodes on that recently But the one thing that we all, I'm going to be polite could get better at, is UI design >> For sure >> It is not at all clear, how you start getting better at that >> Yeah

>> We can look at people who are really good at it, we can look at apps in the store that are beautiful and in all likelihood it wasn't a developer who designed it Right? >> Correct >> Because developers can't design >> That's true >> There is some designer who did that

>> Yeah >> Not all of us are in a position of being able to go hire a professional designer >> That's correct >> So, as developers, how can we get better at design? You're going to tell us >> Yeah

I'm going to talk a little bit about that today, like Infragistics has several areas where we help developers be better at design Today, we're going to look at one specific product that we released this year called Indigo design The nice thing is, it starts with a design tool called sketch Sketch allows you to create user interfaces and normally at that point, a designer or a developer would like get approval on them and then they're like, "Okay, what do I do next? >> Yeah >> Do I have to go write the code? >> Right

>> So, we've done some tooling with Visual Studio Code and the cloud to help get code from those designs which is pretty sweet Some other areas around WPF, Xamarin, Windows Forms, we do a lot of plugins into Visual Studio that help developers make things look prettier So, there's a lot of like pre-built apps, a lot of control configurators and things like that But when we start talking about this really high fidelity design, you almost need that high fidelity tool which is sketch, which does, and if you're not familiar with sketch, it's sort of like Adobe Photoshop or any graphic tools or vector graphics tools So, you can basically do what you want with that

What we've done, is we've taken our web product in angular product and we've created UI kits and sketch and married the widgets with the design tool So, that means anything you design in the design tool, we can successfully generate code with that >> Okay >> That's the whole point >> Cool

So, again this is for Angular? >> Yeah >> Today? >> Yeah >> Then there will be additional areas >> Yeah On our backlog we have a pretty rich backlog

With this we're getting a lot of feedback We started with Angular because there was a lot of customer demand on net new Angular and there was a lot of rush to like, "I'm going to move from desktop to web" >> Yeah >> Which is fairly complex because a lot of developers don't know how to build Angular apps They're coming from [inaudible]

>> That's why you need to learn >> Yeah >> You need to learn the whole web stack HTML, JavaScript, TypeScript, Angular as a framework >> Yes >> Then, you know

>> Make it look good >> How do you make it look good It was pretty easy to create the first Win form You just drag and drop Right? Pretty easy to create your first WPF

You type a few things, you drag and drop >> Yeah >> But then it looks battleship gray Right? >> Yeah >> So, it's just another thing to learn

>> Yeah and we do want to support other platforms So, for example react will come later We've had requests for things like Xamarin, for mobile platforms, WPF we talked about a little earlier I'm not sure if we would do the whole Wizzy Wig in WPF, but we have tossed around the idea of doing like resource dictionaries because a lot of the battle in WPF is you want a very branded experience >> Right

>> That's difficult to do easily Like I want to say, take this beautiful design, give me the resource dictionary so I can style my entire application So, that is something we could also do with the tooling and sketch >> Cool >> But why don't we go through a little example of how this works

>> Yeah, let's do that >> Cool So, okay see my screen up there and basically- >> Sign up for free >> Yes >> I like free

But then it says how to buy Now I'm confused >> So, there's a free version and then there's a paid version >> Okay >> Pretty much obviously there's a trial version

So, you can try this thing out for 30 days But the nice thing about the paid version is that, you not only get the design tools, but you get our UI controls as well >> Okay >> So, the UI components would normally be a whole another price Now, those are open-source for non-commercial and education uses while they're up on npm, super easy to get started with that product as well

But yeah, so, what I'm going to show you today pretty much you can just sign up for free and go to town You can do exactly what I'm going to do today on your own computer >> Alright Let's see it >> What I'll do first is just scroll through this web page really quick because there's three parts to this

It'll clarify for the viewers The first pieces around sketch So, you need to design the app in Sketch You're doing that with the UI >> Is sketch a separate product? >> Sketch is a separate product

>> Okay >> So, the reason sketch is taken off in the market, is because it's 99 bucks and you can use it forever >> Okay >> Whereas Adobe's a little bit more expensive and you get a bunch of other stuff Sketch is really like taking the world by storm in the last few years

It's pretty amazing So, yeah We've created these UI kits and sketch that map to our angular widgets Then the next part is we have a Cloud Service In the cloud services, where you get usability studies in collaboration with stakeholders

>> Okay >> So, the big thing is, I can design something that looks good But do I know- Will I know if it works with my users? So, that's where the usability studies come into play and I'm going to show you how to create a usability study today >> Okay >> That goes up in the cloud and then finally our Visual Studio part where we have this cool plug in, which links up to the cloud and you pick what screens you want to generate and it splits them out

>> Cool >> Yeah So, there's a little bit of code you have to write but you'll see that it's not so bad Then everything that we're going to do today, you can just download right from the app gallery here So, what I'll do first is bring up sketch

This is one of the pre-built apps that we ship with the product So, we have a Budget App, and a People App and then your prototypical iPad/Desktop web or mobile app They have like maybe three to five screens There's not a ton of stuff going on It's more of these point focused apps that you see today

But the nice thing about this, is once you install the UI kits and if you're not familiar with sketch, the way you install a UI kit, is basically you go to your plug ins and- actually we have a plug in too, I'll show you real quick But we have these libraries here and you'll see we have three libraries that begin with Indigo >> Okay >> We have components, patterns and styling So, all of the patterns that map to the widgets we ship and then we've built a bunch of UX patterns like login screens, like, news feeds and things like that

So, the developer or the designer doesn't have to think about how do I cobble these things together? I just want to drag this onto the forum and get started >> Right You want a log in screen that looks like every other log in screen that people are used to using >> Yes >> But why should you have to create it yourself? >> Exactly

Then we have styling and the nice thing about styling, is that the styling library is inherited by everything else that we ship Which means if you customize the styling, which is all the colors, all the fonts, that can be your custom brand and then everything magically changes So, this is where it gets really cool If you're a developer, you can figure this thing out in no time If you're a designer, you're already familiar with sketch

>> Right? >> So, it's not that big of a deal >> Okay >> Then we have a plug-in too which allows you to sync with the cloud So, I'll walk through how that works as well >> Okay

>> What I want to show first is, if in Sketch basically you don't have this toolbox, like on Visual Studio which is a right-click, essentially you have a dropdown which is where you take your symbols and you drag them onto the screen So, we've got our patterns here which is what I mentioned We've got different avatars and different preset styles with avatars, different checkbox groups, detailed forms, file upload et cetera Data grids of course, charts and things like that So, those are all preset patterns that you can just drag and drop and then the components is a much broader list but even if the components have a bunch of preset configuration

So, you don't really necessarily have to think about how all this works, you can just drag and drop these onto the screen They're more or less done and you can then see how they look when you generate the code >> Okay >> Now what we've done, which is unique to the sketch UI kits, is we've actually created overrides on these libraries, we sort of mapped to properties that are in the UI components So, in your typical on the right-hand side here and sketch, these are your typical properties that you would get

So, it's basically has to do with positioning and layout There's not much more else than that But if I look at something a little bit richer here, I'll zoom in this grid down here, and this budget management screen, and we'll take a look at what's going on with this budget screen On the right-hand side you've got all of the symbols that make up this screen and how it would look Almost in Visual Studio, it's just rearranged a little bit differently

But you'll notice that this says IGX grid and there's this like little red X next to it IGX actually the name of our Angular widget So, what happens is sketch is a file format and we parsed this file and we're looking for things in there that say, "Hey, this is something that we should care about Let's go generate some code on this thing" >> Okay

Then we decipher all the styling and things like that What ends up happening is as we click on these individual elements, you'll notice on the right-hand side, we've got this override section Then the override is where you can actually either swap out the components or change the styling, change the colors So, we've actually added all those properties to the UI kits, sketch reads it and puts it into the layout nice and easy Some other neat things here that are happening if I click on a specific cell inside of the grid, you'll notice on the right-hand side, I've got a data property

So, what we're doing is, is not the perfect way to work but if you're a developer it makes perfect sense, if you're a pure designer and you're not used to this stuff, you might not know But we allow you to set events and data properties right in the sketch file So, what that means is when I generate the code, it'll just magically data bind So, if I have data in my app, and I have like in this case it's going to be called budget data, and budget data has a property called budget, we've got a property called amount down here, oops! Let me cancel that We've got amount, et cetera

All of that will just flow through into my generated code >> Okay >> So, it ends up being actually pretty sweet All right So, essentially, I would Wizzy Wig this drag and drop

This screen is already done for the sake of time, it's probably better to use a preset screen here, but it does show a few things and this is why it's going to be pretty cool especially for a developer It's going to be responsive, it has a bunch of different widgets on it and it has data This is really where you want to get started >> Do we have time to do a very quick brand new screen but in a text box, "click" the button with text box says something or button and a label? >> Yeah We could actually add an art board here

>> Yeah >> Let's do that So, let's add an art board here and I'm not a sketch expert so >> That's fine >> But let's move this out of the way a little bit

But here, if I move this art board over, basically what happens in sketches, you're working with art boards >> Okay >> Now, I'm going to drop this down and I can go to a pattern for example or components So I can grab like a horizontal calendar component, and it drags out to the screen >> Got it

Okay >> So, this is how you start coupling together screens Now, the way this works as well, and keep in mind when I said that the properties that we're getting from sketch are basically around alignment A lot of the alignment becomes important because when you're doing a responsive design, you want to be able to ensure that when the screen resizes, the alignments correct It's almost identical to the way it works in Visual Studio, with Windows phones, with the WPF

You're setting Dr Right, Dr Left stay on the top, pinned to the bottom It's exactly the same >> Okay

>> So, yeah We would just go through this process and start adding UI widgets, we could change colors, we could change controls So, like I said earlier, I can go ahead and start changing colors I can change the font elevations I can do whatever I want with these properties

>> Yeah >> So now, let's say I'm all happy with this Life is good, I'm ready to go I want to either do some usability work with this or get it to my developer to write some code So, we have the plug-in up here, and I can sync this with the Cloud

So, I'm going to go ahead and click "Publish" and our plugin will pop up and I think I'm logged in Yeah I'm logged in Now the nice thing about this plugin is it will actually let me decide what type of form factor I want to display this in, and in this case I'm going to do iPad Up in the Cloud, we have different workspaces

So, in this case, I'm going to put it in my personal workspace, but the way this works is, you work with teams on projects So, if I'm a UX team, a lot of times in the enterprise, the UX team is shared amongst a bunch of different teams So, they might have different workspaces So, I'm going to put this in my personal workspace, and I'm going to go ahead and click "Publish" So now, this is jumping up to the Cloud, and this might take a second or two

While that's happening, I'll go ahead and open up the browser and I'll show you what the Cloud looks like So here, we're going to go to cloudIndigo design and this is where, if I click on the login, it would basically allow me to login and take me right to here So what happens is, in fact there's the budgeting app, it's already started to upload But what happens is it brings me to my own little like workspace here and in my workspace I have all of the prototypes that I've been working on

From here, I can do things like if I select this guy, I can edit this prototype and it's going to render all the screens and the nice thing is, it's actually, if I select this highlight UI elements on the bottom, it's actually telling me all of the UI elements that were in the sketch file So, it knows that these are widgets that I can now co-generate, which is actually pretty sweet The other thing this does is, if you remember in that sketch file, there was a bunch of arrows flying all over the place >> Yeah >> That's navigation

So, this tool can actually add the navigation or will suck it in from the sketch file as well So like, if I click this little guy here, it's going to go to this screen on a tap fade, but maybe I want to do it on a flip or something like that So you can set these properties, because the whole idea here is, I want to be able to create this screen and I'm going to set this guy's my home, his area as my home I want to create all these screens I want to be able to run this application and do things with it without having to write any code

>> Yeah >> So, at this point, I can actually share this with you on your iPad and you can go through it, and if you don't like something, you can actually add comments to and say, "Hey, this doesn't make sense or whatever" >> Then when you get to a design you like, you actually have the ability to deliver it? >> Yes >> Because you're going to bang up to code for me >> So, this is what's going to happen now

I'm going to Visual Studio Code and what I have here is, I have an app or an Angular app, I did NG new and it created this Angular app, and what I did to it is I added some data So, when your typical application, you've got your guys working on data, people working on the UI or a lot of guys are full stack But anyway, for the purpose of this demo, I have data in my app So what I want to do is, I want to generate that main budget screen that we saw So, what I do in Visual Studio Code is, I do my Command Shift P, and I bring up the Indigo design code generator

So, this is our plugin Now, what the plugin will do, is it will give me a list of prototypes that I have up in the Cloud already or I can just paste the URL of the one that I was just working on So, I'm going to grab, actually let me do this Close this out Let me go back to the Cloud here and I'll just show you real quick how you get that URL

Let's say "don't publish" So, I'm back here, I've got this little link I'm going to do a control C This URL is like I could email to you so you can run this prototype or I can use it to actually generate the code So now, if I bring up my code generator again, I'm going to paste this in, hit "Enter" and it's going to do the same

>> Is there a way to do this from the local version? Or does it always have to be in the Cloud? >> Right now it's in the Cloud >> Okay >> So, we just shipped this piece in June, like end of June We're actually looking, because we have an on-premise version of this and we have a Cloud version So, we're looking to get all of this working locally as well

So, you don't have to always have the Cloud >> Right, I'm on an airplane, I don't really feel like paying 30 bucks for Gogo >> The issue is that we want- >> That's a hypothesis of course I'm always happy to pay that

>> Well, it was 2599 this morning on my way from Vegas That was Alaska Air But this is the issue, is that, we want you to be able to do this without a Mac, because sketch is a Mac app Right? So, if you want to do this on a PC, you need to somehow parse that sketch file and sketch has these command line tools that allow us to do that in the Cloud

>> Okay >> So, there's a little bit of complication there, but we're working on some things now which are completely removing the need to use a Mac for using sketch >> Okay >> So stay tuned for that >> That's good to know

>> Maybe early Q1 will be talking about that But anyway, this is actually pretty sweet What this does is it brings me all the same screens that I had earlier and I have the same experience as I hover You can see on the right-hand side, it's showing me these areas that are in the screen Now, I want to create this budget screen

The budget screen, the way we've done this is because it's angular just like if it was WPF or any other product, you would have your own class, files, you would also have your module names, you would have your dataset names So, you can customize whatever you want from here >> Okay >> We're going to pull things in from the sketch file So, if you recall the data source, was called budget data

>> Yeah >> It just brings it right in The name of the module is Test Module and the name of the screen was Budget Screen We also allow you to change a few other things in the co-generation settings like how your [inaudible] work and all this other stuff, we're not going to mess with any of that I'm just going to go ahead and click "Generate Code Access

" So, what this does now is it just takes a simple JSON file up to the Cloud and says, "Hey, here's what they asked for Now, bring me down my code" So now, we're actually adding the code, you'll notice here, this folder just appeared and now I've got all this code that was just generated So, I'll format this document and you can see that this was the grid that was in sketch If you recall, when I showed you the cell of field names they all came across as well as the name of the dataset

>> Right >> So, budget data is already in my application So, this just brings it all up and then here's all of the other UI that's on this screen >> I think that's just so cool because there are some [inaudible] sketch works on a Mac But if you think about the onetime investment in buying a Mac, right? Now, what you're going to get is the ability to pretty quickly and obviously there's a learning curve, but reasonably quickly put together a screen- >> Yeah

>> -show it to people and then generate that exact same screen, right? You've got the colors, the padding, the height 184 PX >> Everything It's pixel perfect >> Right, and you're literally delivering what you showed them So, for a modest in the grand scheme of things a modest upfront cost, this is tremendous

>> Well, here's the cool thing The designers already have Macs, right? >> Yeah >> So, the developers, they need a browser >> A lot of developers have Macs these days >> Wow

I go to these conferences now and all the rock stars are using Macs >> Right >> Like so, I want to be like those guys So, I'm going to go buy a Mac >> I have one

Even I have one It's not just the rock stars >> Why didn't you tell me that before then >> I have one >> So, now let me open up the browser

I can't believe it and tell me, you get a math So now, this one's running at local host 4,200 and so this was the screen Now, there's no data here, right? >> Right >> So, if you remember earlier I said that you might have to write a little bit of code So, what we do though is we help you along the way

If I go to the actual code behind, the type script for this, we've actually added the import statement for you because we read the sketch file and we know and we're going to assume that there is something called budget data, because that's what you called it We also know that you're going to want an instance of that, so we have added that code for you in the code generator The only thing we don't do is actually fill that object up to populate it So, here we'll just tell it to do a new instance of that guy, and there we go We'll just call it populate and we're done

We'll save this out and now we'll go back and magically, everything shows up In the sketch file, we actually use, we read the glyphs in the header and based on what the glyph is, we will do something like this which is essentially add a filter dialog So when we look at this guy here, if we zoom in a little bit again, you'll notice that there's a glyph here and that is going to make this a filter UI, because that's what that means to this design >> Right >> So essentially, this was a whirlwind tour of how you can go from design to the cloud to code and it is pixel-perfect

>> Awesome >> Yeah >> That's tremendous >> Where it's like >> So, how much of what you showed, so far, is in the free version? >> So the UI kits are free forever, so you can design with free forever

The co-generator is not in the free version, it's a trial version and the cloud stuff is in the free version as well >> Okay >> So, everything in the cloud is in the UI kit So what that helps is if you are a design team and let's say you have a bureau, an agency and you have a bunch of customers and your customers are buying our products but you're just kind of the designers, like we don't want to buy the product because you're not doing anything else So, with this product, you get all the design stuff; the UI kits, all the cloud stuff, all the usability, studies, collaboration, plus all of our Angular widgets

So if you're familiar with Infragistics like our WPF, a Windows Forms products >> Oh, who isn't >> Yes, exactly The Angular stuff is basically the same thing >> I know, the episode we did on the controls was many years ago

>> We did something at build like five years ago >> Yeah >> Yeah, it was a lot of fun But yeah, so you can try it today if you just go to infragisticscom or Indigo

Design Everything's there for you to test out >> Fantastic >> Yeah >> That's awesome

Then, if you're not doing Angular, then you'd stay tuned and impatiently wait for you guys to extend that >> Yeah, and we're actively, we are racing to other platforms and racing to remove the Mac on restriction So we have many people working on that right now >> Okay >> It's a big party for us

>> I mean I understand why you would do it for places where people are greenfield like there are a lot of people getting started with Angular and a lot of people who are getting started with Xamarin There aren't as many people necessarily getting started with WPF There's a lot of existing apps but it's going to be way harder to redesign an existing app that already has UI written, already has code written It needs to start from scratch here, right? >> Yes >> Here, you sketch it out, you generate, there's your app

>> Yeah >> You tweak, right? >> Yes >> But obviously, the business logic you have to write yourself >> Yeah >> That's fine, but the UI, you wouldn't necessarily even have to ever code

>> Right >> You just go back into the sketch, and move things around >> That's what happens >> That way >> Yes

>> Yeah >> Yeah, that's what happens >> I would love to see a Xamarin version >> Like I said, we're racing to other platforms >> Okay

>> But the big thing for us, I think from the developer perspective, is removing the sketch dependence >> Yes >> That's really, once we do that and I can have my PC here or whatever computer and I don't need the Mac, it would really open it up and so we're going to do We're doing that first, we're actually kind of doing that a little further ahead of some other platforms, but Q1 maybe next year, maybe around the build time frame >> I know it's easy for me to say because it's not my money but if you think about it, you buy a Mac

Even if you buy it yourself, a couple grand, 1,500 bucks I don't know how expensive a Mac you have to buy, but let's say it's a couple grand, right? >> Two grand >> Okay, do not have to hire a designer >> Of the ROI >> They'll charge you more than two grand

>> Yeah, the ROI is huge >> To be able to deliver these apps, your bonus is probably going to be more than two grands because you're now such a rock star It actually probably could pay for itself even if you have to show out from your own pocket >> The fact that >> Easy for me to tell other people what to do with their money

>> But you're exactly right This is wizzy wigging >> Yeah >> A beautiful experience that will be pixel perfect So the ROI is huge

Like 48 percent of development apps is spent on the UI >> Right >> Then, 80 percent of maintenance downstream is based on UI mess ups >> That's business opportunity If you've got good at this, because you could be an independent designer working with developers and especially if you know Angular, you can talk the developer talk just to the design aspect for this

>> Well, that's why that whole part of the product >> Really opens up a lot of opportunities >> Yeah, that part of the product is free with the UI kits at the design piece because that is exactly it Robert, you want to just design apps, right? >> Yeah >> You're going to get hired out by these big companies

Just like here, I share in this workspace in the cloud You guys have license, go grab it Then you're done, your work is done but they save all that time If you think about it, going back to this code, this CSS is >> Yeah, how long would it take you to learn how to do that? >> Just forget about it

>> Yeah >> You're never going to do it >> Exactly >> Then one last thing I'll just highlight is we do have tons of videos and tons of that >> Okay

>> So, even if you are like, hey, I don't know anything about anything, we've got like these video tutorials that will walk you through every aspect of being a designer, figuring out how to do the code and then by each component, we've drilled down and we go through every single component, how to style it and then what the code would look like So we're really trying to be proactive about the documentation so you can be successful with the product >> Cool That's awesome Thanks for showing us this

>> Thank you Robert >> All right, I hope you enjoyed that and we will see you next time on Visual Studio Toolbox >> Thank you

Tags: , , , , , , , , ,

Visual Studio for Mac: Overview

>> Hi I'm Sayed Hashimi, a Program Manager, working on Visual Studio for Mac

In this video, I'm going to give you a quick five-minute overview of the types of applications you can build with Visual Studio for Mac With Visual Studio for Mac, there's primarily three different types of applications that you can build We've got mobile development with Xamarin, and there's two flavors there We've got Forms, and native iOS and Android projects With Forms, you can share the logic and the UI of the application across each platform

With the native iOS and Android variants, you can develop your application and have access to a 100 percent of the native APIs, high-performance experience, and in that case, you would share your view models and services, but the UI of the application would be developed separately for each target platform We also have support for Web and Cloud development, and with that we've gotNET Core and ASPNET Core, and for the Cloud, we have support for Azure functions We'll get more into this later on in our demo for that area

We also have support for game development with Unity In Unity 2018, Visual Studio for Mac is the default C# editor for Unity Let's go ahead and dive into the mobile applications here I'm going to open a existing native iOS and Android project which I've previously created You can see here that I've got a storyboard open, and we can use the storyboard to graphically design our application, and this is very similar to the storyboard editor that's available in Xcode, and we've got similar functionality for the Android projects

You're going to start this project without debugging, so we can see what we're working on here We can see we've got our application loaded up here in a iOS simulator So, this was our native application that we've developed here, and now let's move on to discuss the Web and Cloud development Okay I have an existing application which I've been developing loaded up here

It consists of a Azure Functions project, as well as a Razor Web Pages project In addition to these types of projects, you can also createNET Core console projects,NET Standard class libraries, as well as unit test with MS tests or xUnit Let's go and explore this application which I have here, and I've already started debugging this

So, the Razor, the Azure Functions project consists of a single class here that contains a run function This run function is monitoring a particular blob storage Whenever a image is uploaded to those Blob Storage, this run function will automatically be triggered, and then it's going to call the computer vision client to analyze that image, and then the results will be returned to us as to what the computer vision believes that the image contains Let me show you the Web app part of it itself So, here I've got my index

cshtml We can see we've got a special formatting for the HTML and Razor components here online Then, you can see that we have special formatting for the input ASPNET tag helper here If I was to look at the code behind for this, and the on-post async is pretty much where the image will be selected by the user inside the Web application

Then, the purposes or the functionality that the app provides us is, that it will take the image provided by the user and upload it to that blob storage that the function is running Let's take a look at the image that we're going to upload using the website So, here's the image It's a picture of my two-year-old daughter and a wooden table, that I've previously created for her So now, let me load up the browser here

I will pick this file, and then we're going to click "Submit", and then we'll take a look at the result coming out of the Azure function So, the function is running I've just clicked "Submit" on the website So, shortly, this function should load up Okay

Here we go So, we can see it's detected a new blob, and now it's giving us some information about the image here So, the name of the image and then the caption is a small child sitting on a wooden table, and then we've got some other information that it thinks the image contains here Let me go back to Visual Studio for Mac Now, we're done with the Web and Cloud development portions of this, so let's move on to discuss the game development

Okay Here I have Unity 2018 loaded up with a sample game here If I was to go into the "Assets" menu item here, I can select "Open C# Project" This will open Visual Studio for Mac, and then it will open the solution that's associated with this particular game, and now my solution has been opened You can see that we've got a lot of C# files listed here, and we've got the Fireworks

CS class loaded So, let me set a break point, and then we're going to go ahead and debug this and hit that break point I'm going to click the "Play" button here to build and start debugging the solution here Now, I'll switch back to Unity, and then I'll click the play button here Now, we can see the break point has been hit in the Fireworks class, so I'm just going to go ahead and disable this break point, then continue running the game

So, now our game is running So, that was a very brief demonstration of Unity 2018 and Visual Studio for Mac, and that pretty much wraps up this video In this quick video, we've shown you all the things that you can do with Visual Studio for Mac including mobile development with Xamarin, Web and Cloud development withNET Core, ASPNET Core, Azure Functions, and then also game development with Unity 2018

This is Sayed Hashimi Thank you for watching this video, and keep an eye out for future videos in this Visual Studio for Mac tips and tricks series

Tags: , , , ,

Visual Studio for Mac: Acquisition

>> Hello everybody Cody here

Visual Studio for Mac program manager at Microsoft Today, I'm going to show you how to get started with Visual Studio for Mac, from downloading, installation and first run Let's get started First, I'm going to search Visual Studio for Mac from being This will take me to the Visual Studio

com download page To start, click on the download button, and let the download complete Now that's downloaded, I'm going to go ahead and mount the drive and open the installer, and navigate to my installation directory, route the drive Once this is verified, I'll double-click on the installation "Executable" and get started Now that we've opened the installer, we can choose what we want to install

The great thing about Visual Studio for Mac is that you can install exactly what you need, and nothing that you don't So, you can choose here what kind of workload you want to install fromNET Core, Android, iOS, Mac OS apps, or extra tools examine workbooks Furthermore, within each of these projects, you may have optional components such as the Open JDK, Mobile SDK, and Android SDK Both of these are optional components that would be helpful in an Android development environment

If you aren't going to do Android development, no need to install it Just uncheck it here and away you go Otherwise, check everything and let's continue While you're waiting for the installation to finish, feel free to click on some of the links in the carousel These include helpful tips and tricks on getting started Visual Studio for Mac including tips on Unity and

NET Core If your installation includes Xamarin components or any other components that require Xcode, you may be requested to install it To do this, click "Xcode" to open the Mac App Store Otherwise, go ahead and click "Continue" Now, Visual Studio for Mac will launch

Now, as this lesson is finished, let's go ahead and get logged in This the best way to start your Visual Studio for Mac experience It gives you access not only to reserve publishing, but also other benefits of your Microsoft account To do this, click on sign-in Here, you'll be asked to sign in with your Microsoft account

I'll go ahead and sign in now Now, that were assigned in, let's go ahead and make our first project To do that, let's close the sign-in window and click the new project button This gives you a list of all the different projects that are supported To get started, let's just make a quick

NET Core app To do this, I create an app on ourNET Core and now going to set the console application I can choose between C sharp and F-sharp Let's do a C sharp console application

Clicking next, will give me the opportunity to name my project Once I've named it, I can choose a location and also choose whether or not initialize version control Once I click create, my project will be created From here, I can go ahead and make my first project In this video, I showed you how to install Visual Studio for Mac

Get signed in, and create your first project I hope you've enjoyed it, and please stay tuned for more videos in our series Thank you

Tags: , , , ,

eXplore How To Use FileUpload Control in Visual Studio 2017 -[In English + SubTitles]

Welcome To EasyToExplore today we will tell you how to use file upload control in visual studio 2017 in aspnet web application project for this go to file and create a new project and in visual c# web previous version select asp

net empty web site name the project as web app file app file upload click on ok now go to solution explorer right click on the project select add new item select the web form checked that place code in seperate file is selected click on add in source code view go within the div tag moved to design view from toolbox choose the file upload control and double click on it choose the button control and double click on it change the text of button and make it upload and change the control id of fileupload1 by going to the properties part and renaming it to FileUploadControl save it double click on the button here we will place the code for file upload control for uploading the file to the project here the path does not have the namespace within the project so we will select the namespace systemio within which this path class is placed save it so here the code says that file upload control has file it will check whether the file is selected by the choose file option if yes then it will go to this try catch block if any exception occured then it will go to catch part and it wil display the following message along with error with exmessage ex is object of exception class in the try part we have a variable name is filename which is of string non primitive data type and here the path class has a get file name function which will get the filename from the FileUploadControlFileName the file selected now the FileUploadControl SaveAs function will save the file which we used server is a class map path which will set the location or which will map location where file will be saved and here within double quotes we have used ~/ upload by this we mean that this will be in the root within that there will be a folder named upload and / that filename means within upload file will be saved, so first check that there is a folder name upload if not available go to solution explorer right click on the project and select new folder upload so here is the folder upload and here it will reflect that upload status file uploaded if the file upload completed successfully if there is any issue it will go to the catch and it will do as we have already guided you use ctrl+s to save now go to the default

aspx page use ctrl+s to save debug the project using the google chrome browser so here as you can see the choose file upload button is available now we will click on choose file option we will goto the pictures folder and select the downloadjpg image and click on upload button here is the message is Upload Status: File Uploaded that means the file is uploaded successfully now we will stop the debugging mode goto the solution explorer right click on the upload button and refresh the folder so here is the file when you will go to the image you will able to see that the image is exactly the same you have selected for uploading so this is how you can use the File Upload Control within ASP NET visual studio 2017 web application project if you like this video please click on like button and please subscribe our channel easytoexplorein by clicking on bell icon if you have any query related to ASP NET or visual studio or visual studio 2017 please post in comment section Thank You

Tags: , , , , , , , , , , , ,

Shenzhen Warehouse

shenzhen warehouse

Today, remaining in an on the internet service is even more requiring than it was in the past. You need to grasp in all your areas in which you’re providing your solutions, or you fail on the planet. The improvement in modern technology never stops. Every time there is something brand-new in the market and you’ve to update your services accordingly given that you remain in completion. Shopping implies operating on web. To name a few aspects of your e-commerce service, Order shenzhen warehouse services may be one. You have actually 2 choices to offer these solutions online: either to do it on your own or to outsource it. Doing it on your own needs cost and large business have their very own stockrooms considering that they can afford it. For medium and also little firms, outsourcing is a sensible choice.

It’s a tough task to establish one’s own stockroom framework simply to run his company. It costs high as well as is needs qualified labor force and technology to provide the orders as anticipated by the clients. Client is the core of any organisation as well as exceptional customer support assist you surpass your competitors. So, from packing, picking and delivering’ it’s all professional and highly demanding too. A late or faulty plan provided to your client is enough to shed a consumer. So if you’re running your own stockroom, you require to supply remarkable services or it’s better to employ an Outsourcing Order Satisfaction companion for this objective.

Outsourcing Order shenzhen warehouse services to a specialist is a smart selection, yet it needs some cautious research before taking the final step in this regard. There are different business handling outsourced warehousing. You have to choose out of these firms. Your ideal suit is one that is capable of satisfying your business needs to the optimal degree. A list of some important questions relevant to your company might help you make the right choice. One of the most important consider this regard may be expense element, storehouse ability and also dealing with a delayed or defective distribution. If your outsourcing selection satisfies you about these 3 elements, he’s a great option to rely on for your business warehousing. A simple on the internet research study will help you encounter a great deal of options. Give it a shot.

If you are seeking more information on shenzhen warehouse service, please check out: https://www.parcelfromchina.com/.

Tags:

Kids Smart Watch Supplier CheerTone Is The Leader In China

For a lot of us, the perfect wearable device must be one that suits perfectly as well as has a number of beneficial features. Real, the Google Glass is among the best wearabale gadgets ever before generated. The Google Glass serves as well as you can wear it like a phenomenon as well as do rather a number of great things with it.

kids smart watch supplier CheerTone

Nonetheless is the Android phone watch far behind? Is this Android tool the perfect wearable tool? To answer this concern rather, one would have to ask what all high qualities should an ideal wearable tool have?

The essentials

Any kind of device in the modern age, to start with, has to have some exciting features. Put simply, any type of gadget ought to not only have what individuals anticipate from it yet additionally some other unique attributes as well. Currently, what would certainly you get out of an Android watch phone made by kids smart watch supplier CheerTone? Perhaps you expect it to have the capability to run some Google Play store applications, given that it is Android. Possibly you anticipate it to execute the function of a ‘phone’, since it is called a watch phone. The Android watch phone fulfils its standard expectations admirably. A lot of these tools have actually Android version 2.2. They have a talk-time of around 5 hrs or even more, that makes it a functional device. It likewise has a standby time of five days. It looks extremely presentable – most of these watch phones have two quantity switches left wing and also a food selection as well as power switch on the other side, leaving the top surface area smooth as well as streamlined.

The additionals

You could want the gadget to have a couple of add-ons that are not its fundamental functions. The Android watch phone made by kids smart watch supplier CheerTone has all the attributes you could possible think of – cam, mp 3 audio recorder, mp4 video clip gamer, Bluetooth capacities, integrated speaker and mike, expandable memory, inner GENERAL PRACTITIONER antenna that supports satellite navigating, a Wi-Fi Web Internet Browser, and also a great deal much more Therefore the Android watch phone integrates every attribute you might want from a small portable wearable tool.

Competitors

kids smart watch supplier CheerTone

Ultimately, the excellent wearable device must hold its own against its competitors. The gadget does this handsomely. Most tools we have actually seen in the past, do not actually fulfil the assumptions that emerge from their name. The Sony ‘Live-view’ gadget for example, is just a Bluetooth accessory. The 6th Generation iPod Nano can be put on as a watch, however what allows it down are its limitations – you are not enabled to submit your very own watch-faces, and also there is no wireless capacity, that makes it impossible to inform the right time other than when it is linked to a PC running iTunes.

No wonder, the Android watch phone made by http://www.cheertone.com/ can be called the excellent wearable device. Google Glass is undoubtedly a fantastic werabale gadget however does not have the selection an Android watch phone offers.

Tags:

Millionaire Dating Site

millionaire dating site

Safety and security

A millionaire dating site needs to offer attributes that secure your privacy as well as your safety. Don’t permit your computer to be taken over by spyware or adware. You, obviously have the responsibility for using an excellent infection security program on your personal computer. The site has the responsibility to utilize a safe website. The dating web site must have the ability to screen individual details by your choice, and also to shield against cyberpunks entering into the details that you do not intend to be open secret. You will need to prevent handing out info prematurely and also the personal information ought to never be freely readily available on the net.

No hidden costs

A millionaire dating site should in fact be totally free. Do not select a complimentary website unless is clearly not going to return and also demand funding after 2 week or one month. This is not a complimentary website if this should happen. It is a cost-free test for a paid website. You must additionally not need to reply to duplicated emails or various other sorts of stress to ‘update’ your membership into a premium level or to obtain completes from the site. Don’t succumb to that procedure. It is less than truthful if the site is advertised as free.

Look for a great credibility

When you are seeking a millionaire dating site, one that has a good recommendation or recommendation from a person you know and trust fund is the very best referral you can locate for a website. If you have no such suggestions, try to find a personal record from a private on the internet. You can check for talk about an unassociated forum or get in touch with the Bbb to ensure there are no negative records on the website you are considering.

Be yourself

millionaire dating site

When picking a millionaire dating site it is important to take a look at the abstract sensations you get in exploring a website. If you are a laid back type person and also hate regulations, you probably won’t intend to join a site that needs a prolonged application, testing or review process before you can even come to be a participant. If you see the site that you are taking into consideration as well as the website is filled with links that are inadequate in high quality or that are personally offensive to you, you need to keep away from these sites. If the site is unobjectionable, yet you simply don’t like the decors as well as styles, keep away from it. You won’t be pleased in the future.

Longevity

A millionaire dating site such as www.richpeopledatingsite.com that has just been around a couple of weeks may be good quality as well as might be an excellent option for you, yet it is tough for you to judge because there’s not nearly enough history to check out on the site. Take a look at the history of the site based upon the requirements above and also establish whether the size of time the site has actually been functional suffices to satisfy you that the website can run successfully and also properly. Give a new website some months to grow.

Tags:

Rich Men Dating Site

It has been said that love needs to be shared considering that you can not declare that you know just how to enjoy unless you understand how to look after various other individual. According to studies this is human inspiration based upon the objective to have a person to enjoy. Some claimed that it is a human demand to like and be loved. This loving feeling is also one of the reasons that created the rich men dating site offered online. Yet what do dating sites supply that lures lots of clients to avail of it? Continue reading to be oriented on what this sort of company can do for you.

Dating websites will certainly ask you to fill out an account to make sure that you can begin utilizing its services. Your account will certainly be posted on the website to make sure that prospective enthusiasts will have the ability to see you. Well, this is not a determined effort to find the love of your life however an approach that you can use in order to locate somebody that will complement to your individuality. When you have an account, individuals will additionally consider it and consider you as one of the very best choices. Due to this you need to tape all your excellent attributes to quickly find a counterpart.

Once in awhile, the treatment is much straightforward. Each outline has a document of top quality or quest that associates verify. The additional the same functions that 2 individuals have the higher-ranking fraction” the rich men dating site will set aside to it.

Several websites allow clients to detail how necessary every feature is. Each equivalent function is provided a distinctive support depending upon just how vital it is to the client. For image, if you prefer Christians, however really have absolutely nothing versus Buddhists as well as Muslims, after that you will be able to categorize that point at a low level. If it’s extremely important to you that your day is a sporting activity fanatic, you can place that very high. After that the rich men dating site will certainly pair you with a flashy person or one who is likewise a follower of your favorite basketball team.

Dating sites use a program to propose potential counterpart and also such proposal is not influenced by your comment. This is a good way to locate someone that will complement your character due to the fact that the treatment utilized in order to discover the one you are compatible with will certainly be based only on your account. This is totally various if you will certainly go to the shopping center and look at everybody death by and attempt to rank the guys or girls in a range of one to 10 and then decide if the initial one who winks at you will be a good catch. When you avail of the solutions of the rich men dating site like www.datingsitesformillionaires.com, you will have a respectable and also prompt intermission as well as stay clear of one night stands that will not ultimately work out.

rich men dating site

You do not have to believe that you will certainly be pressured to date a person who matches your attributes also if you don’t feel anything for the individual. It is because in the end, it depends on you to decide that to date or to have a rendezvous with. Dating sites are simply there to aid you locate your match however it is you that will certainly decide to whom you will provide your heart to.

Tags:

Millionaire Dating Sites

You can’t help it, you constantly have that feeling that something is just not right with your man, that he always appears to be acting much different than he utilize to, such as mood swings more frequently, he appears to be obtaining increasingly more remote with you, like always damaging days that you have with him, you keep informing yourself that he is not the dishonesty kind yet simply can not completely persuade on your own of that. Keep in mind, the free millionaire dating sites for singles have hundreds of even more local men in their data sources should you uncover he is the unfaithful kind, move on to the next one!

millionaire dating sites

1. He is constantly charging you that you are cheating on him, if he is accusing you of this constantly for no noticeable reason, this might be the indicator that he is cheating on you! He might be accusing you of cheating to assist him feel what he is doing is alright, or he recognizes that disloyalty for you is a possibility given that he is getting away with it and you might be doing the same.

2. He is always informing you he is at work or had to work late today, when your guy is utilizing this line means to typically, it could be a good suggestion to simply look into him at the office to see exactly how hard he is really working, find out what he is actually dealing with! In the past he has not needed to obtain of community business journeys as well as of all of abrupt he is the traveling salesperson, you better begin excavating right into the out of town component. Just because you male is constantly burning the midnight oil does not make him a cheater, however we are simply stating to look out for that reason if it appears to end up being a constant point.

3. Individuals around you and also your buddies are constantly dropping what appear to be hints regarding him as well as the opportunity that he is cheating might exist. Pay attention near what they are saying due to the fact that they might be right, don’t block out every little thing they are saying, remember they are seeing things from a various viewpoint than you are. Sometimes the buddies might be ideal!

4. He always seems to be purchasing presents for you for no factor, doing this may be helping him to make up for the guilty feelings that he has for all his dishonesty ways as well as behavior, make sure to see close for anytime that you think his behavior is suspicious and afterwards promptly he is doing the continuous I like you’s as well as acquiring you presents, if this is happening inspect it out as this might be an indication he is a cheater. Best Of Luck and Delighted Online Dating!

Click www.bestmillionairedatingsites.net to read more infomation about millionaire dating sites.

Tags: