Sign Up Now!

Sign up and get personalized intelligence briefing delivered daily.


Sign Up

Articles related to "tutorial"


Orbis: The Stanford Geospatial Network Model of the Roman World

  • Here's some tutorial content.
  • ORBIS is designed for modern browsers and uses technology that works best in Chrome or Safari.
  • If you want to try ORBIS in your unsupported browser, click here.
  • The older version of ORBIS will work in your browser.
  • Click here to go to that version.

save | comments | report | share on


CSS3 in 10 days — Day 4

  • Open your code editor and create a new 4.1-8BitMario folder and two files index.html and sandbox.css inside it.
  • Let’s create mario now.
  • Head over to sandbox.css and copy the below code.
  • We are giving background-color: #e7eef1 and some box-shadow also as #e7eef1.
  • The above will result in showing a little part of Mario’s hat.
  • Let’s complete the Mario by putting all the code.
  • Add the below code in sandbox.css and then click and hold the Wahoo!
  • Open your code editor and create a new 4.2-PricingTable folder and two files index.html and sandbox.css inside it.
  • It will result in below.
  • Open your code editor and create a new 4.3-CSSVariables folder and two files index.html and sandbox.css inside it.
  • Now, put the variable declaration in sandbox.css .
  • It will show the boxes in browser.

save | comments | report | share on


Getting Started with Minimum Viable Reason

  • To help other JavaScript developers get started, I'm going to guide you through adding Reason to a project to get a minimum viable setup working so you can begin hacking away.
  • Let's setup our build system so we can start using Reason, add bs-platform to the project.
  • Let's create the source file for the file we referenced in our HTML, we need to create our first Reason source file at src/App.re.
  • To create the artefact we specified in our HTML, we need to build the project to turn our App.re into a App.bs.js.
  • Logging to the console isn't very useful so let's do something with the DOM too.
  • It's not fit for production but it it's good to get an understanding of how to add Reason to an new or existing project and manually configure it.

save | comments | report | share on


CSS3 in 10 days — Day 5

  • We will start with CSS only Modal Window on day-5.
  • Open your code editor and create a new 5.1-ModalWindow folder and two files index.html and sandbox.css inside it.
  • It will show our index.html as the below in browser.
  • So, head over to sandbox.css and put the below code.
  • So, now if you click on the button the overlay will cover the whole browser.
  • Next, we will create a CSS only Pacman.
  • Open your code editor and create a new 5.2-Pacman folder and two files index.html and sandbox.css inside it.
  • Let’s first create the path for the Pacman.
  • Let’s create the pacman now.
  • We will now see the pacman in the browser.
  • Now, let’s animate the pacman close and open it’s mouth.
  • Let’s create the Ghost now.
  • Put the below in sandbox.css to create the ghost.
  • This completes our pacman animation.

save | comments | report | share on


CSS3 in 10 days — Day 3

  • Welcome to Day 3 of learning CSS.
  • Open your code editor and create a new 3.1-BrokenImage folder and two files index.html and sandbox.css inside it.
  • Open the index.html in browser and you will see, the ugly default broken image of the browser.
  • Now our index.html, will look like below.
  • Next, we will learn to make Print Specific Styles.
  • Again in your code editor and create a new 3.2-PrintStyles folder and two files index.html and sandbox.css inside it.
  • Let’s put some style for print.
  • Open the index.html in browser and hit Cmd+p to open print preview.
  • In CSS3 we can do some cool tricks of blurring and inverting image.
  • Again in your code editor and create a new 3.3-ImageManipulation folder and two files index.html and sandbox.css inside it.
  • Let’s add code for first two images.
  • Now we will add code for next two images.

save | comments | report | share on


CSS3 in 10 days — Day 2

  • Open your code editor and create a new 2.1-Typography folder and two files index.html and sandbox.css inside it.
  • Now in sandbox.css, we will add code for the Cool Shadow first.
  • Now, when you open the index.html in a web-browser, we can see the cool shadow effect.
  • Head over to sandbox.css and add the below style.
  • Open your code editor and create a new 2.2-ClippingImages folder and two files index.html and sandbox.css inside it.
  • And you will get the beautiful comment image.
  • Head again to clippy and edit the provided left arrow.
  • Again in your code editor and create a new 2.3-RegistrationForm folder and two files index.html and sandbox.css inside it.
  • Next, we will add some basic styles to the form to show a background gradient.
  • Next, we will create a tile effect which, will happen when we hover over the form.

save | comments | report | share on


10 superpowers that HTML5 gives you (and you are not using)

  • The latest HTML spec has a big number of new features and the plans for future additions are constantly growing.
  • But I definitely agree that overcoming the compatibility issues to use some new feature natively can be overwhelming.
  • Check this codepen for the full example details and summary tags are supported by most major browsers excepting Edge and IE but have a polyfill.
  • CSS3 gave us a lot of nice tools to work with but we can never be sure that the cool new feature we are using is natively supported by different versions of different browsers on different operations systems on different devices.
  • Multicolumn is a set of CSS attributes giving an easy way to split every HTML element to columns, very similar to what modern UI frameworks like Bootstrap offer.

save | comments | report | share on


CSS3 in 10 days — Day 1

  • Next create an empty sandbox.css in the same directory.
  • And now our index.html looks like below in browser.
  • Now, our dark button looks like below and have a hover and active state also.
  • Now, let’s also add styles for the facebook light button.
  • Add the below code to our CSS.
  • Now, we will add hover effect and active effect to our 3D circle.
  • We will start with the CSS for button 1.
  • The difference comes from the to right in border-image.
  • Also, on hovering we have set border-right-style: none, which results in below.
  • But if we look at our html, it is actually checkbox and we are transforming it to look like a button.
  • As evident from the above everything including the on and off are created from CSS.

save | comments | report | share on


Objects as Keys: A JavaScript Adventure

  • It doesn't quite work as expected, and the reason for the actual behavior is simple: objects do not uniquely identify themselves when used as object keys.
  • In this post we will dig into this idea of using objects as keys without using a Map or Set. We will start with a rough working solution, identify issues, and iterate toward a robust implementation that covers a wide range of use cases.
  • Along the way we will stumble upon and discuss a number of lesser-known language features, including automatic type coercion, prototype chains, property descriptors, and symbols.
  • } conditional ensures that we only assign an ID (and increment the global counter) the first time that Symbol.toPrimitive is called on the object.
  • It took us a number of iterations to get here, but we landed on a simple Symbol.toPrimitive function that, when applied to Object.prototype, enables the use of objects as keys.

save | comments | report | share on


Trying to make FETCH (lol jk- a POST request) happen 💅💁🏼‍♀️

  • This post will walk you through how to use Azure functions and Twilio to send and receive text messages and calls, in this case a quote from a favorite character.
  • Click the notification button on the bell in the top right, then Go to resource to check out your new app and add a function to it.
  • We’re picking this option because when our Twilio number receives a text message, we want it to send a POST request to our Azure function that tells it to run.
  • Click the + button by Functions again back in Azure, select the same settings (in-portal and Webhook + API), add another package.json and our Twilio helper library.
  • When that’s added, click Save, </> Get Function URL, head back to your Twilio number and paste that link as the HTTP POST request when a call is received.

save | comments | report | share on