CodePen: ჩამონტაჟებული, ტესტირება, გაზიარება და აღმოაჩინეთ HTML, CSS და JavaScript

კოდირება: შექმენით, გამოსცადეთ და აღმოაჩინეთ Front-End კოდი

შინაარსის მართვის სისტემის ერთ-ერთი გამოწვევაა სკრიპტული ინსტრუმენტების ტესტირება და წარმოება. მიუხედავად იმისა, რომ ეს არ არის მოთხოვნა გამომცემელთა უმეტესობისთვის, როგორც ტექნოლოგიური გამოცემა, მე მომწონს დროდადრო სამუშაო სკრიპტების გაზიარება სხვა ხალხის დასახმარებლად. მე გავაზიარე, როგორ გამოიყენოთ JavaScript პაროლის სიძლიერის შესამოწმებლად, როგორ შეამოწმეთ ელ.ფოსტის სინტაქსი რეგულარული გამონათქვამებით (რეგექსი), და ბოლოს დაამატა ეს კალკულატორი ონლაინ მიმოხილვების გაყიდვების გავლენის პროგნოზირებისთვის. იმედი მაქვს, რომ საიტზე ათობით ინსტრუმენტს დავამატებ, მაგრამ WordPress ზუსტად არ უწყობს ხელს ამგვარ გამოქვეყნებას ... ეს არის შინაარსის სისტემა და არა განვითარების სისტემა.

ასე რომ, ჩემი პატარა სკრიპტების მუშაობისთვის სიამოვნებას ვიღებ CodePen. CodePen არის ლამაზად ორგანიზებული ინსტრუმენტი HTML პანელით, CSS პანელით, JavaScript პანელით, კონსოლით და გამოქვეყნებული კოდის საშუალებით. თითოეულ პანელს აქვს ინფორმაცია, როდესაც თქვენ თაგუნას უკეთებთ ელემენტებზე, რომ გაიგოთ რა არის შესაძლებელი, ასევე თქვენი HTML, CSS და JS ფერების კოდირება, რაც დაგეხმარებათ რედაქტირებასა და წერაში უფრო მარტივად.

CodePen არის სოციალური განვითარების გარემო. მის სიღრმეში, ეს საშუალებას გაძლევთ დაწეროთ კოდი ბრაუზერში და აჩვენოთ მისი შედეგები მშენებლობის დროს. სასარგებლო და განმათავისუფლებელი კოდის ონლაინ რედაქტორი ნებისმიერი უნარის შემქმნელთათვის, განსაკუთრებით კი მათთვის, ვინც კოდს ისწავლის. CodePen ძირითადად ფოკუსირებულია წინა ენებზე, როგორიცაა HTML, CSS, JavaScript და წინასწარ დამუშავების სინტაქსები, რომლებიც გადაიქცევა ამ საგნებში.

CodePen– ის შესახებ

CodePen- ის საშუალებით მე შემეძლო შემეძლო ყველა სამუშაოს შესრულება გამოაქვეყნოს კალკულატორი მე ჩავდე საიტზე. CodePen– ზე შექმნილი ნამუშევრების უმეტესობა არის საჯარო და ღია წყარო. ისინი ცოცხალი არსებებია, რომელთანაც ურთიერთობა შეუძლიათ სხვა ადამიანებსა და საზოგადოებას, დაწყებული უბრალო გულიდან დაწყებული, კომენტარის დატოვებით, ფორკირებით და საკუთარი საჭიროებების შეცვლით.

CodePen - ონლაინ მიმოხილვების გაყიდვების გავლენის პროგნოზირების კალკულატორი

CodePen– ით შეგიძლიათ შეცვალოთ თქვენი ხედი, თუ გსურთ, რომ მუშაობისას სარკმლები იყოს მარცხნივ, მარჯვნივ ან ბოლოში… ან HTML- ის ნახვა ახალ ჩანართში. გვერდითი ხედი წარმოუდგენლად კარგად მუშაობს თქვენი რეაგირების პარამეტრების შესამოწმებლად, ვინაიდან შეგიძლიათ დაათვალიეროთ სარკმლის ზომა.

თქვენი თითოეული სამუშაო სკრიპტის ორგანიზება შეგიძლიათ კალმებად, დააკავშიროთ პროექტები (მრავალ ფაილის რედაქტორი) ან თუნდაც შექმნათ კოლექციები. ეს, ძირითადად, მუშაობს პორტფელის საიტის წინა კოდისთვის, სადაც შეგიძლიათ მიყვეთ სხვა ავტორებს, გაუკეთოთ სხვა საჯაროდ გაზიარებული პროექტები თქვენს შესაცვლელად და თუნდაც ისწავლოთ როგორ უნდა გააკეთოთ მხიარული თამაშები გამოწვევების მეშვეობით.

შეგიძლიათ შეინახოთ როგორც GitHub Gist, ექსპორტი zip ფაილში და კიდევ embed კალამი მსგავს სტატიაში:

იხილეთ კალამი
გაყიდვების პროგნოზირებული გავლენა ონლაინ მიმოხილვებზე
by Douglas Karr (@douglaskarr)
on CodePen.


კალამი რედაქტორის ერთ-ერთი შეზღუდვა არის კოდის დიდი მოცულობა. ამ საკითხს შეიძლება ვერასდროს წააწყდეთ, რადგან რედაქტორი კარგად უნდა იყოს ასობით ან თუნდაც ათასობით ხაზის კოდით. მაგრამ როდესაც ისინი დაიწყებენ 5,000 - 10,000 ან მეტი კოდის ხაზების დარტყმას, დაინახავთ, რომ რედაქტორმა დაიწყო მარცხი. ამასთან, შეგიძლიათ დაამატოთ გარე მითითებები სტილის ფურცლებზე ან JavaScript– ზე, სადაც სხვაგან არის განთავსებული!

მე გირჩევთ დარეგისტრირდეთ. თქვენ გამოიწერთ მათ ყოველკვირეულ ელ.ფოსტას და ასევე შეგიძლიათ დაამატოთ არხი თქვენს RSS არხში, ასე რომ თქვენ ნახავთ ახლად გამოქვეყნებულ კალმებს. თუ იქ დაიწყებთ საზოგადოების კალმების ძებნას ან დათვალიერებას, იპოვით რამდენიმე წარმოუდგენელ პროექტს users მომხმარებლები საკმაოდ ნიჭიერები არიან!

გაყოლა Douglas Karr კოდეპენზე

ფასიანი ვერსია, CodePen Pro, გთავაზობთ უამრავ დამატებით ფუნქციებს გაუმჯობესებული ფუნქციონირებისთვის ან გუნდებისთვის - მათ შორის თანამშრომლობა, პროცესები, აქტივების ჰოსტინგი, პირადი ხედები და განლაგებული პროექტებიც კი თქვენს საკუთარ დომენთან ან ქვედომენთან. და, რა თქმა უნდა, CodePen გთავაზობთ შესანიშნავ საცავს Github– ის ინტეგრაციით, სადაც თქვენს მთელ გუნდს შეუძლია მუშაობა. თუ თქვენ უბრალოდ გსურთ შეამოწმოთ რამდენიმე მარტივი კოდი, როგორც მე, CodePen არის ფასდაუდებელი ინსტრუმენტი.

რას ფიქრობთ?

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.