#vue js tutorial 2018 | Explore Tumblr posts and blogs

t-baba · 5 years ago

Photo

What are closures? / Hapi is back / Human friendly natural language date picking

#497 — July 17, 2020

Unsubscribe | Read on the Web

JavaScript Weekly

Super Expressive: Build Regexes in (Almost) Natural Language — A library for building regular expressions (something many developers have a problem with in their native format) using an ‘almost natural language’ approach. It’s not for me but the code examples look interesting.

Francis Stokes

📊 Billboard.js 2.0: D3.js-Powered Charts Library — Billboard.js is a chart library built on top of d3.js that supports a wide variety of chart types in all modern browsers. 2.0 is a rewrite into TypeScript plus a lot of refactoring and performance improvements.

Jae Sung Park

Get a Free T-Shirt. It Doesn’t Cost Anything to Get Started — FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. Download and Install today and we'll send you a free t-shirt.

FusionAuth sponsor

Apollo Client 3.0 Released: The Full Featured GraphQL Client — Apollo Client is commonly associated with React but it can also be used with Angular or on its own. GitHub repo.

Ben Newman (Apollo)

⚡️ Quick bytes:

So the Hapi project was originally going to come to an 'end', but now it's not. It's back!

If watching a developer ▶️ fly through 6 code katas in 11 minutes sounds entertaining to you, enjoy! He explains what he's doing too so you might learn something.

You can now start up a new Codepen by visiting pen.new.

🎧 UI Therapy is a new podcast with an interesting episode on Snowpack and Pika featuring an interview with their lead creator.

There seems to be some concern over a number of people leaving Google or the Angular team?

Adobe Flash passes off into the sunset later this year, and Ars Technica have taken a look back at its story. A nice bit of nostalgia.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

📚 Tutorials, Opinions and Stories

What The Fork is a Closure? — A sanitized fork of a new project from React’s Dan Abramov that sets out to explain what different development concepts mean, and he has started with closures.

Dan Abramov

How To Create a GitHub Profile README — Did you know you can now create a document that’s shown on your main GitHub profile page? It’s not JavaScript specific but I imagine a lot of you would find this neat to do!

Monica Powell

How to Build Forms With React the Easy Way — Building forms with React can be frustrating. TJ VanToll suggests one way to tackle this challenge with ease. Read more.

Progress KendoReact sponsor

A Simple Explanation of Event Delegation — A useful pattern when listening for events on multiple elements using just one event handler.

Dmitri Pavlutin

Generating UUIDs at Scale on the Web — Can you trust every browser to generate globally unique identifiers at scale? Apparently yes. This sounds boring but the technicalities are more interesting than you’d initially think!

Matthieu Wipliez

Building SVG Components in React — When building responsive web apps it makes nothing but sense to use SVG as opposed to more traditional image formats. SVG stores an XML-based description of the image which can be progammatically manipulated similar to HTML. It’s tailor made to be incorporated into components.

Maciek Sakrejda

CSS Transitions in Vue.js and Nuxt.js — For when you want a little visual pizazz when data changes or is added/removed.

Timi Omoyeni

Building Strong Distributed Teams, One Pixel at a Time — Learn how eng. managers can improve teams based on three key “C” pillars: connection, communication, and collaboration.

CircleCI sponsor

Type Safe JavaScript with JSDoc — If TypeScript just isn’t your cup of tea but you see the value in types, what can you do? Remy reminds us of a popular post from 2018 with a JSDoc-based approach.

Remy Sharp

How You Might Not Need Vuex with Vue 3

Gábor Soós

🔧 Code & Tools

React Native 0.63 Released — The latest version of React Native ships with LogBox, a totally new way to monitor errors and warnings raised in development.

Mike Grabowski

Inclusive Dates: A Human-Friendly Date Picker — You can try it here. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date(!)

Tommy Feldt

Hukum: Display GitHub Action Progress in the Terminal — If you’re using GitHub’s Actions CI/CD feature and want to keep a real-time eye on it, this will help. Built in Node.

abskmj

wait-on: A CLI and Node Library to Wait for Ports, Files, Sockets, etc. — For when you need to wait until files, ports, sockets, and similar resources become available (or the opposite).

Jeff Barczewski

currency.js 2.0: A Library for Handling Currencies — Built to work around floating point issues, currency.js provides a variety of useful methods and formatters for working with monetary values.

Jason Wilson

xmlbuilder2: An XML Builder Library — Convert JS objects into XML, parse and serialize XML documents, or create XML documents using chained function calls. Aimed at Node but can be used in the browser too.

Ozgur Ozcitak

Help Shape the Future of Video, Fill Out the 2020/21 Video Dev Survey

Bitmovin Inc. sponsor

vue-flux: A Responsive Image Slider with 20 Cool Transitions — See the transitions in action on the demo page. Mobile-friendly, usable via arrow keys, and includes an optional parallax component.

oscar deulos

dequal: A Tiny (305B) Utility for Check for Deep Equality

Luke Edwards

Jaxcore Bumblebee: A JavaScript Voice Application Framework — For building ‘conversational voice assistants’ (so think Alexa, Cortana, Siri, etc.)

Jaxcore Software Inc

🎨 Creative Corner

WebGazer.js: Webcam Eye Tracking in the Browser — I’m going to file this under “fun, but..” The examples are certainly neat and moderately accurate for me. A fun demo and a neat piece of work but with limited use cases, IMHO.

Brown HCI Group

by via JavaScript Weekly https://ift.tt/3fzD32h

#Javascript Branding #Javascript Weekly

0 notes

mancdev · 7 years ago

Text

VueJS & Firebase Cloud Firestore Stripped-Back - Tutorial Part 1

In this tutorial series we will explain how to start developing with the Vuejs framework & Firebase Cloud Firestore to build full-stack web applications. We’ll start from scratch by stripping everything back to the basics - no CLIs, build tools or bundlers, just a HTML page, an editor and a browser so you can get to grips with building apps with Vue & Firebase more quickly and be productive faster.

VueJS

Vuejs is now one of the big 3 Javascript frameworks in the web client ecosystem. However it’s not developed or backed by a huge corporation, it was developed by one individual, Evan You. The proliferation of JS frameworks in recent years has led to the term “Javascript Fatigue” where developers have become weary of all of the new and self-proclaimed “latest and greatest” open source frameworks. It is in this environment that Vue has emerged through all of the noise to become a major player alongside Angular and React (both backed by huge technology companies, Google and Facebook respectively). That Vue has achieved such a status in this environment backed by one individual highlights just how Vue has hit a chord with developers and is filling a gap that isn’t being met by Angular, React or other competitors like Ember and Aurelia.

Evan You is an ex-Googler who was familiar with AngularJS (often referred to as Angular 1) and used it for internal projects at Google that he was working on. He set out to achieve a framework that delivered the benefits of AngularJS but was more lightweight, faster and better suited to smaller apps that didn’t require the heavy-lifting of the huge apps that AngularJS was originally built to develop such as their Adwords platform and their internal CRM system. What he produced was a beautifully simple solution and it quickly attracted adoption as the front-end framework of choice for many PHP developers, particularly from the Laravel community.

Despite promising early adoption in some quarters, Vue may well have stayed a “me-too” framework in the ecosystem had it not been for Google’s decision to redevelop their AngularJS framework from scratch. Angular (often referred to as Angular 2) was such a departure from the original AngularJS framework that it introduced a fundamental shift in approach and required developers to learn many new concepts just to build basic apps. Developers were kept in limbo between AngularJS and Angular for almost 2 years, with many alphas and then betas and many breaking changes and missing pieces to deal with during the transition and then no easy migration path for their existing code and apps.

There’s no doubt that, as a new framework in it’s own right, Angular is a fantastic, powerful, all-in-one next generation framework but it isn’t “Angular” as millions of developers know it. Perhaps the biggest mistake Google made was in not launching their next-gen framework under new branding. In any event and unfortunately for Google, Angular 2 was too big a change for many developers and while uptake was initially high, it hasn’t achieved the type of ongoing adoption or love as AngularJS or React and it’s clear that Vue, with many obvious similarities to the original Angular, has arrived just in time to sweep up and become a magnet for disgruntled Angular devs.

In addition, the droves of developers jumping in to the Javascript ecosystem over the past years, in their evaluation of an appropriate framework, are choosing Vue in vast numbers due to how easy it is to learn and how quickly they can start building apps. I would say that the best word to describe Vue to developers choosing a framework is “approachable” - it seductively invites you in and once there you find it’s so intuitive and simple to get productive, covering all of the bases you need, that once you’re in you tend to stick with it. For me personally I actually enjoy spending my days developing around Vue, I cannot say the same for Angular unfortunately.

In 2018, Vue is set to gain even greater momentum and overtake Angular into second place in the Javascript framework popularity chart. The main reason for this may be that the massively popular Ionic mobile and PWA framework is about to release a version that decouples it from Angular and enables developers to build apps with Ionic using any framework (or none at all). It’s interesting that this is likely to be a tipping point for Vue to achieve critical mass and yet is due to the Ionic team’s concern that Angular isn’t seeing the level of adoption anticipated and continuing to hitch their wagon to Angular is likely to hamper their own growth.

To address this, in Ionic 4, they’ve developed a framework-agnostic, web component-based edition of their mobile framework. When you look online it’s fairly clear that the majority of the delight at Ionic’s shift away from Angular is coming from those who want to use Ionic with Vue. Personally I only stuck with Angular because of Ionic despite my preference for Vue and since their announcement of Ionic 4, I have thrown myself fully into Vue. The sweet spot that Vue hits between Angular and React is in delivering a more lightweight and simple approach than Angular, focussing first and foremost on being a view renderer like React but providing optional elements that are officially supported and developed by the Vue core team, such as routing that can be easily dropped in to your app. This is what is meant when Vue is called a “progressive framework”, you can start by using as little or as much of the framework as you need, progressively using more of it’s subsidiary elements as required. Another advantage to using Vue is that it’s lightweight enough to use it in one part of your app and progressively expand it to other parts when you’re ready, for example if you have existing app in vanilla Javascript, jQuery or another framework that you want to change over to Vue piece by piece.

As mentioned, Vue’s biggest advantage is it’s simplicity and approachability. While other frameworks require knowledge of build systems, CLIs, Node, NPM etc just to start building an “Hello World” app, with Vue you can strip everything right back, open up an HTML file in an editor and get started simply without needing to spend time learning anything else. While you’ll likely want to move over to the full modern JS development environment as you get more involved, it isn’t required to get started.

Firebase Cloud Firestore

So Vue is a fantastic front-end framework but to build even the most trivial worthwhile app, we need a back-end and a data store. Like with using Vue, we want to use something that delivers simplicity and approachability yet gives us the power to build advanced apps as you become more experienced. For this project Firebase Cloud Firestore is a no-brainer to use as the database back-end. Like Vue, we can just get started using Firebase with just a basic HTML page - no need for CLIs and build tools to just start building something.

I first used Firebase back in 2014, when they were a small, private company shortly before they were acquired by Google. At the time Firebase was not a platform but a hosted realtime database and I fell in love with it immediately - for prototyping it was perfect and it’s realtime capabilities were just awe-inspiring at the time.

However Firebase did have some serious limitations that made it unsuitable for me to use as the back-end database in a production app. It didn’t allow server-side code, so all of your logic was exposed on the client and it’s database querying facilities were extremely limited. Also, as a No-SQL document database, organising relational-style data into something that was manageable without joins and queries required denormalisation and duplication of data, something which is anathema to those coming from a SQL-based relational database background. I felt it was a real shame as, despite these limitations, it was very impressive and working with it’s Javascript API was a joy.

After Google’s acquisition, Firebase was expanded into a full serverless platform allowing for storage, cloud messaging, hosting, authentication, analytics and much much more. What had been “Firebase” became the Realtime Database element of the platform. Fortunately Google started to address the limitations that I and many other developers had found with the original Firebase. First server-side code, in the form of Cloud Functions, was added which enables you to put more of your sensitive business logic code onto the server.

More recently Google introduced an alternative database to the original realtime database which they call Cloud Firestore. Cloud Firestore addresses many, but not all, of the issues with the realtime database in terms of querying and organisation of data. It still provides the full realtime capabilities that we know and love and is still a No-SQL database based on documents. However you can now organise them into Collections (similar to relational DB Tables) which enables you to perform much more advanced queries. You can have specifically defined fields each of which can have a specific type. One of these types is the Reference type which lets you store links between documents on different collections to enable a form of join. In addition Cloud Firebase enables offline usage so the user can continue to use your app even if access to the server isn’t available. There are still limitations, remembering it’s not a relational database, and full joins are not possible and neither are aggregate queries such as SUM, COUNT etc. However with 90% of the issues I had with the original Firebase realtime database now dealt with through Cloud Functions and Cloud Firestore, Firebase is now an excellent choice as the back-end, serverless platform and data store for building full-scale production apps.

OK so enough talk about the what and why, let’s get going with the how and write some code. We’re going to start, as we’ve talked about, with a single HTML page. Choose your OS, code editor and browser of choice (I’m using VSCode on OSX and highly recommend using Chrome as your browser).

Open up your editor and select to create a new file in a new folder. Just call the new file index.html. Once you’ve done this, start with a skeleton html page as shown below :

<html>

<head> <title>VueJS & Firebase From Scratch</title> </head>

<body>

</body>

</script>

<html>

The first thing we’ll need to do is to import the VueJS library. We can do this with a CDN link (see below) which is placed below the closing body tag and before the opening script tag :

This recommended CDN link is correct at the time of writing however may change in future. To ensure it’s correct, once you’ve inserted this link into your page, save it and open it up in Google’s Chrome browser (select File from Chrome’s menu and select Open File … to navigate and select your newly created index.html file). The page will show as blank in any case however right-click on the page and select Inspect from the pop-up menu and click the Console tab. If this displays nothing eg there are no error messages then you’re good however if you do get an error complaining about the vue library then browse to https://vuejs.org/v2/guide/ and look for the link displayed under Getting Started.

We’re ready to build our app! The first thing we need to do is to create the Vue Instance Object that will be used as the core of your app.

This creates a new Vue instance that we can reference throughout our html template and which contains all of the data and methods that we’ll create to develop the app. Some call it the View Model however we’ll stick to calling it the Instance Object. We simply create a new object called app from Vue and pass in an object with all of the information about our app. To begin with, we only declare a single property in this object which is el, short for element, and we assign #app. This tells Vue that any reference to an element that has the id of app is to be controlled by our Vue Instance Object.

In our html template we can now simply create a container html tag and assign it the id of app. All of the content within that tag is then controlled automatically by our Vue instance object. (Please note that any content in bold from here on in denotes new or changed content.)

<body>

</div>

</body>

Please note : Unlike AngularJS, with Vue you cannot assign the reference to the Instance Object on the body tag, you have to create your own container tag to assign it to, as in this case we’re assigning it to a div container.

Great but we’re not actually doing anything yet. Now we want to give our app some life. To do this we’ll give the app a name and display it as a title and we’ll do this as data held on the Instance object rather than write it directly on the template. To do this we’ll need to add another property called data to our instance object. The data property is an object which contains any variables you want to reference in your template or elsewhere in your app. In this case we’ll create a variable called appTitle and assign it a name. The app we’re going to build is an employee tracker that is going to be so indispensable to it’s users that it will be like magic!

We can now use the data binding features of Vue to display our new app title in our page template.

<body>

<h1>{{ appTitle }}</h1>

</div>

</body>

Save and refresh your page in Chrome and you’ll see EmployeeMagic as your app header. The double curly braces are pretty standard in most frameworks these days to denote data-binding (also called interpolation). The content inside the double-curlies is interpreted by Vue and the required content is displayed at that point in the template. In this case Vue recognises that we have a variable called appTitle in data in our Instance Object and replaces it in our template with the value contained in the variable. There are many benefits of data-binding, the main one being that any change in the variable in our instance object is automatically reflected in our template without any additional effort on our part.

So far so good but it’s a little plain-Jane so let’s add the Bootstrap library link for a bit more aesthetic to it without any extra effort. The link used below for then Bootstrap CDN was current at the time of writing however check the Bootstrap website if you have trouble with the link :

<header> <title>EmployeeMagic</title>

</header>

Let’s say however we want to add a margin around the app so it’s not displaying right up against the edge all the time. To do this we’ll need to add some CSS styling however we can take advantage of a cool Vue feature which lets us set our styles programatically.

Let’s add another variable to our data object which is specifically for styles, let’s call it mainStyle. This will be an object so that we can assign as many different CSS style settings as we like. For now we just want to assign a margin of 20 pixels :

Now we need to tell Vue where to use that styling property in our template. We’ll create a new container div tag to wrap around the rest of our app. In that tag we need to tell Vue to assign the styling we’ve defined in mainStyle. To do this we can use a Vue directive called v-bind:style and assign it the name of style object we want to use.

<body>

<h1>{{ appTitle }}</h1>

</div>

</body>

Save and refresh in Chrome and you’ll see the margin has been applied. I personally love this feature of Vue and there are lots more you can do to apply styling which we’ll cover later in the tutorial.

It’s interesting to note that when using directives such as v-bind:style, Vue offers a more shorthand way by dropping the v-bind. If Vue just sees :style it knows what to do, so we could have used ...

... instead. Throughout these tutorials I’ll continue to use the more verbose version to show the full directives consistently however where a new directive is shown, I’ll also highlight the shorthand version. Generally if you see v-bind followed by a colon and the command, you can drop the v-bind although there are exceptions that we’ll cover in a future part of the tutorial.

We’ve so far covered what VueJS and Firebase Cloud Firestore are, why we’re using them as the framework and platform for this app, and the basics of setting up a simple HTML page to build our employee tracker app, setting up our Vue object, basic data-binding and styling using a Vue directive.

In the next 4 parts of this tutorial we’ll focus on each element of CRUD (Create, Read or Retrieve, Update and Delete) so in part 2 we’ll deal with Creating records to store in our Firebase Cloud Firestore.

Hope you can join me in Part 2 :)

You can download the completed code for this part of the tutorial on Github using the repo below and select the part1 folder. https://github.com/MancDev/VueFire

1 note · View note

uwteam · 6 years ago

Text

24 października 2019

◢ #unknownews ◣

Przegląd ciekawych linków z branży IT - w sam raz do porannej kawy. Zapraszam do czytania.

1) Jak działa DNS over HTTPS? Obrazkowe wyjaśnienie (komiks) https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/ INFO: Dość długi tekst, jednak w bardzo przystępny sposób wyjaśniający to zagadnienie.

2) Ciekawa historia człowieka skazanego na dożywocie, który ostatecznie został programistą w jednej z firm z Doliny Krzemowej https://thehustle.co/how-one-man-went-from-a-life-prison-sentence-to-a-100k-engineering-job/ INFO: spędził w więzieniu 22 lata. Warto poczytać o akcji 'The Last Mile' dzięki której nauczył się programować w więzieniu

3) "Mój ulubiony commit na GitHubie" - analiza pewnego commita, który w praktyce poprawia jeden bajt kodu, ale za to robi to profesjonalnie ;) https://fatbusinessman.com/2019/my-favourite-git-commit INFO: omówienie dobrych praktyk zastosowanych w przypadku tego commita. Dobre do nauki pisania efektywnych opisów do commita.

4) Pipeline operator w JavaScript - interesująca koncepcja na ułatwienie sobie pracy. https://vzeman.com/pipeline-operator INFO: obecnie pipeline nie jest jeszcze obsługiwane w JS, ale już teraz można pobawić się tym rozwiązaniem, bo jest ono zaimplementowane jako plugin do Babel. Świetna koncepcja.

5) Interesująca metoda ataku na Alexę i Google Home za pomocą implementacji zewnętrznych umiejętności https://srlabs.de/bites/smart-spies/ INFO: atak polega na tym, że user aktywuje umiejętność X, ale dostaje komunikat (wygenerowany przez twórcę tej umiejętności), że niestety instalacja nie powiodła się. Od tej chwili user myśli, że jest w głównej powłoce asystenta głosowego, a w praktyce siedzi we wnętrzu aplikacji programisty. Od tej chwili wszystko co powie, wysyłane jest na serwery programisty.

6) Ile realnie można zarobić dzięki programowi wsparcia twórców oferowanemu przez przeglądarkę Brave? (case study) https://www.freecodecamp.org/news/the-brave-browser-how-much-money-can-your-website-make-as-a-publisher/ INFO: zarobki serwisu freeCodeCamp z ostatnich 18 miesięcy. Tutaj możesz wesprzeć autora zestawienia: https://brave.com/mru079

7) Lista 13 sztuczek, które mogą Ci się przydać podczas pracy z tablicami w JavaScript https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo INFO: usuwanie duplikatów, podmiana wybranych elementów tablicy, zamiana arraya na obiekt, szybkie wypełnianie tablicy danymi i wiele innych

8) Lista 10 'supermocy', które daje Ci HTML5, a których prawdopodobnie nie używasz lub nie znasz https://dev.to/shadowwarior5/10-superpowers-that-html5-gives-you-and-you-are-not-using-4ph1 INFO: jak zrobić efekt typu 'spoiler'? progressbar bez żadnych dodatkowych bibliotek i grafik? sporo użytecznych efektów natywnie dostępnych w HTML5

9) "Moja droga do zrozumienia animacji CSS w 25 dni" - warto rzucić okiem na przykłady, a konkretnie na ich kod źródłowy https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10 INFO: zobacz koniecznie link z pierwszego komentarza. Znajdziesz tam sporo inspiracji na ciekawe, animowane efekty w CSS

10) Czego nikt nie powiedział Ci odnośnie tworzenia dokumentacji? https://www.divio.com/blog/documentation/ INFO: Wg autora, dokumentacja nie powinna być po prostu losowym dokumentem tekstowym, a powinna zawierać cztery typy treści: tutorial, how-to, wyjaśnienia oraz referencje. W tekście znajdziesz przykłady, jak wygląda każdy z tych typów

11) Jesteś starej daty programistą webowym i uważasz, że stosowanie webcomponents to przesada i totalny overkill przy małych projektach? Spróbuj tego. https://medium.com/@patrickwees/flexible-javascript-components-w-o-the-overhead-b0c5c0dcb42e INFO: autor tekstu też tak myślał, więc stworzył malutką bibliotekę do obsługi komponentów webowych. Może ona zastąpić Reacta, Vue czy Embera w niewielkich projektach

12) Programowanie równoległe (concurrent programming) w Pythonie jest skomplikowane? niekoniecznie! http://pljung.de/posts/easy-concurrency-in-python/ INFO: autor udowadnia, że najprostszą współbieżność można uzyskać już z użyciem trzech linijek kodu, bez przebudowywania reszty aplikacji

13) Programowanie funkcyjne w JavaScript - wyjaśnienie teorii kryjącej się za tym podejściem (są fragmenty kodu) https://www.toptal.com/javascript/functional-programming-javascript INFO: czym są funkcje 'pure' i co je odróżnia od 'impure'? jak takie napisać i które z natywnych funkcji JS są 'pure'?

14) Co to jest plik AASA (Apple-app-site-association)? do czego służy i jakie ciekawe informacje można z niego wyciągnąć http://ghostlulz.com/apple-app-site-association/ INFO: to standard od Apple, służący do łączenia strony WWW z aplikacją. Ustala się w nim, że np. wejście na stronę /abc/ uruchamia na telefonie aplikację XYZ. Znalezienie tego pliku może ujawnić kilka ciekawych (niepublicznych) endpointów w serwisie

15) Soli Chip - miniaturowy 'radar' rozpoznający ludzkie gesty (zarówno ruchy ręką/palcem jak i całe postawy ciała) https://atap.google.com/soli/ INFO: ciekawe rozwiązanie, dostępne już w smartfonie Pixel 4

16) Kilka mało znanych fontów dla edytorów programistycznych https://vfoley.xyz/lesser-known-coding-fonts/ INFO: fonty te poprawiają czytelność kodu

17) Jak za pomocą Bitbucketa wprowadzić Continuous Deployment i wersjonowanie do Wordpressa? https://www.toptal.com/wordpress/bitbucket-wordpress-version-control INFO: rozwiązanie wykorzystuje mechanizm 'Pipeline'.

18) "Nie chcemy tej reklamy, ale musieliśmy ją kupić" - nieuczciwe zagrania Google https://www.seroundtable.com/basecamp-google-ad-28161.html INFO: Google umożliwia teraz reklamowanie się pod cudzą marką. To nic, że jesteś numerem jeden pod swoim keywordsem

19) Jakie są najważniejsze książki w świecie informatyki? - dyskusja https://news.ycombinator.com/item?id=21311302 INFO: w komentarzach padają konkretne tytuły książek

20) Flutter vs React Native - porównanie https://www.codeproject.com/Articles/1280298/A-Comparison-Between-Flutter-And-React-Native INFO: planujesz stworzyć jeden kod źródłowy na iOS i Androida? które rozwiązanie do tego wybrać?

21) Kolekcja użytecznych rozwiązań i usprawnień do pracy w terminalu https://sneak.berlin/20191011/stupid-unix-tricks/ INFO: autor pokazuje wszystko na przykładzie MacOS, ale wystarczy tylko zmienić ścieżkę ~/Library/ np. na ~/.local/ aby to działało wszędzie

22) Obserwatory w JavaScript - co to jest i jak ich poprawnie używać? https://devszczepaniak.pl/o-obserwatorach-w-javascript/ INFO: nie należy tutaj mylić obserwatorów z listenerami (addEventListener). To dwie różne rzeczy.

23) Twarze OpenSource - czyli kto zrewolucjonizował świat technologii jaki znamy http://www.facesofopensource.com INFO: w górnym menu jest podział na kategorie w których dokonali oni rewolucji. Po kliknięciu widoczny jest opis danej osoby.

24) Jeśli nie Macbook Pro, to co? Dyskusja na HackerNews https://news.ycombinator.com/item?id=21302412 INFO: użytkownicy dyskutują, co kupić jako zamiennik za Macbooka Pro.

== LINKI TYLKO DLA PATRONÓW ==

25) Tworzenie bota do Instagrama wykorzystującego sztuczną inteligencję (Tensorflow + Keras + Python) http://uw7.org/un_5db159f5c4fad INFO: bot rozpoznaje, czy na opublikowanej fotce jest burger. W artykule jest link do poprzedniego tekstu, opisującego jak napisać podstawowy kod bota (ten artykuł jedynie dodaje warstwę AI do finalnego kodu)

26) Problemy związane z urządzeniami typu IoT - czyli co złego może jeszcze się stać poza byciem podsłuchiwanym? http://uw7.org/un_5db159fba5c36 INFO: zagrożeń jest sporo, ale ja przeważnie obawiam się tego, że urządzenia te bazują jednak na backendzie utrzymywanym przez firmę X, która może przestać istnieć w dowolnym momencie (upadek firmy lub zamknięcie projektu). Przykład: smartwatche pebble.

27) Lista 42 pytań i odpowiedzi związanych z GITem - czyli jak go poprawnie/efektywnie używać http://uw7.org/un_5db15a062a00e INFO: jeśli pracujesz z tym systemem kontroli wersji na co dzień, to warto rzucić okiem

28) Setki usług i narzędzi dostępnych za darmo dla developerów - długa lista z podziałem na kategorie http://uw7.org/un_5db15a0b67cd1 INFO: część z nich oferuje darmowe pakiety, a niektóre mają 'free tier' z pewnymi limitami do wykorzystania.

== Chcesz aby Twój link pojawił się tutaj? Po prostu mi go zgłoś. To zupełnie NIC nie kosztuje - dodaję jednak tylko to, co mi przypadnie do gustu. https://bit.ly/unDodaj

Chcesz dostawać takie newsy na maila?

https://unknownews.carrd.co

Podoba Ci się moja praca i chcesz za nią podziękować? Zostań patronem:

https://patronite.pl/unknow

0 notes

udemy-gift-coupon-blog · 6 years ago

Link

Master Vuejs from scratch ##FutureLearn ##UdemyFreeDiscountCoupons #Master #Scratch #VueJS Master Vuejs from scratch Are you a javascript / frontend developer looking forward to improve your fields ? Search no more ! Vuejs is the most popular javascript framework in 2018. Yes, it is, and it keeps increasing in popularity and more and more companies keep adapting it. Vue-js is really EASY TO LEARN. In this short 5-hour course, I will take you from beginner to master in vue-js. I will teach you everything you need to be able to build applications with vue-js. After taking this course, you will have and know everything you need to build your own real world vue-js applications. We are going to cover topics like Reactive vue data Displaying data Form data collection Displaying data sets Event handling Components Props Component reusability Asynchronous api calls JWT Authentication Login & Signup Pagination Loading state Error handling Frontend css frameworks integration Vue-cli Application deployment AND SO SO SO MUCH MOOORE !!!!! You'll build real world projects and solutions in this course to be able to build your own projects. Go ahead and enroll into this course and start learning immediately. By this time tomorrow you can complete this course and add vue-js to your skill set. I'LL BE HERE TO SUPPORT YOU EVERY STEP OF THE WAY !!! Who this course is for: Beginner frontend developers looking to add a frontend javascript framework to their portfolios Advanced frontend developers looking to add Vue-js to their portfolios Backend developers willing to start on the frontend 👉 Activate Udemy Coupon 👈 Free Tutorials Udemy Review Real Discount Udemy Free Courses Udemy Coupon Udemy Francais Coupon Udemy gratuit Coursera and Edx ELearningFree Course Free Online Training Udemy Udemy Free Coupons Udemy Free Discount Coupons Udemy Online Course Udemy Online Training 100% FREE Udemy Discount Coupons https://www.couponudemy.com/blog/master-vuejs-from-scratch/

0 notes

mbaljeetsingh · 6 years ago

Text

The Best JavaScript and CSS Libraries for 2018

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That's why every month we share with you our favorite open source resources. Now that the year is coming to an end, its time to look back and highlight our absolute favorite frameworks, libraries and tools of 2018.

Gatsby is a powerful site generator that allows you to build blazing fast dynamic apps and static websites. It is based on a modern stack of technologies, including React, Webpack and GraphQL. The framework focuses on speed, performance, and architectures that are straightforward and easy to deploy.

Flutter is Google's solution for building cross-platform mobile apps. The framework comes with many modern development features like hot reload and a reactive architecture based on widget components. Flutter apps are written in Dart, and can then be compiled to Android and iOS with the respective UI for each platform.

Muuri is a JavaScript library for creating awesome interactive grid layouts. It works by grabbing any number of rectangular tiles and placing them on a responsive grid, ordering them in the most space-economic way. These tiles can then be dragged around, sorted, and filtered, every action causing beautiful animated auto-reordering.

Web Maker is an offline playground for front end experiments. It has a built-in console, offers an easy way to add JS and CSS libraries and supports HTML, CSS and JavaScript preprocessors. It allows you to Import and Export your projects, and you can share your project in CodePen with a single click.

Slate is a powerful framework for building rich text editors that are fully customized to match your needs. This is possible thanks to Slate's plugin based architecture which allows you to freely add or remove features. The project is based on React and Immutable.js, making it easier for everyone to develop their own plugins.

This is a command line toolkit for building and deploying serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more. It allows you to safely deploy, maintain, and automate your services and functions with support for most mainstream languages. The framework is completely extensible and there are hundreds of community-made plugins.

Every project needs good documentation and with Wiki.js it's super easy to build a nice docs app. Wiki is powered by Node.js, Git and Markdown, and comes with a built-in editor which allows you to write your docs in Markdown and automatically sync them with your Git repo.

ContentTools is a powerful JavaScript library that can transform any HTML page into a WYSIWYG editor. There is a full API documentation with detailed examples and step-by-step tutorials that will help you set it up. THe project is completely open-source and offers support for IE 9+, Chrome and Firefox.

VuePress is a simple Vue-powered static site generator. It builds pre-rendered static HTML for each page and then runs the whole website as a single page app, VuePress comes with a default theme that includes responsive layouts, customizable navbar and sidebar, optional homepage and more.

Eva icons is an amazing open source project that houses over 400 icons, covering every symbol your app could ever need. The designs of the icons are great and most have an outline-only and filled versions, as well as built-in animations. The collection comes in a number of formats: SVG, PNG, Sketch, and web font.k

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

#IFTTT #Feedly

0 notes

hackernewsrobot · 7 years ago

Text

Vue.js Tutorial for beginners

http://adrianmejia.com/blog/2018/08/04/Vue-js-Tutorial-for-beginners-Create-a-Todo-App/#.W3NVkKA68SE.hackernews Comments

0 notes

rafi1228 · 5 years ago

Link

Learn Vue JS & Firebase by creating & deploying dynamic web apps (including Authentication).

What you’ll learn

Get in-depth knowledge of Vue JS & Firebase from the ground up

Build & deploy 3 real-world web apps with Vue JS & Firebase

Learn about & implement Firebase authentication into Vue JS web apps

Use other Firebase services such as a Firestore database, Cloud Functions & Hosting

Requirements

A basic understanding of HTML, CSS & JavaScript

ES6 Knowledge is advantageous

An appreciation of AJAX is a plus but not essential

Description

If you’re looking to get started building full-stack applications with Vue JS and Firebase, then look no further. In this course I’ll take you from novice to ninja in Vue JS, starting out with the very basics of VueJS and then moving on towards creating fully-fledged VueJS applications.

We’ll spend a whole chapter learning about the Vue Router – and how to create SPA’s (single page applications) using it – as well as exploring how to use the Vue CLI to get up and running quickly when creating Vue applications.

I’ll also teach you how to use Firebase, an online, free service provided by Google which acts as a very feature-rich, fully-fledged back-end to our applications. We’ll learn how to use Firebase to store and retrieve data to and from a NoSQL database called Firestore, as well as authenticate our app’s users with the Firebase Auth service, We’ll also take a peak at Firebase Cloud Functions (which allow us to run server-side JavaScript code in a Node.js environment), as well as deploying all of our applications to Firebase hosting.

There’s a crazy amount to cover, but by the end of this course you’ll be in a position to create full-stack web applications (complete with user authentication) using Vue JS and Firebase!

I’m also know as The Net Ninja on YouTube

…With around 200,000 subscribers and nearly 1000 free web development tutorials. So feel free to check out my teaching style and reviews before you buy my course :).

This course is built with Vue 2.x, and will be added to with extra sections in the future.

Who this course is for:

Anyone who wants to learn how to create apps with Vue & Firebase

Anyone who wants to learn Vue and Firebase

Anyone who wants to learn about Authentication in Vue apps

Anyone who wants to learn Vue JS from the ground up

Anyone who wants to learn how to use Firebase in their applications

Created by Shaun Pelling Last updated 10/2018 English English [Auto-generated]

Size: 4.73 GB

Download Now

https://ift.tt/2GaTPYb.

The post Build Web Apps with Vue JS 2 & Firebase appeared first on Free Course Lab.

#IFTTT #Blogger

0 notes

softwareengineeringleader · 7 years ago

Link

"Vue Elasticsearch Tutorial With Node.js From Scratch. We use Vue.js as a frontend, Node.js as a backend, and Elasticsearch as a search engine for indexing". Reblog with caption 🙃

#server #node

0 notes

myfreecourses · 7 years ago

Text

Vue.Js For Everyone [Level Up Tutorials]

In this series, we dive into VueJS. I teach you all about the basics of Vue app development where we dive into VueJS fundamentals, VueJS Animations, API calls, Vue Router and much more!

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The…

View On WordPress

#API calls #dive into VueJS. I teach you all about the basics of Vue app development where we dive into VueJS fundamentals #Vue Router #Vue.Js For Everyone #VueJS Animations

0 notes

laravelvuejs · 5 years ago

Text

[ Part 01 VueJs Introduction ] Complete Vue.JS Tutorial Series for beginners in اردو / हिंदी

[ad_1] Hello Friends,

Welcome to Part 01 VueJs Introduction by Perfect Web Solutions, This is a Complete Vue.JS Tutorial Series for Beginners in Urdu and Hindi Language 2018.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on…

View On WordPress

1 note · View note

dorothydelgadillo · 7 years ago

Text

What Is a JavaScript Framework? Here’s Everything You Need to Know

Whether you’re learning to code enroute to a full-time career as a web developer or stockpiling tech skills to jump-start a lucrative side hustle, JavaScript—or JS, a scripting language that creates and controls dynamic web components (things like photo slideshows, animated graphics, and interactive forms)—needs to be high on your list of front-end development skills to learn. Because JS is at the heart of web development, it’s not surprising that it’s also at the forefront of developer jobs—a search on jobs site Indeed for JavaScript jobs returns nearly 40,000 results as of this writing, with Glassdoor reporting average base salaries for JavaScript developers at $72,500. And if you want even better news in the wake of these encouraging stats? Learning JavaScript is as easy as starting with tutorials on sites like Codecademy, then moving on to paid, instructor-led classes like Skillcrush’s Web Developer Blueprint.

However, when you start working with JavaScript you’ll soon see references to things called JavaScript frameworks. Whether these references are in job listings, front-end developer forums, or articles about JavaScript, everyone seems to champion JS frameworks—but what exactly are they? In order to shed light on the issue, we’re providing you with a newbie-proof definition of what a JS framework actually is.

JavaScript Frameworks Are Tools for Making JavaScript Coding Faster and More Efficient

Think of building websites and web apps like building a house—when you set out to build a house, you could create all of your own building materials from scratch and start building without any schematics, but that approach would be incredibly time-consuming and doesn’t make a lot of sense. It’s more likely that you would purchase pre-manufactured building materials (wood, bricks, countertops, etc.) and then assemble them based on a blueprint to fit your specific needs. Coding is very similar. When you set out to code a website, you could code every aspect of that site from scratch, but there are certain common website features that make more sense to apply from a template—if you need a wheel, for instance, it’s a lot more sensible to buy one than it is to reinvent it. And that’s where frameworks come into play.

At their most basic, JS frameworks are collections of JavaScript code libraries (see below) that provide developers with pre-written JS code to use for routine programming features and tasks—literally a framework to build websites or web applications around. If you need a standard JavaScript photo carousel on a webpage, for instance, you can use code from a framework to provide the feature for you (while you spend more time on coding the unique aspects of your site that don’t have an easy, plugin solution). If you’ve heard of the singular JavaScript library jQuery, this might sound familiar, but there’s a small (yet important) distinction when it comes to singular JS libraries versus frameworks.

JS libraries like jQuery are used by plugging library code into the rest of your site’s code when needed. If you want to use a jQuery template for an autocomplete feature, for instance, you would insert the appropriate jQuery code, which then retrieves the feature from the jQuery library and displays it on your user’s web browser. On the other hand, when you use a JS framework the process is more holistic—a framework doesn’t just offer an individual solution to a coding problem, it provides a structure (like a skeleton or a scaffolding) that arranges the parts of your site where the framework is implemented.

In other words, when a front-end developer uses a library like jQuery, the developer is using jQuery code to “call” the jQuery library, which then provides the requested content. But when a developer uses a framework, the framework creates an overall template with areas designated for code from the framework’s libraries (which the framework “calls” on its own). The upside to the framework approach is the overall efficiency and organization that comes with it—your code will be neatly structured, and the framework will provide readymade solutions for common coding problems. On the other hand, all of that structure can be the downside of working with a framework—any JavaScript code you write on top of a JS framework needs to follow rules and conventions specific to the framework, limiting the freedom you have when coding entirely by hand.

But does using a framework mean the framework structure has to be applied your entire site? It depends. While some frameworks are designed to live underneath all of your site or web app’s code, other frameworks—like the increasingly popular Vue (see below)—allow for incremental use. This means you can apply the framework to as much or as little of your website or web app as you want. As more frameworks have adopted this incremental model, JS frameworks have become an increasingly flexible way to provide structure when appropriate, while still giving front-end developers the freedom to hand-code when necessary.

So Which JavaScript Framework Are You Supposed to Use?

One of the confusing things about JS frameworks is that there isn’t one be-all, end-all JS framework to learn and use. At any given time there are a handful of widely-used popular frameworks reflecting the latest JS trends and innovations. We’ve written more extensively elsewhere about picking a JavaScript framework to learn first, but it’s worth taking a look at some of the current players to understand what’s out there and how they can be used.

Website bestofjs.org aggregates the user popularity of different JavaScript frameworks from the coding site GitHub each year, and then publishes their findings. In 2017, the most popular JS frameworks were Vue, React, and Angular—a trio of JS frameworks that give a good overview of the framework skills employers are looking for.

Vue is a framework that was released in 2014, but has become increasingly popular over the last few years. In 2017, Vue’s star ranking (user “likes”) on GitHub reached 40,000 (up from 26,000 in 2016), vaulting into the number one spot ahead of second place React (at 28,000 stars). Vue’s accolades include a gradual learning curve (making it accessible to new JavaScript developers), an HTML-based syntax that allows users to write pages in standard HTML format (instead of requiring the user to learn a framework-specific language), and the option to apply as much or as little of the framework to your project as you want.

React is a JS framework that has been at the top of bestofjs’s popularity charts for years, and as a result React has a large base of industry adoption that’s reflected in developer hiring trends. According to data collected by programming Q&A forum Stack Overflow, jobs targeting developers with React skills grew more than 150 percent on their job boards between 2015 and 2016. Like Vue, React is designed for incremental implementation, so it’s another framework that lets you use it as little or as much as you need, and it also comes with a reputation having a supportive developer community.

Finally, Angular represents the older guard of JS frameworks. Still hanging in at the number three spot on bestofjs’s 2017 list, Angular has been around since 2010. Backed by Google, Angular is still considered an industry standard, with an “Angular jobs” search on Indeed bringing up over 6,000 jobs listings as of this writing. However, despite its history and pedigree, Angular is starting to be outshone by frameworks like Vue and React due to a relative lack of flexibility. Where Vue and React allow for extensibility (using their frameworks with other programming tools), Angular insists on working only with the Angular framework, and also involves the use of a framework-specific language called TypeScript (a JS variant). Despite this more rigid environment, Angular is still a widely-used framework due to its history, and remains the standard for many employers.

The takeaway? JavaScript frameworks are a powerful tool for saving time and structuring your JavaScript code. While the specific framework you use will vary based on project requirements and employer preferences, a solid foundation in the JavaScript language will make it easy for you to pick up framework skills when the need arises.

from Web Developers World https://skillcrush.com/2018/07/23/what-is-a-javascript-framework/

0 notes

t-baba · 5 years ago

Photo

Jest 26, JS one liners, and comparing Ember to React

#487 — May 8, 2020

Unsubscribe : Read on the Web

JavaScript Weekly

Jest 26 Released: The Popular Testing Framework — Jest is a popular testing framework that works with pretty much everything. This release focuses on getting the dependency count and install size down (this causes some breaking changes, unsurprisingly), adds a new fake timer implementation, drops Node 8 support, and initial, experimental ESM support to play with.

Christoph Nakazawa

1LOC: A Collection of One-Line JS Snippets — A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, checking objects, DOM work, etc.) You can submit your own for inclusion too.

Nguyen Huu Phuoc

Hardcore Functional Programming in JavaScript — Brian Lonsdorf teaches you functional programming concepts in JavaScript such as pure functions, currying, composition, functors, monads and more.

Frontend Masters sponsor

Debug Anything: The Basics — A six part series (all ready to read now) on debugging your JavaScript and TypeScript code with the debugger built into Visual Studio Code.

Charles Szilagyi

Comparing Ember Octane and React — This is about as detailed a comparison as you could hope for and a demonstration of just how much Ember contributes to the JavaScript ecosystem. Octane really kicks things up a notch for Ember, too.

Chris Garrett

Deno 1.0 is Due Next Week: Here's What You Need to Know — In 2018 Node's creator Ryan Dahl told us 10 Things I Regret About Node.js and revealed a prototype of Deno, a new V8-based runtime, and here's what you need to know about it. Short of time? This two-minute video sums up the biggest wins quickly.

David Else

Our newest newsletter..

Carrying on from the Deno item above, yes, we've started Deno Weekly, a new newsletter dedicated to the newest runtime in the JavaScript/TypeScript world. Issue 2 goes out just after 1.0 is released next week.

Even if you don't stick with Deno long term, feel free to subscribe then unsubscribe at any time — we won't take offence 😄

Subscribe to Deno Weekly here or enjoy issue 1 here.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📚 Tutorials

How To Build a Vue Survey App Using Firebase — A step-by-step guide to building a functional survey app using Vue.js and Firebase for both authentication and as a database.

David Atanda

A Brief Look at ES2020's Promise.any — When you need to know when at least 1 promise got resolved among an iterable of Promise objects, Promise.any() is the solution.

Marios Fakiolas

ES2020: Everything You Need to Know — An ES2020 roundup!

Martin McKeaveney

Building a Crossword Puzzle Generator — As a NY Times crossword addict, I love a good crossword, but if you’d rather figure out how to make your computer solve them, be my guest 😄 This post guides you on how to approach the problem.

Mitchum

Git Best Practices for SOC 2 Compliance Quick Wins — Get quick wins for your SOC 2 compliance audit, and raise developer productivity at the same time.

Datree.io sponsor

Getting Started with Sapper and Svelte — Sapper is a Svelte-powered framework.

Chris Boakes

A ES2015+ Cheatsheet — A one-page guide to ES2015+ features based around brief example snippets.

Devhints.io

How to Fix ESLint Errors Upon Save in VS Code — A quick-fire tip.

David Walsh

How to Build a Blog with Next 9.3, Netlify, and Markdown — Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform.

Cassidy Williams

A Canvas Engine Comparison: PixiJS vs Two.js vs Paper.js — A benchmark of three popular 2D rendering engines/drawing APIs. Note: This will tax your system.

SlayLines

🎉 BTW, if you like videos, we need to shout out Florin Pop's YouTube channel as he's just passed 20k subscribers by posting neat JavaScript videos and live streams nearly every day for the past six months! 😁 Lots of great stuff on there for JavaScript developers of all skill levels.

🔧 Code & Tools

Selecto.js: Make Elements Selectable Within an Area — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.

Daybrush (Younkue Choi)

Visual Studio Code April 2020 Released — Probably the most widely used editor in the JavaScript space now and April brings some neat new features like being able to work on GitHub issues within the editor.

Microsoft

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Majestic 1.7: A Zero Config GUI for Jest — A tool to help make your JavaScript testing life a little easier. Run npx majestic in the folder of any project that uses Jest to give it a quick try.

Raathi Kugarajan

Pico: Take Browser Screenshots Client-Side with JavaScript — Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

Gripeless

React Flow: A Library for Rendering Interactive Graphs — If you have a need to lay out graphs in a visual way and be able to smoothly pan and zoom around such graphs, this is an interesting new library. Live demo here.

Moritz Klack

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

NeutralinoJS: Build Cross-Platform Apps Using JS, HTML and CSS — Sounds just like Electron, right? Not quite. NeutralinoJS use less memory and are smaller as they don’t ship a full browser inside. 1.4.0 just dropped.

Neutralinojs

Slugify 1.0: Simply Turns Strings into URL/Filename-Friendly 'Slugs' — e.g. ‘I ♥ Dogs’ becomes ‘i-love-dogs’

Sindre Sorhus

RxJS Primitives: A Set of Libraries That Provide Operators for RxJS

Tane Piper

⚡️ Quick releases:

Madge 3.9 — Plot graphs of your module dependencies.

Glider 1.7.2 — Dependency-free carousel alternative.

vue-virtual-scroll-list 2.2 — High performance large list rendering.

Pickr 1.6 — Color picker, now with i18n support.

vue-test-utils 1.0 — Official Vue.js testing utilities.

Espree 7.0 — Esprima-compatible JavaScript parser.

by via JavaScript Weekly https://ift.tt/3bjgDzg

#Javascript Branding #Javascript Weekly

0 notes

javascriptlastnews · 7 years ago

Text

Vue js Tutorial - Data, Computed Properties and Methods #News https://t.co/19cjJ4aVBP pic.twitter.com/iIwmbQQ8R8

— JavaScript Facts (@mentallion) May 18, 2018

#JavaScript #Web Design

0 notes

macronimous · 7 years ago

Text

The Ultimate #Vue.js and @Laravel CRUD Tutorial https://t.co/bnjSRGkNfY

— Macronimous.com (@macronimous) May 2, 2018

from Twitter https://twitter.com/macronimous May 02, 2018 at 10:20PM via IFTTT

#IFTTT #Twitter

0 notes

programmingbiters-blog · 7 years ago

Photo

New Post has been published on http://programmingbiters.com/login-with-linkedin-in-codeigniter/

youtube

Login with LinkedIn feature makes web login system completed. It provides an easy and quick way to sign in to the web application without creating an account on that web application. Using LinkedIn login, the users can log into your website with their LinkedIn account without register in your website. Our earlier tutorial showed you the integration of LinkedIn login in PHP. In this tutorial, we will show you how to integrate LinkedIn login system in CodeIgniter.

Before you get started to implement LinkedIn login in CodeIgniter 3 using OAuth Client Library, create a LinkedIn app in LinkedIn Developer Network panel and get the API Key (Client ID) and API Secret (Client Secret). You should need to set Authorized Redirect URLs that would be the same of user authentication controller URL (http://localhost/codeigniter/user_authentication/). Also, need to specify the Redirect URL, API Key, and API Secret in your script at the time of connecting with LinkedIn API.

Once your LinkedIn app creation is completed, copy the Client ID and Client Secret and put them into the respective variable in the script.

Take a look at the files structure of Login with LinkedIn in CodeIgniter using PHP client library.

Database Table Creation

To store the LinkedIn profile information, you need to create a table into the database. The following SQL creates a users table with some required fields in MySQL database.

CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `oauth_provider` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `oauth_uid` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `first_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `gender` varchar(10) COLLATE utf8_unicode_ci NOT NULL, `locale` varchar(10) COLLATE utf8_unicode_ci NOT NULL, `picture_url` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `profile_url` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Config

autoload.php: The database and session libraries are needed throughout the login process. It will be a good idea to specify these libraries in the autoload.php file.

$autoload['libraries'] = array('session','database');

linkedin.php: LinkedIn API Configuration variables are defined in this file. You need to specify the Client Id (linkedin_api_key), Client Secret (linkedin_api_secret) and redirect URL (linkedin_redirect_url) according to your LinkedIn App credentials.

<?php defined('BASEPATH') OR exit('No direct script access allowed'); /* | ------------------------------------------------------------------- | LinkedIn API Configuration | ------------------------------------------------------------------- | | To get an facebook app details you have to create a Facebook app | at Facebook developers panel (https://developers.facebook.com) | | linkedin_api_key string Your LinkedIn App Client ID. | linkedin_api_secret string Your LinkedIn App Client Secret. | linkedin_redirect_url string URL to redirect back to after login. (do not include base URL) | linkedin_scope array Your required permissions. */ $config['linkedin_api_key'] = 'InsertAppClientId'; $config['linkedin_api_secret'] = 'InsertAppClientSecret'; $config['linkedin_redirect_url'] = 'user_authentication/'; $config['linkedin_scope'] = 'r_basicprofile r_emailaddress';

Controllers (User_authentication.php)

User_Authentication controller contains three functions, __construct(), index(), and logout().

__construct() – The LinkedIn API config file and User model are loaded in this method.

index() – The following functionalities are implemented in this method.

Connect with LinkedIn API using the LinkedIn client library, pass the user profile information to the User model for insert into the database.

Pass the user data to the view and load the profile details view for authenticated user.

Load the login view for the non-authenticated user.

logout() – This method removes the OAuth status and user data from session and logs out the user from their LinkedIn account.

<?php defined('BASEPATH') OR exit('No direct script access allowed'); class User_Authentication extends CI_Controller function __construct() parent::__construct(); // Load linkedin config $this->load->config('linkedin'); //Load user model $this->load->model('user'); public function index() $userData = array(); //Include the linkedin api php libraries include_once APPPATH."libraries/linkedin-oauth-client/http.php"; include_once APPPATH."libraries/linkedin-oauth-client/oauth_client.php"; //Get status and user info from session $oauthStatus = $this->session->userdata('oauth_status'); $sessUserData = $this->session->userdata('userData'); if(isset($oauthStatus) && $oauthStatus == 'verified') //User info from session $userData = $sessUserData; elseif((isset($_REQUEST["oauth_init"]) && $_REQUEST["oauth_init"] == 1) "http://www.codexworld.com/" (isset($_REQUEST['oauth_token']) && isset($_REQUEST['oauth_verifier']))) $client = new oauth_client_class; $client->client_id = $this->config->item('linkedin_api_key'); $client->client_secret = $this->config->item('linkedin_api_secret'); $client->redirect_uri = base_url().$this->config->item('linkedin_redirect_url'); $client->scope = $this->config->item('linkedin_scope'); $client->debug = false; $client->debug_http = true; $application_line = __LINE__; //If authentication returns success if($success = $client->Initialize()) if(($success = $client->Process())) if(strlen($client->authorization_error)) $client->error = $client->authorization_error; $success = false; elseif(strlen($client->access_token)) $success = $client->CallAPI('http://api.linkedin.com/v1/people/~:(id,email-address,first-name,last-name,location,picture-url,public-profile-url,formatted-name)', 'GET', array('format'=>'json'), array('FailOnAccessError'=>true), $userInfo); $success = $client->Finalize($success); if($client->exit) exit; if($success) //Preparing data for database insertion $first_name = !empty($userInfo->firstName)?$userInfo->firstName:"http://www.codexworld.com/"; $last_name = !empty($userInfo->lastName)?$userInfo->lastName:"http://www.codexworld.com/"; $userData = array( 'oauth_provider'=> 'linkedin', 'oauth_uid' => $userInfo->id, 'first_name' => $first_name, 'last_name' => $last_name, 'email' => $userInfo->emailAddress, 'locale' => $userInfo->location->name, 'profile_url' => $userInfo->publicProfileUrl, 'picture_url' => $userInfo->pictureUrl ); //Insert or update user data $userID = $this->user->checkUser($userData); //Store status and user profile info into session $this->session->set_userdata('oauth_status','verified'); $this->session->set_userdata('userData',$userData); //Redirect the user back to the same page redirect('/user_authentication');

else

$data['error_msg'] = 'Some problem occurred, please try again later!'; elseif(isset($_REQUEST["oauth_problem"]) && $_REQUEST["oauth_problem"] <> "http://www.codexworld.com/") $data['error_msg'] = $_GET["oauth_problem"]; else $data['oauthURL'] = base_url().$this->config->item('linkedin_redirect_url').'?oauth_init=1'; $data['userData'] = $userData; // Load login & profile view $this->load->view('user_authentication/index',$data);

public function

logout() //Unset token and user data from session $this->session->unset_userdata('oauth_status'); $this->session->unset_userdata('userData'); //Destroy entire session $this->session->sess_destroy(); // Redirect to login page redirect('/user_authentication');

Libraries

LinkedIn OAuth client library is used to connect with the LinkedIn API and integrate login system with LinkedIn. The linkedin-oauth-client/ directory contains the required PHP client libraries for authentication.

Models (User.php)

The checkUser() method of User model used to insert or update the user profile information into the database.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class User extends CI_Model function __construct() $this->tableName = 'users'; $this->primaryKey = 'id'; public function checkUser($data = array()) $this->db->select($this->primaryKey); $this->db->from($this->tableName); $this->db->where(array('oauth_provider'=>$data['oauth_provider'],'oauth_uid'=>$data['oauth_uid'])); $prevQuery = $this->db->get(); $prevCheck = $prevQuery->num_rows(); if($prevCheck > 0) $prevResult = $prevQuery->row_array(); $data['modified'] = date("Y-m-d H:i:s"); $update = $this->db->update($this->tableName,$data,array('id'=>$prevResult['id'])); $userID = $prevResult['id']; else $data['created'] = date("Y-m-d H:i:s"); $data['modified'] = date("Y-m-d H:i:s"); $insert = $this->db->insert($this->tableName,$data); $userID = $this->db->insert_id();

return

$userID?$userID:FALSE;

Views (user_authentication/index.php)

If the user already logged in with their LinkedIn account, the profile details will be shown, otherwise, Sign in with LinkedIn button will be displayed.

<?php if(!empty($error_msg)) echo '<p class="error">'.$error_msg.'</p>';

if(!empty(

$userData)) ?> <div class="login-form"> <div class="head"> <img src="<?php echo $userData['picture_url']; ?>" alt="http://www.codexworld.com/"/> </div> <div class="content"> <li> <p><?php echo $userData['first_name'].' '.$userData['last_name']; ?></p> </li> <li> <p><?php echo $userData['email']; ?></p> </li> <li> <p><?php echo $userData['locale']; ?></p> </li> <div class="foot"> <a href="<?php echo base_url().'user_authentication/logout'; ?>">Logout</a> <a href="<?php echo $userData['profile_url']; ?>" target="_blank">View Profile</a> <div class="clear"> </div> </div> </div> </div> <?php else echo '<div class="linkedin_btn"><a href="http://www.codexworld.com/".$oauthURL."http://www.codexworld.com/"><img src="http://www.codexworld.com/".base_url().'assets/images/sign-in-with-linkedin.png" /></a></div>'; ?>

Conclusion

That’s enough! Now run the application authentication URL (http://localhost/codeigniter/user_authentication/) on the browser and check the login with LinkedIn in CodeIgniter. All files including LinkedIn OAuth Client Library are included into the Source Code package, download it and place the files into the CodeIgniter application.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

0 notes