ウェブ開発の世界では、常にウェブサイトの反応性である大きな問題に直面しています.毎回、私がウェブサイトを開発しているとき、私は迅速な変化をして、すぐにそれがどのように私の電話に見えるか確認するためにそれを押します.そして、それもリアルタイムで更新されません!今、私たちは単に検査官をオンにすることができますし、モバイル画面モードに切り替えるには、見て、モバイルデバイス上でどのように見えるかもしれませんが、それは正確ですか?私はまだ私は私の電話でリアルタイムで働いて時間を費やした何かをチェックするこの衝動を常に持っている!
Now imagine if it was possible!
あなたが単にコードを書くことができるツール/コードエディタを想像してください、そして、それを展開して、あなたのウェブサイトが開いているすべての装置の上でコードとして、リアルタイムであなたの配備されたコード更新を見てください.あなたのコードにその小さな2行の変更を行った直後に、それがあなたのラップトップを接続せずにリアルタイムであなたの電話で更新を参照してください直後にあなたのコードの出力を表示する方法を簡単に想像してください.想像して任意のデバイス上のコードを編集することができるからあなたのウェブサイトを訪問!
Seem's kinda surreal right?
さて、それはなぜAceJsとFirebasejsの助けを借りて、私は何かを私は必要なものをかなり作成しました.私があなたに上記を想像した何か.今、あなたはどのような地獄はあなたが話しているのですか?よく、あなたは私が本当に話しているもののヒントを得るために、下記のビデオを見る必要があります.
閉じるこの動画はお気に入りから削除されています
Xper - In a nutshell
XPERは、単にHTML/CSS/JSコードを作成することができますし、展開されたウェブサイトを開いているすべてのデバイス上でリアルタイムで実行を参照してください応答反応アプリです.もう一度、私はあなたに適切にXPERが本当に何であるかについて理解するためにYouTubeビデオを見ることを考慮するよう依頼します.
How Xper works?
XPERは、あなたのコードを強調するために、あなたのコードを強調するために、あなたのコードをハイライトするために、私はFireBaseを使っています、現在FireBaseのリアルタイム・データベースで、私はリアルタイムでデータでデータベースを更新することができました.ちょうどコードを書いて、それを保存?私のデバイスだけでも!私はCodepenのような何かを作成したいと思いました、そこで、私はコードを簡単に書くことができて、出力をリアルタイムで見ることができました、そして、一旦私がされたとき、一旦私がFigmaの上で何かを設計したならば、私と同じように、ブラウザーウインドウを閉じてください.JavaScriptの
document.write() 関数とHTML 5の
iframe , 私は簡単にユーザーが変更されたユーザーのコードを毎回実行することができますし、彼/彼女は、ユーザーがリアルタイムで書いたコードの出力を表示します.意味をなす.そして、私はFireBaseのリアルタイムデータベースを使用しているので、私は簡単にユーザーが変更を行ったたびにコードを保存することができます!Firebaseの変更データベースリスナーで、私は簡単にウェブサイトが開いていたユーザーコードを更新することができます.Related Routersを使用すると、ユーザーが自分のコードの展開されたバージョンを見ることができる展開リンクを簡単に提供できます.そして、それは私がXPERを開発した方法です.
Xper is OpenSource!!!
原研
/
XPER
XPERは、リアルタイムでコードを編集することができますし、コードをリアルタイムで保存することができます！すべての変更を行い、変更/更新ブランチでのリクエストを投稿してください。
XPER
Xper is a realtime code editor where you can both write and save your code in realtime! The unique thing about Xper is it updates your deployed code in realtime, which means you can code on your computer and immediately be able to check how it looks like on your phone, tablet, and literally everywhere else. Xper is developed in React, which makes it a lightning fast code editor considering everything is being saved remotely. Check it out in the links given below
Live at: https://xperbycoder.netlify.app
Source Code: https://github.com/Jaagrav/Xper
You can create issues in case you detect a bug, and if you know how to fix it, you can work on it yourself and make a PR, I will accept all the PRs that deserve to be accepted, so now you can also become a contributor for Xper
This project was bootstrapped with Create React App.
利用可能なスクリプト
…
You can contribute your changes and versions easily to my repo by creating a PR or an issue that developers around the world could work on. And oh, check out Xper now!! I bet you'd love to play with it!!!
Learn the technologies used!!
だからあなたが私が使用したすべての技術を学ぶ場合は、単に自分の名前をタップし、もっと知っている
React Material-UI React-Ace Firebase SweetAlert 独自のコードエディタを作成
私が単純なcodepenクローンを作ったこのビデオをチェックしてください
あなたのマシンでそれを実行するには、このrepoをクローン
原研
/
コディーンクローン
ここではどのように簡単にHTML 5とバニラJavaScriptを使用してウェブサイトにコードエディターを追加するAceJsを使用することができます.
Here's the HTML
これをHTMLの一番下にペーストします
<div id="html-editor" style="height: 100%;"></div>
<!--Define a div with an id where you want to write the code-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
Here's the JavaScript
メインJavaScriptファイルにペーストします
let htmlEditor = ace.edit("html-editor");
//html-editor is the id of the div where I want to write the code
htmlEditor.session.setMode("ace/mode/html");
htmlEditor.setTheme("ace/theme/terminal");
htmlEditor.session.setValue(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>`);//Default text you want to show in your code editor
htmlEditor.session.setUseWrapMode(true);
//You can even enable text wrap which is disabled by default
htmlEditor.setOptions({
fontSize: "20pt"
});
一旦これをしたら、あなたはこのように何かを見るようになるでしょう!
かなりクールな右?
ここでチェックアウト
live お使いのデバイスで、また、コードを表示することができます
here ここでどのように見える
Xper ,
Challenges for you!!
自分でリアルタイムコードエディターを作成してください、クールなテキストのテーマを、素晴らしいUIを追加し、あなたが個人的には常にリアルタイムコードエディターにしたい機能を追加してください.また、ローカルストレージ内のコードを保存して、ユーザーが自分のコードにアクセスできるようにします.そして、githubレポを作って、下にそれに言及してください.
最高の提出は私の次の記事で紹介されます!
それまで、あなたの時間のおかげで、これを読んで、はい、私はこの記事では、あなたがそれを好んだ希望について話したすべてのクラップを介して作ったよ!
Check out Xper
Contribute to Xper
Code to add AceJS to your website
Stay tuned to learn how to make your own realtime code editor that can save your code locally on your device!!