#100% remote doing data annotation | Explore Tumblr posts and blogs

lefthanded-sans · 7 years ago

Note

Heya! You're a linguist, right? Any advice for someone who would love to get into English linguistics with a burning passion, but don't see that as being possible owing to the fact that they're a foreigner/not a native speaker and are afraid they might not get any work because of it other than translation (and I'm guessing the pay isn't that great anyway)? Or just, what's it like being a linguist?

Heyaaaa! Great to chat with you again! Sorry for being so slow responding to you, and I hope this answer helps! <3

I’ll go through all of these questions, because why not? I want to help as much as I can, and I’m always willing to help and talk more. I’ll also be backtracking and talking some basics of what it means to be a linguist, just so that other people who read this can follow along with the discussion.

What it’s like being a linguist!

Unlike what many people might suspect, linguistics isn’t a field about speaking a ton of languages. While many linguists speak more than one tongue fluently, that’s because we love language, not because that’s the heart of our profession. Linguistics is the scientific study of language, and it covers everything from how we anatomically pronounce words, to the physical acoustic properties of language, to how words and sentences are structured, to how we humans socially respond to language, and more. It means there are a ton of subfields in linguistics, and that linguistics can often get interdisciplinary.

My primary subfield all throughout my undergraduate and graduate work was phonetics, which is the study of language at its smallest sound units. I studied the acoustic properties of sounds, how the vocal tract biologically was made up and moved to create these sounds, the acoustic makeup of all the tiny sound units in a language (often represented as letters in languages) - aka phonemes, how the presence of one sound unit can alter how another is pronounced, things like phrasal tone where your voice pitch varies throughout a sentence, and more.

While I love phonetics, the truth is that the high majority of my career work hasn’t been in phonetics. Almost all of my work has been in the semantic-syntactic interface - where the meaning of sentences interacts with how sentences are structured. In a given day of work, I’ll receive hoards of written sentences online from a computer database. My overseers will tell me how they want me to analyze and organize the data, usually through some sort of annotation scheme where I make notes on top of the sentences. I analyze how meaning is embedded through the structure of the sentences according to that annotation scheme, then send the data back to be processed by computers. That’s because most of my work has to do with machine learning. For computers to get better at understanding sentences, we feed data with annotations to them to help them understand how to parse sentences. Then, they can make future better “comprehension” choices on their own with new sentences they receive. This has a variety of applications, including improving online search functions or making virtual assistants like Siri and Amazon Echo understand you better.

There is a somewhat fair though not unending amount of work to be found in this area, if you know where to look.

Now, I’m going to be transparent about the financial situation and work stability situation of my jobs. That way, you can decide whether or not it’s something you want to gamble yourself. And it is a little gamble because I’m not living a full-time, steady, long-term job. Currently, I work as a contract consultant, annotator, and adjudicator. Sometimes clients will hire me to look at their data for one month, three months, or in the luckiest cases, a year. This means I am constantly looking for new work, I don’t have any health, etc. benefits because I’m part-time (this is of course an issue for my country, not internationally), and I often am doing one to four contracts simulntaneously. There’s also something to be said that, even when I’m hired for a position, data comes in SPURTS - sometimes there are weeks where I’m twiddling my thumbs doing nothing, and other weeks where I am overloaded with tight deadlines and have to work around the clock.

In all of my positions, I’m working temporarily with clients in part-time temporary jobs. It’s remote work where I can choose the hours of the day I work, chill in my pajamas at home, all sorts of great stuff. I communicate with my coworkers or superiors almost entirely through email and online chat, with the RARE Skype call or face-to-face meeting.I tend to get my contracts through a company called Appen or by connecting with old peers from my university days (I still work for my university’s cognitive science research department, in fact). I started doing annotations part-time when I was an undergraduate sophomore in 2012 and was paid about $11 an hour. Now, I make about $18-20 per hour for my contract positions. Specifically, I have slowly bargained up my pay from about $12 to $20 in the last year. So I’m getting increasingly paid higher with each new gig. I don’t know how much higher I can increasingly climb, but it’s not bad pay when I get enough hours (and hours is where it’s hardest to win).

Other linguists will have different types of jobs than me. There is a ton of work - and good stable work! - in the computational linguistics field if you’re interesting in programming and working with the computer side of studying language. That’s the safest gamble. Other linguists will contact indigenous people groups to study endangered languages, and spend their days either out in the field recording speech with tape recorders, or studying the language closely in their office. Others will get their TOEFL certificates and teach English to non-native speakers. Lots of different things that might come up. Again, if you know where to look, and if you’re creative enough to know how to apply your degree to different things.

You’re right that translation is one of the areas you see the most job openings for. Depending on all the languages you know, it’ll be easier or harder to break into. I’ve never looked into translation. I doubt I’d get hired, first of all; I live in a an area which has a high percentage of bilingual Spanish speakers, so everyone’s going to hire the people who speak both Spanish and English fluently and natively (as versus me, who grew up in a monolingual household and started to learn Spanish at thirteen years old). Lots of translation jobs even specify that they want you to be a NATIVE speaker of the language you’re translating, which means that someone like me who came from a monolingual household is 100% out of luck. The other reason why I don’t do translation is because, while there are some translation jobs that pay okay, lots of them don’t, and lots of them in my country/state aren’t full-time. I’ve seen a number of translation positions that pay you by the number of words or pages you translate, and the pay isn’t that pretty when you add it up.

That’s not true for all translation jobs, though, especially if you happen to speak high demand but less commonly spoken languages for your region (in my area, something like Arabic or Bangladeshi could get you a pretty penny). ASL (American Sign Language) translator jobs in my country are always nice gigs. And people who speak English as a second language and something else “uncommon” as their first language have a pretty good shot of being hired for something.

But I know translation isn’t what you’re interested in. Which is fair.

Now, as far as breaking into English linguistics as a non-native speaker, you’re right that you’ll probably run into obstacles, but they’re not imposssssssible to get around. Especially if your verbal speech is anything like the writing you do for English, you’re almost certainly FINE. This following discussion is more specifically for the academic community of linguistics, but what I would do whenever I wanted to study a language I didn’t speak… was get an academic partner who did. And in many types of studies you do, depending on your linguistics subfield, you won’t even need to worry about that. Honestly the biggest challenge isn’t whether English is your first language or not, because linguists get their fingers over any language whenever and wherever they can… the biggest challenge is that English has been very thoroughly studied academically in linguistics compared to many other languages. VERY thoroughly studied. Whereas I had an easier time finding unstudied topics in languages like Khmer, I’d be harder pressed to find easy research areas in languages like Mandarin or Spanish. Buuuuuuuuut there are still many, many Unknowns I have come across in English linguistics - for instance, lots and lots and lots that needs to be done in the sociolinguistic arena. Most of my doctorate peers wrote their second year papers on English. Granted, that was a sample size of five people, but nevertheless. There are still things to be said about the language academically, if you know where and how to look.

Whether or not this’ll be a big hindrance to you depends on more choices than “I want to study English linguistics.” It reaaaaaally depends what subfield you want to get into, whether you go into graduate school, whether you want to enter lingusitics academia or something else, and where you live and how accessible/fluent English is to your overall populace. In some fields more than others, you may find barriers. So be careful, but don’t rule out opportunities completely. I’ll point out I’ve seen native speakers of Arabic, Russian, Spanish, Japanese, Polish, and Mandarin professionally study English… so it’s certainly something that’s not uncommon or impossible!

#linguistics #non-UT #long post #blabbing Haddock #ask #ask me #itsrainingsomewhereelse

12 notes · View notes

fursasaida · 4 years ago

Text

to do listing / general whining under the cut, go about your business

DONE SINCE OCTOBER 2ND:

finished a proposal draft, which took a year. i mean that literally. i have been working on this for a year.

crossed the atlantic ocean

set up a whole little temporary life around these archives

attended 6 classes (including the associated reading, assignments, etc; for remote sensing this entailed 100% teaching myself to do a bunch of stuff in ENVI because the assignment instructions are incomprehensible)

taught 2 classes (or 1? i honestly can’t remember)

spent 32.5 hours in the archive

graded 58 homework assignments

co-organized 5 or 6 conference sessions, depending how you count.

this included at least 4-6 strategy phone calls and literally uncountable emails

it also included handholding a grown man academically senior to me through the concept of writing a session abstract

it also means me and my co-organizer have hauled somewhere between 15 and 21 people into this conference with us (depending on whether the last stragglers come through with their registrations). all of whom had to be individually followed up with, questions answered, assurances given, updates broadcast, reminders reminded.

WHINING BREAK:

5 days ago the water in the apartment i’m staying in shut off. things have. deteriorated from there. i’ve at least secured a place to stay i can go to tomorrow that will give me some breathing room in a place i can actually SHOWER and FLUSH THE TOILET NORMALLY but like, between the tail end of the conference stuff, the news that i get more archive hours, and the ramping up of classwork etc, i did. not. need this. at all. i washed my hair in a mixing bowl using bottled water today. the amount of time i have spent:

getting to the shops in time to buy bottled water before they close

estimating how much water i need for what

rationing the water i have

prioritizing uses for rationed water

like the mental tax. the energy spent. THE DEHYDRATION LMAO. the fact that “given the circumstances, i should definitely make sure to poop at UNESCO” is a thought that has now crossed my mind. lord. i still don’t even know where i’ll be staying after sunday but at least i’ll have a better chance of figuring it out.

TO DO:

reading for Race in the Middle East (naturally this is an entire fucking book, again, and probably a chapter or article on top of that)

response for RitME

annotated bibliography for final paper for RitME (i already informed them this isn’t happening so. crossed off the list)

go to RitME actual class

attend “closed seminar” session for RitME on friday (already told them i “probably won’t make it,” aka go fuck yourselves)

teaching prep. naturally i’m having my observation on thursday. of course. (i picked this week for it because i figured i’d be settled in enough after the travel that it would be less stressful. hilarious.)

(i told my mom observation was this week and she just burst out laughing. yes exactly madam.)

teach

3 more archive sessions this week

remote sensing assignment

ideally, work out what data i need for final remote sensing assignment (lol)

meeting with advisor

find new place to live for after this week

buy train ticket for next city. figure out just like. how all that works

finish making a list of what i want to look at in the next archive

fill out form for next archive, scan

send that and list to archivist

bring the fury of god down upon the people in charge of this apartment and get a sizeable chunk of my fucking money back

^this entails figuring out how much time i want to give myself to come back here and move my stuff out slowly/clean up as best i can slowly; how much cleaning i ought to do vs. leave for them because this is not my fault (i can’t! clean! without water!); how many days i want to ask for a refund for; how quickly to involve a higher authority. i tried to think this out tonight and my poor battered brain just broke.

in theory this should all happen by monday.

#sometimes you just gotta make a list to stop frantically flipping through the Tasks in your mind #to do listing

0 notes

loadkk289 · 4 years ago

Text

Skype For Business Web App On Mac Having Network Connectivity Issues

Skype For Business Web App On Mac Having Network Connectivity Issues Using

Skype For Business Web App On Mac Having Network Connectivity Issues Today

Skype For Business Web App On Mac Having Network Connectivity Issues Parks And Rec

Configure Skype for Business connection settings manually. Manually add Skype for Business server settings, and then try signing in again. Ask the user to follow these steps: Select Advanced. Under Authentication, clear the Use Kerberos check box. Under Connection Settings. Having problems with your Skype for Business calls? An Internet connection is the most likely culprit. A poor Internet connection can cause low-quality audio and video, delays, and dropped calls. During a call, the connection indicator is displayed and clicking it provides additional information. Connect with your team anywhere using clients across Windows, Mac, iOS, and Android™, or bring remote participants into meeting spaces of all sizes with Skype for Business. How your phone number or email address is used. Microsoft will use your phone number or email address only for this one-time.

Skype For Business Web App On Mac Having Network Connectivity Issues Using

Best Screen Sharing Software

Easy to Invite Viwers

Fast & Smooth Screen Sharing

Screen Sharing and Annotation

Whiteboard and File Sharing

Presenter Swap

DOWNLOAD FREE

Skype For Business Web App On Mac Having Network Connectivity Issues Today

No matter ezTalks or Skype, I must say that screen sharing is very beneficial for users as they will be able to share their desktop's or tablet's screen concerning displaying of presentation, or whether you want to show your photos without sharing.

3 Screen Sharing Software Recommend:

Skype For Business Web App On Mac Having Network Connectivity Issues Parks And Rec

ezTalks provides free screen sharing services and allows 100 viewers to conduct or join the screen sharing process.

★ Powerful Screen Sharing: - You can share screens, share content on your desktop, share interactive whiteboards for co-annotation and even give or get remote control. - You can share their computer screens withall the viewers or only the selected viewers. - When sharing, you can also do text messaging, record the whole or part mirroring session and save as audio or video files for future playback. - ezTalks will enhance your sharing data protection with 256-bit TLS encryption. - Its HD video and crystal clear voice make the whole screen sharing much more efficient and clear.

Get interested? Free download NOW!

2. Team Viewer

Team Viewer is a Web program that empowers customers to connect with each other's PCs, by methods for web, and control his/her screen. Amass Viewer also gives more segments, for instance, video calling and voice transmission. In addition, this program empowers customers to trade records beginning with one PC then onto the following. Other than that, this program empowers the customer to demonstrate his/her screen to the following customer, and for example reveal how to make a WordPress blog or a Facebook account, or maybe display his/her aptitudes in photo changing.

3. Mikogo

The feature in this screen sharing application is its browser based tool. This tool has been used to conduct online meetings making MIKOGO one of the best screens sharing application. Some of its other features are high quality VOIP service, access to keyboard and mouse by the users, ability to switch screen sharing from one person to another, option to schedule your sessions and also to document your meetings.

Why Not Skype?

Skype is a VoIP advantage, which uses the Internet to empower people to make and get free voice and video conference calls online to no end or for terrible. VoIP has in the midst of the earlier decade shown to the best way to deal with communicators industry gauges to go around the exorbitant PSTN and cell orchestrates and make worldwide calls in vain or shabby. Skype is the application and organization that has made the world consider it. Day by day Skype application is extending its features to attract their customers.

But when I researched about Skype screen sharing, I came to know that many people are facing issue of Skype screen sharing not working properly. The core of problem 'Skype Screen Sharing doesnt work' is different PC's having different versions of Skype. Most of the business professionals has highly recommended Skype screen sharing for their business purposes, but on other end we see the problem of screen sharing not working properly. I have looked for some of the solutions to this problem of screen sharing.

Various Skype customers are also at this situation since they don't know how to solve ordinary Skype sharing screen not working. This is an obvious necessity perused if you are going through a comparable trouble. So with no further ado, I will provide a clear 'Issue/Solution' table that will fill in as your manual for settling these issues. Of course, you can choose the Skype alternatives as well.

Main Solutions to Fix Skype Screen Sharing Not Working:

Solution 1: To begin with thing's first: If you can't interface or utilize a particular Skype include, check for the Skype Heartbeat page. You can get to this page by tapping the Help menu in Skype and choosing Heartbeat (Skype Status), or by simply accessing the URL heartbeat.skype.com in your web program.

Heartbeat page advises you of Skype's framework status– if there are any issues with Skype's foundation, you'll see them here. In the event that there is an issue, sit tight for Skype to fix it and take a stab at associating later.

Solution 2: Guarantee that you are using the Skype's latest version that supports screen sharing. Furthermore, it is in like manner basic that the other party is moreover using the latest Skype, or otherwise it is senseless to have a go at doing it.

Solution 3: Maybe you are not in either a video call or a voice call. Remember that 'screen sharing' catch just winds up recognizably intuitive when you are in a call. If the screen sharing decisions are turned dark out, it just means you're not in a voice or video call. On occasion, Skype screen sharing may truly work without satisfactory hardware, however the result is ordinarily unpleasant playbacks, a reshaped screen and predictable hardening. In case these signs are dependable when you screen-share, notwithstanding all that you'll need to upgrade your gear to improve the experience. If you don't fathom what your framework affiliation speed is, contact your Internet expert center for that information.

Solution 4: Some of the time, the Skype screen sharing issues are in actuality on your contact's end. In the event that you're using a more up and coming type of Skype and your contact is using a more prepared variation that doesn't support screen sharing, it won't work. Since a snappy and compelling framework affiliation is required to screen share, the component won't work if your contact is not using a framework affiliation that meets the base exchange and download transmission limit speeds. Before screen sharing, constantly check with your contact to choose whether he's fit for using the component. In the event that you're using conflicting variations of Skype, ask for that he present the latest shape so you both can value the focal points that went with screen sharing.

Solution 5: On Skype application, you can confer the screen to one individual to no end. In any case, Skype Premium, a paid participation, is required for social event bestowing to no less than two people. Accumulate calling and screen sharing won't work without a predominant participation. If you have to social occasion call and offer your screen with various contacts, consider climbing to one of Skype's various extraordinary enrollment organizes.

Check Out Related Articles

0 notes

uiuxstudioblog · 4 years ago

Text

Usability Testing With Prototypes: Definition, Performance & Tools

Interactive prototypes are the perfect way to run usability tests in the early stages of software development. It is best to avoid last-minute troubles by using prototypes or interactive prototypes to manage usability testing.

The best websites can target new audiences and get a good return on interest. We know that an effective way to evaluate website design based on user experience is to generate functional prototypes.

It is necessary to perform usability testing correctly using prototypes. When UX designers plan to test interactive prototypes, they must use the latest and most advanced methods to get excellent results.

Usability Test With Interactive Prototypes

People want their websites to perform better, but they rely on UI UX designers to provide the best usability and user experience. You need to create a product that showcases the perfect user experience, usability testing, user patterns, and user needs, including a design and development method from scratch.

In most cases, user experience designers will conduct a last-minute usability test of a website or application when it is ready to be released. The prototype provides new possibilities for the final stage of monitoring functions, design, user experience, marketing, and business strategy.

According to IEEE research, approximately 50% of the rework time has been avoided during the early design phase of testing. Introducing prototypes that have undergone usability testing or have been approved by funders can guarantee investment, leading to obscurity.

Let’s Check The Latest Trends In UI Design

Running Usability Tests

There are multiple opinions about running usability tests because some people prefer to use prototypes for first-pass tests or use high-fidelity prototypes. In high-fidelity prototypes, usually end with interaction, animation, and testing of device functions.

Many designers prefer multiple rounds of prototype fidelity testing. When our UI UX design agency conducts usability testing on prototypes in the wireframe phase, we ensure that testers focus on practical information, architecture, and navigation processes. In order to retest, high-fidelity prototypes need to be emphasized.

Perform Usability Testing With Prototypes

When we consider questions that could help define usability tests and better interpret the results. We are going to discuss usability testing on high-fidelity prototypes. We use these factors:

Sample users

Interactive prototype

A facilitator

Observers

Sample users

Here, UX designers localize user roles with the help of user testing tools. The most important factor is the size of your sample test or a test on a large sample. If you use a large sample, it is easier to find more problems.

According to Nielsen, reliable results come from testing only 5 users and running as many small tests as you can. Most importantly, tests without users will not provide information, but tests with a single user will improve results.

Each additional test has more repeated observations and reduced original results. It is beneficial to divide it into several groups instead of one large group throughout the design process.

Sometimes it is beneficial to bring together some "novice users" or people who do not use your application or software and find that your product is beyond their observation range.

These people will give you more information about your core market. The method we use to contact testers is effective in testing. They calculate tasks on their own and use neutral language when performing tasks. The detailed description helps to understand if the user may be working on the interface.

Interactive prototype

It depends on the type of testing you use and the product you use or develop. There is also a need for a prototyping tool for impact, and various out-of-the-box features are being used.

The simulation button allows us to immediately manipulate the prototype in the browser, which helps to perform the test remotely or in person.

Realistic communication, proofing skills, and datasheet copying are also necessary. If you want user testing or running regular usability tests, you need a prototype tool organized along with the user testing tool.

A facilitator

Designers need to know enough about users and their habits to know when to delve into the problem during testing. Manage people who have different views on the experience.

Observers

The team of designers can easily perform usability tests to find out user responses without intervention.

Usability Testing with Prototyping Tool

There are various techniques to go about usability testing, still, some rules are in common:

Genuine Content

Whether users are smart enough to try or not depends on the content to determine the product. You can choose a 100% content-based design, or have little or no meaning to the final product. In high-fidelity prototype testing, you need to add reasonable content to images or text.

Sensible Data

We know that unrealistic data helps with minimal disruption and hassle. If you use a generic email address with more accurate results.

Design Test Perfectly

You need to test the main functions of the product, the login method, the growth funnel, and more factors. Your words, responsibilities, or questions are very helpful to get useful results.

Need to make informed decisions between direct tasks and scenario tasks, between closed or open tasks. Your closed mission may have a successful result, but the open mission provides various results and is still considered a successful feature.

users always have questions about what they like to do or do. When prototypes are used to analyze usability tests, a broker is needed to solve these problems. You need to make sure that they don't waste money or time.

Usability Tests For High Fidelity Prototypes

Searching Difficulty

The search difficulty test helps diagnose problems in the iterative design process for the best results. When we run the discovery test, the designer will monitor the problem and record and verify the behaviour and speech of the employees. The coordinator has the skills to interpret the result with sensitivity.

Eye-tracking

Use tools like Crazy Egg to easily track user activity and understand where the user is clicking or viewing. UX designers have a great understanding of the psychology behind the browsing process, which also helps to understand crashes and other transition difficulties.

Competitive

Competitive usability testing involves two member associations using competing applications or websites to perform the same task. A research sample larger than Nielsen Magic Five is required to generate meaningful data. We also use supported prototyping tools for remote competitive testing.

Typical Mistakes In Testing High Fidelity Prototypes

Interfere

When the members of the test dispute and try to complete the task, it is a family problem. The charm of the developer or observer is to complete the test or intervention. When they see employees competing with prototypes to deal with built-in problems, they will ask users why they have to work hard.

Catching Bugs

It is never a good idea to adjust the problem without figuring out all the evidence. Semi-formed print-based activities run counter to aggressive usability testing methods.

A reliable method is to use the prototype analysis stage to annotate and evaluate as many questions as possible without intervention. It helps to be in a better position.

There is no miracle in getting software, applications, or sites that run smoothly. The best way to use prototype usability testing reduces coding rework and goes a long way in providing relevant and appropriate usability testing.

Our Approach For Usability Testing prototypes

UIUX Studio always believes in using the best usability testing method to complete the project. Helps complete project with minimal flaws.

Our UI UX designers are experts in multi-stage prototype usability testing to verify their issues, so our clients face fewer problems and easily attract more clients.

We use these steps in testing:

Specifically, know what we're testing

Design the prototype

Engage with the right audience

Prefer the best usability testing method

Provide a clear aim to public

Select the right questions to ask users

Our experts know that sites or apps with minimum issues are best to get more organic traffic. It also helps to get more valuable feedback from clients and customers.

#usabilitytesting #prototyping #uiux #uidesign #uiuxdesignagency

0 notes

howtowriteamovietitle665 · 5 years ago

Video

youtube

paper writers

About me

Accessing Our Services

Accessing Our Services If you haven’t written white papers, you must study them as a result of they’re the most popular sales software in copywriting right now, and they pay very well. We’ve hand-chosen solely the best writers to take your copy from uninteresting to ingenious. Our experienced writers have labored with some of the biggest and smallest names in the enterprise, from authors and artists to public audio system and company leaders. From eye-catching tag strains to lengthy novels—any project, any size, any time. Do you have a floor breaking thought for a novel, but lack the coaching or time to fantastic-tune it? Sure; the worth is nice and all, but what high quality do you get for it? They solely work on matters from their area of research. Our writers focus on a spread of categories, offering tailored content in your trade. You can easily purchase content online utilizing Compose.ly’s platform—what’s more, it provides the entire instruments needed to organize your content material initiatives and collaborate along with your teammates. Project dashboards, in-app messaging along with your writer, content annotation and redlining, and image inclusion are just some of the options included with the Compose.ly platform. You’ll always find a consultant to reply your questions and help you during any stage of your order. Our customers also use a simple monitoring system that offers them insights in the status of their order. Plus, you possibly can contact your writer immediately by way of the special messaging system. If you don’t know the way to write, working with a professional writer actually helps. When you don’t understand a math drawback and someone solves it for you, you can determine it out by wanting on the steps towards the answer. The writer will ship one hundred% unique content material by your deadline. The paper will be crafted in accordance with the main points you provided within the order kind. So will probably be perfectly suitable on your professor to grade it. Our creative writers will work with you to evolve your thought into the bestseller it was meant to be. Our medical writers are completed professionals who will deliver correct, sophisticated copy – in no matter subject material or specialty experience you require. We will match your requirements with a medical author with the specific expertise you need to accomplish your objectives — at your location or remotely. WAI provides medical writers well-versed in the clinical, regulatory, healthcare, or advertising realms. These medical communications professionals have a distinctive background and experience in pharmacology, biotechnology, medical gadgets, and extra. You’re the one who units the urgency, desired high quality, quotation type, number of pages, and every little thing else relating to the paper. You can ask the writer to current a specific argument and they'll do this. They do all the work, but nobody is aware of who did it. In reality, your teachers received’t even suspect you hired someone to put in writing the essay for you. It might be written in accordance to their directions and it will be 100% plagiarism-free. You’re studying from somebody who is aware of the craft and might present you a number of methods on how to complete papers sooner and more effectively. You’ll get a customized crafted piece, which is strictly what your professor desires to see from a successful student. The author assigned to your project will intently look at the instructions and develop content material that meets the requirements. The ones who're good depend on essay companies, so they can easily remedy the problem and proceed with their life. An experienced professional who is playful with the selection of words and energetic to get your sociology and nursing essays done in the given timeframe. Certified skilled and a computer geek with immense knowledge of trending know-how and possesses efficient abilities in writing artistic essays. Or take a ballot on crucial factor to say on a business Web web site, and give the winner a free session. Entrants will, of course, should submit their contact data, supplying you with an instant listing of companies that want copywriters. This one doesn’t just get you prospects and an excellent before-and-after pattern, you could tell the local papers and get written up, too. Create a white paper concerning the value of your copywriting service, demonstrating the advantages to companies that use you. Much just like the unsolicited mail technique, this one’s particularly great if you want to write white papers for firms. Whether it’s a legal, technical, or web content writer that you simply need, our writers can produce authoritative and fascinating content material for practically any business or subject. Using our 10+ years of content material advertising expertise, we designed a powerful software program platform that ensures all content material you obtain is plagiarism-free and web optimization-pleasant. You can manage your whole content material wants and talk with writers via our platform. Hold a contest for the worst enterprise Web website and give the winner free house-page content, or write their bio page, or no matter you wish to provide.

0 notes

nlprocby · 8 years ago

Text

Ekaterina Kruchinina: NLP is on the road

Hi Katja, let me ask about your professional experience: how did you find your interest in computational linguistics and developed through it?

Hi, I started my university studies in Rostov-on-Don, Russia. My subject was German language and literature, with emphasis on literature and translation studies. I studied for 2 years and then continued my studies at the University of Cologne in Germany. I started there from the first year, as in Germany similar program starts two years later than in Russia. Additionally, I took another topic of interest, French, as I was keen to learn it. But after a couple of years, I realized I had high interest in linguistics, especially after taking courses in modern linguistics and formal syntax in university. But honestly, I was not aware of computational linguistics at that point. One day I found that there is a study subject ‘Linguistic data processing’ at the University of Cologne and I joined the class after a talk with a professor. After a couple of years I started to work at the department, and of course, it was a good time to learn programming, which I really enjoyed. At that point, I realized much more about computer science. We studied Java as a first language, though many in the field start now with Python. I remember we programmed a search engine over a summer.

It reminds me a talk to Natalia Karlova-Burbonus. Natalia has a very similar story: going from interest to the German language to Computational Linguistics in Germany.

My next question whether you remember your first project or last at that time.

Yes, my first job was related to exploring self-organizing maps (so-called Kohonen nets). I don’t remember all project details, but we worked on syntactic dependency structures and tried to represent it in Kohonen maps for the German language. After we tried different IE approaches, text classification and run other experiments. That was a great time for learning. I had done an internship during my studies as well. It was in Paris, at a software company called Arisem, so I could also practice my French. It was the B2B company which focused on semantic search, dedicated one, including crawling. Then I came back to finish my master thesis.

What was master thesis topic about?

It was about the numerical representation of text corpora including how can we represent corpora for classification. I tried LSA that time also, but the topic was like a meta-analysis of different approaches.

Then Ph.D. happened to you.

Yes, at some point after I decided to stay in academia, to do a Ph.D. I went to Jena university, a big move from Cologne. But it was not only a Ph.D. position but a research assistant position in a European project BootStrep. The focus was on biomedical text processing: text mining in biology, semantic search over the publication of medicine/bio published research. There is a huge database PubMed which has millions of citations and which continue to grow quickly. And, obviously, a problem for a biologist is to find relevant information in such an enormous amount of data. So, preprocessing of data, named entity recognition (NER), normalization of extracted entities and relation extraction, are of particular interest here. My personal focus was on relation extraction, e.g. how a researcher describes gene expression processes.

Did you have medicine ontology for named entities?

We had a couple of Ph.D. students, which helped to develop the ontology in our group, of course using terminology from established sources. It reminds also what else was great about the project group: everybody had a specific skill-set and the tasks were assigned well and according to a person focus: somebody worked on NER and fast annotation using active learning, someone - preprocessing, another person cared about the ontology, search engines. I focused on detection of events and relations. It was a great experience to have such a skilled team.

Do you remember a day when you realized that you need to leave the project?

I continued working on the project during my Ph.D. I started later and the main result I would say was my participation in BioNLP 2009 shared task, where I got a second place once evaluated. After that, I elaborated on my topic. On 2012 I’ve completed my Ph.D. and started to look for a new challenge. I could have stayed in the Biomedical domain, but I was open to other topics also as I studied a lot while reading about different topics, including dependency parsing, collecting data in general. Then I found an open position at Nuance, there were not many at that moment in Germany. So, I became one of the first joining the NLU (Natural Language Understanding) team and moved to Aachen, which I also like as it’s close to Cologne.

How many people in Nuance NLU team now?

There are about 60 people in Automotive cloud NLU, which includes Aachen, Montreal, and Burlington offices and people working remotely. Company-wide there are more NLU people (100+).

NLU is a challenge by the name. So, tell us, what do you do and how do you overcome the challenges?

First, our main application area is an automotive domain. Our team works at the moment on a classification of user intents and named entity recognition. So, you have one-two step dialog, one-shot query, which requires a classification of the intent. I’d say that it’s now for the navigation system, office system in the car.

Well, actually from my experience I remember around a year ago participating in a hackathon organized by Nuance NLU system. And if I recall correctly, for NLU system you need to provide not only intents but also labels, concepts to train it, am I right?

Yes, you also need to provide concepts which need to be detected.

Would be nice if you can share an example of a use-case.

Ok, the simple example is a question about the weather: “What will be the weather tomorrow in Trento?” So, we need to recognize the intent: weather, the date: tomorrow, the location: Trento. Another example, you can: would it be sunny tomorrow in Trento? So, we do have multiple steps, relying on statistical models and many features, like named entities, and lexical information (keywords sun, weather, etc). Both are possible: you can do intent classification first and then named entities or the other way around.

As I remember from the mentioned hackathon, you have two interfaces: speech and text.

You are right, but it’s another project, it’s Nuance MIX you mean, our project. In our solution, we provide an ability to type, use speech interface and handwriting.

You haven’t told us a lot of internal details yet ;) Ok, what languages do you support?

We support over 20 languages for Automotive cloud NLU, additionally to major European languages we have Czech, Swedish, Turkish, for Asia - Japanese, Cantonese, Mandarin, and others.

It leads me to the question: do you reuse models available or develop all yourself?

We develop all internally. For example, we have developers graduated from the Charles University in Prague, who work on Czech support.

That’s an interesting story about computational linguistics in Czech, though I wouldn’t call it as widely spoken as others in Europe, Charles University has two or three groups which develop universal dependencies for the language, though some more representative languages have none.

Alright, what do you work on currently?

It’s mostly improving accuracy for automotive-related projects (for features like navigation, weather search, and more), which includes adding of data. Also embedding extensions, and for that case, the main challenge is the proper evaluation, which helps to avoid a degradation in quality. We worked on a hybrid solution: embedded NLU and cloud NLU. As we have some overlap, we need to split the responsibilities in a clear way. We need to work on confidence for prediction. We are facing AI as well, I mean complex request, e.g. a user could ask: find me a good restaurant and a parking slot around. So, a combination of intents brings an interesting challenge.

So, let’s come back quickly to language sources: do you plan to release the language resources to the language developers community.

I have no insight regarding this from the business.

It is a company which was bought by Microsoft, Maluuba, which developed an evaluation dataset, NewsQA. So, releasing an evaluation dataset can be a good step from Nuance. Thank you for the talk and I wish you good luck with a challenge of multiple intents.

Thanks, I was happy to share the knowledge and what we do.

Image 1 is published with an agreement of K. Kruchinina

Author: @yauhen_info for @nlprocby

#nuance #nlp #cologne #computational linguistics #microsoft #maluuba #nlu

5 notes · View notes

madebyvasilis · 5 years ago

Text

PDF Element - Why it is from the best softwares ?

Have you ever think that you need to sign a document on your way but you can’t do that as it is in online form ?

Well, in our days and especially during COVID 19 pandemic our needs have changed a lot. A great percentage of earth population was obliged to work remotely, the schools are working remotely, our friends became the favorite contacts on messenger and so on. The internet became our best partner on this difficult journey where the same is true for our actions.

In fact, thanks to hundreds of different apps, our life was a little bit easier even if our days were from the hardest ones. Here comes PDF element from Wondershare, an amazing 😉 tool - and I mean it - that helps a lot to stay organized and up to date with the new technologies directly in your life without being frustrated.

PDF element is from the best ways to create, edit, sign and annotate PDF files. Its use is simple, that makes it one of the best softwares on the market energy if we talk about an individual - an everyday person like me, a small company, or a great enterprise. Let me explain a little bit further:

Everybody once had to sign a document and send it directly to the bank or insurance company. The procedure that we were following was that one: print the file > sign and insert the required files > put it back on scanner > send it.

While this process is good as today instead of uses scanners, we are using our phone’s cameras, we can totally avoid this whole mess in order to stay organized and protect the environment. Think about about! What if we had to do the same process for 100 sheets of paper ? Not good, isn’t it ?

So if you have the documents that you need to edit on an online format, PDF element can handle the job. It offers different types of prebuilt elements to insert in your PDF, sign the document using your fingers and you are ready to go! Even if you are a student and you need to annotate presentations and PDFs, PDF element could help with this task too. Not to mention that offers a collaboration system from which you can comment on a specific field in your PDF file so the other colleagues/friends can see your comments and take action immediately. For those that haven’t the papers on a digital from, don’t worry! PDF element can help you to capture a picture of them and to convert them into a PDF file.

As for businesses, with PDF element you can easily collect data from online forms and download them directly in a spreadsheet. It is 100% safe for a user to submit sensitive data on these forms as PDF element uses end to end encryption. Control documents to help secure sensitive information from unintended access and use in a blink of an eye. To sum up, here are the main features of PDF element, according to its website:

PDF element comes in 3 plans and is available for Macs, Windows and both iOS and Android devices. With a wondershare account you can take some limited pro features on mobile but we strongly recommend to take a look on their paid plans that offer much more. There is PDF element standard license that is suitable for personal use and PDF element pro plan - an all in one PDFs solution for professionals and growing teams. You can try these two plans for free to try out if they stand for your needs. There is also PDF element Business plan for more demanding needs on an enterprise level. Last but not least, wondershare offer different pricing plans for individuals, teams and for education purposes so just check out the pricing plans here. Remember, you are free to download the trial and free version for mobile from here.

0 notes

workfromhomeyoutuber · 5 years ago

Text

Cro Metrics: Optimization Program Manager

Headquarters: Remote URL: https://crometrics.com/program-manager-application/

The Optimization Program Manager is responsible for working with our Product Managers and Optimization Strategists to execute successful web experimentation and personalization for a diverse group of clients.

The Program Manager is a natural leader. S/he keeps external and internal stakeholders informed through our engagements, helps shepherd A/B/n tests from concept through launch, responds to client requests and keeps team members accountable for follow-ups and action items. Program Managers enable our Product Managers to focus on building client strategies, data and results analysis, insights/iteration and ideation.

The ideal candidate will have professional services (agency) experience, is highly detail-oriented, and has at least a fundamental understanding of A/B testing and data-driven decision making. Experience with UX/UI and web analytics is a plus. Direct responsibilities include:

Managing status agendas, scheduling, taking meeting notes and distilling them down into reference and action items

Writing A/B test specifications, creating mockups (annotated screenshots, simple designs)

Updating clients on test status, seeking approvals

Working with engineering and QA teams to move tests through implementation along with live test QA and monitoring

Assistance with organizing and building client presentations

Account management: fielding and routing client questions and issues, disseminating action items

Successful candidates in this role demonstrate:

An eye for detail and organization. Minor grammatical errors will jump out at you like a sore thumb. Undocumented resources frustrate you. Inbox zero is life. Note that this is not an ability but a strong personal drive to stay organized at all times.

Comfort communicating and listening diplomatically. Successful Program Managers listen thoughtfully and address the root problem while holding others accountable.

Ability to juggle multiple initiatives at once. Individual tasks in most engagements are generally not insurmountable, however there may be many distinct tasks moving at once – keeping them organized and done is paramount.

Experience and comfort working with teams and people of all shapes and sizes. Every client team will come with their own culture, quirks, and individual likes and desires. Successful Program Managers are able to assimilate into teams as if they are one of their own as opposed to an outside consultant.

What crushing it in this role looks like:

Every meeting is productive, clients are always informed, and no client ever needs to ask “Hey did you do the thing you said you were going to do?”

Working in tandem with Product Managers/Strategists to drive successful outcomes for our clients. You feel a huge sense of accomplishment knowing you’re part of a team that’s helping deliver a positive business impact to each of our engagements. Client success translates to team success which translates to your success.

Embracing data-driven decision making and letting that guide everything you do.

If you have questions as you go through this, make notes and if we haven’t answered them by the end, feel free to email [email protected].

Benefits

Matching 401k on the first 4% of income subject to a 3 month waiting period.

100% remote, continue to work from where you are based. (However, this doesn’t mean ultimate freedom, this is a full-time job where you get to work from where you live.)

Liberal vacation policy.

All the professional gear you need to be successful (e.g. MacBook, monitor, and noise-canceling blackwire headset)

Our Culture Please read about our culture and our main jobs page.

A unique hiring process – we pay you to interview

We’ve found that the best candidates shine most when they are able to participate directly with the team and show their skills in action. This does require some work from you, so we’ll pay you to join the team during a “paid interview”.

Assuming your submission exceeds expectations, we will reach out to schedule a few informal conversations with our team to learn more about you, and provide an opportunity for you to ask questions of us. If all goes well for both you and Cro Metrics, we will hire you for a paid interview where you start working with us for approximately two weeks (12-15 hours max) as a 1099 contractor. This can be done on the side of your current full-time job so there is less risk to you.

If both parties like working together, we expand the relationship into a full time W2 role. If not, we go our separate ways and both sides “won” in the deal.

To apply: https://crometrics.com/program-manager-application/

from We Work Remotely: Remote jobs in design, programming, marketing and more https://ift.tt/2sBQX0K from Work From Home YouTuber Job Board Blog https://ift.tt/39F8Qfu

#WorkFromHome #OnlineJobs #RemoteJobs #Entrepreneur #WorkFromHomeJobs #WorkAtHomeJobs #Self Em

0 notes

ellymackay · 5 years ago

Text

How Machine Learning Could Transform the Way We Diagnose Narcolepsy

How Machine Learning Could Transform the Way We Diagnose Narcolepsy See more on: www.ellymackay.com

Researchers at Virtual SLEEP 2020 explained machine learning’s potential in sleep medicine.

By Lisa Spear

Even under the care of a sleep medicine clinician, narcolepsy patients may have a long wait before receiving a correct diagnosis. Researchers think that machine learning and the use of neural network analysis could speed up the diagnostic process, and pave the way for more precise care.

“Within the next few years, sleep scoring by technician will be replaced by automatic deep learning networks that will automatically annotate the sleep study and the task of the technician or doctor will only be to verify the event,” sleep scientist Emmanuel Mignot, MD, director of the Stanford Center for Narcolepsy, said during a presentation.

During Virtual SLEEP 2020, Mignot and a panel of other experts spoke about the future of artificial intelligence and machine learning in sleep medicine.

The panel discussed how these tools could potentially improve treatment for countless patients, lead to the use of phenotyping for diagnosing obstructive sleep apnea, and speed up the diagnostic process for those who experience narcolepsy with cataplexy, also known as type 1 narcolepsy.

By using statistical methods to find features unique to narcolepsy type 1, including a short REM latency period, researchers can build machine learning systems to help diagnose the disorder, Mignot explained. In the future, he said, all narcolepsy type 1 cases will be able to be detected remotely, from the patient’s home, over the course of a few days.

“We believe that this will be applied soon, where you will be able to wear a simplified device that you will wear at home for an entire weekend. Then, maybe you will have a blood test, combined with a deep learning algorithm, and that will get a beautiful diagnosis for narcolepsy.”

[RELATED: Linking Narcolepsy to the Flu? Researchers Make Progress Identifying Molecular Mimicry]

During his presentation, Mignot spoke about how he and his Stanford team have been working on creating machine learning systems to pinpoint narcolepsy type 1 cases. According to work presented during SLEEP, his team has demonstrated that using deep learning with polysomnography (PSG) could help clinicians bypass the multiple sleep latency test (MSLT), while producing an accurate diagnosis.

The team created a score for a sample of PSG recordings to reflect how close the recordings are to narcolepsy type 1 patterns. “The model generalized remarkably and had a high predictability for diagnosing narcolepsy,” said Mignot, professor of psychiatry and behavioral science at Stanford University.

Machine learning, the researchers said, can analyze large swaths of data without human bias. By applying machine learning and analyzing the data further during nocturnal PSG in narcolepsy type 1, clinicians could raise the specificity of detecting different sleep stages and transitions, Mignot said.

Another advantage is the ability of machine learning to score very brief periods of time. Instead of the 30-second epoch, which is typically scored by a human technician, machine learning can score up to a 5-second window, said Mignot, who is leading a sleep analytics project called the Stanford Technology Analytics and Genomics of Sleep (STAGES).

“Similarly, also you can compare the performance of the machine learning network to each technician. What you can show, in fact, is that the machine learning routine is closer to the consensus of all technicians than any single technician. In summary, machine learning is doing better than any single technician at recognizing all the sleep stages,” Mignot explained. “It has a superior performance.”

[RELATED: How Does Cataplexy Change Over Time?]

While it is known that narcolepsy with cataplexy is caused by a hypocretin deficiency, measuring hypocretin requires a lumbar puncture, an invasive procedure that is unpleasant for patients and not commonly used as a sleep medicine diagnostic tool.

Typically, diagnosis instead involves an overnight stay for an in-lab p PSG, followed by a daytime MSLT. The MSLT measures excessive daytime sleepiness by asking patients to nap 4 to 5 times for 20 minutes every 2 hours during the day. During these naps, sleep latency and the presence of REM sleep are observed.

Unfortunately, the MSLT can produce both false positive and false negative results, says Mignot.

“The fact that the MSLT is not a perfect test for narcolepsy, and the fact that it takes quite awhile for the MSLT, PSG to be conducted, during the night and then during the day, led us to believe that there might be a better way to analyze the data of a patient with narcolepsy and maybe diagnose narcolepsy with only one night of sleep using machine learning,” Mignot said.

Another flaw in the current diagnostic process for detecting narcolepsy type 1 is using the observation of cataplexy as diagnostic criteria.

“The problem with cataplexy is that it is subjective, so it cannot be 100% certain as a predictor,” Mignot said.

Cataplexy is also not present in all cases of hypocretin deficiency, said Nathaniel Watson, MD, MSc, director of the Harborview Sleep Clinic and co-director of the University of Washington Medicine Sleep Center in Seattle, during the Virtual SLEEP 2020 session.

Watson explained that machine learning systems “could save time and increase the probability of diagnosing patients in sleep clinics.”

Lisa Spear is associate editor of Sleep Review.

from Sleep Review https://www.sleepreviewmag.com/sleep-disorders/hypersomnias/narcolepsy/machine-learning-diagnose-narcolepsy/

from Elly Mackay - Feed https://www.ellymackay.com/2020/09/14/how-machine-learning-could-transform-the-way-we-diagnose-narcolepsy/

0 notes

mybreadlover · 5 years ago

Text

How modern collaboration tools enhance patient outcomes across healthcare?

Over the past year, I’ve spent countless hours talking with clinicians about the challenges they face in delivering safe, high-quality, compassionate care for patients. One of the things I hear from them repeatedly is how they’re hindered by fractured systems and tools.

Clinicians need a modern workplace that empowers them to easily communicate and collaborate across the care team. This solution should streamline the handoff of information, helping to improve patient outcomes, saving time and money. To work for them, it needs to do all of this on a secure, trusted foundation that helps enable their compliance.

That’s why I’m so passionate about the work we’re doing with Office.com/setup Teams to empower those in healthcare to connect with the people and information they need. The team is a digital workspace that centralizes chats, meetings, calls, files, and tools in one place to meet all your healthcare team’s needs. Teams can bring together care teams and information from siloed operational systems, such as a line of business apps and electronic health records, enabling clinicians to collaborate in real-time around patient information—all in one secure hub that minimizes switching between apps and tools.

To see how Teams can empower your care team, read our new e-book.

Helping our customers improve patient outcomes

Today, more than 500,000 organizations, including 91 of the Fortune 100 and many of the most innovative healthcare providers, are empowering their employees with Office.com/setup 365 and Teams. For example, St. Luke’s is turning to Teams to provide a secure way for their clinicians to connect and share information quickly so that they can focus more time on patient care.

“Clinicians are naturally collaborative and communicating quickly in a ‘digital huddle’ will expedite their decisions on treatment protocols, improving health outcomes for patients. Thanks to the unified interface, clinicians will spend less time navigating different systems and more time with their patients. This will also simplify the transfer of patient data between caregivers on different shifts.”—Chad Brisendine, CIO at St. Luke’s University Health Network

Northumberland, Tyne, and Wear NHS Foundation Trust (NTW) in the United Kingdom has used the meeting's capabilities in Teams to enable clinicians to boost productivity and collaboration for their medical staff. With Teams, ward staff can chat with remote specialist nurses and schedule video meetings to conduct virtual wound care consults. This has not only reduced the travel costs and times for the specialist nurses but has also saved the ward staff time to receive, consult, and deliver appropriate treatment for patients.

Enabling secure patient care

This year, we added new secure messaging capabilities to Teams, including priority notifications and message delegation, as well as a smart camera with image annotation and secure sharing, so images stay in Teams and are not auto-stored to the care providers’ devices. To learn more about how Office.com/setup security controls can help customers with HIPAA and HITRUST compliance, read this recently commissioned white paper from HIPAA One.

Teams also enable the interoperability of electronic health records and other health data—all of which will help care teams to securely coordinate patient care. Leading interoperability partners continue to build the ability to integrate FHIR-enabled electronic health records (EHR) data with Teams. With FHIR integration into Teams, clinical workers can securely access patient records, chat with other team members, and even have modern meeting experiences, all without having to switch between apps. This week, we are announcing the availability of a new EHR Interoperability Partner, Enovacom, a subsidiary of Orange Business Services.

Learn more

Check out the Office.com/setup 365 for health page to learn more about how Office.com/setup 365 and Teams can empower your healthcare professionals in a modern workplace.

#microsoft office Microsoft office Setup office.com setup office.com/setup setup.office.com 2019 www.office.com/setup www.office.comsetup

0 notes

laurelkrugerr · 5 years ago

Text

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

In Part 1, Paul explained the basics of the terminal, shared a few productivity hacks to get you started, and how to choose a code editor. In this part, he’ll continue with the topics of version control (Git), HTML and CSS, semantic code, and a brief introduction to some key engineering principles.

Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.

Version control (not to be confused with version history) is basically a way for people to collaborate in their own environments on a single project, with a single main source of truth (often called the “master” branch).

I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.

There are many types of version control software and many tools for managing and hosting your source code (you may have heard of GitLab or Bitbucket). Git and GitHub are one of the more common pairs, my examples will reference GitHub but the principles will apply to most other source code managers.

Aside:

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

Your First Contribution

Before doing these steps, you’ll need a few things set up:

A GitHub account,

Node and NPM installed on your computer,

A high tolerance for pain or a low threshold for asking others for help.

Step 1: Fork (Get A Copy Of The Code On Your GitHub Account)

On GitHub, you will fork (fork = create a copy of the code in your account; in the following illustration, the blue, orange, red, and green lines show forks) the repository (repo) in question.

By creating branches off of the master, it’s possible for multiple people to contribute to different areas of a project and then merge their work together. (Large preview)

You do this by navigating to the repo in GitHub and clicking the “Fork” button, currently at the top right-hand corner of a repo. This will be the “origin” — your fork on your GitHub account.

As an example, navigating to https://github.com/yourGitHubUsername/liferay.design should show your fork of the Liferay.Design repo.

This is victorvalle’s GitHub fork. (Large preview)

Step 2: Clone (Download The Code To Your Computer)

In your terminal, navigate to where you’d like to store the code. Personally, I have a /github folder in my /user folder — it makes it easier for me to organize it this way. If you’d like to do that, here are the steps — after typing these commands into your terminal window, press the ↵ key to execute:

cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

Now that you’re in the /github folder, you will clone (download a copy of the code onto your computer) the repo.

clone https://github.com/yourGitHubUsername/liferay.design

Once you enter this command, you’ll see a bunch of activity in the terminal — something like this:

Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

Step 3: Install (Get It Running On Your Machine)

Navigate into the /project folder. In this case, we’ll enter cd liferay.design. Most projects will include a README.md file in the /root folder, this is typically the starting place for installing and running the project. For our purposes, to install, enter npm install. Once it’s installed, enter npm run dev.

Congratulations! You now have the site available on your local computer — typically projects will tell you where it’s running. In this case, open up a browser and go to localhost:7777.

Step 4: Commit (Make Some Changes And Save Them)

A commit is a collection of changes that you make; I’ve heard it described as saving your progress in a game. There are many opinions on how commits should be structured: mine is that you should create a commit when you’ve achieved one thing, and if you were to remove the commit, it wouldn’t completely break the project (within reason).

If you aren’t coming to a repo with a change in mind, a good place to go is the ‘Issues’ tab. This is where you can see what needs to be done in the project.

If you do have an idea for some change, go ahead and make it. Once you’ve saved the file(s), here are the steps required to create a commit:

git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Tip: The best recommendation I’ve ever seen for commit messages is from Chris Breams’s “How To Write A Git Commit Message”. A properly formed Git commit subject line should always be able to complete the following sentence: “If applied, this commit will [your subject line here].” For more info on commits, check “Why I Create Atomic Commits In Git” by Clarice Bouwer.

Step 5: Push (Send Your Changes To Your Origin)

Once you’ve made some changes on your computer, before they can be merged into the master branch (added to the project), they need to be moved from your local to your remote repo. To do this, enter git push origin in the command line.

Step 6: Pull Request (Ask For Your Changes To Be Merged Into Upstream)

Now that your changes have gone from your fingers to your computer, to your remote repository — it’s now time to ask for them to be merged into the project via a pull request (PR).

The easiest way to do this is by going to your repo’s page in GitHub. There will be a small message right above the file window that says “This branch is X commits ahead repo-name:branch” and then options to “Pull request” or “Compare”.

Clicking the “Pull request” option here will take you to a page where you can compare the changes and a button that says “Create pull request” will then take you to the “Open a pull request” page where you’ll add a title and include a comment. Being brief, but detailed enough in the comment, will help project maintainers understand your proposed changes.

There are CLI tools like Node GH (GitHub also recently released a beta of their CLI tool) that allow you to initiate and manage pull requests in the terminal. At this point you may prefer to use the web interface, and that’s great! So do I.

The ‘Pull request’ and ‘Compare’ options will appear once your fork has diverged from the upstream repo. (Large preview)

Bonus Step: Remote (Link All The Repos)

At this point, we have three repository references:

upstream: the main repo that you’re tracking, often it’s the repo that you forked;

origin: the default name of the remote that you clone;

local: the code that is currently on your computer.

So far, you have #2 and #3 — but #1 is important because it’s the primary source. Keeping these three things in-line with each other is going to help the commit history stay clean. This helps project maintainers as it eliminates (or at least minimizes) merge conflicts when you send pull requests (PR’s) and it helps you get the latest code and keep your local and origin repositories up-to-date.

Set An Upstream Remote

To track the upstream remote, in your terminal enter the following:

git remote add upstream https://github.com/liferay-design/liferay.design

Now, check to see what remotes you have available — enter git remote -v into your terminal, you should see something like:

origin and upstream are the most common labels for remotes — ‘origin’ is your fork, ‘upstream’ is the source. (Large preview)

origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

This will allow you to quickly get the latest version of what is upstream — if you haven’t worked in a repo in a long time and don’t have any local changes that you want to keep, this is a handy command that I use:

git pull upstream master && git reset --hard upstream/master

GitHub Help is a great resource for this and many other questions you might have.

HTML And CSS: Starting With Semantics

On the web, there is an endless supply of resources for learning HTML and CSS. For the purposes of this article, I’m sharing what I would recommend based on the mistakes I made how I first learned to write HTML and CSS.

What Are HTML And CSS?

Before we get any further, let’s define HTML and CSS.

HTML stands for HyperText Markup Language.

Hypertext:

“Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.”

— “Hypertext” on Wikipedia

Markup Language:

“…a system for annotating a document in a way that is syntactically distinguishable from the text.”

— “Markup Language” on Wikipedia

In case you also don’t know what a lot of those words mean — briefly put, HTML is the combination of references (links) between documents on the web, and tags that you use to give structure to those documents.

There’s an HTML5 tag for pretty much any basic element — otherwise you can always use a div! (Large preview)

For a thorough introduction to HTML and CSS, I highly recommend the Introduction to HTML and CSS first steps, both on the Mozilla Developer Network (MDN) web docs. That, along with the excellent articles that websites such as CSS Tricks, 24 Ways and countless of others provide, contain basically everything you’ll ever need to reference with regards to HTML/CSS.

There are two main parts of an HTML document: the <head> and the <body>. – The <head> contains things that aren’t displayed by the browser — metadata and links to imported stylesheets and scripts. – The <body> contains the actual content that will be rendered by the browser. To render the content, the browser reads the HTML, provides a base layer of styles depending on the types of tags used, adds additional layers of styles provided by the website itself (the styles are included in/referenced from the <head>, or are inline), and that is what we see in the end. (Note: There is often also the additional layer of JavaScript but it’s outside of the scope of this article.)

CSS stands for Cascading Style Sheets — it is used to extend the HTML by making it easier to give documents a custom look and feel. A style sheet is a document that tells the HTML what elements should look like (and how they should be positioned) by setting rules based on tags, classes, IDs, and other selectors. Cascading refers to the method for determining which rules in a sheet take priority in the inevitable event of a rule conflict.

“‘Cascading’ means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.”

— Cascade — Max Design

CSS often gets a bad reputation — in sites with lots of style sheets it can quickly become unwieldy, especially if there aren’t documented, consistent methods used (more on that later) — but if you use it in an organized fashion and following all the best practices, CSS can be your best friend. Especially with the layout capabilities that are now available in most modern browsers, CSS is not nearly as necessary to hack and fight as it once was.

Rachel Andrew wrote a great guide, How To Learn CSS — and one of the best things to know before you start is that:

“You don’t need to commit to memorizing every CSS Property and Value.”

— Rachel Andrew

Instead, it’s far more vital to learn the fundamentals — selectors, inheritance, the box model, and most importantly, how to debug your CSS code (hint: you will need the browser developer tools).

Don’t worry about memorizing the syntax for the background property, and don’t worry if you forget about how exactly to align stuff in Flexbox (the CSS Tricks Guide to Flexbox is possibly one of my top-10 most visited pages, ever!); Google and Stack Overflow are your friends when it comes to CSS properties and values.

Some code editors even have built-in autocomplete so you don’t even need to search on the web in order to be able to figure out all the possible properties of a border, for example.

One of my favorite new features in Firefox 70 is the inactive CSS rules indicator. It will save you hours of time trying to figure out why a style isn’t being applied.

Kids these days have it so easy! (Large preview)

Semantics

Let’s start with semantic code. Semantics refers to the meanings of words, semantic code refers to the idea that there is meaning to the markup in any given language.

There are many reasons why semantics are important. If I could summarize this, I would say that if you learn and use semantic code, it will make your life a lot easier because you will get a lot of things for free — and who doesn’t like free stuff?

For a more complete introduction to semantic code, see Paul Boag’s brief blog post on the topic.

Semantics gives you many benefits:

Default styles For example, using a headline tag <h1> for the title of your document will make it stand out from the rest of the document’s contents, much like a headline would.

Accessible content Your code will be accessible by default, meaning it will work with screen readers and will be easier to navigate with a keyboard.

SEO Company benefits Semantic markup is easier for a machine to read, which makes it more accessible to search engines.

Performance benefits Clean HTML is the foundation for a high-performing site. And clean HTML will also likely lead to cleaner CSS which means less code overall, making your site or app faster.

Note: For a more in-depth look into semantics and HTML, Heydon Pickering wrote “Structural Semantics: The Importance Of HTML5 Sectioning Elements” which I highly recommend reading.

Engineering Principles And Paradigms: The Basics

Abstraction

There are tons of applications, tangents, and levels we could explore over the concept of abstraction — too many for this article which is intended to give you a brief introduction into concepts so that you are aware of them as you continue to learn.

Abstraction is a foundational engineering paradigm with a wide variety of applications — for the purposes of this article, abstraction is separating form from function. We’ll apply this in three areas: tokens, components, and the Don’t Repeat Yourself principle.

Tokens

If you’ve used a modern design tool for any length of time, you’ve probably encountered the idea of a token. Even Photoshop and Illustrator now have this idea of shared styles in a centralized library — instead of hard-coding values into a design, you use a token. If you’re familiar with the concept of CSS or SASS variables, you’re already familiar with tokens.

One layer of abstraction with tokens is to assign a name to a color — for example, $blue-00 can be mapped to a hex value (or an HSL value, or whatever you want) — let’s say #0B5FFF. Now, instead of using the hex value in your stylesheets, you use the token value — that way if you decide that blue-00 is actually #0B36CE, then you only have to change it in a single place. This is a nice concept.

Tokens for colors in the Lexicon Alerts component helps keep things DRY. (Large preview)

If you take this same paradigm of abstraction and go a layer further, you can token-ception — and assign a variable to a functional value. This is particularly useful if you have a robust system and want to have different themes within the system. A functional example of this would be assigning a variable like $primary-color and map that to $blue-00 — so now you can create markup and instead of referencing blue, you’re referencing a functional variable. If you ever want to use the same markup, but with a different style (theme), then you only need to map $primary-color to a new color, and your markup doesn’t need to change at all! Magic!

Components

In the past 3-4 years, the idea of components and componentization has become more relevant and accessible to designers. The concept of symbols (pioneered by Macromedia/Adobe Fireworks, later expanded by Sketch, and then taken to the next level by Figma and Framer), is now more widely available in most design tools (Adobe XD, InVision Studio, Webflow, and many others). Componentization, even more than tokens, can separate the form of something from the function of it — which helps to improve both the form and the function.

One of the more notable early examples is Nicole Sullivan’s media object component. At first glance you might not realize that a whole page is essentially composed of a single component, rendered in different ways. In this way, we can re-use the same markup (form), modifying it slightly by passing in options or parameters, and styles — and have it provide a variety of value (function).

Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) is one of my favorite principles — creating things that can be reused over and over is one of the small victories you can have when coding.

While you often can’t (and arguably shouldn’t) strive to apply the DRY principle 100% of the time, every time — it’s at least beneficial to be aware of this so that as you’re working, you can consider how you can make whatever you’re working on more reusable.

A note on the Rule of Three: A corollary to the DRY principle is the rule of three — essentially, once you re-use (copy/paste) something three times, you should rewrite it into a reusable component. Like the Pirate’s Code, it’s more of a guideline than a hard and fast rule, and can vary from component to component and from project to project.

CSS And Styling Methodologies: Atomic vs. BEM

There are a lot of different ways to organize and write CSS code — Atomic and BEM are only two of the many that you’re likely to come across. You don’t have to “pick” a single one, nor do you have to follow them exactly. Most of the teams I’ve worked with usually have their own unique blend, based on the project or technology. It is helpful to be familiar with them so that over time, you can learn which approach to take depending on the situation.

All of these approaches go beyond “just” CSS and styling, and can often influence the tooling you use, the way you organize your files, and potentially the markup.

Atomic CSS

Not to be confused with Atomic Web Design — atomic (perhaps more aptly referred to as “functional”) CSS, is a methodology that essentially favors using small, single-purpose classes to define visual functions. A few notable libraries:

Atomic CSS by Steve Carlson;

Tachyons by Adam Morse;

Tailwind CSS by Adam Wathan.

What I like about this method is that it allows you to quickly style and theme things — one of the biggest drawbacks is that your markup can get pretty cluttered, pretty fast.

Check John Polacek’s article on CSS-tricks for a full introduction to Atomic CSS.

BEM

The BEM philosophy is a great precursor to a lot of the modern JavaScript frameworks like Angular, React, and Vue.

“BEM (Block, Element, Modifier) is a component-based approach to web development.”

— BEM: Quick Start

Basically, everything that can be reused is a block. Blocks are comprised of elements, something that can’t be used outside of a block, and potentially other blocks. Modifiers are things that describe the status of something or the way it looks or behaves.

Personally, I like the theory and philosophy of BEM. What I do not like is the way that things are named. Way too many underscores, hyphens, and it can feel unnecessarily repetitive (.menu, .menu__item, etc).

Recommended reading: BEM For Beginners written by Inna Belaya

Thank U, Next(.js)

After you have sufficiently mastered these topics, don’t worry, there is still plenty to learn. Some suggestions:

Functional and object-oriented programming We touched on it lightly, but there’s plenty more to learn beyond CSS.

Higher-level languages and frameworks Typescript, Ruby, React, Vue are the next things you’ll tackle once you have a strong grasp of HTML and CSS.

Querying languages and using data Learning about GraphQL, MySQL, REST APIs will take your coding ability to the next level.

Conclusion: Designers Who Code != Software Engineers

Hopefully, this article has shown you that learning to code isn’t as difficult as you may have previously thought. It can take a lot of time, but the amount of resources available on the internet is astounding, and they’re not decreasing — quite the opposite!

One significant point that I want to emphasize is that “coding” is not the same as “software engineering” — being able to fork a repo and copy/paste in code from Stack Overflow can get you a long way, and while most, if not all, software engineers that I know have done that — you must use your new-found skills with wisdom and humility. For everything you can now access with some engineering prowess, there is that much more that you don’t know. While you may think that a feature or style is easy to accomplish because — “Hey, I got it working in devtools!” or “I made it work in Codepen.” — there are many engineering processes, dependencies, and methods that you probably don’t know that you don’t know.

All of that is to say — don’t forget that we are still designers. Our primary function is to add business value through the lens of understanding customer or user problems and synthesizing them with our knowledge of design patterns, methods, and processes. Yes, being a “designer who writes code” can be very useful and will expand your ability to add this value — but we still need to let engineers make the engineering decisions.

Anything Amiss?

There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.

Further Reading

Coding Bootcamps vs. Computer Science Degrees: What Employers Want and Other Perspectives (Kyle Thayer)

How To Start Using Sketch And Framer X (by Martina Pérez, Smashing Magazine)

Introduction To Linux Commands (by Paul Tero, Smashing Magazine)

Become A Command-Line Power User With Oh My ZSH And Z (by Wes Bos, Smashing Magazine)

A list of the common cmd.exe and Unix commands that you can use in PowerShell (Microsoft Docs)

regular-expressions.info (by Jan Goyvaerts)

regexone.com (learn regular expressions with simple interactive exercises)

Batch Resizing Using Command Line and ImageMagick (by Vlad Gerasimov, Smashing Magazine)

Shortcuts And Tips For Improving Your Productivity With Sublime Text (by Jai Pandya, Smashing Magazine)

Visual Studio Code Can Do That? (by Burke Holland, Smashing Magazine)

Why version history is not version control (by Josh Brewer)

Modern Version Control With Git (by Tobias Günther, Smashing Magazine)

“Hello World” (a GitHub step-by-step guide)

How to Install Node.js and NPM on a Mac (by Dave McFarland)

How to Install Node.js and NPM on Windows (by Dejan Tucakov)

Why I Create Atomic Commits In Git (by Clarice Bouwer)

How to Write a Git Commit Message (by Chris Breams)

Semantic code: What? Why? How? (by Paul Boag)

Structural Semantics: The Importance Of HTML5 Sectioning Elements (by Heydon Pickering, Smashing Magazine)

Designing for Performance: Chapter 4. Optimizing Markup and Styles (by Lara C. Hogan, O’Reilly Media)

The media object saves hundreds of lines of code (by Nicole Sullivan)

Let’s Define Exactly What Atomic CSS is (by John Polacek, CSS Tricks)

BEM For Beginners: Why You Need BEM (by Inna Belaya, Smashing Magazine)

Javascript for Cats: An Introduction for New Programmers

Roadmap.sh: Frontend Developer

Functional Programming vs OOPS : Explain Like I’m Five

Why, How, and When to Use Semantic HTML and ARIA (by Adam Silver, CSS Tricks)

HTML Semantics (an eBook by Smashing Magazine)

The Fundamentals – HTML + CSS (on Syntax.fm)

Cascade and inheritance (westciv.com)

CSS Tricks (by Chris Coyier)

Getting Started With CSS Layout (by Rachel Andrew, Smashing Magazine)

Introduction to HTML (MDN web docs)

CSS first steps (MDN web docs)

JavaScript First Steps (MDN web docs)

24 Ways (by Drew McLellan)

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-should-designers-learn-to-code-git-html-css-engineering-principles-part-2/ source https://scpie1.blogspot.com/2020/03/how-should-designers-learn-to-code-git.html

0 notes

douglassmiith · 5 years ago

Text

How Should Designers Learn To Code? Git HTML/CSS Engineering Principles (Part 2)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.

I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.

Aside:

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

Your First Contribution

Before doing these steps, you’ll need a few things set up:

A GitHub account,

Node and NPM installed on your computer,

A high tolerance for pain or a low threshold for asking others for help.

Step 1: Fork (Get A Copy Of The Code On Your GitHub Account)

On GitHub, you will fork (fork = create a copy of the code in your account; in the following illustration, the blue, orange, red, and green lines show forks) the repository (repo) in question.

By creating branches off of the master, it’s possible for multiple people to contribute to different areas of a project and then merge their work together. (Large preview)

As an example, navigating to https://github.com/yourGitHubUsername/liferay.design should show your fork of the Liferay.Design repo.

This is victorvalle’s GitHub fork. (Large preview)

Step 2: Clone (Download The Code To Your Computer)

cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you theremkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/githubcd github ## this command navigates you inside the github folder

Now that you’re in the /github folder, you will clone (download a copy of the code onto your computer) the repo.

clone https://github.com/yourGitHubUsername/liferay.design

Once you enter this command, you’ll see a bunch of activity in the terminal — something like this:

Cloning into 'liferay.design'...remote: Enumerating objects: 380, done.remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done.Resolving deltas: 100% (189/189), done.

Step 3: Install (Get It Running On Your Machine)

Congratulations! You now have the site available on your local computer — typically projects will tell you where it’s running. In this case, open up a browser and go to localhost:7777.

Step 4: Commit (Make Some Changes And Save Them)

If you aren’t coming to a repo with a change in mind, a good place to go is the ‘Issues’ tab. This is where you can see what needs to be done in the project.

If you do have an idea for some change, go ahead and make it. Once you’ve saved the file(s), here are the steps required to create a commit:

git status ## this will print out a list of files that you've made changes ingit add path/to/folder/or/file.ext ## this will add the file or folder to the commitgit commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Step 5: Push (Send Your Changes To Your Origin)

Step 6: Pull Request (Ask For Your Changes To Be Merged Into Upstream)

Now that your changes have gone from your fingers to your computer, to your remote repository — it’s now time to ask for them to be merged into the project via a pull request (PR).

The ‘Pull request’ and ‘Compare’ options will appear once your fork has diverged from the upstream repo. (Large preview)

Bonus Step: Remote (Link All The Repos)

At this point, we have three repository references:

upstream: the main repo that you’re tracking, often it’s the repo that you forked;

origin: the default name of the remote that you clone;

local: the code that is currently on your computer.

Set An Upstream Remote

To track the upstream remote, in your terminal enter the following:

git remote add upstream https://github.com/liferay-design/liferay.design

Now, check to see what remotes you have available — enter git remote -v into your terminal, you should see something like:

origin and upstream are the most common labels for remotes — ‘origin’ is your fork, ‘upstream’ is the source. (Large preview)

origin https://github.com/yourGitHubUsername/liferay.design (fetch)origin https://github.com/yourGitHubUsername/liferay.design (push)upstream https://github.com/liferay-design/liferay.design (fetch)upstream https://github.com/liferay-design/liferay.design (push)

git pull upstream master && git reset --hard upstream/master

GitHub Help is a great resource for this and many other questions you might have.

HTML And CSS: Starting With Semantics

What Are HTML And CSS?

Before we get any further, let’s define HTML and CSS.

HTML stands for HyperText Markup Language.

Hypertext:

“Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.”

— “Hypertext” on Wikipedia

Markup Language:

“…a system for annotating a document in a way that is syntactically distinguishable from the text.”

— “Markup Language” on Wikipedia

There’s an HTML5 tag for pretty much any basic element — otherwise you can always use a div! (Large preview)

“‘Cascading’ means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.”

— Cascade — Max Design

Rachel Andrew wrote a great guide, How To Learn CSS — and one of the best things to know before you start is that:

“You don’t need to commit to memorizing every CSS Property and Value.”

— Rachel Andrew

Instead, it’s far more vital to learn the fundamentals — selectors, inheritance, the box model, and most importantly, how to debug your CSS code (hint: you will need the browser developer tools).

Some code editors even have built-in autocomplete so you don’t even need to search on the web in order to be able to figure out all the possible properties of a border, for example.

One of my favorite new features in Firefox 70 is the inactive CSS rules indicator. It will save you hours of time trying to figure out why a style isn’t being applied.

Kids these days have it so easy! (Large preview)

Semantics

Let’s start with semantic code. Semantics refers to the meanings of words, semantic code refers to the idea that there is meaning to the markup in any given language.

For a more complete introduction to semantic code, see Paul Boag’s brief blog post on the topic.

Semantics gives you many benefits:

Default styles For example, using a headline tag <h1> for the title of your document will make it stand out from the rest of the document’s contents, much like a headline would.

Accessible content Your code will be accessible by default, meaning it will work with screen readers and will be easier to navigate with a keyboard.

SEO Company benefits Semantic markup is easier for a machine to read, which makes it more accessible to search engines.

Performance benefits Clean HTML is the foundation for a high-performing site. And clean HTML will also likely lead to cleaner CSS which means less code overall, making your site or app faster.

Note: For a more in-depth look into semantics and HTML, Heydon Pickering wrote “Structural Semantics: The Importance Of HTML5 Sectioning Elements” which I highly recommend reading.

Engineering Principles And Paradigms: The Basics

Abstraction

Tokens

Tokens for colors in the Lexicon Alerts component helps keep things DRY. (Large preview)

Components

Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) is one of my favorite principles — creating things that can be reused over and over is one of the small victories you can have when coding.

CSS And Styling Methodologies: Atomic vs. BEM

All of these approaches go beyond “just” CSS and styling, and can often influence the tooling you use, the way you organize your files, and potentially the markup.

Atomic CSS

Atomic CSS by Steve Carlson;

Tachyons by Adam Morse;

Tailwind CSS by Adam Wathan.

What I like about this method is that it allows you to quickly style and theme things — one of the biggest drawbacks is that your markup can get pretty cluttered, pretty fast.

Check John Polacek’s article on CSS-tricks for a full introduction to Atomic CSS.

BEM

The BEM philosophy is a great precursor to a lot of the modern JavaScript frameworks like Angular, React, and Vue.

“BEM (Block, Element, Modifier) is a component-based approach to web development.”

— BEM: Quick Start

Recommended reading: BEM For Beginners written by Inna Belaya

Thank U, Next(.js)

After you have sufficiently mastered these topics, don’t worry, there is still plenty to learn. Some suggestions:

Functional and object-oriented programming We touched on it lightly, but there’s plenty more to learn beyond CSS.

Higher-level languages and frameworks Typescript, Ruby, React, Vue are the next things you’ll tackle once you have a strong grasp of HTML and CSS.

Querying languages and using data Learning about GraphQL, MySQL, REST APIs will take your coding ability to the next level.

Conclusion: Designers Who Code != Software Engineers

Anything Amiss?

Further Reading

Coding Bootcamps vs. Computer Science Degrees: What Employers Want and Other Perspectives (Kyle Thayer)

How To Start Using Sketch And Framer X (by Martina Pérez, Smashing Magazine)

Introduction To Linux Commands (by Paul Tero, Smashing Magazine)

Become A Command-Line Power User With Oh My ZSH And Z (by Wes Bos, Smashing Magazine)

A list of the common cmd.exe and Unix commands that you can use in PowerShell (Microsoft Docs)

regular-expressions.info (by Jan Goyvaerts)

regexone.com (learn regular expressions with simple interactive exercises)

Batch Resizing Using Command Line and ImageMagick (by Vlad Gerasimov, Smashing Magazine)

Shortcuts And Tips For Improving Your Productivity With Sublime Text (by Jai Pandya, Smashing Magazine)

Visual Studio Code Can Do That? (by Burke Holland, Smashing Magazine)

Why version history is not version control (by Josh Brewer)

Modern Version Control With Git (by Tobias Günther, Smashing Magazine)

“Hello World” (a GitHub step-by-step guide)

How to Install Node.js and NPM on a Mac (by Dave McFarland)

How to Install Node.js and NPM on Windows (by Dejan Tucakov)

Why I Create Atomic Commits In Git (by Clarice Bouwer)

How to Write a Git Commit Message (by Chris Breams)

Semantic code: What? Why? How? (by Paul Boag)

Structural Semantics: The Importance Of HTML5 Sectioning Elements (by Heydon Pickering, Smashing Magazine)

Designing for Performance: Chapter 4. Optimizing Markup and Styles (by Lara C. Hogan, O’Reilly Media)

The media object saves hundreds of lines of code (by Nicole Sullivan)

Let’s Define Exactly What Atomic CSS is (by John Polacek, CSS Tricks)

BEM For Beginners: Why You Need BEM (by Inna Belaya, Smashing Magazine)

Javascript for Cats: An Introduction for New Programmers

Roadmap.sh: Frontend Developer

Functional Programming vs OOPS : Explain Like I’m Five

Why, How, and When to Use Semantic HTML and ARIA (by Adam Silver, CSS Tricks)

HTML Semantics (an eBook by Smashing Magazine)

The Fundamentals – HTML + CSS (on Syntax.fm)

Cascade and inheritance (westciv.com)

CSS Tricks (by Chris Coyier)

Getting Started With CSS Layout (by Rachel Andrew, Smashing Magazine)

Introduction to HTML (MDN web docs)

CSS first steps (MDN web docs)

JavaScript First Steps (MDN web docs)

24 Ways (by Drew McLellan)

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/how-should-designers-learn-to-code-git-html-css-engineering-principles-part-2/

source https://scpie.weebly.com/blog/how-should-designers-learn-to-code-git-htmlcss-engineering-principles-part-2

0 notes

riichardwilson · 5 years ago

Text

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.

I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.

Aside:

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

Your First Contribution

Before doing these steps, you’ll need a few things set up:

A GitHub account,

Node and NPM installed on your computer,

A high tolerance for pain or a low threshold for asking others for help.

Step 1: Fork (Get A Copy Of The Code On Your GitHub Account)

On GitHub, you will fork (fork = create a copy of the code in your account; in the following illustration, the blue, orange, red, and green lines show forks) the repository (repo) in question.

By creating branches off of the master, it’s possible for multiple people to contribute to different areas of a project and then merge their work together. (Large preview)

As an example, navigating to https://github.com/yourGitHubUsername/liferay.design should show your fork of the Liferay.Design repo.

This is victorvalle’s GitHub fork. (Large preview)

Step 2: Clone (Download The Code To Your Computer)

Now that you’re in the /github folder, you will clone (download a copy of the code onto your computer) the repo.

clone https://github.com/yourGitHubUsername/liferay.design

Once you enter this command, you’ll see a bunch of activity in the terminal — something like this:

Step 3: Install (Get It Running On Your Machine)

Congratulations! You now have the site available on your local computer — typically projects will tell you where it’s running. In this case, open up a browser and go to localhost:7777.

Step 4: Commit (Make Some Changes And Save Them)

If you aren’t coming to a repo with a change in mind, a good place to go is the ‘Issues’ tab. This is where you can see what needs to be done in the project.

If you do have an idea for some change, go ahead and make it. Once you’ve saved the file(s), here are the steps required to create a commit:

Step 5: Push (Send Your Changes To Your Origin)

Step 6: Pull Request (Ask For Your Changes To Be Merged Into Upstream)

Now that your changes have gone from your fingers to your computer, to your remote repository — it’s now time to ask for them to be merged into the project via a pull request (PR).

The ‘Pull request’ and ‘Compare’ options will appear once your fork has diverged from the upstream repo. (Large preview)

Bonus Step: Remote (Link All The Repos)

At this point, we have three repository references:

upstream: the main repo that you’re tracking, often it’s the repo that you forked;

origin: the default name of the remote that you clone;

local: the code that is currently on your computer.

Set An Upstream Remote

To track the upstream remote, in your terminal enter the following:

git remote add upstream https://github.com/liferay-design/liferay.design

Now, check to see what remotes you have available — enter git remote -v into your terminal, you should see something like:

origin and upstream are the most common labels for remotes — ‘origin’ is your fork, ‘upstream’ is the source. (Large preview)

git pull upstream master && git reset --hard upstream/master

GitHub Help is a great resource for this and many other questions you might have.

HTML And CSS: Starting With Semantics

What Are HTML And CSS?

Before we get any further, let’s define HTML and CSS.

HTML stands for HyperText Markup Language.

Hypertext:

“Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.”

— “Hypertext” on Wikipedia

Markup Language:

“…a system for annotating a document in a way that is syntactically distinguishable from the text.”

— “Markup Language” on Wikipedia

There’s an HTML5 tag for pretty much any basic element — otherwise you can always use a div! (Large preview)

“‘Cascading’ means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.”

— Cascade — Max Design

Rachel Andrew wrote a great guide, How To Learn CSS — and one of the best things to know before you start is that:

“You don’t need to commit to memorizing every CSS Property and Value.”

— Rachel Andrew

Instead, it’s far more vital to learn the fundamentals — selectors, inheritance, the box model, and most importantly, how to debug your CSS code (hint: you will need the browser developer tools).

Some code editors even have built-in autocomplete so you don’t even need to search on the web in order to be able to figure out all the possible properties of a border, for example.

One of my favorite new features in Firefox 70 is the inactive CSS rules indicator. It will save you hours of time trying to figure out why a style isn’t being applied.

Kids these days have it so easy! (Large preview)

Semantics

Let’s start with semantic code. Semantics refers to the meanings of words, semantic code refers to the idea that there is meaning to the markup in any given language.

For a more complete introduction to semantic code, see Paul Boag’s brief blog post on the topic.

Semantics gives you many benefits:

Default styles For example, using a headline tag <h1> for the title of your document will make it stand out from the rest of the document’s contents, much like a headline would.

Accessible content Your code will be accessible by default, meaning it will work with screen readers and will be easier to navigate with a keyboard.

SEO Company benefits Semantic markup is easier for a machine to read, which makes it more accessible to search engines.

Performance benefits Clean HTML is the foundation for a high-performing site. And clean HTML will also likely lead to cleaner CSS which means less code overall, making your site or app faster.

Note: For a more in-depth look into semantics and HTML, Heydon Pickering wrote “Structural Semantics: The Importance Of HTML5 Sectioning Elements” which I highly recommend reading.

Engineering Principles And Paradigms: The Basics

Abstraction

Tokens

Tokens for colors in the Lexicon Alerts component helps keep things DRY. (Large preview)

Components

Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) is one of my favorite principles — creating things that can be reused over and over is one of the small victories you can have when coding.

CSS And Styling Methodologies: Atomic vs. BEM

All of these approaches go beyond “just” CSS and styling, and can often influence the tooling you use, the way you organize your files, and potentially the markup.

Atomic CSS

Atomic CSS by Steve Carlson;

Tachyons by Adam Morse;

Tailwind CSS by Adam Wathan.

What I like about this method is that it allows you to quickly style and theme things — one of the biggest drawbacks is that your markup can get pretty cluttered, pretty fast.

Check John Polacek’s article on CSS-tricks for a full introduction to Atomic CSS.

BEM

The BEM philosophy is a great precursor to a lot of the modern JavaScript frameworks like Angular, React, and Vue.

“BEM (Block, Element, Modifier) is a component-based approach to web development.”

— BEM: Quick Start

Recommended reading: BEM For Beginners written by Inna Belaya

Thank U, Next(.js)

After you have sufficiently mastered these topics, don’t worry, there is still plenty to learn. Some suggestions:

Functional and object-oriented programming We touched on it lightly, but there’s plenty more to learn beyond CSS.

Higher-level languages and frameworks Typescript, Ruby, React, Vue are the next things you’ll tackle once you have a strong grasp of HTML and CSS.

Querying languages and using data Learning about GraphQL, MySQL, REST APIs will take your coding ability to the next level.

Conclusion: Designers Who Code != Software Engineers

Anything Amiss?

Further Reading

Coding Bootcamps vs. Computer Science Degrees: What Employers Want and Other Perspectives (Kyle Thayer)

How To Start Using Sketch And Framer X (by Martina Pérez, Smashing Magazine)

Introduction To Linux Commands (by Paul Tero, Smashing Magazine)

Become A Command-Line Power User With Oh My ZSH And Z (by Wes Bos, Smashing Magazine)

A list of the common cmd.exe and Unix commands that you can use in PowerShell (Microsoft Docs)

regular-expressions.info (by Jan Goyvaerts)

regexone.com (learn regular expressions with simple interactive exercises)

Batch Resizing Using Command Line and ImageMagick (by Vlad Gerasimov, Smashing Magazine)

Shortcuts And Tips For Improving Your Productivity With Sublime Text (by Jai Pandya, Smashing Magazine)

Visual Studio Code Can Do That? (by Burke Holland, Smashing Magazine)

Why version history is not version control (by Josh Brewer)

Modern Version Control With Git (by Tobias Günther, Smashing Magazine)

“Hello World” (a GitHub step-by-step guide)

How to Install Node.js and NPM on a Mac (by Dave McFarland)

How to Install Node.js and NPM on Windows (by Dejan Tucakov)

Why I Create Atomic Commits In Git (by Clarice Bouwer)

How to Write a Git Commit Message (by Chris Breams)

Semantic code: What? Why? How? (by Paul Boag)

Structural Semantics: The Importance Of HTML5 Sectioning Elements (by Heydon Pickering, Smashing Magazine)

Designing for Performance: Chapter 4. Optimizing Markup and Styles (by Lara C. Hogan, O’Reilly Media)

The media object saves hundreds of lines of code (by Nicole Sullivan)

Let’s Define Exactly What Atomic CSS is (by John Polacek, CSS Tricks)

BEM For Beginners: Why You Need BEM (by Inna Belaya, Smashing Magazine)

Javascript for Cats: An Introduction for New Programmers

Roadmap.sh: Frontend Developer

Functional Programming vs OOPS : Explain Like I’m Five

Why, How, and When to Use Semantic HTML and ARIA (by Adam Silver, CSS Tricks)

HTML Semantics (an eBook by Smashing Magazine)

The Fundamentals – HTML + CSS (on Syntax.fm)

Cascade and inheritance (westciv.com)

CSS Tricks (by Chris Coyier)

Getting Started With CSS Layout (by Rachel Andrew, Smashing Magazine)

Introduction to HTML (MDN web docs)

CSS first steps (MDN web docs)

JavaScript First Steps (MDN web docs)

24 Ways (by Drew McLellan)

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-should-designers-learn-to-code-git-html-css-engineering-principles-part-2/ source https://scpie.tumblr.com/post/613627004767649792

0 notes

scpie · 5 years ago

Text

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.

I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.

Aside:

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

Your First Contribution

Before doing these steps, you’ll need a few things set up:

A GitHub account,

Node and NPM installed on your computer,

A high tolerance for pain or a low threshold for asking others for help.

Step 1: Fork (Get A Copy Of The Code On Your GitHub Account)

On GitHub, you will fork (fork = create a copy of the code in your account; in the following illustration, the blue, orange, red, and green lines show forks) the repository (repo) in question.

By creating branches off of the master, it’s possible for multiple people to contribute to different areas of a project and then merge their work together. (Large preview)

As an example, navigating to https://github.com/yourGitHubUsername/liferay.design should show your fork of the Liferay.Design repo.

This is victorvalle’s GitHub fork. (Large preview)

Step 2: Clone (Download The Code To Your Computer)

Now that you’re in the /github folder, you will clone (download a copy of the code onto your computer) the repo.

clone https://github.com/yourGitHubUsername/liferay.design

Once you enter this command, you’ll see a bunch of activity in the terminal — something like this:

Step 3: Install (Get It Running On Your Machine)

Congratulations! You now have the site available on your local computer — typically projects will tell you where it’s running. In this case, open up a browser and go to localhost:7777.

Step 4: Commit (Make Some Changes And Save Them)

If you aren’t coming to a repo with a change in mind, a good place to go is the ‘Issues’ tab. This is where you can see what needs to be done in the project.

If you do have an idea for some change, go ahead and make it. Once you’ve saved the file(s), here are the steps required to create a commit:

Step 5: Push (Send Your Changes To Your Origin)

Step 6: Pull Request (Ask For Your Changes To Be Merged Into Upstream)

Now that your changes have gone from your fingers to your computer, to your remote repository — it’s now time to ask for them to be merged into the project via a pull request (PR).

The ‘Pull request’ and ‘Compare’ options will appear once your fork has diverged from the upstream repo. (Large preview)

Bonus Step: Remote (Link All The Repos)

At this point, we have three repository references:

upstream: the main repo that you’re tracking, often it’s the repo that you forked;

origin: the default name of the remote that you clone;

local: the code that is currently on your computer.

Set An Upstream Remote

To track the upstream remote, in your terminal enter the following:

git remote add upstream https://github.com/liferay-design/liferay.design

Now, check to see what remotes you have available — enter git remote -v into your terminal, you should see something like:

origin and upstream are the most common labels for remotes — ‘origin’ is your fork, ‘upstream’ is the source. (Large preview)

git pull upstream master && git reset --hard upstream/master

GitHub Help is a great resource for this and many other questions you might have.

HTML And CSS: Starting With Semantics

What Are HTML And CSS?

Before we get any further, let’s define HTML and CSS.

HTML stands for HyperText Markup Language.

Hypertext:

“Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.”

— “Hypertext” on Wikipedia

Markup Language:

“…a system for annotating a document in a way that is syntactically distinguishable from the text.”

— “Markup Language” on Wikipedia

There’s an HTML5 tag for pretty much any basic element — otherwise you can always use a div! (Large preview)

“‘Cascading’ means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.”

— Cascade — Max Design

Rachel Andrew wrote a great guide, How To Learn CSS — and one of the best things to know before you start is that:

“You don’t need to commit to memorizing every CSS Property and Value.”

— Rachel Andrew

Instead, it’s far more vital to learn the fundamentals — selectors, inheritance, the box model, and most importantly, how to debug your CSS code (hint: you will need the browser developer tools).

Some code editors even have built-in autocomplete so you don’t even need to search on the web in order to be able to figure out all the possible properties of a border, for example.

One of my favorite new features in Firefox 70 is the inactive CSS rules indicator. It will save you hours of time trying to figure out why a style isn’t being applied.

Kids these days have it so easy! (Large preview)

Semantics

Let’s start with semantic code. Semantics refers to the meanings of words, semantic code refers to the idea that there is meaning to the markup in any given language.

For a more complete introduction to semantic code, see Paul Boag’s brief blog post on the topic.

Semantics gives you many benefits:

Default styles For example, using a headline tag <h1> for the title of your document will make it stand out from the rest of the document’s contents, much like a headline would.

Accessible content Your code will be accessible by default, meaning it will work with screen readers and will be easier to navigate with a keyboard.

SEO Company benefits Semantic markup is easier for a machine to read, which makes it more accessible to search engines.

Performance benefits Clean HTML is the foundation for a high-performing site. And clean HTML will also likely lead to cleaner CSS which means less code overall, making your site or app faster.

Note: For a more in-depth look into semantics and HTML, Heydon Pickering wrote “Structural Semantics: The Importance Of HTML5 Sectioning Elements” which I highly recommend reading.

Engineering Principles And Paradigms: The Basics

Abstraction

Tokens

Tokens for colors in the Lexicon Alerts component helps keep things DRY. (Large preview)

Components

Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) is one of my favorite principles — creating things that can be reused over and over is one of the small victories you can have when coding.

CSS And Styling Methodologies: Atomic vs. BEM

All of these approaches go beyond “just” CSS and styling, and can often influence the tooling you use, the way you organize your files, and potentially the markup.

Atomic CSS

Atomic CSS by Steve Carlson;

Tachyons by Adam Morse;

Tailwind CSS by Adam Wathan.

What I like about this method is that it allows you to quickly style and theme things — one of the biggest drawbacks is that your markup can get pretty cluttered, pretty fast.

Check John Polacek’s article on CSS-tricks for a full introduction to Atomic CSS.

BEM

The BEM philosophy is a great precursor to a lot of the modern JavaScript frameworks like Angular, React, and Vue.

“BEM (Block, Element, Modifier) is a component-based approach to web development.”

— BEM: Quick Start

Recommended reading: BEM For Beginners written by Inna Belaya

Thank U, Next(.js)

After you have sufficiently mastered these topics, don’t worry, there is still plenty to learn. Some suggestions:

Functional and object-oriented programming We touched on it lightly, but there’s plenty more to learn beyond CSS.

Higher-level languages and frameworks Typescript, Ruby, React, Vue are the next things you’ll tackle once you have a strong grasp of HTML and CSS.

Querying languages and using data Learning about GraphQL, MySQL, REST APIs will take your coding ability to the next level.

Conclusion: Designers Who Code != Software Engineers

Anything Amiss?

Further Reading

Coding Bootcamps vs. Computer Science Degrees: What Employers Want and Other Perspectives (Kyle Thayer)

How To Start Using Sketch And Framer X (by Martina Pérez, Smashing Magazine)

Introduction To Linux Commands (by Paul Tero, Smashing Magazine)

Become A Command-Line Power User With Oh My ZSH And Z (by Wes Bos, Smashing Magazine)

A list of the common cmd.exe and Unix commands that you can use in PowerShell (Microsoft Docs)

regular-expressions.info (by Jan Goyvaerts)

regexone.com (learn regular expressions with simple interactive exercises)

Batch Resizing Using Command Line and ImageMagick (by Vlad Gerasimov, Smashing Magazine)

Shortcuts And Tips For Improving Your Productivity With Sublime Text (by Jai Pandya, Smashing Magazine)

Visual Studio Code Can Do That? (by Burke Holland, Smashing Magazine)

Why version history is not version control (by Josh Brewer)

Modern Version Control With Git (by Tobias Günther, Smashing Magazine)

“Hello World” (a GitHub step-by-step guide)

How to Install Node.js and NPM on a Mac (by Dave McFarland)

How to Install Node.js and NPM on Windows (by Dejan Tucakov)

Why I Create Atomic Commits In Git (by Clarice Bouwer)

How to Write a Git Commit Message (by Chris Breams)

Semantic code: What? Why? How? (by Paul Boag)

Structural Semantics: The Importance Of HTML5 Sectioning Elements (by Heydon Pickering, Smashing Magazine)

Designing for Performance: Chapter 4. Optimizing Markup and Styles (by Lara C. Hogan, O’Reilly Media)

The media object saves hundreds of lines of code (by Nicole Sullivan)

Let’s Define Exactly What Atomic CSS is (by John Polacek, CSS Tricks)

BEM For Beginners: Why You Need BEM (by Inna Belaya, Smashing Magazine)

Javascript for Cats: An Introduction for New Programmers

Roadmap.sh: Frontend Developer

Functional Programming vs OOPS : Explain Like I’m Five

Why, How, and When to Use Semantic HTML and ARIA (by Adam Silver, CSS Tricks)

HTML Semantics (an eBook by Smashing Magazine)

The Fundamentals – HTML + CSS (on Syntax.fm)

Cascade and inheritance (westciv.com)

CSS Tricks (by Chris Coyier)

Getting Started With CSS Layout (by Rachel Andrew, Smashing Magazine)

Introduction to HTML (MDN web docs)

CSS first steps (MDN web docs)

JavaScript First Steps (MDN web docs)

24 Ways (by Drew McLellan)

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-should-designers-learn-to-code-git-html-css-engineering-principles-part-2/

0 notes